CSS 自学笔记（三）

一. CSS的三大特性

        1. 层叠性：主要解决样式冲突问题。

        样式冲突：执行就近原则，也可以看作会覆盖。

        2. 继承性：子标签会继承父标签里的某些样式

        如文本颜色，字号，跟文字相关的。

        行高的继承：行高的写法可以跟单位px也可以不跟单位，若不跟单位，则行高设定的十进制数如1.5，就是当前字体大小的1.5倍。

<style>{
    body {
           color: pink;
           font: 12px/1.5 'Microsoft yahei';
    }
    div {
        font-size: 14px;
        /*这里实际上显示的为14*1.5=21px*/
    }
    /*其他未指定size的都为12*1.5=18px*/

}
</style>

        3. 优先级

        不同的选择器有不同的优先级。

        选择器相同执行层叠型，选择性不同根据选择器权重执行。

         继承的权重是0！

        权重叠加（重点）

                复合选择器会有权重叠加的问题。不产生进位。

<style>{
    ul li {
        color: green;
    }
    /*0,0,0,1 + 0,0,0,1 = 0,0,0,2*/
    li {
        color: pink;
    }
    /*0,0,0,1*/
    .nav li {
        color: red;
    }
    /*0,0,1,0 + 0,0,0,1 = 0,0,1,1*/
}
</style>

二. CSS盒子模型

        1. 盒子组成

        border边框，content内容，padding内边距，margin外边距

        2. 边框border 

border : border-width | border-style | border-color

        边框可以分开写：border-top、bottom、left、right 

        表格的细线边框：border-collapse

border-collapse: collapse;
/*合并边框，不会有间距*/

        边框会影响盒子实际大小，实际大小为盒子大小加上边框大小*2。

        3. 内边距padding

       同边框，可以写成padding-top，bottom，left，right

         padding也会影响盒子大小，实际大小为盒子大小加上内边距大小*2。

案例：导航栏

        当盒子内字数不相等时，可以给盒子设定相同的内边距，让字数来撑开盒子。

        padding不会撑开盒子的情况

        盒子本身没有指定width/height属性

        4.外边距：margin

        同样的拥有top、bottom、left、right。margin简写方式与padding一致。

        可以让块级模型水平居中显示。

        （1）必须有宽度

        （2）盒子的左右外边距设置为auto，margin: 0 auto

        若让行内元素或者行内块元素水平居中，只需要给它们的父元素添加text-aligh: center;

        嵌套块元素垂直外边距的塌陷

        对于两个嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此处父元素会塌陷较大的外边距值。

        解决方案：

        （1）为父元素指定上边框

        （2）为父元素定义上内边距

        （3）可以为父元素添加overflow: hidden

        5. 清除内外边距

        CSS的第一行代码，清除网页元素的内外边距

* {
    padding: 0;
    margin: 0;
}

        行内元素尽量只设置左右的内外边距。