#

CSS 层叠性

• 对于一个元素来说，相同一个属性可以通过不同的选择器给它进行多次设置
• 属性会被一层层的覆盖上去
• 最终只有一个会生效

如何判断多个样式覆盖后，哪一个会生效

• 选择器的权重，权重大的生效，根据权重判断优先级
• 先后顺序，权重相同的情况下，后面设置的生效

选择器的权重

选择器	权重值
!important	10000
内联样式	1000
id 选择器	100
类选择器、属性选择器、伪类	10
元素选择器、伪元素	1
通配符	0

HTML 元素类型

• 块级元素--独占父元素一行
• 行内元素--多个行内级元素可以在父元素的同一行中显示，行内元素设置宽高无效，不可以设置宽度和高度

元素类型修改

使用display属性修改元素的类型

• block 让元素显示为块级元素
• inline: 让元素显示为行内级元素
• inline-block 让元素同时具备行内级，块级元素的特征
• none: 隐藏元素

行内替换元素

img元素是一个行内替换元素，区别于行内块级元素

行内替换元素特征

• 和其他行内元素在同一行内显示
• 可以设置宽高

display 值的特性

block

• 独占父元素的一行
• 可以随意设置宽高
• 高度默认由内容决定

inline-block

• 跟其他行内级元素在同一行显示
• 可以随意设置宽高
• 对外来说是一个行内级元素，对内来说是一个块级元素

inline

• 和其他行内级元素在同一行显示
• 不可以随意设置宽高
• 宽高由内容决定

HTML 编写时的注意事项

块级元素、inline-block 元素

• 一般情况下可以包含其他任何元素
• 特殊情况， P 元素内不能包含其他块级元素

如果 p 元素中包含 div 元素，实际渲染结果与预期不一致

<p>
  p1
  <div>div</div>
  p2
</p>

浏览器渲染结果

行内级元素

• 一般情况下只能包含行内级元素

元素隐藏的方法

• display 设置为 none,元素不显示，也不占据任何位置和空间
• visibility 设置为 hidden，虽然元素不可见，但是会该元素还是会占据空间；默认是 visible,元素可见
• rgba 设置颜色，将 a(0~1)的值设置为 0，设置透明度，不影响子元素
• opacity 设置为 0，设置整个元素的透明度，会影响所有的子元素