前端与CSS的深入学习2 | 青训营笔记

这是我参与 [第五届青训营] 伴学笔记创作活动的第 2 天。前节课讲到单个盒子的设计，及布局，这节课讲到对于CSS中的多个box盒子，该如何布局。详细讲解了flex与grid的属性值功能。

一、块级和行级

• 块级盒子：全称Block Level Box，他不和其他盒子并列摆放，对于所有的盒模型属性都适用；块级元素包括：body,acticle,div,main,section,h1-6,p,ul,li等，这些元素可以生成块级元素，也可以用display:block生成块级盒子。
• 行级盒子：全称Inline Level Box，他和其他行级盒子一起放在一行，或者拆成多行，但是对于盒模型中的width、height并不适用。行级元素包括：span,em,strong,cite,code等，这些元素可以生成行级盒子，不过它的内容经常分散在多个行盒（line box）中，也可以用display:inline生成行级盒子。
• display属性：
• • block：块级盒子
• • inline：行级盒子
• • inline-block：本身是行级，可以放在行盒中，设置宽高；他作为一个整体不会被拆散成多行
• • none：排版时完全被忽略

二、常规流-Normal Flow

常规流中根元素、浮动和绝对定位的元素会脱离常规流，其它元素都在常规流之内（in-flow），常规流中的盒子在某种排版上下文中参与布局

• 行级排版上下文：全称Inline Formatting Context(IFC)，只包含行级盒子的容器会创建一个IFC，IFC内的排版规则：

1. 盒子在一行内水平摆放，一行放不下时，换行显示；
2. text-align决定一行内盒子的水平对齐
3. vertical-align决定一个盒子在行内的垂直对齐
4. 避开浮动（float）元素。

三、块级排版上下文

全称Block Formatting Context(BFC)，某些容器会创建一个BFC：比如根元素，浮动、绝对定位、inline-block，Flex子项和Grid子项，其中overflow值不是visible的块盒，可以使用display:flow-root生成常规流。BFC内的排版规则：

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

四、Flex排版上下文

一种新的排版上下文：它可以控制子级盒子的摆放流向，摆放顺序，盒子宽度和高度，水平和垂直方向的对齐，是否允许拆行等。他需要主轴和侧轴来确定样式。Flex的作用有：

1. 可以设置子项的弹性；当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
2. flex-grow 有剩余空间时的伸展能力
3. flex-shrink容器空间不足时收缩的能力
4. flex-basis没有伸展或收缩时的基础长度

五、Grid排版上下文

在flex里是按行进行块的摆放，在想要按照网格随机摆放盒子的时候就需要grid来进行排版了。display:grid使元素生成一个块级的Grid容器，使用grid-template相关属性将容器划分为网络，设置每一个子项占哪些行/列，position属性：

• static: 默认值，非定位元素
• relative: 相对自身原本位置偏移，不脱离文档流；position:relative在常规流里面布局，相对于自己本应该在的位置进行偏移，使用top,left,bottom,right设置偏移长度，流内其他元素当他没有偏移一样布局。
• absolute:绝对定位，相对非static祖先元素定位；position:absolute脱离常规流，相对于最近的非static祖先定位，不会对流内元素布局造成影响
• fixed:相对于视口定位

五、个人总结

在这次课里，我对CSS又有了更直观的理解，对于一个盒子及多个盒子该如何布局，以及盒子里的样式该如何设计有了更具体的了解。通过今天的学习，是我对CSS学习的轮廓更加清晰，在后面的学习中，我将依旧保持着强烈好奇心，多在MDN上进行学习，查阅资料，继续学习。