对CSS的深层介绍

一、显示模式

（1）块级元素

代表元素：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

特点：1.独占一行（一行只能显示一个）；

           2.宽度默认时父元素的宽度，高度默认由内容撑开；

           3.可以设置宽度。

---

（2）行内元素

代表标签：a、spar、b、u、i、s、strong、ins、em、del...

特点：1.一行可以显示多个；

           2.宽度和高度默认由内容展开；

           3.不可以设置高度。

---

（3）行内块

代表标签：input、textarea、button、select...

特点：1.一行可以显示多个

           2.可以设置宽高。

---

（4）转换

改变元素默认的显示特点，让元素复合布局要求；

属性	效果	使用频率
display:block	转换成块级元素	较多
display:inline-block	转换为行内块元素	较多
display:inline	转换为行内元素	较少

示例：将块级元素修改为行内块

/*这是.css*/
div {
       display:inline-block;
}

可以一行内使用多个div.

---

（5）嵌套规范

1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等。

     但是：<p>元素中不要嵌套<div>、<p>、<h>等块级元素

2.<a>元素内部可以嵌套任何元素。

    但是：<a>元素中不可以嵌套<a>元素

---

二、特性

（1）继承性

特性：子元素默认继承父元素的样式

常见的可以继承的属性（文字控制属性都可以继承）

1.color

2.font的四个属性

3.text-indent、text-align

4.line-height

5. ......

注意：可以通过调试工具判断是否可以继承；

当元素有默认属性时，继承性仍然生效，但优先显示默认属性。

---

（2）层叠性

特性：

1.给同一个元素设置不同的样式-->此时样式会层层叠加-->会共同作用在元素上；

2.给同一个元素设置相同的样式-->此时样式会层层覆盖-->写在最后的样式会作用在元素上。

注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。

---

三、特性.优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式。

优先级公式：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注意：

1.!important写在属性值的后面，分号的前面。

2.!important不能提升继承的优先级，继承的优先级永远最低。

3.实际开发不建议使用!important.

对于复合选择器，需要通过权重叠加计算来判断最终哪个选择器优先级最高；

在复合选择器中：

      （0，0，0，0） -->   (行内样式个数，id选择器个数，类选择器个数，标签选择器个数）

从左到右挨个比较大小，优先选择大的。