面試官：談談你對 CSS 盒模型的認識?（你確定會？）

CocoaChina 發布于2019-08-29 15:39 / 1616人閱讀

摘要：從上圖可以看到盒子模型的范圍也包括，和標準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學習者

題目：談談你對 CSS 盒模型的認識

涉及知識點(層層遞進):

基本概念：標準模型+ IE模型(區別)

CSS如何設置這兩種模型

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

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

BFC(邊距重疊解決方案)

CSS盒模型 1. 基本概念：標準模型+ IE模型

從上圖可以看到標準 W3C 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。

從上圖可以看到 IE 盒子模型的范圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

2. CSS如何設置這兩種模型

box-sizing:conent-box;
box-sizing:border-box;

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

dom.style.width/height
dom.currentStyle.width/height  (ie支持)
window.getComputedStyle(dom).width/height;
dom.getBoundingClientRect().width/height;

4. 實例題(根據盒模型解釋邊距重疊)

如上圖:有兩個元素其中子元素高度為100px,子元素與父元素的上邊距為 10px,求父元素的實際高度？

答案:說100px 對，說110 也對，為什么捏？這個要看父元素的盒模型要怎么設置的，上代碼演示咯，注意看噢：

運行效果：

上圖證明 100px 是對的。

接著我們給元素加個 overflow:hidden,然后在看效果：

你會發現這時高度為 110px, 這時大家可能會疑問,為什么給父級元素設置一個 overflow:hidden以后，它的高度就成 110 呢，這塊的基本原理是啥呢，咋就這樣呢？說這個之前，先引用一個知識點：

上面代碼是父子元素邊距重疊，那么還有兩種情況邊距重疊就是，一種是兄弟元素，就是兩個 div 挨著，每個都上邊距或者下邊距，那么重疊的原則就是取最大值。

來回答上面問題：給父級加了 overflow:hidden,其實就是給父級元素創建一個BFC(塊級格式化上下文)，那什么是BFC，請看下一個話。

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

BFC 的基本概念

BFC 的原理

如何創建 BFC

BFC使用場景

BFC 的基本概念

Block Formatting Context, 塊級格式化上下文，一個獨立的塊級渲染區域，該區域擁有一套渲染規格來約束塊級盒子的布局，且與區域外部無關。

BFC 的原理

BFC 這個元素的垂直的邊距會發生重疊

BFC 的區域不會與浮動元素的 float 重疊

獨立的容器，內外元素互不影響

計算 BFC 高度，浮動元素也參與計算

如何創建 BFC

float 不為none的時候

position 不為 static 或者 relative 的時候

display 與 table 相關的時候

overflow 為auto, hidden 的時候

BFC使用場景

場景一

]

如上圖，我們給每個p 設置上邊距5，下25 結果從第二個起來它的上邊距，下邊距都是25 而不是 30，這個就是邊距重疊問題，那如何消除這個問題呢？

解:就是給子元素加個一個父級元素，讓你能元素創建一個 BFC，如下：

運行效果如圖:

場景二

運行效果：

從運行效果可以發現，當右側增高的時候會侵入左側的占位，這個是float的特性，顯示這個不符合我們左右布局的目的，那怎么辦呢？其實很簡單，就是給右側的元素創建一個 BFC,如下：

運行效果：

場景三（清除浮動的原理）

  


  
    我的浮動的小智

運行效果：

可以看出父級元素的高度為0，這是為什么呀？

這是因為 float 導致了元素的坍塌，所以父級元素的高度為0，這時我們給父級元素創建一個 BFC，就能解決問題。

運行效果：

以上就是 BFC的清除浮動原理。

愿你成為終身學習者

云服務器 GPU云服務器認識你盒模型盒模型html嗎簡述html盒模型

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113459.html

面試官：談談你對 CSS 盒模型的認識?（你確定會？）

摘要：從上圖可以看到盒子模型的范圍也包括，和標準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學習者題目：談談你對 CSS 盒模型的認識涉及知識點(層層遞進): 基本概念：標準模型+ IE模型(區別) CSS如何設置這兩種模型 JS如何設置獲取盒子模型對應的寬和高實例題(根據盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

Channe 2019-08-26 12:02 評論0 收藏0
面試官：談談你對 CSS 盒模型的認識?（你確定會？）

摘要：從上圖可以看到盒子模型的范圍也包括，和標準盒子模型不同的是盒子模型的部分包含了和。運行效果以上就是的清除浮動原理。愿你成為終身學習者題目：談談你對 CSS 盒模型的認識涉及知識點(層層遞進): 基本概念：標準模型+ IE模型(區別) CSS如何設置這兩種模型 JS如何設置獲取盒子模型對應的寬和高實例題(根據盒模型解釋邊距重疊) BFC(邊距重疊解決方案) CSS盒模型 1. ...

mengera88 2019-08-02 10:41 評論0 收藏0
前端 CSS 面試大綱

摘要：比如說預處理器，組件化，工程化，兼容性處理等方面，這些主要是基于自己的開發經驗業界流行技術方案進行準備。但是在開始談面試前我想先提出一個概念學霸面試模型學校的學習和公司的工作有很多相似的地方。所以對于面試，請參考上學那會兒你們班學霸的姿勢。背景參加完廈門第四屆CSS Conf 后，讓我對 CSS 產生了新的思考。CSS 是前端必須熟練掌握并保持持續關注的技術，但是我又不想在 CS...

mating 2019-08-30 14:19 評論0 收藏0
前端面試寶典

摘要：優雅降級觀點優雅降級觀點認為應該針對那些最高級最完善的瀏覽器來設計網站。面試官希望聽到是。在前端構建中應該考慮微格式嗎微格式是一種讓機器可讀的語義化詞匯的集合，是結構化數據的開放標準。一、HTML和CSS 你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什么?IE: trident內核Firefox：gecko內核Safari:webkit內核Opera:以前是presto內核...

ChanceWong 2019-08-29 12:31 評論0 收藏0