成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

binta / 1430人閱讀

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

深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 
本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點
 主要參考自第一篇文章，然而筆者在讀的時候未覺詳盡，便又去網上查閱了一番，擴充了其內容，希望也能給同學們提供一些參考。
下面本文章將會從以下幾個方面談談盒模型。



基本概念：標準模式和怪異模式，標準模型和IE模型


CSS如何設置這兩種模型


JS如何設置獲取盒模型對應的寬和高


實例題（根據盒模型解釋邊距重疊）


BFC（邊距重疊解決方案）
1.盒模型是什么

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

2.為什么會有兩種不同的盒模型（標準模式和怪異模式）

在了解兩種不同的盒模型之前，需要先了解一下為什么會產生兩種不同的盒模型。

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

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

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

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

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

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

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

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

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

對于以上兩種不同的網頁模式，產生了兩種不同的盒模型，一個是標準模型，一個是IE模型。

標準模型的寬高 = 內容（content）的寬高，

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

3.通過CSS3設置兩種模型

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

標準模型
box-sizing:content-box;

IE模型
box-sizing:border-box;

4.通過JavaScript獲取寬高

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


    




var body = document.getElementsByClassName("container");
var dom = document.getElementById("contentBox");
1.dom.style.width/height

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


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

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

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

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

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

getBoundingClientRect 用于獲取某個元素相對于視窗的位置集合
通過計算元素的位置，來獲取對應的寬高

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

對象所在元素的實際寬度

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

具體情況如圖所示
其中，盒模型為標準模型，元素內容寬度為100px, padding寬度為10px，border寬度為20px, margin寬度為30px

5.DOM屬性之 OffsetWidth / ClientWidth / ScrollWidth

OffsetWidth 對象所在元素的實際寬度

dom.offsetWidth = dom_content + padding + border（包含滾動條）+ margin

ClientWidth 對象內容的可視區(qū)域的寬度

dom.clientWidth = dom_content + padding（不包含滾動條）

ScrollWidth 對象的實際內容的寬度（包含滾動區(qū)域中未顯示完全的部分）

dom.scrollWidth = real_content + padding

6.邊距重疊

什么是邊距重疊

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




    
    Document
    


    

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

    

    

        

            
子元素

            margin-top:20px;
        

        
父元素

            沒有設置margin-top
7.邊距重疊解決方案(BFC)

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

BFC的原理

內部的box會在垂直方向，一個接一個的放置 每個元素的margin box的左邊，與包含塊border

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

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

bfc是一個頁面上的獨立的容器，外面的元素不會影響bfc里的元素，反過來，里面的也不會影響外面的

計算bfc高度的時候，浮動元素也會參與計算

怎么去創(chuàng)建BFC

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

position為absolute或fixed

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

overflow設置為scroll/hidden/overlay/auto

根元素

應用場景

自適應兩欄布局

清除內部浮動

防止垂直margin重疊

看一個垂直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設置為absolute/fixed 脫離文檔流 
float: left;
position: absolute;// 或者fixed
方法二 設置display為inline-block,table-cell,table-caption,flex,inine-flex 
display: inline-block;

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

    

        
 Top margin-bottom: 30px

        

            
 Bottom margin-top: 50px

        

    



參考鏈接



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



《怪異模式和嚴格模式》 http://blog.sina.com.cn/s/blo...



《標準模式與怪異模式的共存緣由及其使用》 https://blog.csdn.net/liyuans...

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

轉載請注明本文地址：http://systransis.cn/yun/113609.html

相關文章

  • 【芝士整理】CSS基礎圖譜

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

    iOS122 評論0 收藏0

  • 知識解讀：JS屬性scrollTop clientHeight scrollHeight

    　　現在關于講述scrollTop、clientHeight、 scrollHeight 的內容講的都不深，這篇文章就深入了解下。這篇文章主要給大家講述下這些概念的理解，并總結了這些概念彼此之間的數量關系和應用場景?！　?.clientWidth、clientHeight、clientLeft、clientTop　　1.1 clientWidth　　（1）含義：只讀屬性，表示元素的內部寬度，單位為...

    3403771864 評論0 收藏0

  • 【前端芝士樹】純CSS實現多行文本溢出顯示省略號

    摘要：前端芝士樹純實現多行文本溢出顯示省略號使用來控制行數由于用來限制在一個塊元素顯示的文本的行數這是一個不規(guī)范的屬性，它沒有出現在規(guī)范草案中，為了實現該效果，它需要組合其他外來的屬性。 【前端芝士樹】純CSS實現多行文本溢出顯示省略號 使用-webkit-line-clamp來控制行數 由于-webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數,這是一個不規(guī)范的屬性（u...

    CNZPH 評論0 收藏0

  • DOM盒模型

    摘要：中的盒模型傳統(tǒng)盒模型在傳統(tǒng)盒子模型中我們說的寬度和高度是指該塊元素內容的寬度和高度。在這個基礎上我們在修改或者塊元素的寬度講不會發(fā)生變化。 showImg(https://segmentfault.com/img/bVbnygm?w=320&h=292); CSS中的盒模型 傳統(tǒng)盒模型 在傳統(tǒng)盒子模型中我們說的寬度和高度是指該塊元素內容的寬度和高度。 而一個塊元素的寬度是 ...

    djfml 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<