今天就總結(jié)一下CSS中幾種常用的布局方式和居中方式蹬叭。
1. 左右布局
網(wǎng)頁布局常見左右兩列布局父腕，左側(cè)欄是固定寬度。右側(cè)欄自適應(yīng)寬度畔裕。
想要達(dá)到效果只需給左側(cè)設(shè)置固定寬度，并且浮動(dòng)乖订。
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="box1">左側(cè)布局</div>
<div class="box2">右側(cè)布局</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.左中右布局
基本思路與兩列布局一樣扮饶，給左右兩列布局設(shè)置固定寬度并且分別設(shè)置左右浮動(dòng)。
然后對中間的布局不用設(shè)置寬度垢粮，只需設(shè)置左右側(cè)外邊距贴届，寬度為左右側(cè)列的寬度。
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.水平居中
水平居中分兩種蜡吧，一種是行內(nèi)元素一種是塊級元素毫蚓。
(1)行內(nèi)元素：
將父元素中的text-align設(shè)置居中屬性。則子元素的行內(nèi)元素便會居中昔善。
HTML code
<div class="container">
<span class="content">hello world</span>
</div>
CSS code
.container {
text-align:center;
}
(2)塊級元素：
給塊級元素設(shè)置寬度元潘，同時(shí)設(shè)置外邊距便可達(dá)到效果。
HTML code
<div class="container">
HELLO WORLD
</div>
CSS code
.container {
width:500px;
height:300px;
background:blue;
margin:0 auto;
}
效果如下：
4.垂直居中
垂直居中這里也介紹三種種方式君仆。
（1）在父元素設(shè)置寬高的情況下翩概，給子元素設(shè)置行高等同于其父元素高度時(shí)，達(dá)到居中效果返咱。
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;
}
效果如下：
（2）給父元素設(shè)置固定寬高钥庇，給需要設(shè)置居中的子元素的偽元素設(shè)為inline-block類型然后設(shè)置高度為100%，vertical-align居中屬性咖摹。最后將該元素也設(shè)置為垂直居中即可评姨。
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）將元素設(shè)置為table-cell屬性進(jìn)行編輯。
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）給元素設(shè)置浮動(dòng)時(shí)一定要給其父元素設(shè)置清除浮動(dòng)吐句。
代碼如下：
.clearfix::after{
content:' ' ;
display:block;
clear:both;
}
（2）在編輯css的時(shí)候經(jīng)常會不知道盒模型大小及位置胁后。這時(shí)可以給元素設(shè)置一個(gè)border。
border:1px solid red;
這樣會使盒模型清晰的多嗦枢，最后編輯完成刪除該屬性即可攀芯。
（3）要善用工具。
取色：colorpix文虏；
測量外邊距或內(nèi)邊距：QQ自帶截圖工具侣诺。
一些常用的CSS網(wǎng)站：
CSS tricks:google搜索css tricks shape。
