这是我参与「第四届青训营 」笔记创作活动的第2天，关于选择器内容补充及布局知识整理如下：
选择器的优先级：
内联样式 > ID 选择器 > 类选择器、属性选择器、伪类选择器 > 标签选择器、伪元素选择器
<article>
<h1 class="title">优先级测试</h1>
</article>
<style>
.title {
color:blue;
}
article h1 {
color:red;
}
</style>
特殊的 !important
在定义样式的时候，可以对某一个属性应用 !important。CSS2规范中规定：!important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。
<article>
<h1 class="title">优先级测试</h1>
</article>
<style>
.title {
color:blue;
}
article h1 {
color:red !important;
}
</style>
CSS的继承性：
某些属性会自动继承其父元素的计算值，除非显式指定一个值
<div>
<p>了解<span>css</span>的继承性</p>
</div>
<style>
p {
color:red;
font-size:50px;
}
span {
font-size:80px;
}
</style>
初始值：
- css中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字显式重置为初始值
- backgroud-color: initial
了解布局(Layout):
- 确定内容的大小和位置的算法
- 根据元素、容器、兄弟节点和内容等信息来计算
布局相关技术：
标准盒子模型:
一般浏览器默认为标准盒子模型。即:box-sizing:content-box
width：
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height：
- 指定content box高度
- 取值为长度、百分数、auto
- auto值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才会生效
padding：
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border：
- 指定容器边框样式、粗细和颜色
- 三种属性：border-width、border-style、border-color
- 四个方向：border-top、border-right、border-bottom、border-left
margin：
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
使用 margin:auto 实现水平居中：
margin collapse（外边距折叠）：
怪异盒子模型：
即box-sizing: border-box
overflow：
块级元素：
- 不和其他盒子并列摆放，适用于所有的盒模型属性
eg：body、article、div、main、section、h1-6、p、ul、li等 - 声明方式：display: block
行级：
- 和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用
eg: span、em、strong、cite、code等 - 声明方式：display: inline
display属性
- block 块级盒子
- inline 行级盒子
- inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- none 排版时完全被忽略
总结
CSS看似基础简单，实则涉及到的知识点很多，如果要真正吃透，得先给自己建立起完整的知识体系，之后再不断地反复温习。
