1、定位
1.1 静态定位
默认行为
1.2 相对定位
position: relative;
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。
1.3 绝对定位
配合使用top，bottom，left和right
被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除。
注意：绝对定位是相对于设置有display:relative的祖先元素，如果没有，最终会相对于<html>元素。
1.4 固定定位
position:fixed
固定定位元素不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
1.5 堆叠顺序
z-index:1;
z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），如果元素是没有定位的，对其设置的z-index会是无效的。
查看例子
2、弹性盒子
使用弹性盒子可以方便且灵活地实现
1）在父内容里面垂直居中一个块内容。
2）使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
3）使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
3 、对齐方式
3.1 水平居中
1）行内元素的水平居中
如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素
2）块状元素的水平居中（定宽）
当被设置元素为定宽块级元素时用 text-align：center 就不起作用了。可以通过设置“左右margin”值为“auto”来实现居中的。
3）块状元素的水平居中（不定定宽）
可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果。当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block（设置为 行内元素 显示或行内块元素）
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
css代码：
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
3.2 垂直居中
<div class="wrap line-height">
<span class="span">111111</span>
</div>
首先设定两个条件即父元素是盒子容器且高度已经设定。
1）子元素是行内元素，高度是由其内容撑开的。
这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中：
css代码：
.wrap{
width:200px ;
height: 300px;
line-height: 300px;
border: 2px solid #ccc;
}
.span{
background: red;
}
2）子元素是块级元素但是子元素高度没有设定
通过给父元素设定display:table-cell;vertical-align:middle来解决：
css代码：
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
display: table-cell;
vertical-align: middle;
}
.non-height{
background: green;
}
3）子元素是块级元素且高度已经设定
计算子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2：
css代码：
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
}
.div1{
width:100px ;
height: 100px;
margin-top: 100px;
background: darkblue;
}
3.3 水平垂直居中
1）水平对齐+行高
text-align + line-height实现单行文本水平垂直居中
<div class="test" style="background-color: lightblue;width: 200px;">测试文字</div>
css代码：
.test{
text-align: center;
line-height: 100px;
}
2）水平+垂直对齐
- text-align + vertical-align
在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素。
<div class="parent" style="background-color: gray; width:200px; height:100px;">
<div class="child" style="background-color: lightblue;">测试文字</div>
</div>
css代码：
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
}
2.若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle
<div class="parent" style="background-color: gray; width:200px; ">
<img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</div>
css代码：
.parent{
text-align: center;
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
4、圣杯布局
圣杯布局允许：
）有一个固定宽度侧边栏的流体中心，
2）允许中心列首先出现在源代码中，
3）允许任何列成为最高，
4）只需要一个额外div的标记
5）需要非常简单的CSS，最少代码兼容
5、双飞翼布局
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
6、元素的BFC特性与自适应布局
BFC：块级格式化上下文，常见触发BFC的条件：
1）float的值不为none。
2）overflow的值为auto,scroll或hidden。
3）display的值为table-cell, table-caption, inline-block中的任何一个。
4）position的值不为relative和static。
自适应布局实现的CSS代码：
1）overflow:auto/hidden IE7+
2）display:inline-block IE6/IE7
3）display:table-cell IE8+
清除浮动的通用类语句：
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: ''; display: table; clear: both;
}
两栏或多栏自适应布局的通用类语句是（block水平标签，需配合浮动）：
.cell {
display: table-cell; width: 9999px;
*display: inline-block; *width: auto;
}
网页宽度自适应布局三种方法:
1）绝对定位法
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
css代码：
html,body{margin:0; height:100%;}
#left,#right{position:absolute; top:0; width:200px; height:100%;}
#left{left:0; background:#a0b3d6;}
#right{right:0; background:#a0b3d6;}
#main{margin:0 210px; background:#ffe6b8; height:100%;}
2）margin负值法
首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（例子为左浮动），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100% margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。
<div id="main">
<div id="body"></div>
</div>
<div id="left"></div>
<div id="right"></div>
css代码：
html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#main #body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}
3）自身浮动法
左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
css代码：
html,body{margin:0; height:100%;}
#main{height:100%; margin:0 210px; background:#ffe6b8;}
#left,#right{width:200px; height:100%; background:#a0b3d6;}
#left{float:left;}
#right{float:right;}
网友评论