布局
布局。
display 设定元素的现实方式。
常用值：block, inline, inline-blokc, none.
block块级元素，默认高度为父级宽度，可以设置宽高。换行显示。
inline:默认宽度为内容宽度，不可以设置宽高的。行级元素无法设定宽高。同行显示。
inline－block：默认宽度为内容宽度，可设置宽高，同行显示。超出的部分，整块换行。
none：元素不显示。下面的元素就会占据他的位置。
注意：visibility:hidden.隐藏，但是占位置。没有脱离文档流。
对比一下块级元素和行级元素。
块级元素：父级元素宽度，可以设定宽高，起始位置换行。
行内元素：内容宽度， 不可以设定宽高， 同行显示。
margin:0 auto;
text-align:center. //行级元素。
inline－block：
position:absolute;
top, left, bottom, left, 设定元素边缘，到参照物边缘的距离。
z-index：默认是0
z-index有栈的概念。父级元素也具有决定性的作用。
position:static|relative|absolute|fixed
static:静态的
relative： 相对定位，仍然在文档流中。块级，换行排列；行内就行内。
相对定位的参照物时元素本身。top:10px; left:-100px;
使用场景是绝对定位的参照物。对其他布局没有影响。
absolute绝对定位。
absolute的标签是相对于上层标签中第一个有position定位的标签，
如果没有这样的标签，就是body。
fixed：固定定位。宽度为默认内容宽度。脱离文档流。下面的元素会上来。
参照物是视窗。就是浏览器。
固定顶栏布局。
<body>
<div class="top">top bar</div>
<div class="mian">main content area</div>
</body>
<style type="text/css">
body {
padding-top:50px;
}
.top {
position:fixed;
top:0;
width:100%;
height:50px;
}
</style>
遮照的布局：
.mask{
position:fixed;
top:0;
left:0;
z-index:100;
width:100%;
height:100%;
}
三行自适应布局
header
main
footer
absolute
top， left， bottom， right.设定。这样，会把div撑开。
两列：
float：left,right,none(默认)，inherit
浮动宽度和默认宽度，脱离文档流。浮动元素，向指定方向移动，移动到不能移动为止 。
float的元素，在同一个文档流中。比如同一个父级元素下面有2个元素，
都是float：left.一次向左。不重叠。
float半脱离文档流的。float不会改在覆盖在其他内容上面的。
对元素，float是脱离文档流的；对内容，在文档流。
内容可以环绕在float标签中。float不会占据内容的区域。
清楚浮动。
clear：both，left，right，none（默认）
应用于浮动元素的后续元素，清除浮动元素对后续元素的影响。
应用于块级元素。
(1)增加一个不显示的空白元素，清除浮动。
<br class="cb">
.cb {
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
clearfix:清除浮动。
(2)在float的父级元素添加clearfix。之后的元素就不会受浮动影响。
.clearfix:after(
content:'.';
display:block;
claer:both;
height:0;
overflow:hidden;
visibility:hidden;)
//IE的低版本，不支持after
.clearfix(zoom:1;)
//间隔自适应，多行，多列自适应。
弹性布局。
flex
display:flex;
在文档流中的直接子元素，才是弹性元素。
排列方向：
flex-direction:row(默认)｜row-reverse|column|column-reverse.
row:行，从左向右，
row-reverse：从右向左，
column:列，从上到下
column－reverse：从下到上。
flex-wrap:nowrap|warp|warp-reverse.
nowrap：不换行
warp：换行
warp-reverse：从后向前，反向换行。
flex－flow:<'flex-direction'> || <'flex-wrap'>
flex-direction：定义弹性盒子元素的排列方向。
flex-wrap：定义弹性盒子元素溢出父容器时是否换行。
order：<interger>,定义排列顺序。
弹性相关：
flex-grow
flex-shrink
flex-basis:main-szie|<width> 设置flex item的初始宽／高
