(超詳細版)2020前端面試題————CSS

一、盒模型

標準盒模型：box-sizing:content-box; 總寬度：內容 ( content ) + border + padding 注意這裏不算margin 計算頁面的總寬度加margincss

IE盒模型(怪異盒模型)： box-sizing:border-box; 寬度 = 內容寬度 ( content + border + padding ) html

二、彈性盒模型

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/六、1/3 和 1/2 

flex-shrink屬性:(定義彈性盒子元素的收縮比率)
//該屬性的值也是無單位的,表示的是當容器的空間不足各個條目的尺寸縮小的比例。
//例如,在容器中有 3 個條目,其"flex-shrink"屬性的值分別爲 1，2 和 3。
//每一個條目的主軸尺寸均爲 200px。當容器的主軸尺寸不足 600px 時,
//好比變成了 540px 以後則須要縮小的尺寸 60px 由 3 個條目按照比例來分配。
//3 個條目分別要縮小 10px、20px 和 30px,
//主軸尺寸分別變爲 190px、180px 和 170px

三、CSS單位

⑴px：絕對單位。頁面按精確像素展現。ios

⑵em：相對單位，基準點爲父節點字體的大小，若是自定義了font-size按自身的來算，整個頁面內1em不是一個固定的值。web

⑶rem：相對單位，相對於根節點html的font-size的大小來計算。chrome

⑷vw：視窗寬度，1vw等於視窗寬度的1%。編程

⑸vh：視窗高度：1vh等於視窗高度的1%。瀏覽器

⑹vmin：以寬和高之間最短的一端爲基準，若是寬>高，那麼1vmin至關於寬的1%；sass

⑺vmax：以寬和高之間最長的一端爲基準，若是寬>高，那麼1vmax至關於寬的1%；app

⑻%：百分比。框架

⑼pt：point，大約1/72寸，一寸=3.3333···釐米。

⑽pc：pica，大約6pt，1/6寸。

⑾ex：取當前做用效果的字體的x的高度，在沒法肯定x高度的狀況下以0.5em計算，IE11如下不支持。

⑿ch：以節點所使用字體中的「0」字符爲基準，找不到時爲0.5em。IE10以上支持。

四、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或複選框被選中；

五、BFC

BFC是塊級格式化上下文。BFC它是一個 獨立的渲染區域，只有Block-level box（塊元素）參與，它 規定了內部的Block-level box如何佈局，而且與這個 區域外部絕不相關。

能夠理解成：建立了 BFC的元素就是一個獨立的盒子，裏面的子元素不會在佈局上影響外面的元素（裏面怎麼佈局都不會影響外部），BFC仍屬於文檔中的普通流

特性：

① 內部的塊級元素會在垂直方向上一個接一個的放置；

② 位於同一BFC下的相鄰塊級子元素在垂直方向上會發生margin重疊；

③ 位於不一樣BFC下的相鄰元素之間不會發生margin重疊；

④ BFC能夠包含浮動元素；

⑤ BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素；

　⑥計算BFC的高度時，浮動元素也會參與計算

觸發條件：

① 根元素，即html；

② float的值不爲none(默認);

③ overflow的值爲auto、scroll或hidden, 不能爲 visible(默認);

④ display的值爲:

table-cell：它會做爲一個表格單元格顯示（相似td和th）。

table-caption：此元素會做爲一個表格標題顯示。

inline-block：行內塊元素。

⑤ position的值爲fixed或absolute

用途：

① 閉合浮動；

② 阻止margin重疊

③ 自適應流體佈局

六、清除浮動的方法

清浮動是爲了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使頁面後面的佈局不能正常顯示

浮動帶來的問題：

父元素的高度沒法被撐開，影響與父元素同級的元素
與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

清除浮動的方法

①給設置了浮動的元素的父級加高。

②給設置了浮動的元素的父級設置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;
}

七、層疊上下文

層疊上下文(stacking context)，是HTML中一個三維的概念。在CSS2.1規範中，每一個盒模型的位置是三維的，分別是平面畫布上的 X軸， Y軸以及表示層疊的 Z軸。通常狀況下，元素在頁面上沿 X軸Y軸平鋪，咱們察覺不到它們在 Z軸上的層疊關係。而一旦元素髮生堆疊，這時就能發現某個元素可能覆蓋了另外一個元素或者被另外一個元素覆蓋。

通元素設置position屬性爲非static值 並設置z-index屬性爲具體數值，產生層疊上下文。

八、常見頁面佈局

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

優勢：採用的是css2以前的寫法,不存在瀏覽器兼容性。佈局簡單。

缺點：可是移動端不可使用pc端的頁面,兩個頁面的佈局不一致,移動端須要本身另外設計一個佈局並使用不一樣域名呈現。

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

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

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

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

優勢：簡單、方便、快速

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

⑷響應式佈局：採用自適應佈局和流式佈局的綜合方式，爲不一樣屏幕分辨率範圍建立流式佈局。利用媒體查詢能夠檢測到屏幕的尺寸(主要檢測寬度)，並設置不一樣的CSS樣式，就能夠實現響應式的佈局。

九、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 代碼

十、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;
}

十一、display有哪些值

display：none 此元素不被顯示。
display：block 此元素顯示爲塊級元素，支持寬高，獨佔一行。
display：inline 此元素爲內聯元素，不支持寬高，不獨佔一行。
display：table 此元素做爲塊級表格來顯示。
display：flex 此元素爲彈性盒模型

display：list-item此元素會做爲列表顯示

十二、相鄰的兩個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(兩個記得都要加上)；

1三、meta viewport移動端適配

<metaname="viewport" content="width=device-width,initial-scale=1.0">

1四、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>

1五、畫三角形

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，其他的屬性值相同。

1六、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-width：指定邊框的寬度，能夠設定四個值，分別爲上右下左top right bottom left。
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/6844903474879004680

20.如何實現左右等高佈局

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 開始只提供十二、1四、16 px 這三個大小的點陣，而 1三、1五、17 px時用的是小一號的點。（即每一個字佔的空間大了 1 px，但點陣沒變），因而略顯稀疏。