常規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;
}