CSS盒模型深入

songjz 發布于2019-08-29 15:13 / 1869人閱讀

摘要：盒模型標準模型模型標準模型表示的寬度，模型表示的寬度。設置這兩種模型可使用瀏覽器默認獲取寬高只有通過內聯樣式設置的寬高才能獲取到，用標簽引入的獲取不到。清除浮動使觸發，內部浮動元素元素也參與高度計算。

CSS盒模型 標準模型IE模型

標準模型width表示content的寬度，IE模型width表示border+padding+content的寬度。

設置這兩種模型可使用：

box-sizing: content-box;   /*瀏覽器默認*/
box-sizing: border-box;

獲取寬高

dom.style.width/height

只有通過內聯樣式設置的寬高才能獲取到，用標簽引入的css獲取不到。

dom.currentStyle.width/height  //IE
window.computedStyle(dom).width/height  //標準

無論樣式是什么類型，都可以獲取到寬高，且是渲染后的實際寬高。

dom.getBoundingClientRect().width/height

獲取元素的寬高，和相對于視口的lfet top。

邊距重疊

子元素的外邊距會反應在父元素上，相鄰元素外邊距會取較大值，空元素上下外邊距會取較大值。

BFC

BFC指塊級格式化上下文，是一個有特別規則的區域，規定內部元素如何布局，與外部元素無關。

1.BFC有一下幾個規則：

內部上下相鄰元素外邊距會重疊。

BFC塊不會與浮動元素重疊。

內部浮動元素也參與BFC高度的計算。

2.BFC的觸發：

float屬性不為none；

position: absolute/fixed；

overflow: auto/hidden；

display: inline-block、table-cells、table-captions、或inline-flex

BFC應用

1.解決邊距重疊問題

使div觸發BFC，內部元素外邊距不會反映到父級元素上。

兩個

標簽都有上下外邊距，給

標簽加父級，且觸發BFC，外邊距不會在重疊。

2.清除浮動

使div觸發BFC，內部浮動元素元素也參與高度計算。

GPU云服務器云服務器盒模型盒模型html嗎簡述html盒模型盒遙控

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113175.html

深入css布局 (1) — 盒模型 & 元素分類

摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎知識外，布局相關的知識才是比較核心和重要的點。從元素的布局特性來分，主要可以分為三類元素塊級元素，行內元素，行內塊級元素。行內級元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們...

ky0ncheng 2019-04-23 13:43 評論0 收藏0
深入css布局(1) — 盒模型 & 元素分類

摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎知識外，布局相關的知識才是比較核心和重要的點。規定元素和屬性是包含元素的邊框內邊距內容的。后來微軟也慢慢轉向了的標準，在以后支持了標準盒模型。行內級元素屬性取的元素。深入css布局（1）—— 盒模型 & 元素分類 ????在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重...

blankyao 2019-08-29 15:25 評論0 收藏0
深入理解盒模型與BFC

摘要：標準盒模型與盒模型開發者們都知道，由于歷史遺留問題與既定標準的發展，存在著兩個盒模型。即的標準盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個盒模型的差異之前，我們先來看一張圖先不討論寬高，我們把一個元素的組成分為。標準盒模型與IE盒模型開發者們都知道，由于歷史遺留問題與既定標準的發展，存在著兩個css盒模型。即W3C的標準盒模型以及IE的怪異盒模型。在css中，...

gself 2019-08-29 17:14 評論0 收藏0
【芝士整理】CSS基礎圖譜

摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動產生，元素周圍的內容轉換為圍繞元素排列。選擇器注意點屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...

iOS122 2019-08-30 15:54 評論0 收藏0
【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而雖然接近標準，但依舊未能完全正確的支持標準。盡管修復了許多的問題，但是依然延續實現中的其它故障主要是盒模型問題。因此大部分的聲明將觸發嚴格模式即依據標準的規則渲染網頁。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點主要參考自第一篇文章，然而筆者在讀的時...

binta 2019-08-29 16:13 評論0 收藏0