CSS3 box-sizing

box-sizing的值有3個(gè):content-box,border-box,inherit

value description
content-box 在寬度和高度之外繪制元素的內(nèi)邊距和邊框
border-box 為元素指定的任何內(nèi)邊距和邊框都在已設(shè)定的高度和寬度內(nèi)進(jìn)行繪制,通過從設(shè)定的高度和寬度減去內(nèi)邊距和邊框才得到內(nèi)容的寬度和高度
(貌似句子太長碰見“-”會(huì)換行,求大神指點(diǎn))

我們在做頁面的時(shí)候,為了避免div的實(shí)際長度和高度與我們的設(shè)定值不符,我們采用border-box這個(gè)屬性,在全局css中加入如下代碼:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載自(http://web.jobbole.com/83915/) 盒子模型 Box-sizing屬性一直比較陌...
    居客俠閱讀 1,019評(píng)論 0 5
  • 在一個(gè)文檔中,每個(gè)元素都被表示為一個(gè)矩形的盒子。盒子模型具有4個(gè)屬性['外邊距(margin)','邊框(bord...
    weiqinl閱讀 1,429評(píng)論 2 2
  • 轉(zhuǎn)自鏈接 box-sizing屬性可以為三個(gè)值之一:content-box(default),border-box...
    貝貝ovo閱讀 143評(píng)論 0 0
  • box-sizing屬性可以為三個(gè)值之一:content-box(default),border-box,padd...
    MakingChoice閱讀 437評(píng)論 0 1
  • 通往簡單的復(fù)雜 許多了不起的創(chuàng)新設(shè)計(jì),當(dāng)它還沒出現(xiàn)時(shí),所有人都想不出它,但一旦它成型面世,我們就將它的設(shè)計(jì)和功能視...
    四四四毛閱讀 2,304評(píng)論 2 13

友情鏈接更多精彩內(nèi)容