CSS3 方框大小調整box-sizing
box-sizing屬性是CSS3中BOX屬性之、而且box-sizing屬性和box-model的關系非同一般。box-sizing屬性也遵循了盒子模型的原理，它允許以特定的方式定義匹配某個區(qū)域的特定元素。
例如，需要并排放置兩個帶邊框的框，可將box-sizing設置為border-box。這樣瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內邊距放入框中7語法如下：
box-sizing: content-130x1 border- box | inherit:
box-sizing的屬性可以是以下幾種：
?content-box：這是由CSS2.1規(guī)定的寬度和高度行為。寬度和高度分別應用到元素的內容框。 在寬度和高度之外，繪制元素的內邊距和邊框。
?border-box：為元素設定的寬度和高度決定了元素的邊框盒。為元素指定的任何內邊距和邊框 都將在已設定的寬度和高度內進行繪制。從已設定的寬度和高度分別減去邊框和內邊距才能得到 內容的寬度和高度。
?inherit：規(guī)定應從父元素繼承box-sizing屬性的值。
下面主要介紹border-box值的用法。例如，在頁面中需要手動畫出一個按鈕div ( 200*50 ), 在按鈕中間有一個圓形的div(30*30),現(xiàn)在要讓這個圓形的div在方形的按鈕上居中。按照傳統(tǒng)的做法，只能去設置圓形div的margin以達到讓其居中的目的，還要考慮到它的父級是否也有margin值，否則會產(chǎn)生外邊距合并的問題。傳統(tǒng)的做法需要考慮的方面太多，不方便。
其實；可以換一種思路，不對圓形div進行操作，而是讓方形按鈕擁有內邊距。可以使用box-sizing屬性設置內邊距。
【例題】使用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號 
點擊加載更多評論>>