CSS层叠样式表(级联样式表)重点

目录

1.CSS三大特性

1.继承性:

2.层叠性:

3.优先级(权重):

2.盒子(HTML标签)模型4个组成部分

3.盒子的计算公式

4.margin合并现象

5.margin塌陷现象

6.清除浮动的方法

7.元素的隐藏和显示

---

1.CSS三大特性

1.继承性:

子承父业,儿子标签继承了父标签样式

2.层叠性:

1.给同一个标签,设置相同的样式,相同的样式则会覆盖,下面的样式覆盖上面的样式
2.给同一个标签,设置不同的样式,不同的样式则会进行叠加共同作用在当前标签上

3.优先级(权重):

基础选择器优先级
        公式:继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意点:
        1.!important只能写属性值后面;号前面
        2.!important属性不能给继承使用,继承添加了权重也是权重最低

复合选择器优先级
        通过权重计算公式，判断谁权重最高 标签选择器,类选择器,id选择器,行内样式
        注意点:只要不是继承,添加了!importantde样式权重就是最大,不分基础选择器还是复合选择

2.盒子(HTML标签)模型4个组成部分

内容(content) 内边距(padding) 外边距(margin) 边框(border)

3.盒子的计算公式

盒子的宽度=左右边框+左右内边距+左右内容

盒子的高度=上下边框+上下内边距+上下内容

4.margin合并现象

垂直布局的块级元素 上下 margin会合并.

最终的距离为margin的最大值

解决办法: 开发避免就可以,只设置一个盒子的上下外边距即可5.

5.margin塌陷现象

互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷

解决办法:

1 给父元素设置 padding-top或 border-top

2 给父元素设置 overflow: hidden;

3 把子元素转换为行内块 display: inline-block;

4 浮动 绝对定位 相对定位的 盒子不会有嵌套块级元素外边距塌陷现象

6.清除浮动的方法

1. 直接设置父元素高度

2. 额外标签法

3. 单伪元素清除法(推荐) clearfix

4. 双伪元素清除法(推荐)项目中推荐使用

5. 给父元素设置overflow : hidden 案例推荐使用

7.元素的隐藏和显示

1.隐藏visibility: hidden; 显示 visibility: visible;

2.隐藏display: none; 显示 display: block;

3.隐藏opacity:0;显示 opacity:1;

---