CSS的布局与居中
今天就总结一下CSS中几种常用的布局方式和居中方式。
1. 左右布局
网页布局常见左右两列布局，左侧栏是固定宽度。右侧栏自适应宽度。
想要达到效果只需给左侧设置固定宽度，并且浮动。
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="box1">左侧布局</div>
<div class="box2">右侧布局</div>
</div>
</body>
</html>
CSS code
.container{
width:1100px;
height:700px;
}
.box1{
width:500px;
height:100%;
background-color:red;
float:left;
}
.box2{
height:100%;
background-color:blue;
}
效果如下图：
左右布局
2.左中右布局
基本思路与两列布局一样，给左右两列布局设置固定宽度并且分别设置左右浮动。
然后对中间的布局不用设置宽度，只需设置左右侧外边距，宽度为左右侧列的宽度。
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
</div>
</body>
</html>
CSS code
.container{
width:1000px;
height:300px;
margin:0 auto;
}
.left{
width: 200px;height: 300px; background: yellow; float: left;
}
.right{
width: 150px; height: 300px; background: green; float: right;
}
.middle{
height: 300px; background: red; margin-left: 200px; margin-right: 150px;
}
效果如下：
左中右布局
3.水平居中
水平居中分两种，一种是行内元素一种是块级元素。
(1)行内元素：
将父元素中的text-align设置居中属性。则子元素的行内元素便会居中。
HTML code
<div class="container">
<span class="content">hello world</span>
</div>
CSS code
.container {
text-align:center;
}
(2)块级元素：
给块级元素设置宽度，同时设置外边距便可达到效果。
HTML code
<div class="container">
HELLO WORLD
</div>
CSS code
.container {
width:500px;
height:300px;
background:blue;
margin:0 auto;
}
效果如下：
块级元素水平居中
4.垂直居中
垂直居中这里也介绍三种种方式。
（1）在父元素设置宽高的情况下，给子元素设置行高等同于其父元素高度时，达到居中效果。
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<h1>HELLO WORLD</h1>
</div>
</body>
</html>
CSS code
.container{
width:500px;
height:200px;
background: #ccc;
line-height:200px;
}
效果如下：
垂直居中1
（2）给父元素设置固定宽高，给需要设置居中的子元素的伪元素设为inline-block类型然后设置高度为100%，vertical-align居中属性。最后将该元素也设置为垂直居中即可。
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<img src="http://img2.niushe.com/upload/201304/19/14-22-31-71-26144.jpg" alt="GITHUB">
</div>
</body>
</html>
CSS code
.container{
width:1000px;
height:800px;
background: #ccc;
line-height:200px;
text-align:center;
}
.container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.container>img{
vertical-align: middle;
background:blue;
}
效果如下：
第二种垂直居中方式
（3）将元素设置为table-cell属性进行编辑。
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<img src="http://img2.niushe.com/upload/201304/19/14-22-31-71-26144.jpg" alt="GITHUB">
</div>
</body>
</html>
CSS code
.container{
width:1000px;
height:800px;
background: #ccc;
line-height:200px;
text-align:center;
display:table-cell;
text-align:center;
vertical-align:middle;
}
效果与上图一致。
5.其他小技巧
（1）给元素设置浮动时一定要给其父元素设置清除浮动。
代码如下：
.clearfix::after{
content:' ' ;
display:block;
clear:both;
}
（2）在编辑css的时候经常会不知道盒模型大小及位置。这时可以给元素设置一个border。
border:1px solid red;
这样会使盒模型清晰的多，最后编辑完成删除该属性即可。
（3）要善用工具。
取色：colorpix；
测量外边距或内边距：QQ自带截图工具。
一些常用的CSS网站：
CSS tricks:google搜索css tricks shape。
