CSS进阶学习笔记（4）

元素显示模式

1.1 块级元素

显示特点：

1. 独占一行（一行只显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高

代表标签：

• div、p、h系列、ul、li、dl、dt、dd、form、header、navfooter……

1.2 行内元素

显示特点：

1. 一行可以显示多个
2. 宽度和高度都默认由内容撑开
3. 不可以设置宽高

代表标签：

• a、span、b、u、i、s、strong、ins、em、del……

1.3 行内块元素

显示特点：

1. 一行可以显示多个
2. 可以设置宽高

代表标签：

• input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是chrome调试工具中显示结果是inline

1.4 元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：
 

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

拓展1：HTML嵌套规范注意点

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

• 但是：p标签中不要嵌套div、p、h等块级元素

2.a标签内部可以嵌套任意元素

• 但是：a标签不能嵌套a标签

CSS特性

1.继承性

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

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

1. color
2. font-size、font-weight、font-style、font-family
3. text-indent、text-align
4. line-height
5. ……

注意点：

• 可以通过调试工具判断样式是否可以继承

（拓展）继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

1. a标签的color会继承失效
2. h系列标签的font-size会继承失效

2.层叠性

特性：

1. 给同一个标签设置不同的样式——此时样式会层层叠加——会共同作用在标签上
2. 给同一个标签设置相同的样式——此时样式会层层覆盖——最终写在最后的样式生效

注意点：

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

选择器优先级：

3.优先级

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

优先级公式：

• 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注意点：

1. !important写在属性值的后面，分号的前面!
2. !important不能提升继承的优先级，只要是继承优先级最低!
3. 实际开发中不建议使用!important。

3.1 优先级-权重叠加计算

场景：如果是复合选择器，需要通过权重叠加计算方法判断哪个选择器优先级最高会生效

计算公式：

• 1.行内样式的个数→2.id选择器的个数→3.类选择器的个数→4.标签选择器的个数

比较规则：

• 从第一级往下比较，若判断出优先级大小了则结束，否则继续往下判断，如果最终结果都相等，则表示优先级相同

注意点：!important如果不是继承，则权重最高