1204课后随笔

Posted 2020-11-24 ltl11230

1.盒模型

    margin:外边距 ；margin-top/margin-left ; margin-bottom/margin-right

    外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距；

    可以使用padding或border分开两个外边距；

    padding:内边距 ；padding-top/padding-left ；padding-bottom/padding-right

    border:边框 ；border-width:宽度 ；border-style:solid(实线)dotted(点线)dashed(虚线)double(双线) ；

    border-color:颜色 ；一般body是默认有margin ；margin:0 auto;设置左右居中 ；四个值的顺序：上 右 下 左 ；CSS时继承的关系

 

.c4 {
    /*边框*/
    margin: 10px;
    padding: 60px 80px ;
    border: 5px solid red;
    font-size: 60px;
    background-color: aqua;

    /*内边距，单数值为四面通用*/
    /*padding: 10px;*/
    /*双数值为，上下，左右*/
    /*padding: 10px 80px;*/
    /*四数值顺序为，上，右，下，左*/
    /*padding: 10px 5px 80px 150px;*/


    /*外边距*/
    margin: 30px;
    margin: 10px 80px;
    margin: 10px 5px 80px 150px;
    margin-top: 39px;
    margin-left: 223px;
    margin-bottom: ;
    margin-right: ;
    */
}

 

 

 

2.高级选择器

    通配符选择器；*{font-size:12px;}    选择器分组：div,p{}    后代选择器: div a{};

     子选择器 div>a{};      相邻兄弟选择器div+p{};        伪类选择器a:hover{}

/*通用属性为文字大小为16px*/

*{
    font-size: 16px;
}

 

3.链接样式（注意顺序，可能会被覆盖）

    a:link - 普通的、未被访问的链接    a:visited - 用户已访问的链接

    a:hover - 鼠标指针位于链接的上方    a:active - 链接被点击的时刻

    a:hover 必须位于 a:link 和 a:visited 之后   a:active 必须位于 a:hover 之后

4.列表样式

    list-style-type：列表项标记的类型;    list-style-image:列表标记的图像；

5.表格

    border-collapse：collapse;separate（默认值） 属性设置表格的边框是否被折叠成一个单一的边框或隔开；

    table-layout:fixed;需要首先设置table的宽度，再设置td宽度