盒子模型
盒子模型属性：
- margin：外边距
- padding：内边距
- border：边框
边框
边框属性：
- 粗细：border-width
- 样式：border-style
- 颜色：border-color
内外边距
内边距：padding，外边距：margin
margin:0 auto; 可以用于使元素居中。
内外边距的输入参数个数不同时改变的外边距位置不同：
- 1个参数：四个方位同时修改。
- 2个参数：1st：上下边距；2nd：左右边距。
- 3个参数：1st：上边距；2nd：左右边距；3rd：下边距。
- 4个参数：顺序顺时针：上右下左。
盒子大小计算方式：margin + border + padding + 内容宽度
圆角边框
圆角边框：border-radius
border-radius输入的参数个数不同时改变的圆角位置不同：
- 1个参数：4个角都改变
- 2个参数：1st：↖️；2nd：↘️
- 3个参数：1st：↖️；2nd：↗️+↙️；3rd：↘️
- 4个参数：顺序顺时针：↖️↗️↘️↙️
阴影
阴影：box-shadow
box-shadow属性的参数顺序：x偏移 y偏移 模糊半径 颜色;
布局
标准文档流：指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
display
块元素：block
行内元素：inline
行内块元素：inline-block
可以通过设置元素样式的display属性来改变其类型。但方向不可控制，仍属于标准文档流
浮动
- 浮动：为元素样式添加float属性来使其浮动，常用取值：left、right，浮动会脱离标准文档流，但会导致父级元素塌陷问题。
- 清除浮动：clear：清除元素某个方位的浮动，取值：left、right、both
- 清除浮动只会影响自己及之后元素的位置，无法改变之前元素的位置。
- 浮动的缺点：浮动会导致父元素塌陷，解决办法：
- 给父元素设置高度（不推荐）
- 在父元素内最后添加
<div style="clear:both;"></div>，该div清除了浮动，所以拥有高度属性，但因为是块元素会另起一行，显示在之前元素的下方，所以会撑起父元素 - 为父元素样式添加
overflow:hidden;属性 - 添加父元素伪类（推荐），原理同父元素内最后添加空div
.father:after{ content: ''; display: block; clear: both; }
定位
相对定位 relative
- 给元素添加
position:relative;的属性 - 通过设置top、bottom、left、right属性值来调整元素位置：如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
- 让元素相对于初始位置进行移动。相对定位仍属于标准文档流，元素的原始位置会被保留
绝对定位 absolute
绝对定位情况：
- 给元素添加
position:absolute;的属性 - 通过设置top、bottom、left、right属性值来调整元素位置：移动逻辑与相对定位一致。
- 设置绝对定位后，元素不会保留原位置，偏移情况：
- 父级元素无定位属性的情况下，绝对定位会相对于浏览器定位
- 父级元素有定位属性的情况下，通常会相对于父级元素进行定位
固定定位 fixed
- 给元素添加
position:fixed;的属性 - 通过设置top、bottom、left、right属性值来调整元素位置：移动逻辑与相对定位一致。
- 设置固定定位后，元素位置会固定不变，且随浏览器滚动条一同移动。
z-index
z-index用于调整元素的图层，使其置于上层或下层，调整显示效果。
设置元素的z-index属性即可，取值从0-∞