CSS —— 特性、盒子

CSS —— 特性、盒子

 

 

目录

CSS —— 特性、盒子

一、三大特性

1. 层叠性

2. 继承性

3. 优先级

二、盒子

1. 概述

2. 边框

3. 内边距

4. 外边距

5. 清除内外边距

#END（部分图源b站pink老师）

---

一、三大特性

1. 层叠性

1.1 层叠性：相同选择器设置相同的样式，此时一个样式就会层叠另一个冲突（相同类型）的样式；

1.2 原则：

① 样式冲突，遵循就近原则；

② 样式不冲突，则不会层叠；

       div {
           width: 200px;
           height: 200px;
           background-color: skyblue;
       }
       div {
           background-color: pink;
       }

 

2. 继承性

2.1 继承性：子标签会继承父标签的某些样式，如文本颜色、字号；

2.2 优点：

① 简化代码，降低CSS样式；

② 子元素可以继承父元素的样式；

        div {
            font-size: 28px;
            color: skyblue;
        }


    <div> 
        <p>人生中的苦难是我们躲不掉的</p>
    </div>

2.3 行高的继承性：

body {
    font : 26px/1.5 Microsoft YaHei;
}

 

 

3. 优先级

3.1 优先级顺序：

3.2 权重由4组数字组成，但是永远不会有进位；

3.3 优先级的顺序不会发生改变，即继承或者*的优先级是最小的；

3.4 等级判断从左向右，如果某一位数值相同，则判断下一位数值；

3.5 继承的权重为0，若该元素没有被直接选择，不论父元素的权重多高，该元素得到的权重都是0；

3.6 复合选择器会有权重的叠加，但不会有进位；

 

 

二、盒子

1. 概述

1.1 盒子模型：封装页面中的HTML元素；

1.2 包括：边框、内外边距、实际内容；

 

2. 边框

2.1 border：设置一个元素边框的样式和颜色；

2.2 边框的三部分：边框宽度（粗细）、边框样式、边框颜色；

语法格式：

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

2.3 属性：

有关border-style：solid（实线）、dashed（虚线）、dotted（点线）；

        div {
            width: 200px;
            height: 200px;
            border-width: 5px;
            border-style: solid;
        }
            border-style: dashed;
            border-style: dotted;

2.4 边框既可以一起写，也可以分开写；

        div {
            width: 200px;
            height: 200px;
            border: 5px dashed;
            border-top: 5px solid skyblue;
            border-bottom: 3px solid pink;
        }

2.5 border-collapse：控制相邻单元格的边框，将相邻边框合并在一起；

① 语法格式：

        div {
            width: 200px;
            height: 200px;
            border: 5px solid;
            border-collapse: collapse;
        }

 

 

2.6 边框会影响盒子的实际大小，解决方法：

① 测量盒子大小的时候，不量边框；

② 如果测量的时候包含了边框，则需要width/height减去边框宽度；

 

3. 内边距

3.1 padding：设置内边距，即盒子和内容之间的距离；

3.2 语法格式：

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            padding-left: 20px;
        }

3.3 内边距简写：

3.4 当内容和边框有了距离，添加内边距会撑大盒子，因此要减去多出来的内边距的值；

 

4. 外边距

4.1 margin：设置外边距，即盒子和盒子之间的距离；

4.2 语法格式：

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .one {
            margin-bottom: 10px;
        }

4.3 外边距的简写和内边距一致；

4.4 外边距的典型应用：

外边距可以让块级盒子水平居中，满足条件：

① 盒子必须有宽度；

② 盒子左右外边距设置为auto；

常见的三种写法：

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 100px auto;
        }

 

4.5 外边距合并-嵌套块元素塌陷：对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上边距，此时可能出现父元素外边距值塌陷；

解决方法：

 

5. 清除内外边距

很多的网页元素都带有默认的内外边距，为了布局的方便首先要清除内外边距；

body {
    padding : 0;
    margin : 0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，但是转换为块级和行内块元素就都可以进行设置。

 

 

#END（部分图源b站pink老师）