-
双列布局(左右布局)
如何实现：
浮动元素+普通元素
Paste_Image.png
-
三栏式布局(左中右布局)
两侧两列固定宽度，中间列自适应宽度
三栏式布局
#content:after{
content: '';
display: block;
clear: both;
}
.menu{
width: 100px;
height: 500px;
background: pink;
float: left;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: right;
}
.main{
margin-left: 110px;
margin-right: 210px;
height: 400px;
background: red;
}
<div id="content">
<div class="menu">aside</div>
<div class="aside">aside</div>
<div class="main">content</div>
</div>
效果：
效果
-
圣杯布局
- 是三列布局，两边固定宽度，中间自适应
- 中间内容元素在 dom 元素次序中优先位置
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
padding-left: 100px; /*5*/
padding-right: 150px; /*5*/
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
position: relative; /*6*/
left: -100px; /*6*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
position: relative; /*7*/
left: 150px; /*7*/
}
.main{
height: 350px; /*1*/
background: blue; /*1*/
width: 100%; /*3*/
}
</style>
<div id="content">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
效果：
效果
缺点：.mian的最小宽度不能小于.aside的宽度。（把整个页面的宽度收缩后，会出现布局错乱的效果，因为当页面收缩时，main因为是其父容器content的100%的宽度，所以main也会跟着收缩，当main收缩到比aside宽度还要小，这时候父容器ct的100%宽度<aside的宽度，就不能容纳aside，所以将其挤到了下一行。）
解决：可以给父容器ct加上一个min-width样式，min-width的值不能小于aside和extra两者间的宽度最大值，这样做可以使中间的main的宽度始终比extra和aside大，就不会导致布局错乱了。
-
双飞翼布局
双飞翼布局解决了什么问题呢？
双飞翼布局不仅能满足main处于优先加载的地位，而且更好的解决了圣杯布局的错乱问题，且css代码更简单，缺点是增加了一个标签。
<style>
#content:after{
content: ''; /*8*/
display: block; /*8*/
clear: both; /*8*/
}
#content{
}
.aside, .main, .extra{
float: left; /*2*/
}
.aside{
width: 100px; /*1*/
height: 300px; /*1*/
background: red; /*1*/
margin-left: -100%; /*4*/
}
.extra{
width: 150px; /*1*/
height: 300px; /*1*/
background: yellow; /*1*/
margin-left: -150px; /*5*/
}
.main{
/* background: blue; */ /*第1步添加，第7步注释掉*/
/* height: 350px; */ /*第1步添加，第7步注释掉*/
width: 100%; /*3*/
}
.wrap{
margin-left: 100px; /*6*/
margin-right: 150px; /*6*/
background: blue; /*7*/
height: 350px; /*7*/
}
</style>
<div id="content">
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
效果：
效果
-
实现单行文字垂直居中，设置
line-height等于height；（也可以说把line-heihgt设置为你需要的box的大小可以实现单行文字的垂直居中）
单行文字垂直居中
-
实现高度不固定的多行文字垂直居中，设置上下padding相等；
图中高度是随着内容的变化而变化。
图一
缺点：如果要实现一个弹窗，当你点击一个按钮的时候页面上出现了一个弹框，这时弹窗会出现在页面的中心位置如(图二)。而弹窗的位置是由它的容器来决定的，它的容器是可变的，即容器的高度是可变化的；但是图一中的高度是无所谓的，它只需要上下的缝隙相等即可，而它的高度是由内容来撑开的。要实现图二居中场景可以用下面的绝对定位的方法。
图二
-
绝对定位实现（图二场景）垂直居中
给图二dialog容器设置如下步骤：
设置1：
给容器设置绝对定位
position: absolute
设置2
left: 50%; // 50%是父容器的50%;
效果：会平移父容器的一半；
设置3：
margin-left: (容器本身宽度的一半)，// 注意一定要设置为负数；
效果：这时容器会在父容器中水平居中；
设置4：
top: 50%; //是父容器的50%；
效果： 会平移父容器的一半，不过是容器的左上角在父容器的中心位置。要想容器整体在父容器中垂直居中，需要第四步。
设置5：
marign-top: (容器本身高度的一半); // 注意要用负数哦；
这时就会实现图三效果
图三
注意：当这个元素的高度或者宽度不是固定的时候，那么margin-left和 margin-top的值就会无法确定，此种方法就会无法实现图二垂直居中效果。
不过可以用css3中的属性：transform: translate(-50%， -50%)；来实现如(图四)，使用这个属性的话，不管高度或者宽度是多少都可以实现居中（但此属性在低版本中不能用）。
图四
-
vertical-align实现居中
vertical-align: middle；必须要作用在行内元素和表格上才生效；（如果是一个表格table里面的table-cell，给它加一个vertical-align: middle; 那么表格里面的内容文字就会垂直居中。如果是一个行内元素，比如文字，给它加一个vertical-align: middle; 那么文字之间就会相对于基线来对其；如图：
Paste_Image.png
）
另外图片和文字垂直居中，如下图：
Paste_Image.png
下面可以利用vertical-align: middle;的特性实现图五效果，让一个图片在一个固定宽高的盒子中垂直居中：
图五
实现：
Paste_Image.png
Paste_Image.png
方法2
Paste_Image.png
-
使用table-cell实现垂直居中
这种方法只需要把父容器用display: table-cell; 来实现，这样的话就相当于这个元素像一个表格一样来渲染里面的内容，如下图：
Paste_Image.png
缺点： 把块级元素用display: table-cell;来展现，改变了块级元素的展现方式。
文章著作权归irwenjing所有，转载须说明来源
网友评论