常規CSS佈局例項
1。左中右佈局
3個
我用
display
： inline-block；把
注意
display
： inline-block；要跟
vertical-align
： top聯用，以防排版出現奇怪的BUG。
另外16行nth-child（3）是偽類選擇器，表示把第三個
也可以用
float
： left；把
。clearfix：：after{
content： “”；
display： block；
clear： both；
}
並在它的父標籤加上
class="clearfix"
，不然同樣也有奇怪的BUG出現。
2。水平居中
同樣有兩種方法
如果你是用
display
： inline-block；就在它的父標籤加上
text-align
： center；就可以了，
text-align就是文字排列的意思，是用來設定行內元素的。
如果你用
float
： left；來做的話，再居中就麻煩了。
先給
position
： absolute；相對定位到
position
： relative；
然後還要逐個
3。垂直居中
首先要把預設樣式清理乾淨；
*{
margin： 0；
padding： 0；
}
然後在水平居中的基礎上我設定了藍色邊框和高度方便大家觀看
而且為了方便計算，我添加了
box-sizing： border-box；
把盒模型的border和padding都算在寬高裡面。
然後用
margin-top： 220px；
至於220px怎麼來，當然是算出來。
如果你用浮動來做的話也是跟水平居中一樣，直接用top屬性來調就好了。
如果你是行內元素的話，還有一種很常用的方法，
把line-heigh的值設定成height一樣就行了，不過要注意，如果數值太大的話會有BUG。
還有一種取巧的方法，將行內元素變成表格，具體如下
div{
border： 3px solid green；
width： 400px；
height： 400px；
display： table；
}
div>。text{
display：table-cell；
border： 1px solid red；
vertical-align： middle；
text-align： center；
}
還有一種比較常見的聖盃佈局
HTML如下：
CSS如下：
。clearfix：：after{
contain： “”；
display： block；
clear： both；
}
body 。top{
background： blue；
width： 400px；
height： 100px；
}
body 。body{
background： yellow；
width： 400px；
height： 200px；
}
body 。foot{
background： green；
width： 400px；
height： 100px；
}
body 。body 。body1{
background： red；
width： 200px；
height： 200px；
float： left；
}
body 。body 。body2{
background： black；
width： 200px；
height： 200px；
float： left；
}