css样式层叠和继承

1.样式的优先级
层叠样式谁优先级高选谁

• 内联样式style属性 > 外联样式style标签 > 外部样式文件 > 系统默认
• id > class > 标签 可以看成 100 > 10 > 1 表示这些权重

2.样式常见的语法

• "#"id选择器
• "."class选择器
• " "后代选择器空格，前面必须是标签 div p {},缺陷p标签后面孙子的标签会继承
• ">"子选择器,div >p{},只选择子类，不选择孙子类
• 其他选择器https://www.runoob.com/css/css-pseudo-classes.html语法. :first-child 其中sass和less使用&(表示父标签) span { &:first-of-type {}}

3.margin在横向没有坍塌问题，垂直有高度坍塌现象(取Max)

4.border会计算到宽高中

5.默认position为static，只有在position设置absolute，relative，fixed时，top，left，right。bottom这些偏移量才有效果。

6.相对定位设置偏移。对父标签和兄弟标签都没有影响。

7.特殊的样式

• 设置字母大小写text-transform
• 设置特殊的label(.,1,。)，list-style-type:decimal。常用与数组ul。

8.div和span区别
div可以自动换行。div标签不能包含在span标记内部

9.子类设置float，如果没有设置高度，会溢出现象。解决方法

• 父类设置overflow：hidden | auto
• 最后一个子类设置：after { clear: both | auto }
• 增加一个空标签设置 clear： both | auto

10.样式层叠冲突时，优先级高的显示，如果相同优先级，在样式后面的生效
这里文字颜色红色

<style>
.red { color: red }
.green { color: green }
</style>
<div class="green red">文字</div>

11.float absolute fixed区别

• 共同点脱离文档流，可以设置宽高。
• float是悬浮在文档上面，left，top，right，bottom不起效果，其他两个生效。
• absolute最近的设置position： relative的父标签为基准，fixed以根也就是window为基准。
• float是半脱离文档，absolute和fixed是全脱离
• float有高度坍塌现象