2019 CSS經(jīng)典面試題

這些是我自己在學(xué)習(xí)過(guò)程中總結(jié)的一些知識(shí)點(diǎn)，本篇文章我將以面試題的形式分享給大家，希望對(duì)大家有所幫助，本文篇幅較長(zhǎng)，您若認(rèn)真看完，并且反復(fù)閱讀，我相信對(duì)您的學(xué)習(xí)或者是面試，都會(huì)有一定幫助，同時(shí)希望大家批評(píng)指正！

1. 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？

盒子模型就是 元素在網(wǎng)頁(yè)中的實(shí)際占位，有兩種：標(biāo)準(zhǔn)盒子模型和IE盒子模型

標(biāo)準(zhǔn)(W3C)盒子模型：內(nèi)容content+填充padding+邊框border+邊界margin

寬高指的是 content 的寬高

低版本IE盒子模型：內(nèi)容（content+padding+border）+ 邊界margin，

寬高指的是 content+padding+border 部分的寬高

專題推薦：2020年CSS面試題匯總（最新）

問(wèn)題的拓展：

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

box-sizing : content-box   box-sizing : border-box復(fù)制代碼

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

dom.style.width/height;//設(shè)置獲取的是內(nèi)聯(lián)樣式 dom.currentStyle.width/height;//只有IE支持 window.getComputedStyle(dom).width/height;//兼容性好 dom.getBoundingClientRect().width/height;//適用場(chǎng)所：計(jì)算一個(gè)元素的絕對(duì)位置復(fù)制代碼

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

該例子是父子邊距重疊，還有兄弟元素的邊距重疊

<style>             html *{                     padding: 0;                     margin: 0;             }             #sec{                     background: #f00;                     overflow: hidden; //創(chuàng)建了一個(gè)BFC，塊級(jí)格式化上下文        }             .child{                     height: 100px;                     margin-top: 10px;                     background: yellow;             }     </style> <section id="sec">             <article class="child"></article>     </section>復(fù)制代碼

BFC（邊距重疊解決方案）？

2. box-sizing屬性？

用來(lái)控制元素的盒子模型的解析模式，默認(rèn)為content-box
context-box：W3C的標(biāo)準(zhǔn)盒子模型，設(shè)置元素的 height/width 屬性指的是 content 部分的高/寬
border-box：IE 傳統(tǒng)盒子模型。設(shè)置元素的 height/width 屬性指的是 content + border + padding 部分的高/寬

3. 對(duì) BFC 規(guī)范(塊級(jí)格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 規(guī)范中的一個(gè)概念,它是一個(gè)獨(dú)立容器，決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用。）

一個(gè)頁(yè)面是由很多個(gè) Box 組成的,元素的類型和 display 屬性,決定了這個(gè) Box 的類型。

不同類型的 Box，會(huì)參與不同的 Formatting Context（決定如何渲染文檔的容器），因此Box內(nèi)的元素會(huì)以不同的方式渲染，也就是說(shuō)BFC內(nèi)部的元素和外部的元素不會(huì)互相影響。

BFC 規(guī)定了內(nèi)部的 Block Box 如何布局。

定位方案：

1. 內(nèi)部的 Box 會(huì)在垂直方向上一個(gè)接一個(gè)放置。
2. Box 垂直方向的距離由 margin 決定，屬于同一個(gè) BFC 的兩個(gè)相鄰 Box 的 margin 會(huì)發(fā)生重疊。
3. 每個(gè)元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸。
4. BFC 的區(qū)域不會(huì)與 float box 重疊。
5. BFC 是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。
6. 計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算。

滿足下列條件之一就可觸發(fā) BFC

1. 根元素，即 html
2. float 的值不為none（默認(rèn)）
3. overflow 的值不為 visible（默認(rèn)）
4. display 的值為 inline-block、table-cell、table-caption
5. position 的值為 absolute 或 fixed