真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

CSS盒模型面試題的示例分析

這篇文章主要介紹了CSS盒模型面試題的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站是少有的網(wǎng)站建設、網(wǎng)站設計、營銷型企業(yè)網(wǎng)站、小程序設計、手機APP,開發(fā)、制作、設計、友情鏈接、推廣優(yōu)化一站式服務網(wǎng)絡公司,公司2013年成立,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評

1、談談你對CSS盒模型的認識？

問題簡答

所有 HTML 元素都可以視為方框。在 CSS 中，在談論設計和布局時，會使用術(shù)語“盒模型”或“框模型”。CSS 框模型實質(zhì)上是一個包圍每個 HTML 元素的框。

它包括：

  • 外邊距 → margin

  • 邊框 → border

  • 內(nèi)邊距 → padding

  • 實際的內(nèi)容 → content

它有標準模型和IE模型兩種；

知識解析

盒模型，英文box model。

  • 無論是div、span、還是a都是盒子。

  • 圖片、表單元素一律看作是文本，它們并不是盒子，因為一張圖片里面并不能放東西，它自己就是自己的內(nèi)容。

盒模型各部分說明：

  • Margin(外邊距) ：清除邊框外的區(qū)域，外邊距是透明的（可以為負值）。

  • Border(邊框) ：圍繞在內(nèi)邊距和內(nèi)容外的邊框。

  • Padding(內(nèi)邊距) ：清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的（不允許負值）。

  • Content(內(nèi)容) ：盒子的內(nèi)容，顯示文本和圖像。

2、標準模型和IE模型的區(qū)別？

問題簡答

標準模型和ie模型的區(qū)別是計算寬width高height的不同。

  • 標準模型width不計算padding和border；

  • ie模型width計算padding 和border；

知識解析

標準盒模型（W3C盒子模型）

設置的寬高是對實際內(nèi)容content的寬高進行設置，內(nèi)容周圍的border和padding另外設置;

即元素實際占位的寬高為：

width【height】= 設置的content的寬【高】 + padding + border + margin

可以通過實例來理解：寫一個div，同時設置了寬、高、邊框、內(nèi)邊距、外邊距；

//注：如果下面示例未寫html和css,說明與此處相同
.box {
    width: 100px;
    height: 100px;
    border: 10px solid #CC9966;
    padding: 30px;
    margin: 40px;
    background: #66FFFF;
}
Axjy

效果及Chrome的開發(fā)者工具中顯示的盒模型如下：

CSS盒模型面試題的示例分析

可以看到content部分即為100×100，內(nèi)容周圍都是另外設置的，width=40+10+30+100+30+10+40=180；

CSS盒模型面試題的示例分析

IE盒子模型（怪異盒模型）

設置的寬高是對實際內(nèi)容content + 內(nèi)邊距（padding）+邊框（border）之和的width和height進行設置的;

即元素實際占位的寬高為：

width（height）= 設置的width（height）+外邊距margin

和上面使用同樣的例子，但是通過設置box-sizing:border-box;，把它變?yōu)镮E盒模型；

.box {
    width: 100px;
    height: 100px;
    border: 10px solid #CC9966;
    padding: 30px;
    margin: 40px;
    background: #66FFFF;
    box-sizing: border-box;//注意
}
Axjy

效果及Chrome的開發(fā)者工具中顯示的盒模型如下：

CSS盒模型面試題的示例分析

可以很明顯的看到，正方形和上面的比小了一圈，width=40+10+30+20+30+10+40=100;

CSS盒模型面試題的示例分析

3、CSS如何設置這兩種模型？

問題簡答

上面的示例其實已經(jīng)用到了這個設置

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

問題簡答

1) dom.style.width/height【只能取到內(nèi)聯(lián)元素】
2) dom.currentStyle.width/height【只有IE支持】
3) document.getComputedStyle(dom,null).width/height  
4) dom.getBoundingClientRect().width/height 
5) dom.offsetWidth/offsetHeight【常用】

知識解析

1、dom.style.width/height

通過dom節(jié)點的style樣式獲取，只能取到行內(nèi)樣式的寬和高，style 標簽中和 link 外鏈的樣式取不到

.box{...}
----------------------------

let targetDom = document.querySelector('.box');
let width = targetDom.style.width;
let height = targetDom.style.height;

console.log("width",width)
console.log("height",height)

使用類設置寬高時

獲取的寬高為空

CSS盒模型面試題的示例分析

在行內(nèi)設置寬高時

獲取的是行內(nèi)設置的寬高

CSS盒模型面試題的示例分析

element.style.xxx 這種只能取得內(nèi)嵌樣式的屬性，獲取樣式能讀能寫

2、dom.currentStyle.width/height

取到的是最終渲染后的寬和高，如果有設置寬高，則不論哪種盒模型獲取到的都是設置的寬高,只有IE兼容

.box {...同上}
----------------------------

let targetDom = document.querySelector('.box');
let width = targetDom.currentStyle.width;
let height = targetDom.currentStyle.height;

element.currentStyle[xxx] 可以取得內(nèi)部和外部樣式，但是只兼容ie瀏覽器，獲取的樣式只能讀

3、document.getComputedStyle(dom,null).width/height

取到的是最終渲染后的寬和高，如果有設置寬高，則不論哪種盒模型獲取到的都是設置的寬高，和currentStyle相同，但是兼容性更好，IE9 以上支持。

getComputedStyle()方法,

CSS盒模型面試題的示例分析

.box {...同上}
----------------------------

let targetDom = document.querySelector('.box');
let width =  window.getComputedStyle(targetDom).width
let height = window.getComputedStyle(targetDom).height

console.log("width",width)
console.log("height",height)

CSS盒模型面試題的示例分析

『小擴展』

如果box類不設置寬高，而是由內(nèi)容自動撐開；

則標準盒模型通過getComputedStyle獲取到的寬高是content的值；

CSS盒模型面試題的示例分析

CSS盒模型面試題的示例分析

IE盒模型通過getComputedStyle獲取到的寬高 = border + padding + content，不包括外邊距；

CSS盒模型面試題的示例分析

CSS盒模型面試題的示例分析

4、dom.getBoundingClientRect().width/height

得到渲染后的寬和高，大多瀏覽器支持。IE9以上支持。

.box {...同上}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.getBoundingClientRect().width;
let height = targetDom.getBoundingClientRect().height
console.log('width',width)
console.log('height',height)

標準模型，寬高設置為100的結(jié)果，額外包括了padding和border的值；

CSS盒模型面試題的示例分析

IE模型，寬高設置為100的結(jié)果；

CSS盒模型面試題的示例分析

『小擴展』

如果box類不設置寬高，而是由內(nèi)容自動撐開；

不論是哪種模型，獲取到的都是（border + padding + content)，不包括外邊距；

CSS盒模型面試題的示例分析

getBoundingClientRect還可以取到相對于視窗的上下左右的距離（用于獲取某個元素相對于視窗的位置集合）。

CSS盒模型面試題的示例分析

5、dom.offsetWidth/offsetHeight（常用）

包括高度（寬度）、內(nèi)邊距和邊框，不包括外邊距。最常用，兼容性最好。

.box {...同上}
----------------------------
let targetDom = document.querySelector('.box');
let width = targetDom.offsetWidth;
let height = targetDom.offsetHeight;
console.log('width',width)
console.log('height',height)

標準模型，寬高設置為100的結(jié)果；

CSS盒模型面試題的示例分析

IE模型，寬高設置為100的結(jié)果；

CSS盒模型面試題的示例分析

小擴展

如果box類不設置寬高，而是由內(nèi)容自動撐開；

不論是哪種模型，獲取到的都是（border + padding + content)，不包括margin；

CSS盒模型面試題的示例分析

從上面可以看出，dom.getBoundingClientRect().width/height 和 dom.offsetWidth/offsetHeight 結(jié)果是一樣的

5、根據(jù)盒模型解釋邊距重疊

問題簡答

外邊距重疊是指兩個【垂直】 【相鄰】的塊級元素，當上下兩個邊距相遇時，其外邊距會產(chǎn)生重疊現(xiàn)象，且重疊后的外邊距，等于其中較大者。（水平方向不會發(fā)生）

『原因』

根據(jù)W3C文檔的說明，當符合以下條件時，就會觸發(fā)外邊距重合

相鄰元素包括父子元素和兄弟元素

『重疊后的margin計算』

邊距重疊詳解及解決方案

1、嵌套塊（父子）元素垂直外邊距的合并

對于兩個嵌套關(guān)系的塊元素，如果父元素沒有padding-top及border，則父元素的margin-top會與子元素的margin-top發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發(fā)生合并。

CSS盒模型面試題的示例分析

『解決辦法』

『示例』

在頁面放兩個正方形


    

父元素margin-top設為0，子元素設置20px;

.parent-box{
    width: 100px;
    height: 100px;
    margin-top: 0;
    background: #99CCFF;
}
.child-box{
    width: 50px;
    height: 50px;
    margin-top: 20px;
    background: #FF9933;
}

預期效果：應該是父級元素沒有邊距，子元素頂部和父元素頂部之間的距離為20

實際效果：父子盒子重疊，父級與外面的間隔變成了20（會取較大的值，因為父級為0，所以取的是子級的margin）

CSS盒模型面試題的示例分析

通過上面的解決辦法處理之后

方法一、二、三

CSS盒模型面試題的示例分析

方法四

.parent-box::before {
    content : "";
    display :table;
}

CSS盒模型面試題的示例分析

達到的效果

CSS盒模型面試題的示例分析

2、相鄰塊（兄弟）元素垂直外邊距的合并（外邊距塌陷）

當上下相鄰的兩個塊元素相遇時，如果

則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。

CSS盒模型面試題的示例分析

『解決辦法』

1）為了達到想要的間距，最好在設置margin-top/bottom值時統(tǒng)一設置上或下；

2）或者用以下的BFC解決，下面有詳解

6、談談BFC

BFC的基本概念

BFC全稱為塊格式化上下文 (Block Formatting Context) ，是 Web 頁面中盒模型布局的 CSS 渲染模式，指一個獨立的渲染區(qū)域或者說是一個隔離的獨立容器。

BFC的通俗理解：首先BFC是一個名詞，就是一個有特定規(guī)則的區(qū)域。我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的。

W3C 規(guī)范對此作了詳細的描述：

BFC的布局規(guī)則（原理/渲染規(guī)則）

  1. 計算BFC高度時，浮動元素也會參與計算（清除浮動）

  2. BFC的區(qū)域不會與浮動元素的box重疊。（防止浮動文字環(huán)繞）

  3. BFC在頁面上是一個獨立的容器，內(nèi)外元素不相互影響。（解決外邊距重疊問題）

  4. Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。

下面的使用場景會通過這些規(guī)則來處理一些實際的問題。

如何創(chuàng)建BFC

括號里面是一些副作用

『注意』

display:table也可以生成BFC的原因在于Table會默認生成一個匿名的table-cell，是這個匿名的table-cell生成了BFC。

并不是任意一個元素都可以被當做BFC，只有當這個元素滿足以上任意一個條件的時候，這個元素才會被當做一個BFC

BFC的使用場景

1、清除浮動

浮動的元素會脫離普通文檔流，如下,父級容器只剩下2px的邊距高度。

CSS盒模型面試題的示例分析

利用overflow: hidden給父級創(chuàng)建BFC之后

CSS盒模型面試題的示例分析

以上方法可以實現(xiàn)清楚浮動，但是還是推薦使用偽類的方式。

為什么要清除浮動?浮動塌陷,包含塊沒有設置高度或者是自適應的時候、包含塊就不能撐起來，變成塌陷的狀態(tài)。

2、防止浮動文字環(huán)繞

有如下文字環(huán)繞效果：

CSS盒模型面試題的示例分析

brother-box有部分被浮動元素所覆蓋（文本信息不回被浮動元素覆蓋），如果想避免元素被覆蓋，可利用創(chuàng)建BFC的方法，如給brother-box加overflow: hidden，則可得到以下效果

CSS盒模型面試題的示例分析

『理由』上面的規(guī)則二：BFC的區(qū)域不會與浮動元素的box重疊

這個方法可以用來實現(xiàn)兩列自適應布局，左邊的寬度固定，右邊的內(nèi)容自適應寬度。

3、利用BFC解決邊距重疊問題

根據(jù)前面的邊距重合條件來看，想要解決邊距重疊，只需要破壞其中的某個觸發(fā)條件即可，比如創(chuàng)建一個BFC。

根據(jù) BFC 的定義，兩個元素只有在同一BFC 內(nèi)，才有可能發(fā)生垂直外邊距的重疊，包括相鄰元素、嵌套元素。

===============================

要解決 margin 重疊問題，只要讓它們不在同一個 BFC 內(nèi)就行。

===============================

在沒有新建BFC時，邊距重疊了，margin-bottom + margin-top，應該等于20

CSS盒模型面試題的示例分析

新建了BFC之后

CSS盒模型面試題的示例分析

上面的例子中，為了使兩個正方形的外邊距不重疊，就給其中一個div包裹一層container，觸發(fā)BFC。

注意:邊距折疊的問題可以用 BFC 來解決，但觸發(fā) BFC 并不是解決邊距折疊的充分條件，還要得到合理的運用

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS盒模型面試題的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!


本文名稱：CSS盒模型面試題的示例分析
地址分享：http://weahome.cn/article/iggejc.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部