盒模型：
块元素：无论设置多少款高都会独占一行.
行内：
没有宽高
有行高
有外边距
有边框
box-sizing没有用
行内块：
img input
可以设置宽高
不会独占一行
有行高
有内外边距
有边框
修改元素排列方式：
display：
inline：行内
block：会计元素默认宽度100%.
table：块元素 以表格形势呈现 默认被内容撑开 可以处理外边距重叠问题.
inline-block：行内块.
flex：弹性布局.
none：隐藏元素，在页面上不占空间.
行内、块、行内块布局：
块：
水平居中布局：margin:auto；不能处理行内和行内块.
行内块和行内：
父容器字体居中.text-align:center.
行内块并列会有3px间隙.间隙是换行造成的.间隙大小跟随父容器字体大小变化.
文档流：
文档最底层的排列.
文档流最上边的层次元素，叫脱离文档.
文档流上的元素会分为行内、块、行内块、排列
float 浮动布局：
left 左.
right 右.
1.脱离文档流
2.宽高丢失.
3.产生高度塌陷的问题.
解决：
1.在父容器下添加一个块元素，块没有高度.清除浮动影响.
清除浮动影响：
clear：
left：左浮动影响
right：右浮动影响
both：清除影响最大的那侧浮动
既想要解决高度坍塌问题.又要外边距重叠：
#app::after，#app::before{
content:"";
display:table;
clear:both;
}
开发规范：1.给需要解决高度塌陷和重叠问题的容器添加clearfix的class.
2.给clearfix解决高度塌陷和重叠问题.
