概念

选择器的特异度：高优先级属性的值会覆盖掉低优先度的值

继承：某些属性会自动继承其父类元素的计算值，除非显示指定一个值

显式继承：把不可继承的属性变成可继承的属性

Eg:

*{

Box-sizing:inherit

}

初始值

Css中，每个属性都有初始值:

background-color初始值为transport

Margin-left初始值为0

可以使用initial关键字显示重置为初始值:

Background-color:initial

计算值

Computed Value,一般来说是，浏览器会在不进行实际布局的情况下，所能得到的最具体的值

布局(Layout)是什么？

确定内容的大小和位置的算法

依据元素，容器，兄弟节点和内容等信息来计算

布局相关技术：

常规流：行级，块级，表格布局，FlexBox，Grid布局

浮动，绝对定位

Css中将每一个元素都当作一个盒子来处理

Width:

指定content box宽度

取值为长度，百分数，auto

Auto由浏览器根据其他属性确定

百分数相对于容器的content box宽度

Length：

指定content box高度

取值为长度，百分数，auto

Auto由浏览器根据其他属性确定

百分数相对于容器的content box高度

容器具有指定的高度时，百分数才生效

Padding

指定元素四个方向的内边距

百分数相当于容器的宽度

Border

指定容器边框的样式，粗细和颜色

Margin（外边距）

指定元素四个方向

取值为长度，百分数，auto

百分数相对于容器的宽度

Eg:

Margin:auto水平居中

Margin collapse边距的合并（只发生在垂直方向）

box-sizing:border-box 使得块包含边框，在设置宽度时使用

overflow

Visible:显示超出部分

Hidden：溢出的内容隐藏

Scroll: 隐藏增加滚动条

Auto：必要的时候出滚动条

块级：不和其他盒子并排摆放，适合所有盒模型属性

行级：和其他多级盒子一起放在一行或拆开成多行,盒模型中width，height不适用

块级元素:生成块级盒子

行级元素：生成行级元素，内容分散在多个行盒中

display属性

Black：块级盒子

Inline：行级盒子

Inline-block：本身是行级，可以放在行盒中；可设置宽高，作为一个整体不会被拆散成多行

None：排版时被忽略

常规流Normal Flow

根元素，浮动和绝对定位的元素会脱离常规流

其他元素都在常规流内（in-flow）

常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

Inline Formatting Context

只包含行级盒子的容器会创建一个IFC

IFC内的排版规则

盒子在一行内水平摆放

一行放不下，换行显示

text-align决定一行内盒子水平对齐

vertical-align决定一个盒子在行内的垂直对齐

避开浮动元素*

块级排版上下文

Block formatting context

某些容器会创建一个BFC：

根元素

浮动，绝对定位，liline-block

Flex子项和Grid子项

Overflow值不是visible的块盒

Display：flow-root；

Bfc内的排版规则：

盒子从上到下摆放

垂直margin合并

BFC内盒子的margin不会与外面的合并

BFC不会和浮动元素重叠

Flex Box是什么？

一种新的排版上下文

可以控制盒子的：

摆放的流向

摆放顺序

盒子的宽度高度

水平和垂直方向的对齐

是否允许折行

Flexibility

可以设置子项的弹性：当容器由剩余空间时，会伸展，容器空间不够，会收缩

flex-grow 有剩余空间时的伸展能力

flex-shrink 容器空间不足时收缩能力

flex-basis 没有伸展或收缩时的基础长度

Grid布局

引入：display：grid使元素生成一个块级的Grid容器

使用grid-template相关属性将容器划分为网络

设置每一个子项占哪些行，列

Grid-template-columns:设置列

Grid-template-rows：设置行

Float：做图文缠绕

Position属性

Static 默认值，非定位元素

Relative 相对于自身原本位置偏移，不脱离文档流

在常规流里面布局

相对于自己本应该在的位置进行偏移

使用top,left,bottom,right设置偏移长度

流内其他元素不受他影响

Absolute 绝对定位，相对非static祖先元素定位

脱离常规流

相对于最近的的非static祖先定位

不对流内元素布局造成影响

Fixed 相对于视口绝对定位