本篇笔记主要介绍CSS布局技巧，包括浮动、定位、弹性盒子布局等。是本人就青训营CSS的学习总结的笔记，如有错误欢迎指正。

1、CSS布局

CSS布局就是确定内容大小和位置的算法，一般依据元素、容器、兄弟节点和内容等信息来计算。
三种常见的布局方式：常规流/文档流、浮动、绝对定位。其中文档流有很多不同的布局规则，比如行级、块级、表格布局、FlexBox、Grid布局等。

2、CSS盒模型

1. width：指定content box宽度，取值为长度、百分数、auto，auto由浏览器根据其他属性确定，百分数相对容器的content box宽度。
2. height：指定content box高度，取值为长度、百分数、auto，auto取值由内容计算得来，百分数相对容器的content box高度，容器有指定的高度时，百分数才生效。
3. padding：指定元素四个方向的内边距，百分数相对于容器宽度。padding：5px 10px 15px 20px：表示上内边距5px，右内边距10px，下内边距15px，左内边距20px
4. border：指定容器边框样式、粗细和颜色。border有三种属性四个方向，分别是border-width：边框宽度、border-style：边框样式：border-color：边框颜色；border-top：上边框、border-right：右边框、border-bottom：下边框、border-left：左边框。四条边框的颜色、样式、粗细都可以不同。border:5px solid black：表示边框宽度5px，边框样式为实线，边框颜色为黑色。
5. margin：指定元素四个方向的外边距，取值可以是长度、百分数、auto，百分数相对于容器宽度，margin:auto：表示水平居中。margin在竖直方向上取两个margin里的最大值，这里的两个容器间距为100px，而不是50px。 注：如果border-sizing:border-box，这时width=左右border+左右padding+content box宽度，height=上下border+上下padding+content box高度
6. overflow：属性用于控制内容溢出元素框时显示的方式，overflow属性有以下值：

• visible：默认值，内容不会被修剪，会呈现在元素框之外。
• hidden：内容会被修剪，并且其余内容是不可见的。
• scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• inherit：规定应该从父元素继承 overflow 属性的值。

3、块级和行级

1. 块级（Block Level Box）：不和其它盒子并列摆放，适用所有的盒模型属性。
2. 行级（Inline Level Box）：和其它行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用。
3. 块级元素：生成块级盒子，body、div、section、h1~h6、p、ul、li等都是块级元素。
4. 行级元素：生成行级盒子，内容分散在多个行盒中，span、em、strong、cite、code等都是行级元素。
5. display属性：设置一个元素应如何显示。

• block：块级盒子
• inline：行级盒子
• inline-block：本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行
• none：排版时完全被忽略

4、常规流/文档流

常规流又称文档流，所有文素默认情况下，都属于常规流布局。除了根元素、浮动和绝对定位的元素会脱离常规流，其它元素都在常规流之内。常规流中的盒子，在某种排榜上下文中参悟布局。

1. 行级排版上下文（IFC)：只包含行级盒子的容器会创建一个IFC。IFC内的排版规则：

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

2. 块级排版上下文（BFC）：某些容器会创建一个BFC，例如根元素（html）、浮动、绝对定位、inline-block、Flex子项、Grid子项、overflow值不是visible的块盒和display:flow-root。BFC内的排版规则：

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

3. Flex Box（弹性布局）：是CSS3提供的用于布局的一套新属性，这套属性包括针对容器（弹性容器，flex container）和针对其直接子元素（弹性项，flex item）的两类属性。它可以控制子级盒子的摆放流向()、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行。对于任意类型的元素定义display:flex后，该元素就会变成容器flex container。此时，它的所有的直接子元素（无论什么元素类型）都会变成弹性项flex item。 可以通过flex属性控制flex item的行为：
   （1）flex-direction：控制flex上下文元素的摆放流向，默认流向是从左到右（row），也可以选择其他流向从右到左（row-reverse）、从上到下（column）、从下到上（column-reverse） （2）对齐，对齐可以分为水平对齐和垂直对齐，这里引入两个概念：主轴和侧轴。 justify-content 定义了flex item在主轴上的对齐方式。它可能的值有：

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
• space-around：均匀排列每个元素，每个元素周围分配相同的空间。
• space-evenly：均匀排列每个元素，每个元素之间的间隔相等。
  （3）align-items：定义了flex item在侧轴上的对齐方式。它可能的值有5个：
• flex-start:元素位于容器的开头。
• flex-end：元素位于容器的结尾。
• center：元素位于容器的中心。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• stretch：默认，元素被拉伸以适合容器。
• baseline：元素被定位到容器的基线。
  （4）flex：可以设置子项的弹性，当容器有剩余空间时，会伸展；容器空间不足时，会收缩。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
• flex-grow：有剩余空间时的伸展能力
• flex-shrink：容器空间不足时收缩的能力
• flow-basis：没有伸展或收缩时的基础长度
  

4. Grid布局：CSS网格布局，提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。Flex Box是单一方向布局，Grid是二维布局。 当HTML元素的display属性设置为grid或inline-grid时，它就会成为一个块级的Grid容器；使用grid-template相关属性将容器划分为网格；设置每一个子项占哪些行/列。

• grid-template-columns：指定列的大小，以及网格布局中设置列的数量
• grid-template-rows：指定网格布局中行的大小
• grid-area：指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
• grid-column-start：指定网格元素列的开始位置
• grid-column-end：指定网格元素列的结束位置
• grid-row-start：指定网格元素行的开始位置
• grid-row-end：指定网格元素行的结束位置

列与列，行与行之间的交接处就是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。

5、浮动、绝对定位

1. float：用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。float属性可以设置以下值：

• left - 元素浮动到其容器的左侧
• right - 元素浮动在其容器的右侧
• none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
• inherit - 元素继承其父级的 float 值

2. position：规定元素的定位类型。position属性可以设置以下值：

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

寄语：本篇笔记可能不够详尽，只是本人的关于CSS布局的小小笔记，如果有错误欢迎各位指正。