站長資訊網
這些是我自己在學習過程中總結的一些知識點，本篇文章我將以面試題的形式分享給大家，希望對大家有所幫助，本文篇幅較長，您若認真看完，并且反復閱讀，我相信對您的學習或者是面試，都會有一定幫助，同時希望大家批評指正！
1. 介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
盒子模型就是 元素在網頁中的實際占位，有兩種：標準盒子模型和IE盒子模型
標準(W3C)盒子模型：內容content+填充padding+邊框border+邊界margin
寬高指的是 content 的寬高
低版本IE盒子模型：內容（content+padding+border）+ 邊界margin，
寬高指的是 content+padding+border 部分的寬高
專題推薦：2020年CSS面試題匯總（最新）
問題的拓展：
CSS 如何設置這兩種模型？
box-sizing : content-box box-sizing : border-box復制代碼
JS 如何設置獲取盒模型對應的寬和高？
dom.style.width/height;//設置獲取的是內聯樣式 dom.currentStyle.width/height;//只有IE支持 window.getComputedStyle(dom).width/height;//兼容性好 dom.getBoundingClientRect().width/height;//適用場所：計算一個元素的絕對位置復制代碼
實例題（根據盒模型解釋邊距重疊）？
該例子是父子邊距重疊，還有兄弟元素的邊距重疊
<style> html *{ padding: 0; margin: 0; } #sec{ background: #f00; overflow: hidden; //創建了一個BFC，塊級格式化上下文 } .child{ height: 100px; margin-top: 10px; background: yellow; } </style> <section id="sec"> <article class="child"></article> </section>復制代碼
BFC（邊距重疊解決方案）？
2. box-sizing屬性？
用來控制元素的盒子模型的解析模式，默認為content-box
context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是 content 部分的高/寬
border-box：IE 傳統盒子模型。設置元素的 height/width 屬性指的是 content + border + padding 部分的高/寬
3. 對 BFC 規范(塊級格式化上下文：block formatting context)的理解？
（W3C CSS 2.1 規范中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用。）
一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
不同類型的 Box，會參與不同的 Formatting Context（決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染，也就是說BFC內部的元素和外部的元素不會互相影響。
BFC 規定了內部的 Block Box 如何布局。
定位方案：
- 內部的 Box 會在垂直方向上一個接一個放置。
- Box 垂直方向的距離由 margin 決定，屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊。
- 每個元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸。
- BFC 的區域不會與 float box 重疊。
- BFC 是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。
- 計算 BFC 的高度時，浮動元素也會參與計算。
滿足下列條件之一就可觸發 BFC
- 根元素，即 html
- float 的值不為none（默認）
- overflow 的值不為 visible（默認）
- display 的值為 inline-block、table-cell、table-caption
- position 的值為 absolute 或 fixed
