詳解CSS3中的box-sizing（content-box與border-box）
發(fā)布時間：2019-04-19 15:40:24 作者：佚名 
我要評論
我要評論這篇文章主要介紹了CSS3中的box-sizing（content-box與border-box）的相關資料,需要的朋友可以參考下
CSS3中的box-sizing（content-box與border-box）
CSS3中的box-sizing 屬性允許以特定的方式來指定盒模型，有兩種方式：
content-box：標準盒模型，又叫做 W3C盒模型，一般在現(xiàn)代瀏覽器中使用的都是這個盒模型
border-box：怪異盒模型，低版本IE瀏覽器中的盒模型
現(xiàn)代瀏覽器和IE9+默認值是content-box。
語法格式：
box-sizing：content-box | border-box
區(qū)別：
content-box：padding和border不被包含在定義的width和height之內(nèi)。
盒子的實際寬度=設置的width+padding+border
border-box：padding和border被包含在定義的width和height之內(nèi)。
盒子的實際寬度=設置的width（padding和border不會影響實際寬度）
總結
以上所述是小編給大家介紹的CSS3中的box-sizing（content-box與border-box），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了使用CSS的border-radius屬性 設置圓弧,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-26
這篇文章主要介紹了使用CSS的border屬性繪制各種幾何形狀的方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們2019-03-01
這篇文章主要介紹了CSS繪制三角形的實現(xiàn)代碼(border法)的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-11- 本篇文章主要介紹了CSS3 用border寫 空心三角箭頭 (兩種寫法)，非常具有實用價值，需要的朋友可以參考下2017-09-29
- 這是一款由腳本之家翻譯自國外網(wǎng)站的在線CSS工具，可在線調(diào)整生成樣式的邊框圓角效果，以及邊框的寬度、顏色、樣式等屬性，還可實時預覽生成的CSS代碼，并支持一鍵復制代碼2017-09-19
css display inline block 兼容性問題寫法
今天在寫布局的時候發(fā)現(xiàn)的一個bug，如果不這樣就達不到預期的效果，無法兩行排列，原來ie6、ie7下對display:inline-block不支持，所以需要用到css hack才可以2016-01-10- css3給display屬性提供了box這個值，極大的方便了開發(fā)者，下面給大家介紹css3 display box具體用法,對css3 display box相關知識感興趣的朋友一起學習吧2015-11-25
- 本篇文章給大家介紹css3 display知識詳解，涉及到css3 display相關知識，感興趣的朋友一起學習吧2015-11-25
深入解析CSS的display:inline-block屬性的使用
這篇文章主要介紹了CSS的display:inline-block屬性的使用,其中對使用時產(chǎn)生的空隙問題的解決作了重點講解,需要的朋友可以參考下2015-11-09- 在一般的CSS布局制作時候，我們常常會用到display對應值有block、none、inline這三個值。下面我們來分別來認識和學習什么時候用什么值。這里通過CSS display知識加實例講解2014-09-02
