布局基础知识
1、display 属性：block（块级元素），inline-block，none（会在页面看不到，并且不会在页面占据空间），flex（flex 布局），inline-block（应用场景：eg. 让很多个有宽高的 div 从左到右铺满页面；此时最好也设置 vertical-align：top）
2、div { max-width: 600px; margin: 0 auto; }
用 max-width 代替 width，防止浏览器页面表现出现水平滚动条；margin：0 auto 实现盒子的左右居中
3、盒模型的 box-sizing 属性：设成 border-box，元素的 padding 和 border 不会算进元素的 width 和 height 中;content-box 是常规盒模型；padding-box—高宽包括了内边距
4、positoin：static（默认值，元素不会被“positioned”，设成其他值元素都会被“positioned”）；relative；absolute（相对于最近的“positioned”祖先元素，也是一个破环属性，脱离文档流）；fixed（脱离文档流）。设置成后面三个属性之后，一般还需要写 top，right 等（relative 时不写的话会和 static 一样，没什么变化，但这时候其子元素可以写 position: absolute;）
z-index 属性：只对被“positioned”的元素有效；对父子元素，子元素 z-index 的默认值是等于其父元素的；当子的 z-index 是大于等于 0 的时候，就算小于父 z-index，也会显示在父元素之上，只有设置成负值才会被父元素覆盖
5、float 属性
其设计初衷是为了实现文字环绕效果。有以下特性：
- 破坏性：一个 div 中只有一个 img（或有少量文字），当设置 img {float:left}之后，父 div 会坍塌，img 会溢出。因为设置了 float 的 img 会脱离文档流
- 包裹性：div 被设置 float 之后，会变得不会默认铺满页面宽度，而是紧包裹住 div 中的文字
- 清空格：当一个 div 中有多个 img 的时候，页码显示 img 从左到右且相互有间隔，但是 img 设置 float 之后，这种间隔会消失，img 紧紧挨着（有时候不希望有间隔，可用此法来清间隔）
6、clear 属性，用来控制浮动。
基本功能：有两个盒子，第一个写了 float：left，第二个没有，则页面效果是两个盒子会重叠而不是上下分布。此时在第二个盒子(被影响的盒子，同级元素）中写 clear：left，即能实现上下分布（clear：both 也可以）。
7、清除浮动overflow 属性：也是写在被影响的盒子中（应用场景：over，即内外嵌套，内 div 超出的时候），大部分时候是写在外盒，写在同级盒子的情况是 BFC 的时候（见下面 BFC 部分）。有以下四种清除浮动的方法：
- 父元素设置 overflow:hidden，这样父元素就有高度了，不会坍塌（常用）
- 浮动父元素
- 给父元素添加一个子 div，给其设置 clear：both
- clearfix：给父元素添加一个:after 伪元素，里面写{content: ‘’, display: table, clear: both}; 父元素身要写 *zoom: 1（缩放比例）; 以提高兼容性。其实本质和第三种方法是一样的。
8、百分比宽度：width 和 max-width 都可用百分比，相对父级元素的 width
9、媒体查询
@media screen and (min-width/max-width:600px) { }
使用 meta 标签中的 viewport 之后可以布局在移动浏览器上显示的更好
10、在一个 div 中实现里面文字/元素呈现多列分布：用column属性。设置 column-count 和 column-gap 即可
11、布局模型
流动模型（Flow）是浏览器默认的布局模式。块状元素默认从上到下分布，行内元素默认从左到右分布
浮动模型（Float）。设置了 float 属性的时候
层模型（Layer）。设置了 position 属性的时候
对齐方式
水平居中
- 行内元素的水平居中
是 img，span 等行内元素的时候，父级元素写 text-align: center 即可 - 块状元素的水平居中（定宽）
margin： 0 auto - 块状元素的水平居中（不定宽）
把块状元素写 display: inline-block/inline，再用行内元素的方法实现居中。定宽也能用此法
- 行内元素的水平居中
垂直居中（假设父元素是盒子且高度已定）
- 子元素是行内元素，高度是其内容撑开的。设定父元素的 line-height 即可
- （差）子元素是块级元素且高度还没有设定。给父元素设定 display: table; vertical: middle 可解决.
- （差）子元素是块级元素且高度已经设定。设子元素的 margin-top 为（父元素高度-子元素高度）/2
- flex 布局法。对父元素写 display: flex; flex-direction: column; justify-content: center;（似乎 display: flex;align-items: center;也可以）
- 相对+绝对定位法
垂直水平居中
- （差）在父元素写 text-align：center; vertical-align: middle; display: table-cell;并把子元素设置为 inline-block
- 若子元素是图像，父元素写 text-align：center; 用行高替代高度，且字体大小设为 0。子元素本身设置 vertical-align:middle
- 相对+绝对定位法。父元素设置为相对，子元素设为绝对，在 top、left、right、bottm 都为确定值（可都写成 0）的情况下，写 margin: auto
- flex 布局。对父元素写 display: flex;justify-content: center;align-items: center;
两列布局(左盒定宽，右盒自适应)
需要知道左侧盒子宽度的方案：
- 双 float 并且右盒设 margin-left = 左盒 width；或者双 float 并且右盒写 width: calc(100% - 左盒 width)，此时由于右盒的 width 是计算的，所以子盒子都得写 box-sizing: border-box 。父元素都要清除浮动。
- 双 inline-block 方案（inline-block + 设 vertical-align）并且 右盒写 width: calc(100% - 左盒 width)，box-sizeing。并且父元素要写 font-size: 0，这也和 width 的计算有关
- （少用）父元素设置 position：relative，左元素设成 absolute，右盒子 margin-left: 左盒子宽度，并且（当左盒高度大于右盒时要）设定父容器的 min-height
不需要知道左侧盒子宽度的方案：
- float+BFC 方法。左盒子 float: left，右盒子通过 overflow: auto，形成了 BFC，因此右侧盒子不会与浮动的元素重叠。父元素清除浮动
- flex 布局（最好的）。父写 display: flex;align-items: flex-start（这一项能让两个子盒高度自动）。左写定宽，右写 flex: 1。
- grid 布局。父元素写 display: grid;grid-template-columns: 120px 1fr;align-items: start。子元素都需要 box-sizing: border-box。左写 grid-column: 1，右写 grid-column: 2
三列布局(两侧定宽中间自适应)
左右盒子 float + 中间盒子 margin
绝对定位法。父元素设置 position：relative; 左右盒子元素设成 absolute，再用 top、left、right 固定位置。中间盒子用左右 margin 撑开
margin 负值法 都是三个盒子都 float:left。两种方案都是把中间盒子写在 DOM 最前面，优先渲染
- 圣杯布局(父盒子写左右 padding，左右盒子通过相对定位确定位置)
- 双飞翼布局（middle 的 div 里又插入一个 div，通过调整内部 div 的 margin 值，实现中间栏自适应，内容写到内部 div 中）
flex 布局：两侧定好宽度,父元素写 display: flex; 中间的子元素写 flex: 1 (DOM 中必须是先写左再写中最后写右)
BFC
帮助理解
BFC 全称”Block Formatting Context”, 中文为“块级格式化上下文”。是布局过程中生成块级盒子的区域（同时保持流体特性，存在于文档流中），也是浮动元素与其他元素的交互限定区域
（BFC 一般是出现在浮动元素周围的元素）当元素有下面情况的时候变成 BFC 元素：
- float 的值不为 none
- overflow 的值为 auto,scroll 或 hidden
- display 的值为 table-cell, table-caption, inline-block 中的任何一个
- position 的值不为 relative 和 static ……
变成 BFC 元素后会有以下特性：
- BFC 就是页面上的一个隔离的独立容器，容器里面的布局与外面互不影响
- BFC 的区域不会与其它 float 的元素区域重叠
- 计算 BFC 的高度时，浮动子元素也参与计算
有用的其实是overflow:auto/hidden，display:inline-block 和 display:table-cell。主要用途：清除浮动，防止 margin 重叠，阻止文字环绕。
flex 布局
1、flex 容器的属性：flex-direction 主轴方向，justify-content 项目在主轴上的对齐方式，align-items 定义项目在交叉轴上如何对齐……
2、flex item 的属性：flex 属性是 flex-grow（项目的放大比例（与其他项目相比），默认为 0）, flex-shrink（项目的缩小比例） 和 flex-basis 的简写，默认值为 0 1 auto。….
注意：设置为 Flex 布局后，子元素的 float 、clear 和 vertical-align 属性将失效
flex 布局：
1、可以实现骰子任意面的任意布局（一个点位一个盒子）
2、网格布局（在骰子布局的基础上实现 item 的缩放）
3、圣杯布局 …
grid 布局
1、Grid 布局（二维布局）远比 Flex （一维布局）布局强大。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
2、概念：容器，项目，行，列，单元格（行与列的交叉部分），网格线。
注意：设置为 Grid 布局后，子元素的 float、display: inline-block、display: table-cell、vertical-align 和 column-*属性将失效
3、容器属性：grid-template-columns 和 grid-template-rows 定义每一列列宽和每一行行高（多少行/列就有多少个值，可以是 px、是百分比、fr；也可以直接写 repeat(3, 33.33%);），grid-gap: grid-row-gap grid-column-gap，单元格内容的水平和垂直位置 place-items: align-items justify-items ，整个内容区域在容器里面的水平和垂直位置 place-content: align-content justify-content ……
响应式布局
移动端布局
- 媒体查询，选取主流设备宽度尺寸作为断点进行样式编写（后面的样式会覆盖前面的样式）
- 加标签告诉浏览器，使用的设备的宽度作为视图宽度，并禁止初始的缩放
1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
- 总结方案：（1）媒体查询+px ;（2）媒体查询+rem
从 Vue 项目中总结的
初始化：
1、在 index.html 的 meta 标签中的 viewport 的 content 中加 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no
2、引入 reset.css 重置页面的样式，设定不同手机浏览器的初始化样式
3、引入 border.css 解决移动端的 1px 边框的问题
4、300ms 点击延迟的问题：在某些浏览器用 click 事件的时候，会延迟 300ms。用 npm 安装 fastclick 模块解决之
设计：
1、把 html 的 font-size 设置为 50px（reset.css 中），然后项目中所有的宽高和 font-size 都用 rem 来做单位。这是因为移动端的设计稿一半是二倍图，这样设计稿中的 10px 其实是 5px，写 css 的时候就是 0.1rem，比较方便。
2、图片加载防抖四件套：overflow:hidden; width:0; height:0; padding-bottom: 100%
3、加 1px 边框的方法：直接在 div 上添加 class=”border-top/bottom”
4、长文本省略：overflow: hidden; white-space: nowrap; text-overflow: ellipsis
参考资料
学习 CSS 布局
CSS 布局(四) float 详解
CSS 布局(六) 对齐方式
七种实现左侧固定，右侧自适应两栏布局的方法
我熟知的三种三栏网页宽度自适应布局方法
双飞翼布局
CSS 深入理解流体特性和 BFC 特性下多栏自适应布局