資訊專欄INFORMATION COLUMN
摘要：盒子模型及更早的版本使用的是盒模型。盒子模型組成為。盒子模型盒子模型的盒子模型的意味著盒子的和的大小是上述屬性相加的最大總和。標(biāo)準(zhǔn)盒子模型盒子模型的盒子模型的盒子模型大小計算就簡單多，設(shè)置的和就是內(nèi)容大小。
盒子模型
IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在標(biāo)準(zhǔn)兼容模式下使用的是W3C的盒模型標(biāo)準(zhǔn)。
盒子模型組成為：margin、border、padding、content。
CSS盒子模型分為：標(biāo)準(zhǔn)W3C盒子模型，IE盒子模型。兩者最大不同在于對于css的width和height的大小設(shè)置。下面所說的width和height是css中的寬高。
IE盒子模型IE盒子模型的width = contentWidth + padding-left + padding-right + border-left + border-right
IE盒子模型的height = contentHeight + padding-top + padding-bottom + border-top + border-bottom
意味著IE盒子的width和height的大小是上述屬性相加的最大總和。若content的大小、padding大小、border的大小總和大于css設(shè)置的寬高。例如增加padding寬度大小使得盒子寬度大于設(shè)置的寬度會將content的大小被壓縮，最終content大小會變?yōu)?。box的總寬度會大于設(shè)置的width大小。
#ie_box {
margin: 30px;
width: 200px;
height: 200px;
background-color: bisque;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
border: 5px solid brown;
}
標(biāo)準(zhǔn)W3盒子模型
W3盒子模型的width = contentWidth
W3盒子模型的height = contentHeight
W3盒子模型大小計算就簡單多，css設(shè)置的width和height就是content內(nèi)容大小。padding、border的大小并不會影響content的大小。
#w3_box {
margin: 30px;
width: 200px;
height: 200px;
background-color: bisque;
padding: 10px;
border: 5px solid brown;
}
小結(jié)
對于ie和w3兩種盒子模型，相比較而言w3盒子模型會比ie盒子模型更好用些，也不容易混淆css中的width和height，同時也方便計算盒子的實際寬高大小，也不會出現(xiàn)ie盒子模型由于屬性設(shè)置超出預(yù)設(shè)寬高而擠壓content顯示。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117306.html
摘要：視覺格式化模型是用來處理和在視覺媒體上顯示文檔時使用的計算規(guī)則。匿名塊盒子在某些情況下進(jìn)行視覺格式化時，需要添加一些增補(bǔ)性的盒子，這些盒子不能用選擇符選中，因此稱為匿名盒子。因此最好不要將其用于正式項目。 今日勵志 不論你在什么時候開始，重要的是開始之后不要停止。 前言 對于部分前端工程師來講，有時候CSS令他們很頭疼，明明設(shè)置了某個樣式，但是布局就是不起作用。 showImg(htt...
摘要：官方說法就是它規(guī)定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時又是的包含塊，不是絕對的。因此稱為匿名盒子。行內(nèi)盒子行內(nèi)級元素會生成行內(nèi)級盒子，該盒子同時會參與行內(nèi)格式化上下文的創(chuàng)建。如果只有一個值指定為，則其使用的值來自相等。 作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...
摘要：每個列表項始于標(biāo)簽。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個單元格，表示一個單元格。 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位： web前端開發(fā)工程師 web網(wǎng)站架構(gòu)師 自己創(chuàng)業(yè) 轉(zhuǎn)崗管理或其他 web前端開發(fā)的前景展望： 未來IT行業(yè)企業(yè)需求...
閱讀 1896·2021-09-24 09:48
閱讀 3236·2021-08-26 14:14
閱讀 1694·2021-08-20 09:36
閱讀 1485·2019-08-30 15:55
閱讀 3643·2019-08-26 17:15
閱讀 1441·2019-08-26 12:09
閱讀 618·2019-08-26 11:59
閱讀 3340·2019-08-26 11:57
