盒模型
什么是盒模型呢？
在html中，每个元素都可以看作盒模型，总共有四部分，分别是:content(内容区)，padding(填充区),border(边框),margin(外边区)。
盒模型呢分为两种：
标准盒模型：总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)、
怪异盒模型：总宽度（即width已经包含了padding和border值）= width + margin(左右)（IE浏览器）
怎么将这两者转换呢?
通过box-sizing来转换
box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。
BFC
我来说说BFC，BFC呢即是两栏布局的一种排版方式，也可以解决边距重叠的问题。
怎么通过BFC来进行两栏布局呢
左边div宽度固定，给右边的div overflow：hidden就可以实现左边固定，右边自适应
解决边距重叠
父级的边距重叠的话，给父元素添加overflow：hidden就可以解决
兄弟级的边距重叠的话，会是垂直重叠的，给他们之间加入一个空元素，并给他overflow：hidden,就可以解决margin重叠的问题
清楚浮动
我来列举四种清楚浮动的方法，不全还请谅解。
添加额外标签法
添加overflow：hidden
伪类 :after
双伪类 :before :after
水平垂直水平居中
我在这里列举三种水平垂直水平居中的方法
公用dom结构
<div id="box"><div id="x"></div></div>第一种 父相子绝
#box{
width: 400px;height: 400px;background: red;position: relative;}#x{
width: 200px;height: 200px;background: yellow;position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;}第二种 弹性盒子
#box{
width: 400px;height: 400px;background: red;display: flex;justify-content: center;align-items: center;}#x{
width: 200px;height: 200px;background: yellow;}第三种 父相子绝 通过margin：0 auto
#box{
width: 400px;height: 400px;background: red;position: relative;}#x{
width: 200px;height: 200px;background: yellow;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}三栏布局(圣杯布局和双飞翼布局)
三栏布局有很多，那我为什么要说这两种呢？因为这两个很经典，懂这两个就对三栏布局有一定的认识了。
首先我来说说圣杯布局
未完