HTML5&CSS3——让你的页面美如画（6）
4.CSS布局
（1）自动布局（默认文档流）
HTML+CSS元素配合搭建页面框架称为布局。
默认文档流就是对页面布局不加任何修饰，元素自动的布局方式，其特点如下：
元素在页面中的显示顺序与元素在代码中出现的顺序是一致的；
块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定；
行内元素与其他元素共享一行空间，宽高由其内容所决定。
通过为display属性指定值block, inline ,inline-block等可以改变元素在正常流中的表现形式，使元素在块和行内元素之间相互转化，提高布局的可操作性。
（2）浮动布局
浮动布局的主要用法是为了让块级元素在一行中显示（列级布局），设置float属性使得元素脱离文档流浮动显示，float属性有以下取值：
left：向左浮动元素
right：向右浮动元素
none：【默认值】，不浮动
inherit：浮动方式继承父元素
脱离文档流的元素有以下特点：
宽度高度默认由内容决定
原先所在位置就会被其他块元素抢占
浮动元素在一行中依次排列，当一行无法容纳的时候会自动换行
应用：
左侧浮动，右侧不浮动（适用于两列布局）
.content > .left{ float:left; width:220px; } .content > .right { margin-left:230px; } <div class="content"> <div class="left"></div> <div class="right"></div> </div>
全部浮动（适用于多列布局）
ul> li { float:left; with:计算及自定义设置; } ul::after { display:block; content:""; clear:both; } <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
（3）定位布局
定位布局分为静态定位和相对定位，常用于模态框、下拉菜单、二级菜单、固定宣传栏、网页聊天页面等。
静态定位是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中，默认设置为position: static;。
相对定位与静态定位相似。相对定位的元素我们可以通过属性top, bottom, left, right来改变元素最终的位置。元素移动的时候是相对于当前元素所在的位置进行移动的，默认设置为position: relative;。
position有以下取值：
relative：定位元素（相对定位），没有脱离文档流，参照点为当前元素原本的位置
absolute：定位元素（绝对定位），脱离了文档流，参照距离当前元素最近的父定位元素，如果所有的父元素都没有定位元素，参照浏览器视口
fixed：定位元素(固定定位)，脱离了文档流，参照浏览器视口
sticky：定位元素(粘滞定位)，不脱离文档流，relative 和 fixed 的结合，如设置元素样式为top:100px，则当前元素距离浏览器视口顶端为100px的时候，体现fixed的特点，其余情况体现relative的特点
（4）伸缩盒布局
伸缩盒布局可以理解为自适应布局，它能够使得元素的宽高随显示范围（浏览器视口）的改变而做出特定调整，一般应用于响应式布局（手机app）。
当父元素设置为伸缩盒布局（display : flex;）时：
布局形式为列布局，默认主轴为X轴（flex-direction: row;），默认交叉轴为Y轴，元素会沿着主轴方向排列（横向排列），元素默认高度将沿交叉轴方向占满父元素高度；
当设置flex-direction: column;时，布局形式为行布局，主轴变为Y轴，元素将沿主轴方向排列（纵向排列），元素默认宽度将沿交叉轴方向占满父元素宽度。
flex-wrap用于设置子元素宽度之和大于父元素时是否换行，默认值为nowrap不换行，设置为wrap时换行。
flex的样式表：
flex-basis：主轴上元素的基础值(宽/高)
flex-grow：对盈余空间的分配
flex-shrink：对亏损空间的贡献
flex: grow shrink basis; 速写（且如flex:1;表示flex:1 1 0;）
应用：
等比例划分
section {
display: flex;
}
article {
flex: 1;
}
article:nth-of-type(3) {
flex: 2;
}
父元素section为一个伸缩盒子容器，article各占一份，第三个article占2份。假如共有3个article，第一个、第二个article占1/4，第三个占1/2。
剩余部分等比例划分
section {
display: flex;
}
article {
flex: 1 200px;
}
article:nth-of-type(3) {
flex: 2 200px;
}
父元素section为一个伸缩盒子容器，每个article的宽度至少200px，对于屏幕的剩余部分，article各占一份，第三个article占2份。假如共有3个article，第一个、第二个article占1/4，第三个占1/2。
align-items——控制伸缩盒子在垂直轴上的显示。有以下取值：
stretch：默认值，将盒子在Y轴上进行拉伸，直至适应整个伸缩盒子容器
center：盒子在Y轴中心显示
flex-start：在伸缩盒子容器的伸缩开始位置显示，即伸缩盒子容器顶部
flex-end：在伸缩盒子容器的伸缩结束位置显示，即伸缩盒子容器底部
justify-content——控制伸缩盒子在主轴上的显示。有以下取值：
flex-start：默认值，在主轴的开始显示
flex-end：在主轴的结束显示
center：在主轴的中心显示
space-around：填充空白自适应在主轴中心显示
space-between：填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白
（5）CSS3新增布局说明
伸缩盒布局是CSS3的一种布局。除此之外，CSS3还加入了多栏布局方式。
使用多栏布局可以将一个元素中的内容均分为两栏或多栏显示，并且确保各栏中内容的底部对齐，它有这些属性：
column-count：属性规定元素应该被划分的列数
column-width：属性规定列的宽度
column-gap：属性规定多栏之间的间隔距离
column-rule：属性在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度，颜色等，该属性的属性值的指定方法与CSS中border属性的属性值指定方法相同
盒布局与多栏布局的区别：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的；此外，在使用多栏布局时，也不可能具体指定什么栏中显示什么内容，因此比较适合显示文字内容，不适合做网页布局。
CSS3还有一些其它的布局属性：
box-orient——用来确定父容器里子容器的排列方式是水平还是垂直，值如下：
horizontal：将子容器水平排列
inline-axis：将子容器水平排列
block-axis：将子容器垂直排列
vertical：将子容器垂直排列，如果子容器定义了宽（高）度值，其父容器的宽（高）度值设置则无效状态，子容器各自是自己设置的宽（高）值，如果子容器没有设置宽（高）度值才继承父容器的宽（高）值；
inherit：继承父容器排列方式
box-direction——用来确定父容器里的子容器排列顺序，值如下：
normal：默认值，按照HTML文档里结构的先后顺序依次展示
reverse：表示顺序反转
box-align——表示父容器里面子容器的垂直对齐方式，值如下：
start：表示居顶对齐
end：表示居底对齐
center：表示居中对齐
baseline：表示基线对齐
stretch：表示拉伸，拉伸到与父容器等高
box-pack——表示父容器里面子容器的水平对齐方式，值如下：
start：表示水平居左对齐
end：表示水平居右对齐
center：表示水平居中对齐
justify：水平等分父容器宽度（遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）
