前端面試——CSS相關

時間 2019-11-06

標籤前端面試 css 相關欄目快樂工作简体版

原文原文鏈接

css 盒子模型

w3c盒模型：width不包含border和paddingcss

IE盒模型：width包含border和paddinghtml

能夠經過css去設置盒模型，經過box-sizing去設置，content-box爲w3c盒模型，border-box爲IE盒模型。瀏覽器

css position？

static: 默認值，位於文檔流之中，正常佈局緩存

relative：位於文檔流之中，可使用top和left等屬性，使其相對於原位置進行偏移bash

absolute：絕對定位，元素脫離文檔流，相對於其包含塊定位（第一個非static值的父元素）app

fixed：與absolute相似，不過其包含塊爲頁面（相對於瀏覽器界面進行定位）。異步

inherit：從父元素那繼承position屬性函數

sticky：粘性定位的元素是依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。
佈局

css 居中有幾種方法？

1) 如果行內元素, 給其父元素設置 text-align:center,便可實現行內元素水平居中.post

2) 如果塊級元素, 該元素設置 margin:0 auto便可.

3) 若元素是單行文本, 則可設置 line-height 等於父元素高度

4) 使用flex實現居中, 子元素設置以下:

.father{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
複製代碼

5）使用CSS3中新增的transform屬性, 子元素設置以下:

son{ 
    position:absolute; 
    left:50%; 
    top:50%
    transform:translate(-50%,-50%); 
} 複製代碼

6) 使用絕對定位方式, 以及負值的margin-left, 子元素設置以下:

.son{ 
    position:absolute; 
    width:固定; 
    left:50%; 
    top:50%;
    margin-left:-0.5寬度; 
    margin-top:-0.5寬帶;
} 複製代碼

CSS的權重，結合實例具體分析

!important > 行內樣式>ID選擇器 > 類選擇器/屬性/僞類 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

!important :無窮

Style:1000

id:0100

Class/僞類:0010

標籤:0001

通配符：0000

若是設置background-color: red，那麼盒子模型各個部分的背景是什麼狀況？

background-color 屬性爲元素設置一種純色。這種顏色會填充元素的內容、內邊距和邊框區域，擴展到元素邊框的外邊界（但不包括外邊距）。若是邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。

px、em、rem、vw的區別

vw：視窗寬度的百分比（1vw 表明視窗的寬度爲 1%）

vh：視窗高度的百分比

vmin：當前 vw 和 vh 中較小的一個值

vmax：當前 vw 和 vh 中較大的一個值

Rem: 大小繼承根元素的大小；

Em：繼承父元素對的大小；

在什麼場景下會出現外邊距合併？如何合併？如何不讓相鄰元素外邊距合併？給個父子外邊距合併的範例？

兄弟元素合併：當一個元素出如今另外一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。

父子間合併：當一個元素包含在另外一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。

空元素：假設有一個空元素，它有外邊距，可是沒有邊框或填充。在這種狀況下，上外邊距與下外邊距就碰到了一塊兒，它們會發生合併。

如何合併：

一、兩個相鄰的外邊距都是正數時，合併結果是它們二者之間較大的值。

二、兩個相鄰的外邊距都是負數時，合併結果是二者絕對值的較大值。

三、兩個外邊距一正一負時，合併結果是二者的相加的和。

解決辦法：

一、對於兄弟元素：設置浮動，display：inline-block或使其父元素均造成BFC可防止邊距合併（如overflow:hidden）

二、對於父子間的元素：能夠給父元素設置border或padding屬性來防止合併。

三、對於空元素：設置border或padding屬性或overflow：hidden等（造成BFC）來防止合併。

單行文本溢出加 ... 如何實現？

text-overflow: ellipsis;

BFC 是什麼？如何生成 BFC？BFC 有什麼做用？舉例說明。

BFC即塊狀格式化上下文，BFC 是一個獨立的佈局環境,能夠理解爲一個容器,在這個容器中按照必定規則進行物品擺放,而且不會影響其它環境中的盒子。若是一個元素符合觸發 BFC 的條件，則 BFC 中的元素佈局不受外部影響。

建立BFC的方法：

一、浮動元素 (元素的 float 不是 none)

二、絕對定位元素 (元素具備 position 爲 absolute 或 fixed)

三、內聯塊 (元素具備 display: inline-block)

四、表格單元格 (元素具備 display: table-cell，HTML表格單元格默認屬性)

五、表格標題 (元素具備 display: table-caption, HTML表格標題默認屬性)

六、具備overflow 且值不是 visible 的塊元素

七、彈性盒（flex或inline-flex）

BFC的約束規則：

一、內部的盒會在垂直方向一個接一個排列（能夠看做BFC中有一個的常規流）

二、處於同一個BFC中的元素相互影響，可能會發生外邊距重疊

三、BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然

四、計算BFC的高度時，考慮BFC所包含的全部元素，連浮動元素也參與計算

五、浮動盒區域不疊加到BFC上

BFC能夠解決的問題：

一、垂直外邊距重疊問題

二、去除浮動

三、自適用兩列布局（float + overflow）

僞元素清除浮動

方法一：使用帶clear屬性的空元素

.clear{clear:both;}

優勢：簡單，代碼少，瀏覽器兼容性好。

缺點：須要添加大量無語義的html元素，代碼不夠優雅，後期不容易維護。

方法二：使用CSS的overflow屬性

overflow:hidden;

overflow:auto;

方法三：使用CSS的:after僞元素

結合 :after 僞元素（注意這不是僞類，而是僞元素，表明一個元素以後最近的元素）和 IEhack ，能夠完美兼容當前主流的各大瀏覽器，這裏的 IEhack 指的是觸發 hasLayout。

給浮動元素的容器添加一個clearfix的class，而後給這個class添加一個:after僞元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。

.clearfix :before, clear :after{
	content: " ";
	display:table;
}
.clearfix:after{
	clear:both;

//觸發BFC，BFC能夠清除浮動
}
.clearfix {
	zoom:1;
//觸發haslayout，這個屬性只有2個值，true表明有本身的佈局，false表明繼承至父元素
}複製代碼

Z-index

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面。

註釋：元素可擁有負的 z-index 屬性值。

註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）

LESS和SASS相對CSS有什麼優點

LESS

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

如何實現左側寬度固定，右側寬度自適應的佈局

利用float + margin實現

.box { 
height: 200px; 
} 
.box > div { 
  height: 100%; 
} 
.box-left { 
  width: 200px; 
  float: left; 
  background-color: blue; 
} 
.box-right { 
  margin-left: 200px; 
  background-color: red; 
} 複製代碼

利用calc計算寬度

.box { 
height: 200px; 
} 
.box > div { 
  height: 100%; 
} 
.box-left { 
  width: 200px; 
  float: left; 
  background-color: blue; 
} 
.box-right { 
  width: calc(100% - 200px); 
  float: right; 
  background-color: red; 
} 複製代碼

利用float + overflow實現

.box { 
height: 200px; 
} 

.box > div { 
  height: 100%; 
} 
.box-left { 
  width: 200px; 
  float: left; 
  background-color: blue; 
} 
.box-right { 
  overflow: hidden; 
  background-color: red; 
} 複製代碼

利用flex實現

.box { 
  height: 200px; 
  display: flex; 
} 
.box > div { 
  height: 100%; 
} 
.box-left { 
  width: 200px; 
  background-color: blue; 
} 
.box-right { 
  flex: 1; // 設置flex-grow屬性爲1，默認爲0 
  overflow: hidden; 
  background-color: red; 
} 

複製代碼

分析比較 opacity: 0、visibility: hidden、display: none 優劣和適用場景

display: none (不佔空間，不能點擊)（場景，顯示出原來這裏不存在的結構）
visibility: hidden（佔據空間，不能點擊）（場景：顯示不會致使頁面結構發生變更，不會撐開）
opacity: 0（佔據空間，能夠點擊）（場景：能夠跟transition搭配）

fixed定位是什麼意思，父級標籤設置什麼可讓子標籤fixed定位失效？

答案：transform

僞類和僞元素的區別：

一、僞類的操做對象是文檔樹中已有的元素，而僞元素則建立了一個文檔數外的元素；

二、CSS3規範中要求使用雙冒號(::)表示僞元素，以此來區分僞元素和僞類。

tramsform 和translate 以及animation

translate:移動，transform的一個方法

transform:變形。改變

transition: 容許CSS屬性值在必定的時間區間內平滑的過渡，（過渡動畫）

與transition不一樣的是：

Animation能夠經過keyframe顯示控制當前幀的屬性值，而 transition只能隱式來進行（不能指定每幀的屬性值），因此相對而言Animation的功能更加靈活。
Animation經過模擬屬性值改變來實現動畫，動畫結束以後元素的屬性沒有變化；而Transiton確實改變了元素的屬性值，動畫結束以後元素的屬性發生了變化；這一點，這在實際應用中會產生很大的區別。

translate和top/left的比較

translate是transform的一個方法，top、left是基於父元素的： translate的參數：left（x 座標）和 top（y 座標）位置參數，若是是百分比，會以自己的長寬作參考top/left是佈局類的樣式，

top/left是佈局類樣式這個樣式的變化會致使重排（reflow/relayout），所謂重排即指對這些節點以及受這些節點影響的其它節點，進行CSS計算->佈局->重繪過程，這個過程的前2步是消耗大量資源的

translate變化會致使重繪（repaint），即在屏幕上從新畫一下，不會進行CSS計算和佈局這2個性能大戶，因此認爲translate性能上要明顯好於top/left。

translate3D由於走的是3D，因此能獲得更完整的GPU加速的支持，在GPU中還有貼圖緩存等手段幫你優化性能，因此更快。

viewport

width: 設置viewport寬度，爲一個正整數，或字符串 device-width
device-width: 設備寬度
height: 設置viewport高度，通常設置了寬度，會自動解析出高度，能夠不用設置
initial-scale: 默認縮放比例（初始縮放比例），爲一個數字，能夠帶小數
minimum-scale: 容許用戶最小縮放比例，爲一個數字，能夠帶小數
maximum-scale: 容許用戶最大縮放比例，爲一個數字，能夠帶小數
user-scalable: 是否容許手動縮放

延伸提問：怎樣處理移動端 1px 被渲染成 2px 問題？

一、局部處理

meta 標籤中的 viewport 屬性，initial-scale 設置爲 1

rem 按照設計稿標準走，外加利用 transfrome 的 scale(0.5) 縮小一倍便可；

二、全局處理

meta 標籤中的 viewport 屬性，initial-scale 設置爲 0.5

rem 按照設計稿標準走便可

談談CSS中link和@import的區別是

1）link屬於HTML標籤，而@import是CSS提供的； 2）頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載； 3）import只在IE5以上才能識別，而link是HTML標籤，無兼容問題；

4）link方式的樣式權重高於@import的權重。

CSS三角形繪製

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}複製代碼

scoped 的缺陷。

若是你子組件的根元素上有一個類已經在這個父組件中定義過了，那麼這個父組件的樣式就會泄露到子組件中 咱們在父元素中定義wrapper類邊框爲藍色，在子組件中定義同一個名字的類wrapper類邊框爲橙色，結果會致使子組件中既有父元素的藍色邊框又有本身的橙色邊框。

所以，咱們要避免在父組件中書寫和子組件同名的css類。

CSS文件沒下載完會影響DOM樹嗎？

一、css是由單獨的下載線程異步下載的。

二、css加載不會阻塞DOM樹解析（異步加載時DOM照常構建）

三、但會阻塞render樹渲染（渲染時需等css加載完畢，由於render樹須要css信息）

IFC

IFC(Inline Formatting Contexts)直譯爲"內聯格式化上下文"，在常規流中橫着排列。

行級盒子高度是由font-size決定的 寬度等於其子行級盒子的外寬度，可是當行盒的寬度大於父寬度時會被拆分爲多個行盒。

如何計算行級盒子的高度：

一、位於該行上的全部in-flow的inline-level box均參與該行line box高度的計算;

二、各inline-level box根據vertical-align屬性值相對各自的父容器做垂直方向對齊;

三、最上方的box的上邊界到最下方的下邊界則是line box的高度。

IFC的規則

一、盒子是水平一個接一個的排列，水平的margin，內邊距，邊框是能夠有的。

二、垂直方向的對齊，多是底部對齊，頂部對齊，也多是基線對齊（這個是默認的）；

三、行框中的內聯盒子的高度小於行框的高度時，內聯盒子的垂直方向的對齊方式取決於vertical-align屬性

四、當一個行框水平不能容納內聯盒子時，他們將會在垂直方向上產生多個行框，他們上下一個挨着一個，可是不會重疊

五、通常來講，行框的左邊界緊挨着包含容器的左邊界，行框的右邊界緊挨着包含容器的右邊界。

六、多個內聯盒子的寬度小於包含他們的行框時，他們在水平方向的分佈取決於text-align屬性（默認是left）

介紹flex佈局，說說align-items和align-content的區別

align-items屬性適用於全部的flex容器，它是用來設置每一個flex元素在側軸上的默認對齊方式。 align-items和align-content有相同的功能，不過不一樣點是它是用來讓每個單行的容器居中而不是讓整個容器居中。 align-content屬性只適用於多行的flex容器，而且當側軸上有多餘空間使flex容器內的flex線對齊。

position, display, float一塊兒設置，會怎麼樣

當display: none，position和float無做用;

當position: absolute或 fixed,float爲none。

圖片預加載和懶加載

懶加載

場景：

對於圖片過多的頁面，爲了加快頁面加載速度，須要將頁面內未出現的可視區域內的圖片先不作加載，等到滾動可視區域後再去加載。

原理：

img標籤的src屬性用來表示圖片的URL，當這個屬性值不爲空時，瀏覽器就會根據這個值發送請求，若是沒有src屬性就不會發送請求。因此，在頁面加入時將img標籤的src指向爲空或者指向一個小圖片（loading或者缺省圖），將真實地址存在一個自定義屬性data-src中，當頁面滾動時，將可視區域的圖片的src值賦爲真實的值。

預加載

場景：

圖鼠標移入一張圖片時，換成另外一張圖片，移出時換回原來的圖片，正常作法是，鼠標移入的時候，改變圖片的src，但這時就要去加載圖片了，會等待一段時間，這樣體驗很差。預加載的作法是，在頁面加載完，鼠標移入以前就經過Image對象把圖片加載進緩存了，這樣鼠標移入的時候直接從緩存裏讀取了，速度很快，解決此問題的方案就是實現圖片預加載。