資訊專欄INFORMATION COLUMN
摘要：和被包含在定義的和之內(nèi)。這是當(dāng)文檔處于模式時(shí)使用的盒模型。注意，填充和邊框?qū)⒃诤凶觾?nèi)例如導(dǎo)致在瀏覽器中呈現(xiàn)的寬度為的盒子。文章乃參考轉(zhuǎn)載其他博客所得，僅供自己學(xué)習(xí)作筆記使用
box-sizing：content-box | border-box
content-box? 是默認(rèn)值。如果你設(shè)置一個(gè)元素的寬為100px，那么這個(gè)元素的內(nèi)容區(qū)會(huì)有100px寬，并且任何邊框和內(nèi)邊距的寬度都會(huì)被增加到最后繪制出來的元素寬度中。
border-box?告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說，如果你將一個(gè)元素的width設(shè)為100px,那么這100px會(huì)包含其它的border和padding，內(nèi)容區(qū)的實(shí)際寬度會(huì)是width減去border?+ padding的計(jì)算值。大多數(shù)情況下這使得我們更容易的去設(shè)定一個(gè)元素的寬高。
?
border-box??width?和?height?屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距。這是當(dāng)文檔處于 Quirks模式 時(shí)Internet Explorer使用的盒模型。注意，填充和邊框?qū)⒃诤凶觾?nèi) , 例如,?.box {width: 350px; border: 10px solid black;}?導(dǎo)致在瀏覽器中呈現(xiàn)的寬度為350px的盒子。內(nèi)容框不能為負(fù)，并且被分配到0，使得不可能使用border-box使元素消失。?文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1336.html
摘要：流體布局下的寬度分離原則寬度分離原則就是將獨(dú)立占用一層標(biāo)簽而利用流動(dòng)性在內(nèi)部自適應(yīng)呈現(xiàn)。為了不影響之前的布局我們需要重新計(jì)算的寬度。但是不支持屬性還是需要手動(dòng)計(jì)算值。使用不建議使用通配符設(shè)置盒模型。 css流體布局下的寬度分離原則 寬度分離原則就是將width獨(dú)立占用一層標(biāo)簽,而border、margin、padding利用流動(dòng)性在內(nèi)部自適應(yīng)呈現(xiàn)。 為什么要寬度分離 分離是為了便于維護(hù)...
摘要：一盒模型一個(gè)頁面由許多元素組成，而每一個(gè)元素都可以表示為一個(gè)矩形的盒子，盒模型正是描述這些矩形盒子的存在。外邊距區(qū)域用空白區(qū)域擴(kuò)展邊框區(qū)域，以分開相鄰的元素。的開源框架就全局設(shè)置了，由此可見盒模型的是比較受歡迎的。一、盒模型 一個(gè)web頁面由許多html元素組成，而每一個(gè)html元素都可以表示為一個(gè)矩形的盒子，CSS盒模型正是描述這些矩形盒子的存在。 MDN的描述： When laying...
摘要：的作用了解完這兩種盒模型后，在介紹一下，他一共有種值，，。就是繼承父元素的值，這里不做介紹。比如我們想做一個(gè)內(nèi)邊距，邊框?yàn)?，最終包括邊框?qū)挾葹榈?，之前的做法是先算出?nèi)容寬。 懂得如何運(yùn)用box-sizing之前，必須需要了解一下常規(guī)盒模型和怪異盒模型（IE盒模型）。 我們都知道盒模型從里到外主要包括：content，padding，border，margin。如下圖：showImg(...
閱讀 3748·2021-10-11 10:59
閱讀 1336·2019-08-30 15:44
閱讀 3506·2019-08-29 16:39
閱讀 2913·2019-08-29 16:29
閱讀 1835·2019-08-29 15:24
閱讀 846·2019-08-29 15:05
閱讀 1284·2019-08-29 12:34
閱讀 2384·2019-08-29 12:19
