这是我参与「第五届青训营 」伴学笔记创作活动的第 2天
css上 继承 ：某些属性会自动继承其父元素 的计算值除非显示指定一个值 *{box-sizing:inherit;} html{box-sizing:border-box;}
每个属性都有一个初始值
css布局相关技术
1 常规流 （行级，块级，表格布局，FlBox,Grid布局）
2 浮动
3 绝对定位
margin border padding(元素的四个内边距 上 下 左 右) content
width height 指定content box 宽度 取值 长度，百分数，auto
border
三种属性 border-width border-style border-color 四个方向 border-top border-right border-bottom border-left
margin 指定元素四个方向的外边距 长度，百分数（对于容器的宽度），auto
margin：auto 水平居中
overflow
块级和行级 BLock Level Box Inline Level Box
不和其他盒子并列摆放 和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性 盒模型中的width ，height 不适用
body article div main span em strong cite code
section h1-6 p ul li display:inline display:block
display 属性
block 块级盒子
inline 行级盒子
inline-block 本身行级，可以放在盒子当中，设置宽 高
none
常规流 Normal Flow
根元素，浮动和绝对定位的元素会脱离常规流
其他元素都在常规流之内
常规流中的盒子，在某种排版上下文中参与布局
行，块 Table ， Flex ， Grid 排版上下文
行级排版上下文
只包含行级盒子的容器会创建一个IFC
IFC 的排版规则
1 盒子在一行内水平摆放
2 一行放不下时，换行显示
3 text-align 决定一行内盒子的水平对齐
4 vertical 决定一个盒子在行内的垂直对齐
5避开浮动元素
块级排版上下文
某些容器会创建一个BFC
inline-block
Flex子项 和Grid子项
overflow 值不是 visible的块盒
display： flow-root
BFC内的排版规则
1盒子从上到下摆放
2垂直margin合并
3 BFC内盒子的margin不会与外面合并
4 BFC不会和浮动元素重叠
FLex Box 是一种新的排版上下文 控制 子级盒子的 ： 摆放的流向 ， 摆放顺序， 盒子宽度和高度 ， 水平和垂直方向的对齐 ，是否允许折行
划分网格 （从1 开始） grid line 网格线 grid area 网格区域
float 浮动
position属性 static relative absolute fixed
position：relative 流内 自己本应该的位置进行偏移
position： absolute 脱离常规流
