这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

常规流

IFC（行级排版上下文）

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

IFC 内的排版规则

盒子在一行内水平摆放
一行放不下时，换行显示
text-align 决定一行内盒子的水平对齐
vertical-align 决定一个盒子在行内的垂直对齐
避开浮动(float)元素

BFC（块级排版上下文）

内部排版规则：

盒子从上到下摆放
垂直 margin 合并
BFC 内盒子的 margin 不会与外面的合并
BFC 不会和浮动元素重叠

一个概念：margin collapse（margin折叠）

块级元素 （可能是兄弟关系也可能是祖先关系） 的上外边距与下外边距有时会合并为单个外边距，这样的现象称为margin折叠，源于对margin-top 和margin-bottom的一种控制，CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。 。

设置BFC就是解决这个问题一种很好的方式

创建BFC的方法

html根元素
浮动元素（float不为none）
绝对定位的元素（position为absolute或者fixed）
overflow值不是 visible 的块盒
display值为flex、flex-root、inline-block等

FlexBox

flex-direction

justify-content
- space-between 最左、最右item贴合左侧或右侧边框，item与item之间间距相等。
- space-around 每个item 左右方向的margin相等。两个item中间的间距会比较大
align-items

align-self

order

Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
flex
- flex: *flex-grow* *flex-shrink* *flex-basis*|auto|initial|inherit;

flex: 1          flex-grow: 1                                    
flex: 100px      flex-basis: 100px                               
flex: 2 1        flex-grow: 2; flex-shrink: 1                    
flex: 1 100px    flex-grow: 1; flex-basis: 100px                 
flex: 2 0 100px  flex-grow: 2; flex-shrink: 0; flex-basis: 100px 
flex: auto       flex: 1 1 auto                                  
flex: none       flex: 0 0 auto

Grid布局

Gird布局将网页划分成一个个网格，可以任意组合不同的网格，做出你想要的布局。

与Flex布局不同的是：

Flex布局是轴线布局，只能指定元素相对轴线的位置
Grid布局则是将容器划分为行和列，从而产生网格。

划分网格

fr "片段" 1fr 2fr 就表示后者是前者的两份

如上所示：最外层div就是容器，内层的五个div被称为项目

grid line网格线

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

grid area网格区域

grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性：设置行与行、列与列之间的间隔

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。

grid-gap: <grid-row-gap> <grid-column-gap>;

justify-items 属性， align-items 属性， place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

justify-content 属性， align-content 属性， place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

float 浮动

使元素脱离原本的文档流，不再在文档中在占用位置，也就不会再影响父元素的高度。

块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。

可选值：

none：不浮动
left：向左浮动
right：向右浮动

position 属性

【relative】相对定位：相对自身原本位置偏移，不脱离文档流
- 在常规流里布局，使用top、left、right、bottom设置偏移长度，流内其他元素当它没有偏移一样布局
【absolute】绝对定位：相对最近的非static祖先元素定位
- 脱离文档流
【fixed】固定定位：相对于视口绝对定位
【static】默认值：非定位元素

CSS布局相关｜ 青训营笔记

常规流