1. 盒模型

標(biāo)準(zhǔn)盒模型：總寬度：內(nèi)容 ( content ) + border + padding + marginIE
盒模型(怪異盒模型)：寬度 = 內(nèi)容寬度 ( content + border + padding ) + margin

2. 彈性盒模型

flex-direction:row //(默認(rèn))主軸為水平方向,起點(diǎn)在左端。 flex-direction:row-reverse //主軸為水平方向,起點(diǎn)在右端 flex-direction:column //使用后會(huì)使主軸變?yōu)閥軸 flex-firection:column-reverse //主軸為垂直方向,起點(diǎn)在下沿。 flex-wrap:nowrap //(默認(rèn))不換行 flex-wrap:wrap //換行,第一行在上方 flex-wrap:wrap-reverse //換行,第一行在下方 flex-flow:該屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式。 flex-flow:值1(主軸方向) 值2(是否換行) flex-flow:row nowrap //(默認(rèn)) justify-content:flex-start //(默認(rèn))左對(duì)齊 justify-content:flex-end //右對(duì)齊 justify-content:center //居中(子元素緊湊居中) justify-content:space-between; //兩端對(duì)齊,項(xiàng)目之間的間隔都相等 justify-content:space-around; //每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等 align-items:flex-start //與交叉軸的起點(diǎn)對(duì)其 align-items:flex-end //與交叉軸的終點(diǎn)即末尾對(duì)其 align-items:center //與交叉軸的中點(diǎn)對(duì)其 align-items:baseline //項(xiàng)?的第???字的基線對(duì)齊 align-items:stretch //如果項(xiàng)?未設(shè)置?度或設(shè)為auto，將占滿整個(gè)容器的?度 align-content屬性,緊跟于flex-wrap屬性后,該屬性用于修飾flex-wrap屬性 align-content:flex-start //與交叉軸的起點(diǎn)對(duì)齊 align-content:flex-end //與交叉軸的終點(diǎn)對(duì)其 align-content:center //與交叉軸的中點(diǎn)對(duì)齊 align-content:space-between //與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布 align-content:space-around //每根軸線兩側(cè)的間隔都相等 align-self:center //允許單個(gè)元素與其他元素有不一樣的對(duì)齊方式 //在彈性子元素上使用。覆蓋容器的 align-items 屬性 order屬性: (自定義子元素的顯示順序) //用整數(shù)值來定義排列順序，數(shù)值小的排在前面。可以為負(fù)值。 //注: 默認(rèn)值為0。父元素必須設(shè)置為彈性盒模型 align-self:flex-start //默認(rèn) align-self:flex-end //終點(diǎn) flex-grow屬性:(定義彈性盒子元素的擴(kuò)展比率) //表示的是當(dāng)容器有多余的空間時(shí)，這些空間在不同條目之間的分配比例 //比如，一個(gè)容器中有 3 個(gè)條目，其"flex-grow"屬性的值分別為 1，2 和 3 //那么當(dāng)容器中有空白空間時(shí)，這 3 個(gè)條目所獲得的額外空白空間分別占 //全部空間的 1/6、1/3 和 1/2 flex-shrink屬性:(定義彈性盒子元素的收縮比率) //該屬性的值也是無單位的,表示的是當(dāng)容器的空間不足各個(gè)條目的尺寸縮小的比例。 //例如,在容器中有 3 個(gè)條目,其"flex-shrink"屬性的值分別為 1，2 和 3。 //每個(gè)條目的主軸尺寸均為 200px。當(dāng)容器的主軸尺寸不足 600px 時(shí), //比如變成了 540px 之后則需要縮小的尺寸 60px 由 3 個(gè)條目按照比例來分配。 //3 個(gè)條目分別要縮小 10px、20px 和 30px, //主軸尺寸分別變?yōu)?190px、180px 和 170px

3. 寫出transition過渡動(dòng)畫的四個(gè)屬性？

transition: transition-property: 過渡屬性名 transition-duration: 過渡效果花費(fèi)的時(shí)間 默認(rèn)是0 transition-timing-function：過渡效果的時(shí)間曲線 transition-delay：過渡效果何時(shí)開始。默認(rèn)是 0。

4. 寫出彈性盒模型中所有的屬性， 并解釋什么意思?

display:flex; /*設(shè)置彈性盒子*/ flex-direction:column | row /*設(shè)置彈性盒子方向*/; flex-wrap:wrap /*設(shè)置是否換行*/； justify-content:space-around， /*設(shè)置水平對(duì)齊方式右對(duì)齊*/； align-items:center /*設(shè)置垂直對(duì)齊方式*/；

5. 彈性盒的屬性中有哪些屬性可以用在父元素上？

display:flex; flex-direction justify-content align-items flex-wrap

6. CSS如何實(shí)現(xiàn)垂直水平居中？

第一種方式已知寬高：

div{width: 200px;height: 200px;position: absolute;top: 50%;left: 50%; margin-left: -100px;margin-right: -100px;background: #f00; }

7. flex彈性盒布局與傳統(tǒng)盒模型布局的區(qū)別和優(yōu)點(diǎn)？

區(qū)別：

普通盒模型中的子元素分配其父元素的空間，而彈性盒模型中的子元素分配其父元素的可用空間

普通盒模型主要針對(duì)塊級(jí)元素和行級(jí)元素的布局，而彈性盒是建立在彈性流上，也就是元素可以隨著可視區(qū)域的變化而呈現(xiàn)流式布局

彈性盒的優(yōu)點(diǎn)：

能為盒模型提供最大的靈活性，即使是不定寬高的元素依然好用，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局

8. 簡(jiǎn)述一下你對(duì)HTML語義化的理解？

html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析;即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;

搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;

使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解

9. CSS單位

⑴px：絕對(duì)單位。頁面按精確像素展示。
⑵em：相對(duì)單位，基準(zhǔn)點(diǎn)為父節(jié)點(diǎn)字體的大小，如果自定義了font-size按自身的來算，整個(gè)頁面內(nèi)1em不是一個(gè)固定的值。
⑶em：相對(duì)單位，相對(duì)于根節(jié)點(diǎn)html的font-size的大小來計(jì)算。
⑷vw：視窗寬度，1vw等于視窗寬度的1%。
⑸vh：視窗高度：1vh等于視窗高度的1%。
⑹vmin：以寬和高之間最短的一端為基準(zhǔn)，如果寬>高，那么1vmin相當(dāng)于寬的1%；
⑺vmax：以寬和高之間最長(zhǎng)的一端為基準(zhǔn)，如果寬>高，那么1vmax相當(dāng)于寬的1%；
⑻%：百分比。
⑼pt：point，大約1/72寸，一寸=3.3333···厘米。
⑽pc：pica，大約6pt，1/6寸。
⑾ex：取當(dāng)前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計(jì)算，IE11以下不支持。
⑿ch：以節(jié)點(diǎn)所使用字體中的“0”字符為基準(zhǔn)，找不到時(shí)為0.5em。IE10以上支持。

10. px、em、rem分別是什么？有什么區(qū)別？

px表示“絕對(duì)尺寸”
em表示相對(duì)尺寸
rem也表示相對(duì)尺寸

11. CSS選擇器

!important > 內(nèi)聯(lián)樣式 > id選擇器 > class選擇器 > 屬性選擇器 > 偽類選擇器（: hover） > 標(biāo)簽選擇器 > 偽元素（: before） > 通配符選擇器
可繼承的屬性： font-size、font-family、color

不可繼承的屬性： border、padding、margin、width、height

權(quán)重值：

!important權(quán)重值：10000，
內(nèi)聯(lián)樣式：1000，
id選擇器：100
class、偽類、屬性、偽元素選擇器：10
標(biāo)簽選擇器：1
后代選擇器的權(quán)重為包含的選擇符權(quán)重值之和。

CSS3新增的偽類：

p：first-of-type：選擇屬于其父元素的首個(gè)元素； p：last-of-type：選擇屬于其父元素的最后元素； p：only-of-type：選擇屬于其父元素的唯一元素； p：only-child：選擇屬于其父元素的唯一子元素； p：nth-child（1）：選擇屬于其父元素的第一個(gè)子元素； ：enabled：disabled：表單控件d的禁用狀態(tài)； ：checked：單選框h或復(fù)選框被選中；

12. 清除浮動(dòng)的方法

①給設(shè)置了浮動(dòng)的元素的父級(jí)加高。
②給設(shè)置了浮動(dòng)的元素的父級(jí)設(shè)置overflow：hidden。如果需要兼容IE，在添加一個(gè)zoom：1
③給需要清除浮動(dòng)的元素設(shè)置clear：both；
④在最后一個(gè)子元素的后面加一個(gè)空的div，給它樣式屬性 clear:both（不推薦）
⑤偽類清除：.clearfix：after{content：""；clear：both；display：block；} .clearfix{zoom：1}

<div class="container clearfix"><div class="box"></div> </div> <div class="main "></div> <style> .box{width:100px;height:100px;background:yellow;float: left; } .main{width:150px;height: 150px;background:red; } .clearfix:after{content: "";clear: both;display: block; } .clearfix{zoom:1; } </style>

13. 層疊上下文

層疊上下文(stacking context)，是HTML中一個(gè)三維的概念。
在CSS2.1規(guī)范中，每個(gè)盒模型的位置是三維的，分別是平面畫布上的X軸，Y軸以及表示層疊的Z軸。一般情況下，元素在頁面上沿X軸,Y軸平鋪，我們察覺不到它們?cè)赯軸上的層疊關(guān)系。而一旦元素發(fā)生堆疊，這時(shí)就能發(fā)現(xiàn)某個(gè)元素可能覆蓋了另一個(gè)元素或者被另一個(gè)元素覆蓋。通元素設(shè)置position屬性為非static值并設(shè)置z-index屬性為具體數(shù)值，產(chǎn)生層疊上下文。

14. 常見頁面布局

⑴靜態(tài)布局：
最傳統(tǒng)、原始的Web布局設(shè)計(jì)。網(wǎng)頁最外層容器(outer)有固定的大小,所有的內(nèi)容以該容器為標(biāo)準(zhǔn),超出寬高的部分用滾動(dòng)條(overflow:scroll)來實(shí)現(xiàn)滾動(dòng)查閱。

優(yōu)點(diǎn)：采用的是css2之前的寫法,不存在瀏覽器兼容性。布局簡(jiǎn)單。

缺點(diǎn)：但是移動(dòng)端不可以使用pc端的頁面,兩個(gè)頁面的布局不一致,移動(dòng)端需要自己另外設(shè)計(jì)一個(gè)布局并使用不同域名呈現(xiàn)。

⑵流式布局：
流式布局也叫百分比布局。隨著屏幕的改變，頁面的布局沒有發(fā)生大的變化，可以進(jìn)行適配調(diào)整，這個(gè)正好與自適應(yīng)布局相補(bǔ)。

優(yōu)點(diǎn)：元素的寬高用百分比做單位，元素寬高按屏幕分辨率調(diào)整，布局不發(fā)生變化。

缺點(diǎn)：屏幕尺度跨度過大的情況下，頁面不能正常顯示。

⑶彈性布局：
彈性布局是CSS3引入的強(qiáng)大的布局方式，彈性盒模型：display：flex；

優(yōu)點(diǎn)：簡(jiǎn)單、方便、快速

缺點(diǎn)：CSS3新特性,瀏覽器兼容性非常頭疼。而且手機(jī)瀏覽器對(duì)flex的支持也不是很理想。

⑷響應(yīng)式布局：
采用自適應(yīng)布局和流式布局的綜合方式，為不同屏幕分辨率范圍創(chuàng)建流式布局。利用媒體查詢可以檢測(cè)到屏幕的尺寸(主要檢測(cè)寬度)，并設(shè)置不同的CSS樣式，就可以實(shí)現(xiàn)響應(yīng)式的布局。

15. CSS預(yù)處理，后處理

CSS預(yù)處理器：用一種編程語言，為CSS增加了一些編程的特性，最終編譯出css文件。比如sass、less、stylus。

優(yōu)點(diǎn)：語言級(jí)邏輯處理，動(dòng)態(tài)特性，改善項(xiàng)目結(jié)構(gòu)
缺點(diǎn)：采用特殊語法，框架耦合度高，復(fù)雜度高

實(shí)現(xiàn)原理：
①取到 DSL 源代碼 的 分析樹
②將含有 動(dòng)態(tài)生成 相關(guān)節(jié)點(diǎn)的 分析樹 轉(zhuǎn)換為 靜態(tài)分析樹
③將 靜態(tài)分析樹 轉(zhuǎn)換為 CSS 的 靜態(tài)分析樹
④將 CSS 的 靜態(tài)分析樹 轉(zhuǎn)換為 CSS 代碼

CSS后處理器：堆css進(jìn)行處理，并最終生成css的預(yù)處理器，屬于廣義上的css預(yù)處理器，最典型的就是css壓縮工具(clean-css)，流行的Autoprefixer，以Clean I Use上的瀏覽器支持?jǐn)?shù)據(jù)為基礎(chǔ)，自動(dòng)處理兼容性問題

優(yōu)點(diǎn)：使用 CSS 語法，容易進(jìn)行模塊化，貼近 CSS 的未來標(biāo)準(zhǔn)
缺點(diǎn)：邏輯處理能力有限實(shí)現(xiàn)原理：
①將 源代碼 做為 CSS 解析，獲得 分析樹
②對(duì) CSS 的 分析樹 進(jìn)行 后處理
③將 CSS 的 分析樹 轉(zhuǎn)換為 CSS 代碼

16. BFC

BFC是塊級(jí)格式化上下文。是（Block Formatting Context，BFC） 的縮寫
是 Web 頁面的可視化 CSS 渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。
BFC它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box（塊元素）參與，
它規(guī)定了內(nèi)部的Block-level box如何布局，并且與這個(gè)區(qū)域外部毫不相關(guān)。
可以理解成：創(chuàng)建了 BFC的元素就是一個(gè)獨(dú)立的盒子，里面的子元素不會(huì)在布局上影響外面的元素（里面怎么布局都不會(huì)影響外部），BFC仍屬于文檔中的普通流

特性：
① 內(nèi)部的塊級(jí)元素會(huì)在垂直方向上一個(gè)接一個(gè)的放置；
② 位于同一BFC下的相鄰塊級(jí)子元素在垂直方向上會(huì)發(fā)生margin重疊；
③ 位于不同BFC下的相鄰元素之間不會(huì)發(fā)生margin重疊；
④ BFC可以包含浮動(dòng)元素；
⑤ BFC是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素；

下列方式會(huì)創(chuàng)建塊格式化上下文：

• 根元素(<html>)
• 浮動(dòng)元素（元素的 float 不是 none）
• 絕對(duì)定位元素（元素的 position 為 absolute 或 fixed）
• 行內(nèi)塊元素（元素的 display 為 inline-block）
• 表格單元格（元素的 display 為 table-cell）
• 表格標(biāo)題（元素的 display 為 table-caption）
• 匿名表格單元格元素（元素的 display 為 table、inline-table）
• display 值為 flow-root 的元素（兼容性不好）
• 彈性元素（display 為 flex 或 inline-flex 元素的直接子元素）
• 元素（display 為 grid 或 inline-grid 元素的直接子元素）
• overflow 值不為 visible 的塊元素

上述創(chuàng)建BFC的CSS列為以下幾類：

`html` 根元素 `float`（不為 none 即可）1. `left`2. `right` position1. `absolute`2. `fixed` display1. `inline-block`2. `flex`3. `inline-flex grid`4. `inline-grid table`5. `table-cell`6. `table-caption`7. `flow-root`

用途：
① 閉合浮動(dòng)；
② 阻止margin重疊
③ 自適應(yīng)流體布局

總結(jié)：

• 浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè) BFC 內(nèi)的元素，浮動(dòng)不會(huì)影響其它 BFC 中元素的布局；
• 而清除浮動(dòng)只能清除同一 BFC 中在它前面的元素的浮動(dòng)；
• 外邊距折疊（Margin collapsing）也只會(huì)發(fā)生在屬于同一 BFC 的塊級(jí)元素之間；
• BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然；
• 計(jì)算BFC的高度時(shí)，考慮BFC所包含的所有元素，連浮動(dòng)元素也參與計(jì)算；
• 浮動(dòng)盒區(qū)域不疊加到BFC上；

17. 移動(dòng)端和PC端有什么區(qū)別？

界面布局

使用習(xí)慣

網(wǎng)絡(luò)速度

技術(shù)層面

18. 什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？

響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)的理念是：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對(duì)應(yīng)的布局

19. 簡(jiǎn)述一下box-sizing屬性

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

20. 如何使用純CSS創(chuàng)建一個(gè)三角形？

<style> div {width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000; } </style>

總結(jié)

以上是生活随笔為你收集整理的CSS面试总结（大致）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。