CSS盒模型深入

songjz 發(fā)布于2019-08-29 15:13 / 1861人閱讀

摘要：盒模型標(biāo)準(zhǔn)模型模型標(biāo)準(zhǔn)模型表示的寬度，模型表示的寬度。設(shè)置這兩種模型可使用瀏覽器默認(rèn)獲取寬高只有通過(guò)內(nèi)聯(lián)樣式設(shè)置的寬高才能獲取到，用標(biāo)簽引入的獲取不到。清除浮動(dòng)使觸發(fā)，內(nèi)部浮動(dòng)元素元素也參與高度計(jì)算。

CSS盒模型 標(biāo)準(zhǔn)模型IE模型

標(biāo)準(zhǔn)模型width表示content的寬度，IE模型width表示border+padding+content的寬度。

設(shè)置這兩種模型可使用：

box-sizing: content-box;   /*瀏覽器默認(rèn)*/
box-sizing: border-box;

獲取寬高

dom.style.width/height

只有通過(guò)內(nèi)聯(lián)樣式設(shè)置的寬高才能獲取到，用標(biāo)簽引入的css獲取不到。

dom.currentStyle.width/height  //IE
window.computedStyle(dom).width/height  //標(biāo)準(zhǔn)

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

dom.getBoundingClientRect().width/height

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

邊距重疊

子元素的外邊距會(huì)反應(yīng)在父元素上，相鄰元素外邊距會(huì)取較大值，空元素上下外邊距會(huì)取較大值。

BFC

BFC指塊級(jí)格式化上下文，是一個(gè)有特別規(guī)則的區(qū)域，規(guī)定內(nèi)部元素如何布局，與外部元素?zé)o關(guān)。

1.BFC有一下幾個(gè)規(guī)則：

內(nèi)部上下相鄰元素外邊距會(huì)重疊。

BFC塊不會(huì)與浮動(dòng)元素重疊。

內(nèi)部浮動(dòng)元素也參與BFC高度的計(jì)算。

2.BFC的觸發(fā)：

float屬性不為none；

position: absolute/fixed；

overflow: auto/hidden；

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

BFC應(yīng)用

1.解決邊距重疊問(wèn)題

使div觸發(fā)BFC，內(nèi)部元素外邊距不會(huì)反映到父級(jí)元素上。

兩個(gè)標(biāo)簽都有上下外邊距，給
標(biāo)簽加父級(jí)，且觸發(fā)BFC，外邊距不會(huì)在重疊。

2.清除浮動(dòng)

使div觸發(fā)BFC，內(nèi)部浮動(dòng)元素元素也參與高度計(jì)算。

GPU云服務(wù)器云服務(wù)器盒模型盒模型html嗎簡(jiǎn)述html盒模型盒遙控

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113175.html

相關(guān)文章

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

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

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

摘要：深入布局盒模型元素分類在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。規(guī)定元素和屬性是包含元素的邊框內(nèi)邊距內(nèi)容的。后來(lái)微軟也慢慢轉(zhuǎn)向了的標(biāo)準(zhǔn)，在以后支持了標(biāo)準(zhǔn)盒模型。行內(nèi)級(jí)元素屬性取的元素。深入css布局（1）—— 盒模型 & 元素分類 ????在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重...

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

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

gself 2019-08-29 17:14 評(píng)論0 收藏0
【芝士整理】CSS基礎(chǔ)圖譜

摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。選擇器注意點(diǎn) 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含選擇器組 A > B - 直接子節(jié)點(diǎn) A + B - 下一個(gè)兄弟節(jié)點(diǎn) A...

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

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

binta 2019-08-29 16:13 評(píng)論0 收藏0