标签：
部分可能不兼容低版本浏览器（比如IE）
部分图片来自网易云课堂，侵、私信、删
（60）定位
①position
②值：
static：默认，无定位
relative：相对定位，仍在文档流之中（其他的元素不变），参照物相对于原来的位置进行定位。会压在其他的元素上面。作用是为绝对定位元素提供参照物。
absolute：绝对定位，脱离文档流（后续元素会在绝对定位元素的前序元素的后面），默认宽度是内容宽度，参照物是第一个定位的祖先/根元素（根元素是html元素），如果祖先没有定位元素，那么会导致其参照物是html。
（应用场景：比如轮播图，通过相对定位——背景图和绝对定位——标题、轮播按钮结合）
fixed：固定定位，脱离文档流，默认宽度是文本宽度，参照物是视窗（我觉得可以认为是浏览器可视范围），假如其bottom:0px，浏览器上下有滚动条——html高度大于浏览器可视范围高度，那么这个元素将一直位于浏览器可视范围的底部（而不是html的最底部））。（IE6不兼容）
应用场景：固定顶栏（无论怎么滚动，都在浏览器的上方，同理也有底栏）；
③位置属性（描述所在位置）：
top、right、bottom、left
只有在设置position属性的前提下，才能生效
假设4个方向都被设置，会导致元素被撑开。
z-index：越高的值，排序更前（即高的覆盖低的），默认为0。
④z-index的栈 概念：
祖先元素的z-index的值更高的，将覆盖祖先元素的z-index的值更低的元素。（需要假设这两个祖先元素是在同一个父元素下）。
如图：
如果z-index一样的话，文档流在更后面的，将覆盖在前面的上面。
（61）遮罩
①利用固定定位：position:fixed
②另外需要设置z-index，
一般设置为：
{
position:fixed;
z-index:999;
top:0;
left:0;
height:100%;
width:100%;
background-color:#000;
opacity:0.3;
}
（62）三行自适应布局
①指顶栏最上、底部的最下、中间的内容区高度自适应；
②例子：
.top
{
position:absolute;
top:0; /*上为0*/
left:0;
height:100px; /*顶部的高度*/
width:100%;
background-color:#eee;
}
.body
{
position:absolute;
bottom:100px; /*和下方距离100px*/
top:100px; /*和上方距离100px*/
left:0; /*由于设置了四个方向所以撑满高度*/
right:0; /*由于设置了四个方向所以撑满宽度*/
background-color:#ccc;
overflow:auto;
}
.foot
{
position:absolute;
bottom:0; /*和下方距离0*/
left:0;
height:100px; /*顶部的高度*/
width:100%;
background-color:#aaa;
}
注意：body不能高度和宽度设置为100%（因为会相对于其父元素<body>标签）
③于是可以在中间的class="body"里面设置高度为5000px（那么中间部分会出现滚动条）；
④需要注意的是：
<1>中间部分若过短的话，会导致可能和下方foot留有空白；
<2>若想让下方自适应，那么中间的元素（？或者所有子元素？）设置为绝对定位（脱离文档流）会导致下方直接跟到head后面去。
（64）浮动float
①float
②值：
left 向左浮动
right 向右浮动
③特点：
默认宽度——内容宽度（但可以通过width和height设置）；
脱离文档流（非完全脱离）；
向指定方向一直移动（根据值），移动到不能移动为止
④float的元素，在同一个文档流（所以同一个文档流中的float元素，不会重叠）；
float，对元素而言，脱离文档流；对内容，在文档流（不会遮挡内容）；
为了说明上面那点，来一个代码：
<html>
<head>
<metacharset=utf-8"/>
<style>
.a{
width:500px;
height:150px;
background-color:green;
}
#b{
float:left;
width:50px;
height:50px;
background-color:#ccc;
}
#c{
width:50px;
height:100px;
background-color:#aaa;
}
</style>
</head>
<body>
<div class="a">
<divid="b">
ABC
</div>
<divid="c">
FEDCBA
</div>
</div>
</body>
</html>
b的高度是50px；c的高度是100px。在没有float的情况下，b和c的高度正好撑满了外面的div（因为div是块级元素，所以默认情况下他们不会同行显示）；
若完全脱离文档流，那么会导致b和c重叠，即无法看到c（把float改为position:absolute;）或者b（两个都加上position:absolute;）的内容。
然而，使用float的实际情况如图：
A挡住了B的一部分，但是并没有挡住B的内容（注意，是内容FEDCBA，而不是content区域）；
⑤所以可以利用float会使内容不会被遮挡的特性，来达成某些目的。
潜在问题：假设float元素在A块中，但由于其脱离文档流的特性，其高度／宽度不会被Ａ块所考虑。假设float元素的高度比A块要大，到了B块的范围内了。
会导致float元素覆盖B块的区域，B块的内容将避开该区域。
如图：
⑥解决占用后续元素位置空间的办法：
clear
值：
both、left、right、none（默认）、inherit（继承）
特点：
应用于float的后续元素＋块级元素；
方法一：
在float元素后，你想要清除浮动的地方，加一个块，然后给其附上clear:both的css属性。这里是一个加空块的示例：
HTML：<divclass="clearfloat"></div>
CSS：
.clearfloat{
width:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
举个例子，假设有A块和B块，然后A块有子块a1块和a2块（div）。而a1块是float元素。（注意，除a1块和B块之外，都没有设置高度）
正常情况下：a2块位于a1块右边（行级元素），a1块因为设置css样式时高度比较高，占用了B块的一部分（遮挡了部分B块的区域）；
《1》在a2块前加入这个标签，于是a2块出现在a1块的下方（浮动无效），A块的float元素没有遮挡B块，A块和B块的正常的相对位置。另外，a1块后a2块前，是属于A块的部分。
《2》在A块后加入这个标签，a2块依然位于a1块后面（浮动有效），但是B块不再被遮挡。另外，A块后，B块前有一部分，其属于A、B的父元素的区域。
《3》在a2块中加入这个标签（内容前和内容后两种情况），内容前则a2的内容在a1的下方，内容后则a2的内容在a1的右方。另外，这两种情况，a1块后都是a2块的部分。
总结：
也就是说，在不设置浮动元素的父元素、兄弟元素的高度情况下，其父元素、兄弟元素的高度，可以根据 clearfloat所在的标签来自适应。
（注：若设置的话，则不能自适应）
附HTML代码，可以自己试试放在不同的情况。
<html>
<head>
<metacharset=utf-8"/>
<style>
.main{
width:500px;
height:200px;
background-color:#ddd;
}
.A{
width:100px;
background-color:blue;
outline:2px dashed blue;
}
.a1{
height:100px;
float:left;
background-color:#ccc;
}
.a2{
background-color:green;
}
.clearfloat {
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.B{
width:100px;
height:100px;
background-color:Yellow;
}
</style>
</head>
<body>
<div class="main">
<divclass="A">
<divclass="a1">
aaa
</div>
<divclass="a2">
bbbb
<br class="clearfloat"/>
</div>
</div>
<divclass="B">
ppp
</div>
</div>
</body>
</html>
方法二：
设置一个类class="clearfloat"，然后利用伪类选择器“:after”，来给该样式的块后面添加一个块级元素。当你想要清除某个块的float浮动时，给其添加一个clearfloat的class即可。
例如CSS样式：
.clearfloat:after{
content:".";
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
你想要清除A块之后的浮动（达成上面《2》的目的），在A块的标签class属性中，像这样<divclass="Aclearfloat">添加绿色字体部分即可。
如果想要达成上面《1》中的目的，那么在a2的样式中添加clear:both这条CSS属性即可。
注意，不知为何，在float元素中添加.clearfloat，然后利用其after是无效的。可能是因为after依然属于float元素吧。
总结：
也就是说，如果通过加样式的方法，若是想从哪个元素之后，float的浮动不生效，那么就在其的class加入上述代码（float元素本身不可加）。
若是从哪个元素开始，float浮动不生效，那么就把伪类选择器的after改为before，并在这个元素的class中加入clearfloat即可。
⑦对于IE不支持伪类选择器after的处理方式：
添加：
.clearfloat{zoom:1;}来处置（具体不懂，用的时候再说）
⑧应用场景：
对于三行两列布局（两列浮动），对中间那行的标签，添加clearfloat的样式。
（65）弹性布局flex
flex对IE9及以下不兼容，主要应用于移动web页面中
①display: flex;
②在父元素中设置display: flex;，那么其子元素就可能是弹性元素。
弹性元素有：
《1》子元素中的块级元素、float元素，行级元素；
非弹性元素有：
《1》脱离文档流的元素（position:absolute），孙元素；
③flex-direction: 弹性的方向
值：
row 默认，行（从左到右）
row-reverse 反向行（从右到左）
column 列（从上到下）
column-reverse 反向列（从下到上）
④如代码：
<html>
<head>
<metacharset=utf-8"/>
<style>
.main{
width:500px;
height:200px;
background-color:#ddd;
display:flex;
flex-direction:row;
}
.a{
background:red;
margin:5px;
text-align:center;
line-height:50px;
}
</style>
</head>
<body>
<div class="main">
<divclass="a">
A
</div>
<divclass="a">
B
</div>
<divclass="a">
C
</div>
</div>
</body>
</html>
解释：
《1》排列方向会依次排列，如果排列方向的宽高（比如方向row则为width）大于总宽高（3个元素，每个width为200px，总width为300px），那么其宽度将自适应（从200px变为100px）
《2》非排列方向会撑满高度。（不设置其宽高的情况下，比如方向row元素的height未设置）
《2》方向有点类似float的顺序，
⑤flow-wrap 换行设置
值：
nowrap 不换行（默认）
wrap 换行
wrap-reverse 反向换行
解释：
《1》假设排列方向row，总宽度300px，单个元素宽度200px。总高度100px，单个高度未设置。
《2》不换行的情况下，其宽度自适应为100px；
《3》wrap的情况下，宽度为200px（每行只能放一个），高度为自适应（33.3px），顺序从上往下；
《4》wrap-reverse的情况下，宽度为200px，高度自适应（33.3px），顺序是从下往上。
《5》假设单个高度设置为100px，那么只能容纳一个，剩下的将溢出（到父块外面去了）。若设置overflow:hidden，那么超出部分将不会显示。
如代码：
<html>
<head>
<metacharset=utf-8"/>
<style>
.main{
width:300px;
height:100px;
background-color:#ddd;
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
.a{
background:red;
margin:5px;
width:200px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<divclass="a">
A
</div>
<div class="a">
B
</div>
<divclass="a">
C
</div>
</div>
</body>
</html>
⑥flex-flow: 理解为flex-direction和flex-wrap的缩写
值：
是flex-direction和flex-wrap的值，可以写一个，也可以写两个；
默认值是：
flex-flow:row nowrap;
⑦order 顺序
值：number，是一个数字，初始值是0
排列的时候，先排列order值小的，再排列order值大的。
假设一个的order属性的值设置为1，那么值为0的按顺序排列之后，才会排列值为1的。
值可以是负值。
⑧flex-basis flex元素的初始宽高（推测是根据方向决定是width还是height）
值：
main-size 主轴方向的宽高（例如row则是元素内容的宽度）
width 也可以设置为像100px这样的。
如果值是0的话，则没有宽高，但文字会溢出显示。
⑨flex-grow 弹性空间分配
值：number 默认值为0，可以是1或者更多
效果：将多余空间，按照flex-grow的属性值占全部flex-grow的和的比例，分配给各个元素。
假设总宽度是200px，3个元素的宽度为50px，那么只占用了150px（剩余50px没有被使用）。
若其中一个元素设置flex-grow:1; 那么这个元素的宽度将变为50px（初始）+50px（未被占用的）=100px的宽度。
若其中两个都是值1，那么这2个元素分别拿走25px的宽度；
若一个是值4，一个值是1，那么值4的拿走40px，值1的拿走10px；
如果基数是0，两个值1，一个值2，那么值2的宽度（100px）是值1宽度（50px）的两倍。
⑩flex-shrink 对于剩余空间为负的值的处理
值：number 默认为1
假如3个元素每个元素宽度为200px，总宽度为300px，那么因为自适应，则每个元素变为100px（不换行的情况下）。三个元素分别减少了100px（平分超出的300px）
假设其中两个是默认值，另外一个值为2。那么值为2的元素，减少了150px（剩余50px），值为1的两个元素，分别减少75px（剩余125px）
也就是说，值越大的，减少的越多。
【11】flex: 缩写
值：flex-grow flex-shrink flex-basis 多、少、基础
默认值：0 1 main-size
可以不全写，但若写一个，则默认是flex-grow的值
（66）flex对齐
和flex有关，是父元素的属性
①justify-content 设置主轴方向的对齐方式
值：
如图：（灰色部分为剩余空间）
②align-items: 设置辅轴方向的对齐方式
值：如图（默认值是flex-start，需要设置子元素高度后才有效）
③align-self:
设置单个元素（非父元素属性），在辅轴方向的对齐方式。
值参考align-items
④align-content: 对于多行元素的辅轴方向对齐方式
值如图：
（67）三行两列自适应布局
①首先设置三行（中间一行自适应）的布局；
《1》body和html设置为height:100%
《2》body设置display:flex; 然后设置head和foot的高度（由于flex的特性，其宽度将自适应）；
《3》设置中间部分的main的CSS属性为flex:1（这里的1表示对多余空间的分配，全部被中间拿走），于是中间高度撑满；
此时三行布局完成。
②设置两列自适应；
《1》首先确定中间这一行的宽度如何，是定宽，还是为自适应。自适应则不需要设置（因为其父元素默认非主轴宽高为自适应），如果是定宽，则设置其宽度。
《2》决定两列的布局方式，是铺满，或者左、中、右有缝隙；
《3》其次确定左右列的情况，是定宽，还是按比例宽（比如左1右2）；
《4》定宽设置flex-basis属性，按比例宽度则设置flex-grow。
《5》此时，基本两列的情况已定。
③示例代码：
上下两行撑满，中间那行定宽且居中，左右两行根据比例分配宽度，且中间有缝隙（10px）
<html>
<head>
<metacharset=utf-8"/>
<style>
html,body{
height:100%;
}
body{
display:flex;
flex-flow:column;
}
.head,.foot{
background:#ddd;
line-height:100px;
}
.main{
flex:1;
display:flex;
width:1000px;
justify-content:center;
align-self:center;
}
.left{
flex:2;
margin-right:10px;
background:red;
}
.right{
flex:1;
background:blue;
}
</style>
</head>
<body>
<div class="head">
head
</div>
<div class="main">
<divclass="left">
left
</div>
<divclass="right">
right
</div>
</div>
<div class="foot">
foot
</div>
</body>
</html>
从零开始学_JavaScript_系列（17）——CSS<4>（定位、遮罩、float、弹性布局flex）
标签：
原文地址：http://blog.csdn.net/qq20004604/article/details/51333471
