选择器的特异度
假如有多个不同的样式针对于同一个元素，那么会根据这些样式的特异度高低进行优先渲染
1、优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
2、而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
3、当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
4、可以这样来看：选择器描述越具体越稀缺优先级越高，后面声明的比前面声明的选择器优先级高(同类型的选择器)。
继承
某些属性如果没有指定值，则会自动继承其父元素的值。
显式继承inherit
初始值
- CSS 中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
- 可以使用 initial 关键字显式重置为初始值
- background-color: initial
CSS布局
在进行页面布局时主要考虑以下几方面：
（1）要有整体意识。
（2）从外向内，层层递进。
（3）模块化。
（4）命名规则。
相关技术
- 常规流：行级、块级、表格布局、FlexBox、Grid布局，根元素、浮动和绝对定位的元素会脱离常规流
- 浮动
- 绝对定位
盒子模型
- width：指定content box的宽度，取值有长度、百分比、auto（由浏览器根据其他属性决定）
- height：指定content box的高度，取值有长度、百分比、auto（由内容计算得来），容器有指定高度时，百分数才生效
- padding：指定元素四个方向的内边距，百分数是相对于容器的高度
- border：指定容器边框样式、粗细和颜色
- margin：指定元素四个方向的外边距，取值有长度、百分比、auto，百分数相对于容器宽度
块级、行级
- 块级
- 不和其他盒子并列摆放
- 适用所有的盒模型属性
块元素在页面中以区域块的形式出现，每个块元素通常都会独自占据一整行或多个整行、可以对其设置宽度、高度、对齐等属性。
常见:元素有<h1>~<h6>、<p>、<div>、 <ul>、<ol>、<li>等，其中<div>标记是最典型的块元素。
- 行级
- 和其他行级盒子一起放在一行或者拆开成多行
- 盒模型中的width、height不适用
行内元素也称为内联元素或内嵌元素， 一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、 <u>、 <a>、<span>等， 其中<span>标记是最典型的行内元素。
display属性
| display属性 | 描述 |
|---|---|
| block | 块级盒子 |
| inline | 行级盒子 |
| inline-block | 本身是行级，可以放在行盒中，可以设置宽高；作为一个整体不会被拆散成多行 |
| none | 排版时完全被忽略 |
行级排版上下文
- IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素
块级排版上下文
- 盒子从上到下摆放垂直
- margin 合并
- BFC 内盒子的margin不会与外面的合并
- BFC 不会和浮动元素重叠
Flex布局
justify-content
盒子元素在横轴方向上的对齐样式
align-items
盒子元素在纵轴方向上的对齐样式
Grid布局
利用虚线划分网格来进行分割
float浮动
为了实现文字环绕图片的效果
positive
- static：默认值
静态定位是元素默认的定位方式，是各个元素在HTML文档流中的默认位置:在静态定位方式中，无法通过位置偏移属性( top、 bottom、left或right )来改变元素的位置
- relative：相对自身原本位置偏移，不脱离文件流
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用 top、left、bottom、right 设置偏移长度
- 流内其它元素当它没有偏移一样布局
相对定位是普通文档流的一部分，相对于本元素在文档流原来出现位置的左上角进行定位，可以通过位置偏移属性改变元素的位置。虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他的框元素。
- absolute：绝对定位，相对非static祖先元素定位
- 脱离常规流
- 相对于最近的非 static 祖先定位
- 不会对流内元素布局造成影响
绝对定位是脱离文档流的，不占据其原来未移动时的位置，是相对于父级元素或更高的祖先元素中有relative (相对)定位并且离本元素层级关系上最近元素的左上角进行定位。如果在祖先元素中没有设置relative定位时，就默认相对于body进行定位。
- fixed：相对于视口绝对定位
固定定位是绝对定位的一种特殊形式， 是以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。 当对元素设置固定定位后，该元索将脱离标准文档流的控制，始终依据浏览器窗口的左上角来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
