前端面試之CSS總結(上)

時間 2019-11-06

原文原文鏈接

CSS總結

因爲最近在準備前端方面的面試，因此對本身日常工做中用到的地方作出一些總結。該篇是CSS部分(上)，有許多地方敘述的並非十分詳細，只是大體的描述一下，給本身提供一個知識輪廓。本篇中主要描述了CSS中的基礎部分，以及一些CSS3的新特性。下篇將會繼續介紹CSS3動畫部分以及移動端部分。css

CSS渲染的過程就好像在一張白紙上畫畫同樣，你須要清楚的知道在什麼位置畫上那些內容(定位過程)，這些內容的大小(盒模型)是多少以及該內容的顏色(color)，背景(background屬性)，文字(text屬性)等屬性。html

盒模型

文檔中的每一個元素被描繪爲矩形盒子。渲染引擎的目的就是斷定大小，屬性——好比它的顏色、背景、邊框方面——及這些盒子的位置。在CSS中，這些矩形盒子用標準盒模型來描述。這個模型描述了一個元素所佔用的空間。每個盒子有四條邊界：外邊距邊界margin, 邊框邊界border, 內邊距邊界padding與內容邊界content。前端

IE盒模型和W3C盒模型在計算總寬度存在一些差別詳細內容請參考該連接:git

在W3C模型中: 總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-rightgithub
在IE模型中: 總寬度 = margin-left + width + margin-rightweb

在CSS3中引入了box-sizing屬性, 它能夠容許改變默認的CSS盒模型對元素寬高的計算方式.面試

共包括兩個選項：segmentfault

content-box：標準盒模型，CSS定義的寬高只包含content的寬高瀏覽器
border-box：IE盒模型，CSS定義的寬高包括了content，padding和border服務器

定位機制

css有三種基本定位機制: 標準文檔流(Normal flow), 浮動(Floats)和絕對定位(Absolute positioning)。

標準文檔流
- 從左到右，從上向下，輸出文檔內容
- 由塊級元素(從左到右撐滿頁面，獨佔一行，觸碰到頁面邊緣時自動換行的元素, 如div, ul, li, dl, dt, p)和行級元素組成(能在同一行內顯示而且不會改變HTML文檔結構，如span, input)
浮動
- 設置爲浮動的元素將會往左(float:left)或者往右(float:right)漂移, 直到遇到阻擋 - 其餘浮動元素或者父元素的邊框。浮動元素不在標準文檔流中佔據空間,但會對其後的浮動元素形成影響。
絕對定位
- 設置爲絕對定位的元素(posistion:absolute)將從標準文檔流中刪除，其所佔據的標準流空間也不存在。而後經過top,left,right,bottom屬性對其相對父元素進行定位。

網頁佈局

流動佈局
- 需瞭解實現塊居中常見的幾種方式
浮動佈局
- 當設置float:left或者float:right時, 元素會左移或右移直到觸碰到容器位置，仍然處於標準文檔流中。當元素沒有設置寬度值，而設置了浮動屬性，元素的寬度隨內容的變化而變化。當元素設置爲浮動屬性後，會對緊鄰以後的元素形成影響，緊鄰以後的元素會緊挨着該元素顯示。當父元素包含塊縮成一條時，用clear:both方法無效，它通常用於緊鄰後面的元素的清除浮動，要用overflow屬性。清除浮動的方法有兩種:使用clear屬性 - clear: both; 同時設置width:100%(或固定寬度) + overflow:hidden。

浮動佈局可實現橫向多列布局

絕對定位佈局
- position：static, relative, absolute, fixed
  - static是默認值
  - 相對定位relative
    - 相對於自身原有位置進行偏移
    - 仍處於標準文檔流中
    - 隨即擁有偏移屬性和z-index屬性
  - 固定定位fixed
    - 一個固定定位（position屬性的值爲fixed）元素會相對於視窗來定位,這意味着即使頁面滾動，它仍是會停留在相同的位置。一個固定定位元素不會保留它本來在頁面應有的空隙。
  - 絕對定位absolute
    - 相對於最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素爲參考標準。若是無已定位祖先元素, 以body元素爲偏移參照基準, 而且它會隨着頁面滾動而移動。
    - 徹底脫離了標準文檔流。
    - 隨即擁有偏移屬性和z-index屬性。
- 實現橫向兩列布局
  - 經常使用於一列固定寬度，另外一列寬度自適應的狀況
  - relative - 父元素相對定位
  - absolute - 自適應寬度元素定位
- 可以實現橫向多列布局

常見佈局實現

常見的佈局有如下幾種: 單列水平居中佈局, 一列定寬一列自適應佈局, 兩列定寬一列自適應佈局, 兩側定寬中間自適應三列布局。

重點介紹一下常見的三列布局之: 聖盃佈局和雙飛翼佈局。

聖盃佈局和雙飛翼佈局

二者都屬於三列布局，是一種很常見的頁面佈局方式，三列通常分別是子列sub、主列main和附加列extra，其中子列通常是居左的導航，且寬度固定；主列是居中的主要內容，寬度自適應；附加列通常是廣告等額外信息，居右且寬度固定。

聖盃佈局

<div class="container">
    <div class="main"></div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>

body {
    min-width: 600px; /* 2*sub + extra */
}
.container {
    padding-left: 210px;
    padding-right: 190px;
}
.main {
    float: left;
    width: 100%;
    height: 300px;
    background-color: rgba(255, 0, 0, .5);
}
.sub {
    position: relative;
    left: -210px;
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: rgba(0, 255, 0, .5);
}
.extra {
    position: relative;
    right: -190px;
    float: left;
    width: 180px;
    height: 300px;
    margin-left: -180px;
    background-color: rgba(0, 0, 255, .5);
}

雙飛翼佈局(淘寶使用的佈局方式)

<div class="main-wrapper">
    <div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>

.main-wrapper {
    float: left;
    width: 100%;
}
.main {
    height: 300px;
    margin-left: 210px;
    margin-right: 190px;
    background-color: rgba(255, 0, 0, .5);
}
.sub {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: rgba(0, 255, 0, .5);
}
.extra {
    float: left;
    width: 180px;
    height: 300px;
    margin-left: -180px;
    background-color: rgba(0, 0, 255, .5);
}

總結:

倆種佈局方式都是把主列放在文檔流最前面，使主列優先加載。
兩種佈局方式在實現上也有相同之處，都是讓三列浮動，而後經過負外邊距造成三列布局。
兩種佈局方式的不一樣之處在於如何處理中間主列的位置：聖盃佈局是利用父容器的左、右內邊距定位；雙飛翼佈局是把主列嵌套在div後利用主列的左、右外邊距定位。

TODO:

margin爲負值時的使用

Flex佈局

Flexbox又叫彈性盒模型。它能夠簡單使用一個元素居中（包括水平垂直居中），可讓擴大和收縮元素來填充容器的可利用空間，能夠改變源碼順序獨立佈局，以及還有其餘的一些功能。
Flex佈局是我最喜歡的佈局，合理使用它可以大大減小布局方面的工做, 例如以上列舉的三列布局也可使用flex輕鬆實現。此外在移動端使用flex也比較常見。

使用請參考:

響應式佈局(Responsive Web Design)

響應式佈局是指，網頁能夠自動識別設備屏幕寬度，根據不一樣的寬度採用不一樣的CSS的樣式，從而達到兼容各類設備的效果。
響應式佈局使用媒體查詢(CSS3 Media Queries), 根據不一樣屏幕分辨率採用不一樣CSS規則, 使用方式以下:

@media screen and (max-width:1024px) {
  /* 視窗寬度小於1024px時 */
  ....
}

Bootstrap grid系統的實現

Bootstrap是很受歡迎的HTML, CSS和JS框架, 用於開發響應式佈局和移動設備優先的Web項目。它提供了一套響應式，移動優先的流式柵格系統(grid system)，將屏幕分紅12列來實現響應式的。它的實現原理很是簡單，Media Query加上float佈局，若是想了解實現細節，請參考我另一篇博客Boostrap網格系統。

CSS reset

CSS reset的目的是爲了將不一樣瀏覽器自帶樣式重置，達到保持瀏覽器一致性的目的;reset.css一般是樣式設計開始以前第一個引用的CSS文件。

TODO:

Normalize.css

CSS hacks

不一樣的瀏覽器對CSS的解析結果是不一樣的，所以會致使相同的CSS輸出的頁面效果不一樣，這就須要CSS Hack來解決瀏覽器局部的兼容性問題。而這個針對不一樣的瀏覽器寫不一樣的CSS 代碼的過程，就叫CSS Hack。
CSS Hack常見的有三種形式：CSS屬性Hack、CSS選擇符Hack以及IE條件註釋Hack， Hack主要針對IE瀏覽器。

TODO:

經常使用css hacks技巧

CSS sprite

把網頁中的一些零星背景圖片整合到一張圖片當中，再利用CSS背景圖片定位屬性定位到要顯示的位置，所以也叫圖片拼合技術。
好處：減小文件體積和服務器請求次數，從而提升開發效率。通常狀況下保存爲PNG-24，能夠設計出豐富多彩的圖標。
難處：你須要預先肯定每一個圖標的大小。注意小圖標與小圖標之間的距離。
實現方式: background-image + background-position。

TODO:

如何製做CSS sprite圖

iconfont字體

iconfont是指使用字體文件取代圖片文件，來展現圖標和一些特殊字體等元素。它使用CSS3中的@font-face屬性，它容許加載自定義字體樣式，並且它還可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。它有不少優點: 首先它的體積要比圖片小得多; 特定的屬性(顏色,大小,透明)等修改起來就像是操做字體同樣簡單;iconfont具備矢量性, 放大縮小不會失真;
使用步驟:

設計師設計出Icon矢量圖,須要保存爲多種格式(可使用一些online webfont工具完成)。
- EOT(Embedded OpenType Fonts) IE專用格式
- WOFF(The Web Open Font Format) Web字體最佳格式, 它是一個開放的TrueType/OpenType的壓縮版本。09年被開發, 現在是W3C阻止的推薦標準。
- TTF(TrueType Fonts) MacOS和WIN操做系統中最多見格式。
- SVG(SVG Fonts) 用於SVG字體渲染的一種格式, W3C制定的開放標準圖形格式。
製做完成以後，進行字體聲明。因爲各個瀏覽器支持的字體文件不一樣, 因此要聲明多種字體達到瀏覽器兼容的目的。聲明格式以下:

@font-face {
```
font-family: <font-family-name>;
src: [<url> [format(<string> #)]?| <font-face-name>] #;
font-weight: <weight>;
font-style: <style>;
```
}
在網頁中使用字體。主要有兩種方式: 一種是直接在網頁中輸入相應的Icon所表明的字體;另外一種是使用CSS after僞類, 這樣能夠經過CSS直接控制Icon類別，只是IE6不兼容。
第一種方式:

<li>\01FD</li>

第二種方式:

.icon:after{
    content: '\01FD';
}
<li class="icon"></li>

CSS3常見新特性

新的元素選擇器

E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked, E:enabled, E:disabled, E::selection, E:not(s)

@font-face

見上文中iconfont部分。

border-radius

又稱圓角屬性，一般使用該屬性將圖片圓角化，如頭像。

border-radius: 50%;

border-radius另一個經常使用的手段是CSS動畫。

word-wrap & text-overflow

word-wrap屬性用來指出瀏覽器在單詞內進行斷句，防止字符串太長而找不到它的天然斷句點時產生的溢出。

word-wrap: break-word;

text-overflow用於文本溢出:
單行縮略的實現以下:

.oneline {
    white-space: nowrap; //強制文本在一行內輸出
    overflow: hidden; //隱藏溢出部分
    text-overflow: ellipsis; //對溢出部分加上...
}

多行縮略實現以下(主要針對webkit內核):

.multiline {
    display: -webkit-box !important;
    overflow: hidden;
    
    text-overflow: ellipsis;
    word-break: break-all;
    
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

background

主要是如下三個屬性:

background-clip 規定背景的繪製區域, 取值爲border-box | padding-box | content-box | no-clip
background-origin 規定背景的定位區域, 取值爲border | padding | content
background-size 規定背景圖片的尺寸, 取值爲[<length> | <percentage> | auto]{1,2} | cover | contain