盒模型

块：

独占一行，可以设置宽高

行内：

没有宽高
有行高
有外边距
box-sizing 没有用

行内块：

img
input
可以设置宽高
不会独占一行
有行高
有内外边距
有边框

修改元素排列方式：

方法一：display:
        inline 行内
        block 块级元素，默认宽度100%
        table 块级元素，以表格的形式呈现，默认被撑开，可以处理外边距重叠问题
        inline-block 行内块
        flex 弹性布局
        none 隐藏元素，在页面上不占空间

设置元素的可见性：

方法二：visibility: 
        visible 默认值，可见的
        hidden  隐藏元素，空间仍然占着
方法三：高度设置为0，内容还在，可以设置 溢出隐藏
方法四：设置元素透明：opacity:0-1; 空间仍然占着
    

布局

行内+行内块+块布局：

块：
    水平居中布局：margin:0 auto;不能处理行内和行内块
行内块+行内：
    父容器字体居中：text-align:center;
    行内块并列时会有3px的间隙，间隙是换行造成的，间隙大小跟随父容器字体大小变化

文档流：

文档最底层的排列
文档流上边的层次元素，叫脱离文档流
文档流上边的元素会分为行内、块、行内块排列

float 浮动布局：

left 左浮动
right 右浮动

问题：

1、脱离文档流
2、宽度丢失
3、产生父元素高度塌陷问题
4、会对后边的元素造成影响

解决：

1、在父容器最下边添加一个块元素，块元素没有高度，清除浮动影响；
缺点：文档中添加了没有用的元素
2、用伪元素在父元素末尾添加一个块元素，无高度，清除浮动影响

清除浮动影响：

clear:
    left 清除左浮动
    right 清除右浮动
    both 清除影响最大的那侧浮动

既想解决高度塌陷问题，又要解决外边距重叠问题：

    #app::after,#app::before{
        content: "";
        display: table;
        clear: both;
    }

开发规范：

1、给需要解决塌陷和重叠问题的容器添加固定类名：clearfix
2、给clearfix添加::before和::after解决高度塌陷和重叠问题
3、添加的内容要求为空内容，设display:table