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