01 标准流

1.什么是标准流
标签在没有添加布局相关的样式的时候，在浏览器中默认的布局方式
块级标签在标准流中是一个占一行(不管宽度大小)，默认宽度是父标签的宽度，默认高度是内容的高度；设置宽高有效
行内标签在标准流中是一行可以显示多个；默认大小是内容的大小；行内标签设置宽高无效(span,font,a)
行内块标签在标准流中一行可以显示多个，默认大小是内容的大小；设置宽高有效(img,input)

2.实际布局的选择
a.左右结构使用行内块
display属性 - 可以让任何标签变成块级、行内、行内块；隐藏标签

b.脱流/脱标(脱离标准流)
float(浮动)
定位(left,right,top,bottom  position)

02 display属性

display属性(CSS属性):
block(块)
inline(行内)
inline-block(行内块) - 默认左右间隙(因为换行产生的)，这个间隙可以通过将父标签的字体大小设置为0来去掉
none(隐藏)

03float属性

浮动会让标签脱流
脱流 - 让标签脱离标准流布局，不管什么标签脱流了，
        都是按'一行可以显示多个，默认大小是内容大小，设置宽高有效'的方式布局     
float属性
left
right
    文字环绕：
    被环绕的标签浮动，环绕的文字标签不浮动

04清除浮动

1.高度塌陷
当父标签不浮动，子标签浮动的时候，父标签会产生高度塌陷问题

2.清除浮动
清除浮动指的是清除因为浮动而产生的高度塌陷和元素重叠问题
a.方法一：添加空盒子
在高度会塌陷的父标签的最后添加一个空的div；然后给空的div添加样式，设置clear属性的值为both
b.方法二：overflow
给高度会塌陷的那个父标签添加样式设置overflow属性值为hidden

c.方法三：万能清除法
选中高度会塌陷的那个父标签，给after状态添加样式：
    .clear:after{display: block;clear: both;content: "";visibility: hidden;height: 0;}
    .clear{zoom: 1;}
然后再给这个父标签添加样式：zoom:1

05定位

1.定位
定位会让标签脱流

2.定位属性：
top属性:      顶部的距离
bottom属性:   底部的距离
left属性: 左边的距离
right属性:    右边的距离
以上四个属性想要有效，必须通过position属性来说明参考对象
position:
initial和static - 默认值，不能定位(定位无效)
absolute - 绝对定位；以第一个position的值不是默认值的父标签进行定位。(注意：body标签的position不是initial和static)
relative - 相对定位；相对于标准流定位(相对自己在标准流中的位置定位)；
            一般使用relative是在标签本身不需要定位，但是希望自己的子标签相对自己来定位的时候使用
fixed - 相对浏览器定位
sticky - 当浏览器内容没有超过一屏的时候，显示在内容的最下面；当浏览器内容超过一屏，bottom有效，并且显示在浏览器的底部
         (top和bottom有效，left和right无效)    

06盒子模型