box-sizing屬性的使用方法
作者：佚名 時間：2014-06-10 分享到：
通過使用css的box-sizing屬性,我們所提到的單位混合問題可以在一定程序上得到解決,為了解釋這一點,在此簡單地解釋一下下面的代碼示例這個示例中有三個欄,它們之間距離是20px,這意味其總寬度大于頁面的寬度,即它們導致了溢出:
e,g{width:25%;}
f{padding:0 20px;
width:50%}
使用box-sizing屬性可以改變測量寬度的起點邊界,從而使規定寬度包括邊框和填充,在下面的示例中,將border-box值用于box-sizing可以改變元素f以使其寬度包含填充;
f{
box-sizing:border-box;
padding:0 20px;
width:50%;}
現在整個f元素,包括填充在內,占頁面總寬度的50%,所以元素的組合寬度為1000%,這全程它們很好地適應于它們的容器.
一些開發人員覺得box-sizing使用起來十分方便,所以他們主張通過通用選擇器將這個屬性應用于每個元素:
*{box-sizing:border-box;}
但這樣的觀點未免有些偏激,而且還會導致不必要的困難,所以更好的方法是只在實際需要時才使用這個屬性:
div,.etc{box-sizing:border-box;}
但是,使用box-sizing確實有一定的局限性,其中之一就是它不會影響頁邊距,為了適應這一點,可以轉而對長度值進行動態計算.
如沒特殊注明，文章均為上海聯楷網絡原創,轉載請注明來自：http://www.ktcbnqb.cn/hynews/20151126/n3342.html
