1、盒模型
標准盒模型：box-sizing:content-box; 總寬度：內容 ( content ) + border + padding 注意這里不算margin 計算頁面的總寬度 加margin
IE盒模型(怪異盒模型)： box-sizing:border-box; 寬度 = 內容寬度 ( content + border + padding )
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、CSS單位
⑴px：絕對單位。頁面按精確像素展示。
⑵em：相對單位，基准點為父節點字體的大小，如果自定義了font-size按自身的來算，整個頁面內1em不是一個固定的值。
⑶rem：相對單位，相對於根節點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以上支持。
4、CSS選擇器
5、BFC
6、清除浮動的方法
清浮動是為了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使頁面后面的布局不能正常顯示
浮動帶來的問題：
- 父元素的高度無法被撐開，影響與父元素同級的元素
- 與浮動元素同級的非浮動元素（內聯元素）會跟隨其后
- 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
清除浮動的方法
①給設置了浮動的元素的父級加高。
②給設置了浮動的元素的父級設置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>
.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;
}
7、層疊上下文
X軸，
Y軸以及表示層疊的
Z軸。一般情況下，元素在頁面上沿
X軸Y軸平鋪，我們察覺不到它們在
Z軸上的層疊關系。而一旦元素發生堆疊，這時就能發現某個元素可能覆蓋了另一個元素或者被另一個元素覆蓋。
通元素設置position屬性 為非static值 並設置z-index屬性為具體數值，產生層疊上下文。
8、常見頁面布局
⑴靜態布局：最傳統、原始的Web布局設計。網頁最外層容器(outer)有固定的大小,所有的內容以該容器為標准,超出寬高的部分用滾動條(overflow:scroll)來實現滾動查閱。
優點：采用的是css2之前的寫法,不存在瀏覽器兼容性。布局簡單。
缺點：但是移動端不可以使用pc端的頁面,兩個頁面的布局不一致,移動端需要自己另外設計一個布局並使用不同域名呈現。
⑵流式布局：流式布局也叫百分比布局。隨着屏幕的改變，頁面的布局沒有發生大的變化，可以進行適配調整，這個正好與自適應布局相補。
優點：元素的寬高用百分比做單位，元素寬高按屏幕分辨率調整，布局不發生變化。
缺點：屏幕尺度跨度過大的情況下，頁面不能正常顯示。
⑶彈性布局：彈性布局是CSS3引入的強大的布局方式，彈性盒模型：display：flex；
優點：簡單、方便、快速
缺點：CSS3新特性,瀏覽器兼容性非常頭疼。而且手機瀏覽器對flex的支持也不是很理想。
⑷響應式布局：采用自適應布局和流式布局的綜合方式，為不同屏幕分辨率范圍創建流式布局。利用媒體查詢可以檢測到屏幕的尺寸(主要檢測寬度)，並設置不同的CSS樣式，就可以實現響應式的布局。
9、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 代碼
10、CSS3的新特性
新增一：rgba（簡單不做解釋）；
新增二：彈性布局flex（上面第二題）；
新增三：媒體查詢；
新增四：漸變色；
新增五：動畫animation，使用@keyframes定義，使用的元素animation：名字 時間；
@keyframes changeWidth{
0%{width:100px}
100%{width:800px}
}
div{
width:100px;
height:100px;
background:red;
animation:changeWidth 10s forwards;
}
11、display有哪些值
display：none 此元素不被顯示。display：block 此元素顯示為塊級元素，支持寬高，獨占一行。
display：inline 此元素為內聯元素，不支持寬高，不獨占一行。
display：table 此元素作為塊級表格來顯示。
display：flex 此元素為彈性盒模型
display：list-item此元素會作為列表顯示
12、相鄰的兩個inline-block節點為什么會出現間隔，該如何解決？
元素被當成行內元素排版的時候，原來HTML代碼中的回車換行被轉成一個空白符，在字體不為0的情況下，空白符占據一定寬度，所以inline-block的元素之間就出現了空隙。這些元素之間的間距會隨着字體的大小而變化，當行內元素font-size:16px時，間距為8px。(不懂沒關系，看下面解決方法就明白了)。
方法一：父級font-size：0；子級設置字體大小；
方法二：改變書寫方式
//原來 <span>1</span> <span>2</span> <span>3</span> //改變 <span>1</span><span>2</span><span>3</span>
方法三：margin負值
方法四：設置父元素display：table；word-spacing：0(兩個記得都要加上)；
13、meta viewport移動端適配
<metaname="viewport" content="width=device-width,initial-scale=1.0">
14、CSS實現寬度自適應100%，寬高16：9的比例的矩形
*{
margin:0;
padding:0;
}
.wrap{
width:20%;
}
.box{
kground:pink;
}
.box p{
width:100%;
height:100%;
position: absolute;
color:#666;
}
<div class="wrap"> <div class="box"> <p>13</p> </div></div>
15、畫三角形
div{
width:0;
height:0;
border-top:50px solid transparent;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid red;
}
注：上述三角形為正三角形，如果想要倒三角形，那么將border-top的值設為50px solid red，其余的屬性值相同。
16、1像素邊框問題
物理像素：移動設備出廠時，不同設備自帶的不同像素，也稱硬件像素。邏輯像素：即css中記錄的像素。
為什么會有1像素邊框問題：在開發中，在移動端css里面寫了1px，實際看起來比1px粗。這就關系到物理像素和邏輯像素的問題了，開發中UI設計師要求的1px是指設備的物理像素1px，而css里記錄的像素是邏輯像素，它們之間存在一個比例關系，可以用window.devicePixelRadio來獲取，也可以用媒體查詢的-webkit-min-device-pixel-ratio來獲取，比例的多少與設備相關。iphone的devicePixelRatio == 2，而我們設置的border：1px 描述的是設備的獨立像素，所以被放大到物理像素2px顯示，在iphone上就顯的比較粗。
解決方案：
⑴媒體查詢利用設備像素比縮放，設置小數像素。
優點：簡單，好理解。缺點：兼容性差目前IOS8+才支持，IOS7以下、安卓系統都顯示0px。
.box{border:1px solid #333}
@media screen and (-webkit-min-device-pixel-ratio:2){
.box{border:1px solid #333}
}
@media screen and (-webkit-min-device-pixel-radio:3){
.border{border:0.333333px solid #333}
}
⑵設置border-image方案
缺點：需要制作圖片，圓角可能會出現模糊。
.border-image-1px{
border-width:1px 0px;
-webkit-border-image:url("border.png")2 0 strech;
border-image:url("border.png")2 0 stretch;
}
border-image：距離圖片上方2px裁剪圖片作為上邊框，下方2px裁剪作為下邊框。距離左右0像素裁剪圖片即沒有邊框，以拉伸方式展示。
總結：在邊框圖片中，裁剪圖片上下方的2個像素寬度作為上下邊框，並展示在寬度為1個像素的邊框空間里。左右沒有邊框。
⑶box-shadow方案
優點是沒有圓角問題。缺點是顏色不好控制。
.box{
-webkit-box-shadow:0 1px 1px -1px rgba(0,0,0,.5);
}
參數：水平陰影位置，垂直陰影位置，模糊距離，陰影尺寸，陰影顏色，將外部陰影改為內部陰影。
⑷transform：scale(0.5)方案（推薦）：
以上的方案，思想其實都是將1px縮小為0.5px來展示，然而0.5px並不是所有的設備或瀏覽器都支持。其實1像素問題的產生基本發生在設置邊框或分割線的時候，場景並不覆蓋全局樣式，因此，直接縮放需要設置的元素，才是我們真正需求的。transform就可以實現。
①設置height：1px，根據媒體查詢結合transform縮放為相應的尺寸
.box{
height:1px;
background:#333;
-webkit-transform:scaleY(0.5);
-webkit-transform-origin:0 0;
overflow:hidden;
}
②用: :after和: :before，設置border-bottom：1px solid #000；，然后縮放-webkit-transform：scaleY(0.5)；可以實現兩根邊線的需求；
.box::after{
content:"";
width:100%;
border-bottom:1px solid #000;
transform:scaleY(0.5);
}
③用: :after設置border：1px solid #000；width：200%；height：200%；然后縮放scaleY(0.5)；優點可以實現圓角京東就是這么實現的，缺點是按鈕添加active比較麻煩。
.div::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transform-origin: top left;
}
17.如何實現一個最大的正方形
用 padding-bottom 撐開邊距
section {
width:100%;
padding-bottom: 100%;
background: #333;
}
18.一行水平居中，多行居左
<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
<div><span>我是一行文字</span></div>
<style>
div{text-align: center;}
div span{display: inline-block;text-align: left;}
</style>
19.水平垂直居中
大佬的文章： https://juejin.im/post/684490347487900468020.如何實現左右等高布局
table布局兼容性最好，當然flex布局的align-items: stretch;也行
<div class="layout">
<div class="layout left">left</div>
<div class="layout right">center</div>
</div>
<style>
.layout{
display: table;
width: 100%;
}
.layout div{
display: table-cell;
}
.layout .left{
width: 50%;
height: 200px;
background: red;
}
.layout .right{
width: 50%;
background: yellow;
}
</style>
21.link @import導入css
- link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬於CSS范疇，只能加載CSS
- link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載
- link無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持
- link支持使用Javascript控制DOM去改變樣式；而@import不支持
22. position的值releave和absolute定位遠點是？
- absolute 生成絕對定位元素，相對與值部位static的第一個父元素進行定位
- fixed 生成絕對的元素，相對於瀏覽器窗口進行定位
- relative 生成相對定位的元素，相對於其正常位置進行定位
- static 默認值。沒有定位，元素出現在正常出現的流中
- inherit 規定從父元素繼承position屬性的值
23.經常遇到的瀏覽器的兼容性問題有哪些，原因，解決方法是什么
- png24位的圖片在Ie6瀏覽器上出現背景。解決方案是做成png8
- 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0}來統一
- IE6雙邊距bug；礦屬性變遷float后，又有橫向的margin情況下，在Ie6顯示margin比設置的大。解決方案是在float的標簽控制中加入display:inline；將其妝花為行內漸進識別的方式，從總體中逐步排除局部。
- 設置較小高度標簽(一般小於10px)，在IE6，IE7中高度超出自己設置高度。解決方法:給超出高度的標簽設置overflow:hidden;或者設置行高line-hieght小於你設置的高度
- chrome中文界面默認或將小於12px的文本強制按照12px的文本強制按照12px顯示，可通過加入css屬性 -webkit-text-size-adjust:none 解決
移動端1px邊框問題。解決方案采用偽元素模擬的方式
-
.scale{ position: relative; border:none; } .scale:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } - 點透問題，在安卓某些版本觸發兩次點擊問題。解決方案：引入fastclick處理點透問題
- 安卓部分版本input里的placeholder位置偏上。解決方案：把input的line-height設為normal
- ios滾動卡頓。解決方案：在滾動的容器上加上
webkit-over-flow-scrolling:touch; - ios的body位置overflow：hidden后仍然可以滾動。解決方案：一般在所有元素最外層再包一大盒子.wrapper
-
.wrapper{ position:relative; overflow:hidden; }
24. margin和padding分別適合什么場景使用？
margin是用來隔開元素與元素的間距；
- 需要在border外側添加空白
- 空白處不需要背景色
- 上下相連的兩個盒子之間的空白，需要相互抵消時。
padding是用來隔開元素與內容的間隔。
- 需要在border內側添加空白
- 空白處需要背景顏色
- 上下相連的兩個盒子的空白，希望為兩者之和。
margin是用來布局分開元素，使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容與元素之間有一段間距
兼容性的問題：在IE5 IE6中，為float的盒子指定margin時，左側的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決。
25.什么是偽類，什么是偽元素，他們的區別？
- 偽類的受體是文檔樹中已有的元素，而偽元素則創建了一個DOM外的元素
- 偽類用於添加元素的特殊效果，而偽元素則是添加元素的內容
- 偽類使用的一個冒號，偽元素使用兩個冒號
- 偽類更常用一些簡單的動畫或者交互的樣式，例如滑入滑出，而為偽元素更常用語字體圖標，清除浮動等
26. 什么是外邊距合並
外邊距合並指的是，當兩個垂直外邊距相遇時，他們將形成一個外邊距。合並后的外邊距的高度等於兩個發生合並的外邊距的高度中較大者
27.為什么要初始化CSS樣式
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
28.CSS里的visibility屬性有個collapse屬性值？在不同瀏覽器下以后什么區別？
當一個元素的visibility屬性被設置成collapse值后，對於一般的元素，它的表現跟hidden是一樣的。
- chrome中，使用collapse值和使用hidden沒有區別。
- firefox，opera和IE，使用collapse值和使用display：none沒有什么區別。
29.display:none與visibility：hidden的區別？
display：none 不顯示對應的元素，在文檔布局中不再分配空間（回流+重繪）
visibility：hidden 隱藏對應元素，在文檔布局中仍保留原來的空間（重繪）
30.position跟display、overflow、float這些特性相互疊加后會怎么樣？
display屬性規定元素應該生成的框的類型；position屬性規定元素的定位類型；float屬性是一種布局方式，定義元素在哪個方向浮動。
類似於優先級機制：position：absolute/fixed優先級最高，有他們在時，float不起作用，display值需要調整。float 或者absolute定位的元素，只能是塊元素或表格。
31.設置元素浮動后，該元素的display值是多少？
自動變成display:block
32.CSS優化、提高性能的方法有哪些？
- 避免過度約束
- 避免后代選擇符
- 避免鏈式選擇符
- 使用緊湊的語法
- 避免不必要的命名空間
- 避免不必要的重復
- 最好使用表示語義的名字。一個好的類名應該是描述他是什么而不是像什么
- 避免！important，可以選擇其他選擇器
- 盡可能的精簡規則，你可以合並不同類里的重復規則
32.在網頁中的應該使用奇數還是偶數的字體？為什么呢？
使用偶數字體。偶數字號相對更容易和 web 設計的其他部分構成比例關系。Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px時用的是小一號的點。（即每個字占的空間大了 1 px，但點陣沒變），於是略顯稀疏。