国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

binta / 1421人閱讀

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

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


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


CSS如何設(shè)置這兩種模型


JS如何設(shè)置獲取盒模型對應(yīng)的寬和高


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


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

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

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

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

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

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

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

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

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

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

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

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

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

對于以上兩種不同的網(wǎng)頁模式，產(chǎn)生了兩種不同的盒模型，一個是標準模型，一個是IE模型。

標準模型的寬高 = 內(nèi)容（content）的寬高，

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

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

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

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

IE模型
box-sizing:border-box;

4.通過JavaScript獲取寬高

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


    




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

　　這種方式只能取到dom元素內(nèi)聯(lián)樣式所設(shè)置的寬高，也就是說如果該節(jié)點的樣式是在style標簽中或外聯(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是一樣的，這個可以兼容更多的瀏覽器，通用性好一些。

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

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

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

對象所在元素的實際寬度

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

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

5.DOM屬性之 OffsetWidth / ClientWidth / ScrollWidth

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

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

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

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

ScrollWidth 對象的實際內(nèi)容的寬度（包含滾動區(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 直譯為“塊級格式化上下文”

BFC的原理

內(nèi)部的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設(shè)置為scroll/hidden/overlay/auto

根元素

應(yīng)用場景

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

清除內(nèi)部浮動

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

方法三 添加一個父元素包裹，并設(shè)置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...

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

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

相關(guān)文章

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

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

    iOS122 評論0 收藏0

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

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

    3403771864 評論0 收藏0

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

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

    CNZPH 評論0 收藏0

  • DOM盒模型

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

    djfml 評論0 收藏0

發(fā)表評論

0條評論

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