布局模式：基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法
- 普通类(Normal flow)：什么都不做，不对元素位置作变动，就是普通流
- 表格布局，仅用于设置表格
- 浮动布局，用来让元素左右排放，已过时
- 定位布局：用于定位元素，而不用和其他元素产生太多关联
- 多列布局：用于设置多列，不常用
- 弹性盒布局：常用
- 网格布局：通过二维网格设置布局，可用
盒子模型 box-model
浏览器把每个元素当成矩形盒子来渲染，盒模型有四部分，分别是content、padding、border、margin
- Content：显示内容的区域，即元素的内容
- padding：元素的内边距，内容外部的空白区域
- border：元素的边框，包裹住内容和内边距
- margin：元素的外边距，盒子和其他元素之间的空白区域
盒模型属性width、height
width和height两个属性设置内容 (即content)的宽高
width:100%的注意事项：默认情况下，content的width本就撑满其父级元素
如果width:100%，同时该元素又设置了padding和margin，那么该元素则会宽于其父元素
height同理
最小宽高
- max-width:100px , min-width:299px
- max-height:100vh , min-height:100vh 100vh表示窗口的高度
无论页面怎样变化，保持最小/大的宽高
IE盒模型
-
IE盒模型中，元素设置的width和height指的是Content + Padding + Border
-
box-sizing:border-box，可改变元素宽高计算方式为IE盒模型方式
块级盒子和行级盒子的区别
块级（block-level）盒子
- 让盒子会在水平方向上扩展并占据父容器在该方向上的所有可用空间
- 下一个盒子会换到新行
行级（inline-level）盒子
- 多个行级盒子在一行顺序排放，放不下会自动换行
- 对于仅展示文本的标签，如a、span、em、string、label
——width和height属性设置无效
——padding、margin左右有效，上下margin无效，上下padding会撑开自己的边框和背景但不占空间，下面代码
<div class="box">
<span class="inline-box">前端1</span>
<span class="inline-box">前端2</span>
<span class="inline-box">前端3</span>
</div>
<div class="box"></div>
.box {
border: 1px solid rosybrown;
margin: 10px;
padding: 20px;
}
.inline-box {
border: 1px solid goldenrod;
margin: 10px;
padding: 30px;
}
display:inline-block，把元素设置为行级块
- 既有块级特性，能设置width、height、magin等
- 又有行级特性，仅占据自身空间，多个在一行排列
inline元素的缝隙问题
- TAB、LF(/n换行以及老打字机打印头下移一行)、CR(/r回车)，SPACE 都是空白字符
- 多个连续的空白字符会合并成一个空格，而空格也占据一个字符的空间
解决方法：
1.HTML里inline元素间去除空格和换行
2.用flex/grid布局
3.font-size:0把字号设置为0，则去除空字符大小
