CSS布局

标准文档流

标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面的内容发生了变化，后面的内容位置也会随着发生变化。

HTML就是一种标准文档流文件。

微观现象

1. 空白折叠现象

2. 文字类的元素如果排在一行会出现一种高低不齐、底边对齐的效果

3. 自动换行，一行内容写满时会自动进行换行

标准文档流等级

在标准流中，大部分标签是区分等级的，习惯将标签划分为几种常见的加载级别: 块级元素、行内元素、行内块级元素等。

块级元素: 大部分容器标签包括p标签都是块级元素，比如div、h1等

行内元素: 大部分的文本级标签，比如span、a、b等。

行内块级元素: 比如img、input等。

1. 块级元素

a. 块级元素可以设置宽高，在浏览器中正常加载

width: 200px;
height: 100px;

b. 块级元素必须独占一行，不能与任何其他标签并排一行

c. 块级元素如果不设置宽高，会自动撑满父级的width区域: 高度不设置，会被内容自动撑开高度

2. 行内元素

a. 行内元素不能正常加载宽度和高度属性，其他的盒模型虽然能设置，但是容易出现加载问题

span{
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 3px solid #f00;
    margin: 10px;
    background-color: pink;
}

b. 行内元素可以与其他的行内或行内元素块并排一行显示

c. 行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开

3. 行内块元素 

a. 行内块元素可以设置宽度和高度

b. 行内块元素可以与其他的行内或行内块并排一行显示

c. 行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容撑开

d. 行内块依旧具有标准流的微观性质，例如空白折叠现象

显示模式display

标准流中的元素有自己默认的浏览器加载模式，加载模式不是一成不变的，后期可以通过display属性更改一个标签的显示模式。

属性值: 标签根据属性值不同，可以加载对应显示模式的特点

block　　块, 表示标签要以块级元素模式加载，具备块级特点

display: block;

inline　  行内, 表示标签要以行内元素模式加载, 具备行内特点

display: inline

inline-block 行内块，表示标签要以行内块模式加载，具备行内块特点

display: inline-block

none: 没有，表示标签及内部的内容直接隐藏，让出原有标准流的位置

display: none;

隐藏的元素要想再次显示: 可以将display的属性值设置为block;

display属性更改的显示模式并没有改变标准文档流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面效果需要脱离标准文档流的限制。

标签脱离标准文档流的方法: 浮动、绝对定位、相对定位

浮动

定义

浮动是一种非常重要的布局属性。

属性名: float，漂流、浮动的意思

属性值: left  左浮动　　右浮动  right

作用: 让元素脱离标准文档流，同一级的浮动的元素可以并排在一排显示

.box p{
    float left;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin-right: 10px;
}

float: right