前端面試——css篇

時間 2019-11-12

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

原文原文鏈接

css盒子模型

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

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

共包括兩個選項：github

content-box：標準盒模型，CSS定義的寬高只包含content的寬高web
border-box：IE盒模型，CSS定義的寬高包括了content，padding和bordersegmentfault

定位機制

css有三種基本定位機制：標準文流(Normal flow)，浮動(Floats)和絕對定位(Absolute positioning)。瀏覽器

標準文檔流

從左到右，從上到下，輸出文檔內容
有會計元素（從作導遊撐滿頁面，獨佔一行，觸碰到頁面邊緣時自動換行的元素，div,ul,li,dl,dt,p）和行級元素組成（能在同一行內顯示而且不會改變html文檔結構，如span,input）

浮動

設置爲浮動的元素將會往左或者往右漂移，知道遇到阻礙-其餘元素或者父級元素的邊框。浮動元素不在標準文檔流中佔空間，但會隨其後的浮動元素形成影響

絕對定位

設置爲絕對定位的元素將從標準文檔流中刪除，不佔據空間，而後經過top,left,right,bottom屬性對其相對父元素進行定位。

網頁佈局

流動佈局
- 需瞭解實現塊居中的幾種方式

浮動佈局
- 當設置float:left或float:right時，元素會左移或右移直到觸碰容器位置，仍然處於標準文檔流中。當元素沒有設置寬度值，而設置了浮動屬性，元素的寬度歲內容的變化而變化。當元素設置爲浮動屬性後，會對緊鄰後的元素形成影響，緊鄰以後的元素會挨着該元素顯示。當父元素包含塊縮成一條時，用clear:both方法無效，它通常用於緊鄰氣候的元素的清除浮動，要用overflow屬性。清除浮動的方法有兩種：使用clear屬性-clear:both;同時設置width:100%(或固定寬度)+overflow:hidden。
- 浮動佈局可實現橫向多列布局
絕對定位佈局
- position:static,relative,absoulte,fixed
  - static是默認值
  - 相對定位relative
    - 相對於自身原有位置進行偏移
    - 仍處於標準文檔流中
    - 隨即擁有偏移屬性和z-index屬性
  - 固定定位fixed
    - 一個固定定位元素會相對於視窗來定位，這意味着即使頁面滾動，它仍是會停留在相同的位置。一個固定定位元素不會保留它本來在頁面擁有的空隙
  - 絕對定位absolute
    - 相對於最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素爲參考標準。若是無已定位祖先元素, 以body元素爲偏移參照基準, 而且它會隨着頁面滾動而移動。
    - 徹底脫離了標準文檔流。
    - 隨即擁有偏移屬性和z-index屬性。
- 實現橫向兩列布局
  - 經常使用於一列固定寬度，另外一列寬度自適應的狀況
  - relative - 父元素相對定位
  - absolute - 自適應寬度元素定位
- 可以實現橫向多列布局

常見佈局實現

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

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

聖盃佈局和雙飛翼佈局

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

聖盃佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        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);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="main"></div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>
    
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .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);
        }
    </style>
</head>
<body>
    <div class="main-wrapper">
        <div class="main"></div>
    </div>
    <div class="sub"></div>
    <div class="extra"></div>

</body>
</html>

總結:

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

Flex佈局

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

CSS 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>
```
推薦:
- IconMoon圖標工具
- Font Awesome

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

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

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