CSS3 方框大小調(diào)整box-sizing
box-sizing屬性是CSS3中BOX屬性之、而且box-sizing屬性和box-model的關(guān)系非同一般。box-sizing屬性也遵循了盒子模型的原理，它允許以特定的方式定義匹配某個(gè)區(qū)域的特定元素。
例如，需要并排放置兩個(gè)帶邊框的框，可將box-sizing設(shè)置為border-box。這樣瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中7語法如下：
box-sizing: content-130x1 border- box | inherit:
box-sizing的屬性可以是以下幾種：
?content-box：這是由CSS2.1規(guī)定的寬度和高度行為。寬度和高度分別應(yīng)用到元素的內(nèi)容框。 在寬度和高度之外，繪制元素的內(nèi)邊距和邊框。
?border-box：為元素設(shè)定的寬度和高度決定了元素的邊框盒。為元素指定的任何內(nèi)邊距和邊框 都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到 內(nèi)容的寬度和高度。
?inherit：規(guī)定應(yīng)從父元素繼承box-sizing屬性的值。
下面主要介紹border-box值的用法。例如，在頁面中需要手動(dòng)畫出一個(gè)按鈕div ( 200*50 ), 在按鈕中間有一個(gè)圓形的div(30*30),現(xiàn)在要讓這個(gè)圓形的div在方形的按鈕上居中。按照傳統(tǒng)的做法，只能去設(shè)置圓形div的margin以達(dá)到讓其居中的目的，還要考慮到它的父級是否也有margin值，否則會(huì)產(chǎn)生外邊距合并的問題。傳統(tǒng)的做法需要考慮的方面太多，不方便。
其實(shí)；可以換一種思路，不對圓形div進(jìn)行操作，而是讓方形按鈕擁有內(nèi)邊距?？梢允褂胋ox-sizing屬性設(shè)置內(nèi)邊距。
【例題】使用box-sizing屬性
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
width: 200px;
height: 50px;
border-radius: 10px;
background: #f46;
margin:10px;
position:relative;
}
.d2{
padding:10px 85px;
width: 30px;
height: 30px;
}
.circle{
width: 30px;
height: 30px;
border-radius: 15px;
background: #fff;
}
.c1{
top:10px;
left:85px;
position:absolute;
}
.d3{
box-sizing: border-box;
padding:10px 85px;
}
</style>
</head>
<body>
<div class="btn d1">
<div class="circle c1"></div>
</div>
<div class="btn d2">
<div></div>
</div>
<div class="btn d3">
<div></div>
</div>
</body>
</html>
湘公網(wǎng)安備:43011102000856號 
點(diǎn)擊加載更多評論>>