1. 盒模型

標準盒模型：總寬度：內容 ( content ) + border + padding + marginIE
盒模型(怪異盒模型)：寬度 = 內容寬度 ( content + border + padding ) + margin

2. 彈性盒模型

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

3. 寫出transition過渡動畫的四個屬性？

transition: transition-property: 過渡屬性名 transition-duration: 過渡效果花費的時間 默認是0 transition-timing-function：過渡效果的時間曲線 transition-delay：過渡效果何時開始。默認是 0。

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

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

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

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

6. CSS如何實現垂直水平居中？

第一種方式已知寬高：

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

7. flex彈性盒布局與傳統盒模型布局的區別和優點？

區別：

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

普通盒模型主要針對塊級元素和行級元素的布局，而彈性盒是建立在彈性流上，也就是元素可以隨著可視區域的變化而呈現流式布局

彈性盒的優點：

能為盒模型提供最大的靈活性，即使是不定寬高的元素依然好用，可以簡便、完整、響應式地實現各種頁面布局

8. 簡述一下你對HTML語義化的理解？

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

搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;

使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解

9. CSS單位

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

10. px、em、rem分別是什么？有什么區別？

px表示“絕對尺寸”
em表示相對尺寸
rem也表示相對尺寸

11. CSS選擇器

!important > 內聯樣式 > id選擇器 > class選擇器 > 屬性選擇器 > 偽類選擇器（: hover） > 標簽選擇器 > 偽元素（: before） > 通配符選擇器
可繼承的屬性： font-size、font-family、color

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

權重值：

!important權重值：10000，
內聯樣式：1000，
id選擇器：100
class、偽類、屬性、偽元素選擇器：10
標簽選擇器：1
后代選擇器的權重為包含的選擇符權重值之和。

CSS3新增的偽類：

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

12. 清除浮動的方法

①給設置了浮動的元素的父級加高。
②給設置了浮動的元素的父級設置overflow：hidden。如果需要兼容IE，在添加一個zoom：1
③給需要清除浮動的元素設置clear：both；
④在最后一個子元素的后面加一個空的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中一個三維的概念。
在CSS2.1規范中，每個盒模型的位置是三維的，分別是平面畫布上的X軸，Y軸以及表示層疊的Z軸。一般情況下，元素在頁面上沿X軸,Y軸平鋪，我們察覺不到它們在Z軸上的層疊關系。而一旦元素發生堆疊，這時就能發現某個元素可能覆蓋了另一個元素或者被另一個元素覆蓋。通元素設置position屬性為非static值并設置z-index屬性為具體數值，產生層疊上下文。

14. 常見頁面布局

⑴靜態布局：
最傳統、原始的Web布局設計。網頁最外層容器(outer)有固定的大小,所有的內容以該容器為標準,超出寬高的部分用滾動條(overflow:scroll)來實現滾動查閱。

優點：采用的是css2之前的寫法,不存在瀏覽器兼容性。布局簡單。

缺點：但是移動端不可以使用pc端的頁面,兩個頁面的布局不一致,移動端需要自己另外設計一個布局并使用不同域名呈現。

⑵流式布局：
流式布局也叫百分比布局。隨著屏幕的改變，頁面的布局沒有發生大的變化，可以進行適配調整，這個正好與自適應布局相補。

優點：元素的寬高用百分比做單位，元素寬高按屏幕分辨率調整，布局不發生變化。

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

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

優點：簡單、方便、快速

缺點：CSS3新特性,瀏覽器兼容性非常頭疼。而且手機瀏覽器對flex的支持也不是很理想。

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

15. CSS預處理，后處理

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

優點：語言級邏輯處理，動態特性，改善項目結構
缺點：采用特殊語法，框架耦合度高，復雜度高

實現原理：
①取到 DSL 源代碼 的 分析樹
②將含有 動態生成 相關節點的 分析樹 轉換為 靜態分析樹
③將 靜態分析樹 轉換為 CSS 的 靜態分析樹
④將 CSS 的 靜態分析樹 轉換為 CSS 代碼

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

優點：使用 CSS 語法，容易進行模塊化，貼近 CSS 的未來標準
缺點：邏輯處理能力有限實現原理：
①將 源代碼 做為 CSS 解析，獲得 分析樹
②對 CSS 的 分析樹 進行 后處理
③將 CSS 的 分析樹 轉換為 CSS 代碼

16. BFC

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

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

下列方式會創建塊格式化上下文：

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

上述創建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`

用途：
① 閉合浮動；
② 阻止margin重疊
③ 自適應流體布局

總結：

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

17. 移動端和PC端有什么區別？

界面布局

使用習慣

網絡速度

技術層面

18. 什么是響應式設計？響應式設計的基本原理是什么？

響應式網站設計(Responsive Web design)的理念是：集中創建頁面的圖片排版大小，可以智能地根據用戶行為以及使用的設備環境進行相對應的布局

19. 簡述一下box-sizing屬性

用來控制元素的盒子模型的解析模式，默認為content-box
context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

20. 如何使用純CSS創建一個三角形？

<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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。