首頁 > web前端 > css教學 > 詳解box-sizing的全面分析

詳解box-sizing的全面分析

高洛峰
發布: 2017-03-07 11:43:58
原創
2340 人瀏覽過

---恢復內容開始---

#box-sizing

##屬性可讓您以特定的方式定義符合某個區域的特定元素。
例如,假如您需要並排放置兩個帶有邊框的框,可透過將 box-sizing 設定為 "border-box"。這可令瀏覽器呈現出具有指定寬度和高度的框框,並將邊框和內邊距放入框中。


語法

box-sizing: content-box|border-box|inherit;

詳解box-sizing的全面分析content-box :w3c標準(預設)

border-box :IE傳統標準

content-box:詳解box-sizing的全面分析.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

test1 中的寬度200px 指的是content的寬度,同理高度也是。

border-box:詳解box-sizing的全面分析.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

詳解box-sizing的全面分析test2 中的寬度200px指的是border的寬度,同理高度也是。

借助上面的例子可以理解padding-box

#######以上這篇關於box-sizing的全面理解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。 ######更多詳解box-sizing的全面分析相關文章請關注PHP中文網! ###
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板