课堂笔记 2021.8.26 CSS布局
CSS布局
布局(Layout)是什么？
确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算
常规流 Normal Flow
根元素、浮动和绝对定位的元素会脱离常规流
其他元素都在常规流之内（in-flow）
常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文（Inline Formatting Context） IFC，只包含行级盒子的容器会创建一个IFC。
IFC内的排版规则：
盒子在一行内水平摆放
一行放不下时，换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动（float）元素
块级排版上下文（Block Formatting Context） BFC，某些容器会创建一个BFC
根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
BFC内的排版规则
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠
Flexible Box，一种新的排版上下文。
它可以控制子级盒子的：
摆放的流向
摆放顺序
盒子宽高
水平和垂直方向的对齐
是否允许拆行
display:flex使元素生成一个块级的Flex容器。display：inline-flex使元素生成一个行级的Flex容器。
<div class="container"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div> <style> .container{ display:flex; border: 2px solid red; } .a, .b, .c { text-align: center; padding: 1em; } .a {background: #fcc;} .b {background: #cfc;} .c {background: #ccf;} </style>
flex-grow 占满剩余空间的能力
flex-shrink 收缩的容易程度 值为1表示可收缩，值为0表示不可收缩
flex-basis
justify-content 在主轴方向上对齐元素
align-items 在侧轴方向上对齐元素 对象是一行内元素的集合
align-self 给特定子元素设置对齐方式
align-content 对象是所有行的集合
order属性，默认值为0，会按照order的顺序排序
display: grid
网格线的使用顺序：上左下右
在行的方向上，可以控制内容所占网格的位置，默认值为stretch，即为填满
在列的方向上，可以控制内容所占网格的位置，默认值为stretch，即为填满
可以控制网格在容器内的布局
浮动
浮动对布局的影响
浮动元素脱离常规流，漂浮在容器左边或右边
浮动元素贴着容器边缘或灵位的浮动元素
浮动元素不会影响常规流里面的块级盒子
浮动元素后面的行盒会变短以避开浮动元素
clear属性，left表示不能和左浮动重叠，both表示不能和左右浮动重叠
给元素添加overflow:hidden后，它就建立了一个BFC。第二段就不会环绕图片。
绝对定位
position属性
static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
absolute 绝对定位，相对非static祖先元素定位
fixed 相对于视口绝对定位
position: relative
在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top、left、bottom、right设置偏移长度
流内其他元素当它没有偏移一样布局
potision: absolute
脱离常规流
相对于最近的非static祖先定位
不会对流内元素布局造成影响
没有设置position属性则为static的，absolute不能相对于其定位（我很懵逼？）
position: fixed
相对于Viewport定位
不会随面滚动发生位置变化
堆叠层级
Z轴越大，越靠上，离用户越近。
z-index
为定位元素指定其在z轴的上下层级
用一个整数表示，数值越大，越靠近用户
初始值为auto，可以为负数，0，正数
示例
堆叠上下文的创建
Root元素
z-index值补位auto的relative/absolute
position是fixed的元素
设置了某些属性的元素
opacity不为1
transform
animation
绘制顺序，在每一个堆叠上下文中，从下到上：
形成该上下文的元素的border和background
z-index为负值的子堆叠上下文
常规流内的块级元素
浮动元素
常规流内行级元素
z-index为0的子元素或者子堆叠上下文
z-index为正数的子堆叠上下文
错题编辑：
