說一下 css 盒模型
參考回答：
簡介： 就是用來裝頁面上的元素的矩形區域 。CSS 中的盒子模型包括 IE 盒子模型和标 準的 W3C 盒子模型。
box-sizing(有 3 個值哦)： border-box,padding-box,content-box.
标準盒子模型：
IE 盒子模型：
差別： 從圖中我們可以看出， 這兩種盒子模型最主要的差別就是 width 的包含範圍， 在 标準的盒子模型中， width 指 content 部分的寬度， 在 IE 盒子模型中， width 表示 content+padding+border 這三個部分的寬度，故這使得在計算整個盒子的寬度時存在着差 異：
标準盒子模型的盒子寬度： 左右 border+左右 padding+width
IE 盒子模型的盒子寬度： width 在 CSS3 中引入了 box-sizing 屬性， box-sizing:content-box;表示标準的盒子模型， box-sizing:border-box 表示的是 IE 盒子模型 最後， 前面我們還提到了， box-sizing:padding-box,這個屬性值的寬度包含了左右 padding+width 也很好了解性記憶， 包含什麼， width 就從什麼開始算起。
畫一條 0.5px 的線
參考回答：
采用 meta viewport 的方式
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 采用 border-image 的方式
采用 transform: scale()的方式
link 标簽和 import 标簽的差別
參考回答：
link 屬于 html 标簽， 而@import 是 css 提供的
頁面被加載時， link 會同時被加載， 而@import 引用的 css 會等到頁面加載結束後加載。 link 是 html 标簽， 是以沒有相容性， 而@import 隻有 IE5 以上才能識别。
link 方式樣式的權重高于@import 的。
transition 和 animation 的差別
參考回答：
Animation 和 transition 大部分屬性是相同的， 他們都是随時間改變元素的屬性值， 他們 的主要差別是 transition 需要觸發一個事件才能改變屬性， 而 animation 不需要觸發任何 事件的情況下才會随時間改變屬性值，并且 transition 為 2 幀，從 from .... to，而 animation 可以一幀一幀的。
Flex 布局
參考回答：
文章連結：
Flex 是 Flexible Box 的縮寫， 意為"彈性布局"， 用來為盒狀模型提供最大的靈活性。
布局的傳統解決方案，基于盒狀模型，依賴 display 屬性 + position 屬性 + float 屬性。它 對于那些特殊布局非常不友善， 比如， 垂直居中就不容易實作。
簡單的分為容器屬性和元素屬性
容器的屬性：
flex-direction： 決定主軸的方向 (即子 item 的排列方法)
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap： 決定換行規則
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-flow：
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content： 對其方式， 水準主軸對齊方式
align-items： 對齊方式， 豎直軸線方向 項目的屬性 (元素的屬性) ：
order 屬性： 定義項目的排列順序， 順序越小， 排列越靠前， 預設為 0
flex-grow 屬性： 定義項目的放大比例， 即使存在空間， 也不會放大
flex-shrink 屬性： 定義了項目的縮小比例， 當空間不足的情況下會等比例的縮小， 如果 定義個 item 的 flow-shrink 為 0， 則為不縮小
flex-basis 屬性： 定義了在配置設定多餘的空間， 項目占據的空間。
flex： 是 flex-grow 和 flex-shrink 、flex-basis 的簡寫， 預設值為 0 1 auto。
align-self： 允許單個項目與其他項目不一樣的對齊方式， 可以覆寫 align-items， 預設屬 性為 auto， 表示繼承父元素的 align-items
比如說， 用 flex 實作聖杯布局
BFC (塊級格式化上下文， 用于清楚浮動， 防止 margin 重疊等)
參考回答：
直譯成： 塊級格式化上下文， 是一個獨立的渲染區域， 并且有一定的布局規則。 BFC 區域不會與 float box 重疊
BFC 是頁面上的一個獨立容器， 子元素不會影響到外面
計算 BFC 的高度時， 浮動元素也會參與計算
那些元素會生成 BFC：
根元素
float 不為 none 的元素
position 為 fixed 和 absolute 的元素
display 為 inline-block 、table-cell 、table-caption， flex， inline-flex 的元素 overflow 不為 visible 的元素
垂直居中的方法
參考回答：
(1)margin:auto 法
css:
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
} html:
<div>
<img src="mm.jpg">
</div> 定位為上下左右為 0， margin： 0 可以實作脫離文檔流的居中.
(2)margin 負值法
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height 的一半*/
margin-left: -240px; /*width 的一半*/
} 補充： 其實這裡也可以将 marin-top 和 margin-left 負值替換成，
transform： translateX(-50%)和 transform： translateY(-50%)
(3)table-cell (未脫離文檔流的)
設定父元素的 display:table-cell,并且 vertical-align:middle，這樣子元素可以實作垂直居中。
css:
div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
} (4)利用 flex
将父元素設定為 display:flex， 并且設定 align-items:center;justify-content:center;
css:
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
} 關于 JS 動畫和 css3 動畫的差異性
參考回答：
渲染線程分為 main thread 和 compositor thread，如果 css 動畫隻改變 transform 和 opacity， 這時整個 CSS 動畫得以在 compositor trhead 完成 (而 JS 動畫則會在 main thread 執行，然 後出發 compositor thread 進行下一步操作) ， 特别注意的是如果改變 transform 和 opacity 是不會 layout 或者 paint 的。
差別：
功能涵蓋面， JS 比 CSS 大
實作/重構難度不一， CSS3 比 JS 更加簡單， 性能跳優方向固定
對幀速表現不好的低版本浏覽器， css3 可以做到自然降級
css 動畫有天然事件支援
css3 有相容性問題
說一下塊元素和行元素
參考回答：
塊元素： 獨占一行， 并且有自動填滿父元素， 可以設定 margin 和 pading 以及高度和寬 度
行元素： 不會獨占一行， width 和 height 會失效， 并且在垂直方向的 padding 和 margin 會失 效。
多行元素的文本省略号
參考回答：
display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden visibility=hidden, opacity=0， display:none
參考回答：
opacity=0，該元素隐藏起來了， 但不會改變頁面布局， 并且， 如果該元素已經綁定一些 事件， 如 click 事件， 那麼點選該區域， 也能觸發點選事件的 visibility=hidden， 該元素 隐藏起來了，但不會改變頁面布局，但是不會觸發該元素已經綁定的事件 display=none， 把元素隐藏起來， 并且會改變頁面布局， 可以了解成在頁面中把該元素删除掉一樣。
雙邊距重疊問題 (外邊距折疊)
參考回答：
多個相鄰 (兄弟或者父子關系) 普通流的塊元素垂直方向 marigin 會重疊 折疊的結果為：
兩個相鄰的外邊距都是正數時， 折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時， 折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時， 折疊結果是兩者的相加的和。
position 屬性比較
參考回答：
固定定位 fixed：
元素的位置相對于浏覽器視窗是固定位置， 即使視窗是滾動的它也不會移動 。Fixed 定 位使元素的位置與文檔流無關， 是以不占據空間 。 Fixed 定位的元素和其他元素重疊。 相對定位 relative：
如果對一個元素進行相對定位，它将出現在它所在的位置上。然後，可以通過設定垂直 或水準位置， 讓這個元素“相對于”它的起點進行移動 。 在使用相對定位時， 無論是 否進行移動， 元素仍然占據原來的空間 。 是以， 移動元素會導緻它覆寫其它框。
絕對定位 absolute：
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那 麼它的位置相對于<html> 。absolute 定位使元素的位置與文檔流無關，是以不占據空間。 absolute 定位的元素和其他元素重疊。
粘性定位 sticky：
元素先按照普通文檔流定位，然後相對于該元素在流中的flowroot (BFC) 和 containing block (最近的塊級祖先元素) 定位。而後，元素定位表現為在跨越特定門檻值前為相對定 位， 之後為固定定位。
預設定位 Static：
預設值。沒有定位，元素出現在正常的流中 (忽略 top, bottom, left, right 或者 z-index 聲 明) 。
inherit:
規定應該從父元素繼承 position 屬性的值。
浮動清除
參考回答：
方法一： 使用帶 clear 屬性的空元素 在浮動元素後使用一個空元素如<div class="clear"></div>， 并在 CSS 中賦 予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />或<hr class="clear" /> 來進行清理。
方法二： 使用 CSS 的 overflow 屬性
給浮動元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮動，另外在 IE6 中還 需要觸發 hasLayout ， 例如為父元素設定容器寬高或設定 zoom:1 。 在添加 overflow 屬性後， 浮動元素又回到了容器層， 把容器高度撐起， 達到了清理浮動 的效果。
方法三： 給浮動的元素的容器添加浮動 給浮動元素的容器也添加上浮動屬性即可清除内部浮動，但是這樣會使其整體浮動，影 響布局， 不推薦使用。
方法四： 使用鄰接元素處理
什麼都不做， 給浮動元素後面的元素添加 clear 屬性。
方法五： 使用 CSS 的:after 僞元素
結合:after 僞元素 (注意這不是僞類， 而是僞元素， 代表一個元素之後最近的元素) 和 IEhack ，可以完美相容目前主流的各大浏覽器，這裡的 IEhack 指的是觸發 hasLayout。 給浮動元素的容器添加一個 clearfix 的 class， 然後給這個 class 添加一個:after 僞元素實 現元素末尾添加一個看不見的塊元素 (Block element) 清理浮動 。 參考
css3 新特性
參考回答：
開放題 。CSS3 邊框如 border-radius， box-shadow 等； CSS3 背景如 background-size， background-origin 等； CSS3 2D， 3D 轉換如 transform 等； CSS3 動畫如 animation 等。 參考
CSS 選擇器有哪些， 優先級呢
參考回答：
id 選擇器， class 選擇器， 标簽選擇器， 僞元素選擇器， 僞類選擇器等 同一進制素引用了多個樣式時， 排在後面的樣式屬性的優先級高；
樣式選擇器的類型不同時， 優先級順序為： id 選擇器 > class 選擇器 > 标簽選擇器； 标簽之間存在層級包含關系時，後代元素會繼承祖先元素的樣式。如果後代元素定義了 與祖先元素相同的樣式，則祖先元素的相同的樣式屬性會被覆寫。繼承的樣式的優先級 比較低， 至少比标簽選擇器的優先級低；
帶有!important 标記的樣式屬性的優先級最高；
樣式表的來源不同時，優先級順序為：内聯樣式> 内部樣式 > 外部樣式 > 浏覽器使用者 自定義樣式 > 浏覽器預設樣式
怎麼樣讓一個元素消失， 講講
參考回答：
display:none; visibility:hidden; opacity: 0; 等等
介紹一下盒模型
參考回答：
CSS 盒模型本質上是一個盒子， 封裝周圍的 HTML 元素， 它包括： 邊距， 邊框， 填充， 和實際内容。
标準盒模型： 一個塊的總寬度=width+margin(左右)+padding(左右)+border(左右)
怪異盒模型： 一個塊的總寬度=width+margin (左右) (既 width 已經包含了 padding 和 border 值)
設定盒模型： box-sizing:border-box
position 相關屬性
參考回答：
固定定位 fixed：
元素的位置相對于浏覽器視窗是固定位置， 即使視窗是滾動的它也不會移動 。Fixed 定 位使元素的位置與文檔流無關， 是以不占據空間 。 Fixed 定位的元素和其他元素重疊。 相對定位 relative：
如果對一個元素進行相對定位，它将出現在它所在的位置上。然後，可以通過設定垂直 或水準位置， 讓這個元素“相對于”它的起點進行移動 。 在使用相對定位時， 無論是 否進行移動， 元素仍然占據原來的空間 。 是以， 移動元素會導緻它覆寫其它框。
絕對定位 absolute：
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那 麼它的位置相對于<html> 。absolute 定位使元素的位置與文檔流無關，是以不占據空間。 absolute 定位的元素和其他元素重疊。
粘性定位 sticky：
元素先按照普通文檔流定位，然後相對于該元素在流中的flowroot (BFC) 和 containing block (最近的塊級祖先元素) 定位。而後，元素定位表現為在跨越特定門檻值前為相對定 位， 之後為固定定位。
預設定位 Static：
預設值。沒有定位，元素出現在正常的流中 (忽略 top, bottom, left, right 或者 z-index 聲 明) 。
inherit:
規定應該從父元素繼承 position 屬性的值。
css 動畫如何實作
參考回答：
建立動畫序列， 需要使用animation 屬性或其子屬性， 該屬性允許配置動畫時間 、時長 以及其他動畫細節， 但該屬性不能配置動畫的實際表現， 動畫的實際表現是
由 @keyframes 規則實作， 具體情況參見使用 keyframes 定義動畫序列小節部分 。 transition 也可實作動畫。transition 強調過渡，是元素的一個或多個屬性發生變化時産生 的過渡效果， 同一個元素通過兩個不同的途徑擷取樣式，而第二個途徑當某種改變發生 (例如 hover) 時才能擷取樣式， 這樣就會産生過渡動畫。
如何實作圖檔在某個容器中居中的？
參考回答：
父元素固定寬高， 利用定位及設定子元素 margin 值為自身的一半。
父元素固定寬高， 子元素設定 position: absolute， margin： auto 平均配置設定 margin css3 屬性 transform 。子元素設定 position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可。
将父元素設定成 display: table, 子元素設定為單元格 display: table-cell。
彈性布局 display: flex 。設定 align-items: center; justify-content: center
如何實作元素的垂直居中
參考回答：
法一： 父元素 display:flex,align-items:center;
法二： 元素絕對定位， top:50%， margin-top： - (高度/2)
法三： 高度不确定用 transform： translateY ( -50%)
法四： 父元素 table 布局， 子元素設定 vertical-align:center;
CSS3 中對溢出的處理
參考回答：
cnkOhu
text-overflow 屬性， 值為 clip 是修剪文本； ellipsis 為顯示省略符号來表被修剪的文本； string 為使用給定的字元串來代表被修剪的文本。
float 的元素， display 是什麼
參考回答：
display 為 block
隐藏頁面中某個元素的方法
參考回答：
display:none; visibility:hidden; opacity: 0; position 移到外部， z-index 塗層遮蓋等等
三欄布局的實作方式， 盡可能多寫， 浮動布局時， 三個 div 的生成順序有沒有影響？
參考回答：
三列布局又分為兩種， 兩列定寬一列自适應， 以及兩側定寬中間自适應
兩列定寬一列自适應：
1 、使用 float+margin：
給 div 設定 float： left， left 的 div 添加屬性 margin-right： left 和 center 的間隔 px,right 的 div 添加屬性 margin-left： left 和 center 的寬度之和加上間隔
2 、使用 float+overflow：
給 div 設定 float： left， 再給 right 的 div 設定 overflow:hidden 。這樣子兩個盒子浮動， 另 一個盒子觸發 bfc 達到自适應
3 、使用 position：
父級 div 設定 position： relative， 三個子級 div 設定 position： absolute， 這個要計算好盒 子的寬度和間隔去設定位置， 相容性比較好，
4 、使用 table 實作：
父級 div 設定 display： table， 設定 border-spacing： 10px//設定間距， 取值随意,子級 div 設定 display:table-cell， 這種方法相容性好， 适用于高度寬度未知的情況， 但是 margin 失效， 設計間隔比較麻煩，
5 、flex 實作：
parent 的 div 設定 display： flex； left 和 center 的 div 設定 margin-right； 然後 right 的 div 設定 flex： 1； 這樣子 right 自适應， 但是 flex 的相容性不好
6 、grid 實作：
parent 的 div 設定 display： grid，設定 grid-template-columns 屬性， 固定第一列第二列寬 度， 第三列 auto，
對于兩側定寬中間自适應的布局，對于這種布局需要把 center 放在前面，可以采用雙飛 翼布局： 聖杯布局， 來實作， 也可以使用上述方法中的 grid， table， flex， position 實作
什麼是 BFC
參考回答：
BFC 也就是常說的塊格式化上下文， 這是一個獨立的渲染區域， 規定了内部如何布局， 并且這個區域的子元素不會影響到外面的元素，其中比較重要的布局規則有内部 box 垂 直放置， 計算 BFC 的高度的時候， 浮動元素也參與計算， 觸發 BFC 的規則有根元素， 浮動元素， position 為 absolute 或 fixed 的元素， display 為 inline-block， table-cell， table-caption， flex， inline-flex， overflow 不為 visible 的元素
calc 屬性
參考回答：
Calc 使用者動态計算長度值， 任何長度值都可以使用calc()函數計算， 需要注意的是， 運 算符前後都需要保留一個空格， 例如： width: calc(100% - 10px)；
有一個 width300， height300， 怎麼實作在螢幕上垂直水準居中
參考回答：
對于行内塊級元素，
1、父級元素設定 text-alig：center，然後設定 line-height 和 vertical-align 使其垂直居中， 最後設定 font-size： 0 消除近似居中的 bug
2 、父級元素設定 display： table-cell， vertical-align： middle 達到水準垂直居中
3、采用絕對定位，原理是子絕父相，父元素設定 position：relative，子元素設定 position： absolute，然後通過 transform 或 margin 組合使用達到垂直居中效果，設定 top：50%，left： 50%， transform： translate ( -50%， -50%)
4 、絕對居中， 原理是當 top,bottom 為 0 時， margin-top&bottom 設定 auto 的話會無限延 伸沾滿空間并平分， 當 left， right 為 0 時,margin-left&right 設定 auto 會無限延伸占滿空 間并平分，
5 、采用 flex， 父元素設定 display： flex， 子元素設定 margin： auto
6、視窗居中，vh 為視口機關， 50vh 即是視口高度的 50/100，設定 margin： 50vh auto 0， transform： translate(-50%)
display： table 和本身的 table 有什麼差別
參考回答：
Display:table 和本身 table 是相對應的， 差別在于， display： table 的 css 聲明能夠讓一個 html 元素和它的子節點像 table 元素一樣，使用基于表格的 css 布局，是我們能夠輕松定 義一個單元格的邊界， 背景等樣式， 而不會産生因為使用了 table 那樣的制表标簽導緻 的語義化問題。
之是以現在逐漸淘汰了 table 系表格元素， 是因為用div+css 編寫出來的檔案比用table 邊寫出來的檔案小， 而且 table 必須在頁面完全加載後才顯示， div 則是逐行顯示，table 的嵌套性太多， 沒有 div 簡潔
position 屬性的值有哪些及其差別
參考回答：
Position 屬性把元素放置在一個靜态的， 相對的， 絕對的， 固定的位置中，
Static：位置設定為 static 的元素，他始終處于頁面流給予的位置，static 元素會忽略任何 top,buttom,left,right 聲明
Relative： 位置設定為 relative 的元素， 可将其移至相對于其正常位置的地方， 是以 left： 20 會将元素移至元素正常位置左邊 20 個像素的位置
Absolute： 此元素可定位于相對包含他的元素的指定坐标， 此元素可通過left， top 等屬 性規定
Fixed： 位置被設為 fiexd 的元素， 可定為與相對浏覽器視窗的指定坐标， 可以通過 left， top， right 屬性來定位
z-index 的定位方法
參考回答：
z-index 屬性設定元素的堆疊順序，擁有更好堆疊順序的元素會處于較低順序元素之前， z-index 可以為負，且 z-index 隻能在定位元素上奏效，該屬性設定一個定位元素沿 z 軸的位置， 如果為正數， 離使用者越近， 為負數， 離使用者越遠， 它的屬性值有auto， 預設， 堆疊順序與父元素相等， number， inherit， 從父元素繼承 z-index 屬性的值。
如果想要改變一個 DOM 元素的字型顔色， 不在它本身上進行操作？
參考回答：
可以更改父元素的color
對 CSS 的新屬性有了解過的嗎？
參考回答：
CSS3 的新特性中， 在布局方面新增了 flex 布局， 在選擇器方面新增了例如
first-of-type,nth-child 等選擇器，在盒模型方面添加了 box-sizing 來改變盒模型，在動畫 方面增加了 animation， 2d 變換， 3d 變換等， 在顔色方面添加透明， rbga 等， 在字型方 面允許嵌入字型和設定字型陰影， 最後還有媒體查訊等。
用的最多的 css 屬性是啥？
參考回答：
用的目前來說最多的是 flex 屬性， 靈活但是相容性方面不強。
line-height 和 height 的差別
參考回答：
line-height 一般是指布局裡面一段文字上下行之間的高度，是針對字型來設定的，height 一般是指容器的整體高度。
設定一個元素的背景顔色， 背景顔色會填充哪些區域？
參考回答：
background-color 設定的背景顔色會填充元素的 content 、padding 、border 區域。
知道屬性選擇器和僞類選擇器的優先級嗎
參考回答：
屬性選擇器和僞類選擇器優先級相同
inline-block、inline 和 block 的差別；為什麼 img 是 inline 還可以設定寬高
參考回答：
Block 是塊級元素，其前後都會有換行符， 能設定寬度，高度，margin/padding 水準垂直 方向都有效。
Inline： 設定 width 和 height 無效， margin 在豎直方向上無效， padding 在水準方向垂直 方向都有效， 前後無換行符
Inline-block： 能設定寬度高度， margin/padding 水準垂直方向 都有效， 前後無換行符
用 css 實作一個硬币旋轉的效果
參考回答：
雖然不認為很多人能在面試中寫出來
#euro {
width: 150px;
height: 150px;
margin-left: -75px;
margin-top: -75px;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
animation: spin 2.5s linear infinite;
}
.back {
background-image: url("/uploads/160101/backeuro.png");
width: 150px;
height: 150px;
}
.middle {
background-image: url("/uploads/160101/faceeuro.png");
width: 150px;
height: 150px;
transform: translateZ(1px);
position: absolute;
top: 0;
}
.front {
background-image: url("/uploads/160101/faceeuro.png");
height: 150px;
position: absolute;
top: 0;
transform: translateZ(10px);
width: 150px;
}
@keyframes spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
了解重繪和重排嗎，知道怎麼去減少重繪和重排嗎，讓文檔脫離文檔流有哪些方法？
參考回答：
DOM 的變化影響到了預算内宿的幾何屬性比如寬高，浏覽器重新計算元素的幾何屬性， 其他元素的幾何屬性也會受到影響，浏覽器需要重新構造渲染書，這個過程稱之為重排， 浏覽器将受到影響的部分重新繪制在螢幕上 的過程稱為重繪，引起重排重繪的原因有： 添加或者删除可見的 DOM 元素，元素尺寸位置的改變浏覽器頁面初始化，浏覽器視窗大小發生改變， 重排一定導緻重繪， 重繪不一定導緻重排， 減少重繪重排的方法有：
不在布局資訊改變時做 DOM 查詢，
使用 csstext,className 一次性改變屬性
使用 fragment
對于多次重排的元素， 比如說動畫 。使用絕對定位脫離文檔流， 使其不影響其他元素CSS 畫正方體， 三角形。
參考回答：
畫三角形
#triangle02{
width: 0;
height: 0;
border-top: 50px solid blue;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid yellow;
} 畫正方體：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective</title>
<style>
.wrapper{
width: 50%;
float: left;
}
.cube{
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style:preserve-3d;
transform:rotateX(-35deg) rotateY(30deg);
}
.side{
position: absolute;
width: 2em;
height: 2em;
background: rgba(255,99,71,0.6);
border: 1px solid rgba(0,0,0,0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front{
transform:translateZ(1em);
}
.bottom{
transform:rotateX(-90deg) translateZ(1em);
}
.top{
transform:rotateX(90deg) translateZ(1em);
}
.left{
transform:rotateY(-90deg) translateZ(1em);
}
.right{
transform:rotateY(90deg) translateZ(1em);
}
.back{
transform:translateZ(-1em);
}
</style>
</head>
<body>
<div class="wrapper w1">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
<div class="wrapper w2">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
</body>
</html> overflow 的原理
參考回答：
要講清楚這個解決方案的原理，首先需要了解塊格式化上下文，A block formattingcontext is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.翻譯過來就是塊格式化上下文是 CSS 可視化渲染的一部分， 它是一塊區域， 規定了内部塊盒 的渲染方式， 以及浮動相 互之間的影響關系。
當元素設定了 overflow 樣式且值部位 visible 時，該元素就建構了一個 BFC，BFC 在計算 高度時， 内部浮動元素的高度也要計算在内， 也就是說技術 BFC 區域内隻有一個浮動 元素， BFC 的高度也不會發生塌縮， 是以達到了清除浮動的目的。
清除浮動的方法
參考回答：
給要清除浮動的元素添加樣式clear，父元素結束标簽錢插入清除浮動的塊級元素， 給該元素添加樣式clear添加僞元素，在父級元素的最後，添加一個僞元素，通過清除僞元素的浮動，注意該僞 元素的 display 為 block，父元素添加樣式 overflow 清除浮動， overflow 設定除 visible 以外的任何位置。
box-sizing 的文法和基本用處
參考回答：
box-sizing 規定兩個并排的帶邊框的框，文法為 box-sizing：content-box/border-box/inherit content-box： 寬度和高度分别應用到元素的内容框，在寬度和高度之外繪制元素的内邊距和邊框。
border-box： 為元素設定的寬度和高度決定了元素的邊框盒，
inherit： 繼承父元素的 box-sizing
使元素消失的方法有哪些？
參考回答：
1. opacity： 0， 該元素隐藏起來了， 但不會改變頁面布局， 并且， 如果該元素已經綁定 一些事件， 如 click 事件， 那麼點選該區域， 也能觸發點選事件的
2. visibility：hidden，該元素隐藏起來了，但不會改變頁面布局，但是不會觸發該元素已 經綁定的事件
3. display： none， 把元素隐藏起來， 并且會改變頁面布局， 可以了解成在頁面中把該元 素删除掉。
兩個嵌套的 div，position 都是 absolute，子 div 設定 top 屬性，那麼這個 top是相對于父元素的哪個位置定位的。
參考回答：
margin 的外邊緣
說說盒子模型
參考回答：
CSS 盒模型本質上是一個盒子， 封裝周圍的 HTML 元素， 它包括： 邊距， 邊框， 填充， 和實際内容。
标準盒模型： 一個塊的總寬度=width+margin(左右)+padding(左右)+border(左右)
怪異盒模型： 一個塊的總寬度=width+margin (左右) (既 width 已經包含了 padding 和 border 值)
如何設定： box-sizing:border-box、display
參考回答：
主要取值有 none,block,inline-block,inline,flex 等 。具體可參考
怎麼隐藏一個元素
參考回答：
1. opacity： 0， 該元素隐藏起來了， 但不會改變頁面布局， 并且， 如果該元素已經綁定 一些事件， 如 click 事件， 那麼點選該區域， 也能觸發點選事件的
2. visibility：hidden，該元素隐藏起來了，但不會改變頁面布局，但是不會觸發該元素已 經綁定的事件
3. display： none， 把元素隐藏起來， 并且會改變頁面布局， 可以了解成在頁面中把該元 素删除掉。
display:none 和 visibilty:hidden 的差別
參考回答：
1. visibility：hidden，該元素隐藏起來了，但不會改變頁面布局，但是不會觸發該元素已 經綁定的事件
2. display： none， 把元素隐藏起來， 并且會改變頁面布局， 可以了解成在頁面中把該元 素删除掉。
相對布局和絕對布局， position:relative 和 obsolute。
參考回答：
相對定位 relative：
如果對一個元素進行相對定位，它将出現在它所在的位置上。然後，可以通過設定垂直 或水準位置， 讓這個元素“相對于”它的起點進行移動 。 在使用相對定位時， 無論是 否進行移動， 元素仍然占據原來的空間 。 是以， 移動元素會導緻它覆寫其它框。
絕對定位 absolute：
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那 麼它的位置相對于<html> 。absolute 定位使元素的位置與文檔流無關，是以不占據空間。 absolute 定位的元素和其他元素重疊。
flex 布局
參考回答：
flex 是 Flexible Box 的縮寫， 意為"彈性布局" 。指定容器 display: flex 即可。
容器有以下屬性： flex-direction， flex-wrap， flex-flow，justify-content， align-items， align-content。
flex-direction 屬性決定主軸的方向；
flex-wrap 屬性定義， 如果一條軸線排不下， 如何換行；
flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式， 預設值為 row nowrap； justify-content 屬性定義了項目在主軸上的對齊方式。
align-items 屬性定義項目在交叉軸上如何對齊。
align-content 屬性定義了多根軸線的對齊方式 。如果項目隻有一根軸線， 該屬性不起作 用。
項目 (子元素) 也有一些屬性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。 order 屬性定義項目的排列順序 。數值越小， 排列越靠前， 預設為 0。
flex-grow 屬性定義項目的放大比例， 預設為 0， 即如果存在剩餘空間， 也不放大 。 flex-shrink 屬性定義了項目的縮小比例， 預設為 1， 即如果空間不足， 該項目将縮小。 flex-basis 屬性定義了在配置設定多餘空間之前， 項目占據的主軸空間 (main size) 。
flex 屬性是 flex-grow, flex-shrink 和 flex-basis 的簡寫， 預設值為 0 1 auto 。後兩個屬性 可選。
align-self 屬性允許單個項目有與其他項目不一樣的對齊方式， 可覆寫 align-items 屬性。 預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。
參考
block 、inline 、inline-block 的差別。
參考回答：
block 元素會獨占一行， 多個 block 元素會各自新起一行 。預設情況下， block 元素寬度 自動填滿其父元素寬度。
block 元素可以設定 width,height 屬性 。塊級元素即使設定了寬度,仍然是獨占一行。 block 元素可以設定 margin 和 padding 屬性。
inline 元素不會獨占一行，多個相鄰的行内元素會排列在同一行裡，直到一行排列不下， 才會新換一行， 其寬度随元素的内容而變化。
inline 元素設定 width,height 屬性無效。
inline 元素的 margin 和 padding 屬性，水準方向的 padding-left, padding-right, margin-left, margin-right 都産生邊距效果； 但豎直方向的 padding-top, padding-bottom, margin-top, margin-bottom 不會産生邊距效果。
inline-block： 簡單來說就是将對象呈現為 inline 對象， 但是對象的内容作為 block 對象 呈現 。之後的内聯對象會被排列在同一行内 。 比如我們可以給一個 link (a 元素) inline-block 屬性值， 使其既具有 block 的寬度高度特性又具有 inline 的同行特性。
css 的常用選擇器
參考回答：
id 選擇器， 類選擇器， 僞類選擇器等
css 布局
參考回答：
六種布局方式總結： 聖杯布局、雙飛翼布局、Flex 布局、絕對定位布局 、表格布局 、網 格布局 。 聖杯布局是指布局從上到下分為 header、container、footer，然後 container 部分定為三欄 布局。這種布局方式同樣分為 header、container、footer。聖杯布局的缺陷在于 center 是 在 container 的 padding 中的， 是以寬度小的時候會出現混亂 。 雙飛翼布局給center 部分包裹了一個 main 通過設定 margin 主動地把頁面撐開 。 Flex 布局是由CSS3 提供的一種友善的布局方式。
絕對定位布局是給 container 設定 position: relative 和 overflow: hidden，因為絕對定位的元 素的參照物為第一個 postion 不為 static 的祖先元素 。 left 向左浮動， right 向右浮動 。 center 使用絕對定位，通過設定 left 和 right 并把兩邊撐開 。 center 設定 top: 0 和 bottom: 0 使其高度撐開 。 表格布局的好處是能使三欄的高度統一 。 網格布局可能是最強大的布局方式了，使用起來極其友善，但目前而言，相容性并不好。 網格布局，可以将頁面分割成多個區域，或者用來定義内部元素的大小，位置， 圖層關 系。
css 定位
參考回答：
固定定位 fixed：
元素的位置相對于浏覽器視窗是固定位置， 即使視窗是滾動的它也不會移動 。Fixed 定 位使元素的位置與文檔流無關， 是以不占據空間 。 Fixed 定位的元素和其他元素重疊。 相對定位 relative：
如果對一個元素進行相對定位，它将出現在它所在的位置上。然後，可以通過設定垂直 或水準位置， 讓這個元素“相對于”它的起點進行移動 。 在使用相對定位時， 無論是 否進行移動， 元素仍然占據原來的空間 。 是以， 移動元素會導緻它覆寫其它框。
絕對定位 absolute：
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那 麼它的位置相對于<html> 。absolute 定位使元素的位置與文檔流無關，是以不占據空間。 absolute 定位的元素和其他元素重疊。
粘性定位 sticky：
元素先按照普通文檔流定位，然後相對于該元素在流中的flowroot (BFC) 和 containing block (最近的塊級祖先元素) 定位。而後，元素定位表現為在跨越特定門檻值前為相對定 位， 之後為固定定位。
預設定位 Static：
預設值。沒有定位，元素出現在正常的流中 (忽略 top, bottom, left, right 或者 z-index 聲 明) 。
inherit:
規定應該從父元素繼承 position 屬性的值。
relative 定位規則
參考回答：
如果對一個元素進行相對定位，它将出現在它所在的位置上。然後，可以通過設定垂直 或水準位置， 讓這個元素“相對于”它的起點進行移動 。 在使用相對定位時， 無論是 否進行移動， 元素仍然占據原來的空間 。 是以， 移動元素會導緻它覆寫其它框。
垂直居中
參考回答：
父元素固定寬高， 利用定位及設定子元素 margin 值為自身的一半。
父元素固定寬高， 子元素設定 position: absolute， margin： auto 平均配置設定 margin css3 屬性 transform 。子元素設定 position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可。
将父元素設定成 display: table, 子元素設定為單元格 display: table-cell。 彈性布局 display: flex 。設定 align-items: center; justify-content: center;
css 預處理器有什麼
參考回答：
less， sass 等