1、盒模型
（1）CSS盒模型本质是一个盒子，包含 padding、border、margin、content。
（2）盒模型分为标准盒模型（box-sizing:content-box）和怪异盒模型（box-sizing:border-box）。
（3）标准盒模型在设置width和height时设置的是content的大小，真正盒子的大小还要加上padding和border； 怪异盒模型设置width和height时设置的是盒子的大小，包含padding和border，会压缩content区域。
2、浮动
作用：
①让多个块级盒子（div）水平排列成一行。
②实现文字环绕图片。
特点：脱离文档流，容易造成盒子塌陷，影响其他元素的排列。
解决：
①父元素中添加overflow：hidden;
②给父元素添加高度；
③建立空白div，添加clear；
④在父级添加伪元素::after{ content : ' ', clear : both , display : table}。
3、样式优先级
（1）!important 永远最高
（2）style行内样式(内联式)>嵌入式（<style>）和外联式（link）
（3）选择器：ID 选择器(#id)> class类选择器 = 属性选择器(a[href="segmentfault.com"]{}) = 伪类选择器(:hover{}) > 标签选择器(span{}) = 伪元素选择器(::before{}) = 后代选择器（.father .child{}）> 子选择器（.father > .child{}）= 相邻选择器（ .bro1 + .bro2{}）> 通配符选择器（*{}）
4、CSS尺寸设置的单位
①css一共有五个长度单位，分别是px，em，rem，vw，vh；
②除了px是绝对单位，其他都是相对单位；
③em相对于自身大小（但在font-size中相对于父元素字体大小）；
④rem相对于根元素的字体大小；
⑤vw相对于可视化窗口的宽（1vw就是1%可视化窗口宽度）；
⑥vh相对于可视化窗口的高（1vh就是1%可视化窗口高度）；
⑦一般采用rem+媒体查询或者rem+vw来实现响应式布局。原理是当窗口大小发生变化时，通过媒体查询或者vw改变根元素的字体大小，从而改变以rem为单位的元素大小。
5、BFC
定义：BFC(Block Formatting Context)是块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素，反之外面的也无法影响里面的。
形成条件：
- float属性不为none；
- position为absolute或fixed；
- display为inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid；
- overflow不为visible。
元素特性：
1、盒子从顶部开始垂直排列；
2、盒子垂直方向的距离由margin决定，相邻盒子margin会重叠；
3、margin-left会触碰到border-left（对于从左至右的方式，反之）；
4、BFC区域不会与float盒子重叠，而是紧贴边缘浮动；
5、计算BFC高度时会检测float盒子高度。
应用场景：
1、清除浮动（比如display:flex会使内部浮动失效，通常还是使用overflow:hidden）；
2、解决因外边距合并问题；
3、解决高度塌陷问题；
4、写左侧固定栏，右侧适应栏。
6、居中方案
// 兼容性ie 11以上支持
.father {
display: flex/grid;
justify-content: center;
align-items: center;
}.father {
position: relative;
}
.son {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}// 兼容性较好
.father{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.son{
display: inline-block;
}// 兼容性好
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}6、flex:1
缩写：
- flex-grow（设置了对应元素的增长系数）；
- flex-shrink（指定了对应元素的收缩规则，只有在所有元素的默认宽度之和大于容器宽度时才会触发)；
- flex-basis（指定了对应元素在主轴上的大小）。
7、隐藏元素的属性
- display: none;
- visibility: hidden;
- opacity: 0;
8、三栏布局
要求：左右两边盒子宽度固定，中间盒子宽度自适应，盒子的高度都是随内容撑高的，一般都是中间盒子内容较多，为了保证页面渲染快，在写结构的时候，需要把中间盒子放在左右盒子的前面。
// 圣杯布局
// 缺点：当middle部分的宽小于left部分时就会发生布局混乱
<div class="parent">
<div class="box middle"></div>
<div class="box left"></div>
<div class="box right"></div>
</div>
<style>
.parent {
padding: 0 20px; /* 设置父级元素的左右内边距 */
overflow: auto; /* 清除浮动，使得父级元素的高度被撑开 */
}
.box {
float: left; /* 所有盒子浮动 */
height: 100px; /* 假设每个盒子的高度都是100px */
}
.middle {
width: 100%; /* 中间盒子宽度100% */
background-color: #ddd; /* 只是为了区分，给中间盒子一个背景色 */
}
.left {
width: 150px; /* 左边盒子固定宽度 */
margin-left: -100%; /* 左边距-100%，使其覆盖中间盒子 */
position: relative; /* 相对定位 */
left: -20px; /* 向右平移自身宽度外的父级padding */
background-color: #faa; /* 只是为了区分，给左边盒子一个背景色 */
}
.right {
width: 150px; /* 右边盒子固定宽度 */
margin-right: -150px; /* 右边距-自身宽度，使其与中间盒子并排 */
background-color: #afa; /* 只是为了区分，给右边盒子一个背景色 */
}
</style>// 双飞翼布局
// 优点：不会像圣杯布局那样变形，CSS样式代码更简洁
// 缺点：多加了一层dom节点
<div class="parent">
<div class="box left"></div>
<div class="box middle">
<div class="inner-box"></div>
</div>
<div class="box right"></div>
</div>
<style>
.parent {
padding: 0 20px; /* 设置父级元素的左右内边距 */
overflow: hidden; /* 清除浮动，使得父级元素的高度被撑开 */
}
.box {
float: left; /* 所有盒子浮动 */
}
.middle {
width: 100%; /* 中间盒子宽度100% */
}
.inner-box {
margin: 10px; /* 设置内部盒子的外边距 */
background-color: #ddd; /* 为了区分，给内部盒子一个背景色 */
/* 根据需要设置宽高 */
}
.left {
width: 150px; /* 左边盒子固定宽度 */
margin-left: -100%; /* 左边距-100%，使其覆盖中间盒子 */
background-color: #faa; /* 为了区分，给左边盒子一个背景色 */
}
.right {
width: 150px; /* 右边盒子固定宽度 */
margin-right: -150px; /* 右边距-自身宽度，使其与中间盒子并排 */
background-color: #afa; /* 为了区分，给右边盒子一个背景色 */
}
</style>