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