【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

binta 發(fā)布于2019-08-29 16:13 / 1489人閱讀

摘要：提供了糟糕的支持，而雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問題，但是依然延續(xù)實(shí)現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁。

深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth

本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點(diǎn)
 主要參考自第一篇文章，然而筆者在讀的時(shí)候未覺詳盡，便又去網(wǎng)上查閱了一番，擴(kuò)充了其內(nèi)容，希望也能給同學(xué)們提供一些參考。

下面本文章將會(huì)從以下幾個(gè)方面談?wù)労心Ｐ汀?/p>

基本概念：標(biāo)準(zhǔn)模式和怪異模式，標(biāo)準(zhǔn)模型和IE模型
CSS如何設(shè)置這兩種模型
JS如何設(shè)置獲取盒模型對(duì)應(yīng)的寬和高
實(shí)例題（根據(jù)盒模型解釋邊距重疊）
BFC（邊距重疊解決方案）

1.盒模型是什么

2018搜狐前端筆試題
盒模型本質(zhì)上是用以封裝HTML元素的概念盒子，它包含了邊距，邊框，填充以及實(shí)際內(nèi)容。
即由外向里是 margin, border, padding, content

2.為什么會(huì)有兩種不同的盒模型（標(biāo)準(zhǔn)模式和怪異模式）

在了解兩種不同的盒模型之前，需要先了解一下為什么會(huì)產(chǎn)生兩種不同的盒模型。

當(dāng)年，Netscape4（譯注：網(wǎng)景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實(shí)現(xiàn)CSS機(jī)制時(shí)，并沒有遵循W3C提出的標(biāo)準(zhǔn)。Netscape4 提供了糟糕的支持，而IE4 雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管IE 5 修復(fù)了IE4 許多的問題（bugs），但是依然延續(xù)CSS實(shí)現(xiàn)中的其它故障（主要是盒模型（box model）問題）。

然而隨著標(biāo)準(zhǔn)一致性變得越來越重要，瀏覽器開發(fā)商不得不面臨一個(gè)艱難的抉擇：逐漸遵循W3C的標(biāo)準(zhǔn)是前進(jìn)的方向。但是改變現(xiàn)有CSS的實(shí)現(xiàn)，完整去遵循標(biāo)準(zhǔn)，會(huì)使許多網(wǎng)站或多或少受到破壞。如果瀏覽器突然以正確的方式解析現(xiàn)存的CSS，陳舊的網(wǎng)站顯示必然受到影響。

于是，所有的瀏覽器開始提供兩種模式：怪異模式（即兼容模式 Quirks Mode/Compalibility Mode）服務(wù)于舊式規(guī)則，嚴(yán)格模式(即標(biāo)準(zhǔn)模式 Standard Mode/Strict Mode)服務(wù)于標(biāo)準(zhǔn)規(guī)則。Mac平臺(tái)的IE瀏覽器最先實(shí)現(xiàn)這兩種模式，Mozilla， Safari、Opera和Windows平臺(tái)的IE6也相繼實(shí)現(xiàn)了這兩種模式。Windows平臺(tái)的IE5和Netscape4則只提供了怪異模式。

選擇使用哪種模式需要一個(gè)觸發(fā)器，而 “DOCTYP切換” 則用于此目的。依照標(biāo)準(zhǔn)，任何一個(gè)(X)HTML文檔必須擁有一個(gè)DOCTYPE（譯注：DTD（文檔類型定義）是一組機(jī)器可讀的規(guī)則，它們指示(X)HTML文檔中允許有什么，不允許有什么，DOCTYPE正是用來告訴瀏覽器使用哪種DTD,一般放在(X)HTML文檔開頭聲明）用以告訴其他人這個(gè)文檔的類型風(fēng)格

產(chǎn)生于標(biāo)準(zhǔn)化浪潮以前的網(wǎng)頁并沒有DOCTYPE聲明。因此"沒有DOCTYPE"意味著觸發(fā)怪異模式：既依據(jù)舊式的CSS規(guī)則渲染網(wǎng)頁。

相反，如果開發(fā)者明確知道包含DOCTYPE，他們應(yīng)該明白他們想要怎么做。因此大部分的DOCTYPE聲明將觸發(fā)嚴(yán)格模式：即依據(jù)標(biāo)準(zhǔn)的CSS規(guī)則渲染網(wǎng)頁。

任何新的或未知的DOCTYPE將觸發(fā)嚴(yán)格模式。

一些頁面依據(jù)怪異模式而寫，但是卻包含DOCTYPE。這種情況下各個(gè)瀏覽器依據(jù)自己的DOCTYPE規(guī)則列表來觸發(fā)怪異模式。

所有IE的觸發(fā) —— 在DTD聲明前加上HTML注釋
只要在DTD聲明前加注釋或者任何標(biāo)簽即可
xml

對(duì)于以上兩種不同的網(wǎng)頁模式，產(chǎn)生了兩種不同的盒模型，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是IE模型。

標(biāo)準(zhǔn)模型的寬高 = 內(nèi)容（content）的寬高，

IE盒模型的寬高 = 內(nèi)容(content) + 填充(padding) + 邊框(border)的總寬高。

3.通過CSS3設(shè)置兩種模型

這里用到了 CSS3 的屬性 box-sizing

標(biāo)準(zhǔn)模型
box-sizing:content-box;

IE模型
box-sizing:border-box;

4.通過JavaScript獲取寬高

通過JS獲取盒模型對(duì)應(yīng)的寬和高，有以下幾種方法：
為了方便書寫，以下用dom來表示獲取的HTML的節(jié)點(diǎn)。


    


var body = document.getElementsByClassName("container");
var dom = document.getElementById("contentBox");

1.dom.style.width/height

　　這種方式只能取到dom元素內(nèi)聯(lián)樣式所設(shè)置的寬高，也就是說如果該節(jié)點(diǎn)的樣式是在style標(biāo)簽中或外聯(lián)的CSS文件中設(shè)置的話，通過這種方法是獲取不到dom的寬高的。


console.log("Dom.style.width:" + dom.style.width); //100px

2.dom.currentStyle.width/height

　　這種方式獲取的是在頁面渲染完成后的結(jié)果，就是說不管是哪種方式設(shè)置的樣式，都能獲取到，但這種方式只有IE瀏覽器支持。

console.log("Dom.currentStyle.width:" +  dom.currentStyle.width); //Cannot read property "width" of undefined

3.window.getComputedStyle(dom).width/height

　　這種方式的原理和2是一樣的，這個(gè)可以兼容更多的瀏覽器，通用性好一些。

console.log("Window.getComputedStyle(dom).width" + window.getComputedStyle(dom).width); //100px

4.dom.getBoundingClientRect().width/height

getBoundingClientRect 用于獲取某個(gè)元素相對(duì)于視窗的位置集合
通過計(jì)算元素的位置，來獲取對(duì)應(yīng)的寬高

console.log("Dom.getBoundingClientRect().width: " + dom.getBoundingClientRect().width); //160

5.dom.offsetWidth/offsetHeight

對(duì)象所在元素的實(shí)際寬度

console.log("Dom.offsetWidth: " + dom.offsetWidth); //160

具體情況如圖所示
其中，盒模型為標(biāo)準(zhǔn)模型，元素內(nèi)容寬度為100px, padding寬度為10px，border寬度為20px, margin寬度為30px

5.DOM屬性之 OffsetWidth / ClientWidth / ScrollWidth

OffsetWidth 對(duì)象所在元素的實(shí)際寬度

dom.offsetWidth = dom_content + padding + border（包含滾動(dòng)條）+ margin

ClientWidth 對(duì)象內(nèi)容的可視區(qū)域的寬度

dom.clientWidth = dom_content + padding（不包含滾動(dòng)條）

ScrollWidth 對(duì)象的實(shí)際內(nèi)容的寬度（包含滾動(dòng)區(qū)域中未顯示完全的部分）

dom.scrollWidth = real_content + padding

6.邊距重疊

什么是邊距重疊

如下圖，父元素沒有設(shè)置margin-top，而子元素設(shè)置了margin-top：20px;可以看出，父元素也一起有了邊距。




    
    Document
    


    
        此部分是能更容易看出讓下面的塊的margin-top。
    
    
        
            子元素
            margin-top:20px;
        
        父元素
            沒有設(shè)置margin-top

7.邊距重疊解決方案(BFC)

首先要明確BFC是什么意思，其全英文拼寫為 Block Formatting Context 直譯為“塊級(jí)格式化上下文”

BFC的原理

內(nèi)部的box會(huì)在垂直方向，一個(gè)接一個(gè)的放置每個(gè)元素的margin box的左邊，與包含塊border

box的左邊相接觸（對(duì)于從做往右的格式化，否則相反）

box垂直方向的距離由margin決定，屬于同一個(gè)bfc的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊 bfc的區(qū)域不會(huì)與浮動(dòng)區(qū)域的box重疊

bfc是一個(gè)頁面上的獨(dú)立的容器，外面的元素不會(huì)影響bfc里的元素，反過來，里面的也不會(huì)影響外面的

計(jì)算bfc高度的時(shí)候，浮動(dòng)元素也會(huì)參與計(jì)算

怎么去創(chuàng)建BFC

float屬性不為none（脫離文檔流）

position為absolute或fixed

display為inline-block,table-cell,table-caption,flex,inine-flex

overflow設(shè)置為scroll/hidden/overlay/auto

根元素

應(yīng)用場(chǎng)景

自適應(yīng)兩欄布局

清除內(nèi)部浮動(dòng)

防止垂直margin重疊

看一個(gè)垂直margin重疊例子


    
         Top margin-bottom: 30px
         Bottom margin-top: 50px
    


.top{
    margin-bottom:30px;
}
.bottom{
    margin-top: 50px;
}
.top, .bottom{
    width: 100%;
    height: 100px;
    line-height: 100px;
    background: cornflowerblue;
}

效果圖

用BFC可以解決垂直margin重疊的問題

方法一采用float或者position設(shè)置為absolute/fixed 脫離文檔流

float: left;
position: absolute;// 或者fixed

方法二設(shè)置display為inline-block,table-cell,table-caption,flex,inine-flex

display: inline-block;

方法三添加一個(gè)父元素包裹，并設(shè)置overflow為scroll/hidden/overlay/auto


    
         Top margin-bottom: 30px
        
             Bottom margin-top: 50px

參考鏈接

《深入理解CSS盒模型》 https://www.cnblogs.com/cheng...

《怪異模式和嚴(yán)格模式》 http://blog.sina.com.cn/s/blo...

《標(biāo)準(zhǔn)模式與怪異模式的共存緣由及其使用》 https://blog.csdn.net/liyuans...

云服務(wù)器 GPU云服務(wù)器盒模型 TabbyCloud周年慶&am 盒模型html嗎簡(jiǎn)述html盒模型

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113609.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

binta

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow如何使用

閱讀 2368·2023-04-25 23:15
效率倍增，PyCaret：一個(gè)開源、低代碼的 Python 機(jī)器學(xué)習(xí)工具

閱讀 2027·2021-11-22 09:34
python scrapy 代理中間件，爬蟲必掌握的內(nèi)容之一

閱讀 1610·2021-11-15 11:39
傳感與檢測(cè)技術(shù)，Pt100熱電阻測(cè)溫實(shí)驗(yàn)報(bào)告，江南大學(xué)物聯(lián)網(wǎng)

閱讀 1024·2021-11-15 11:37
C語言進(jìn)階：程序預(yù)處理

閱讀 2215·2021-10-14 09:43
CYUN：國(guó)慶鉅惠！美國(guó)CERA高防云服務(wù)器、香港CN2 GIA云服務(wù)器最低5折起

閱讀 3561·2021-09-27 13:59
重溫 Flex 布局

閱讀 1567·2019-08-30 15:43
一步步教你用 CSS 為 SVG 添加濾鏡

閱讀 3562·2019-08-30 15:43

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

此部分是能更容易看出讓下面的塊的margin-top。

子元素

父元素

相關(guān)文章

**【芝士整理】CSS基礎(chǔ)圖譜**

知識(shí)解讀：JS屬性scrollTop clientHeight scrollHeight

**【前端芝士樹】純CSS實(shí)現(xiàn)多行文本溢出顯示省略號(hào)**

DOM盒模型

發(fā)表評(píng)論

0條評(píng)論

binta

男|高級(jí)講師

TA的文章

tensorflow如何使用

效率倍增，PyCaret：一個(gè)開源、低代碼的 Python 機(jī)器學(xué)習(xí)工具

python scrapy 代理中間件，爬蟲必掌握的內(nèi)容之一

傳感與檢測(cè)技術(shù)，Pt100熱電阻測(cè)溫實(shí)驗(yàn)報(bào)告，江南大學(xué)物聯(lián)網(wǎng)

C語言進(jìn)階：程序預(yù)處理

CYUN：國(guó)慶鉅惠！美國(guó)CERA高防云服務(wù)器、香港CN2 GIA云服務(wù)器最低5折起

重溫 Flex 布局

一步步教你用 CSS 為 SVG 添加濾鏡

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

此部分是能更容易看出讓下面的塊的margin-top。

子元素

父元素

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

此部分是能更容易看出讓下面的塊的margin-top。