CSS知識點面試總結

時間 2020-02-27

標籤 css 知識面試總結欄目 CSS 简体版

原文原文鏈接

1、盒子模型

1.標準盒子模型和IE盒子模型

**標準(W3C)盒子模型：**內容content+填充padding+邊框border+邊界margin

寬高指的是 content 的寬高css

**低版本IE盒子模型：**內容（content+padding+border）+ 邊界margin，

寬高指的是 content+padding+border 部分的寬高html

2.CSS如何設置這兩種模型

box-sizing : content-box  
box-sizing : border-box
複製代碼

3.JS如何設置獲取盒子模型對應的寬和高

dom.style.width/height;//設置獲取的是內聯樣式
dom.currentStyle.width/height;//只有IE支持
window.getComputedStyle(dom).width/height;//兼容性好
dom.getBoundingClientRect().width/height;//適用場所：計算一個元素的絕對位置
複製代碼

4.margin塌陷/margin重疊

標準文檔流中，豎直方向的margin不疊加，只取較大的值做爲margin(水平方向的margin是能夠疊加的，即水平方向沒有塌陷現象)。git

PS：若是不在標準流，好比盒子都浮動了，那麼兩個盒子之間是沒有margin重疊的現象的。github

兄弟元素之間web

豎直方向的margin不疊加，以較大的爲準面試
父子元素之間正則表達式

margin這個屬性，本質上描述的是兄弟和兄弟之間的距離；最好不要用這個marign表達父子之間的距離。chrome

因此，若是要表達父子之間的距離，咱們必定要善於使用父親的padding，而不是兒子的margin。編程

5.BFC

BFC 即 Block Formatting Contexts (塊級格式化上下文)，它屬於上述定位方案的普通流。segmentfault

具備 BFC 特性的元素能夠看做是隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素，而且 BFC 具備普通容器所沒有的一些特性。

通俗一點來說，能夠把 BFC 理解爲一個封閉的大箱子，箱子內部的元素不管如何翻江倒海，都不會影響到外部。

1.如何生成BFC

只要元素知足下面任一條件便可觸發 BFC 特性：

body 根元素
浮動元素：float 除 none 之外的值
絕對定位元素：position (absolute、fixed)
display 爲 inline-block、table-cells、flex
overflow 除了 visible 之外的值 (hidden、auto、scroll)【最經常使用】

2.BFC的原理/BFC的佈局規則

BFC 內部的子元素，在垂直方向，邊距會發生重疊。
BFC在頁面中是獨立的容器，外面的元素不會影響裏面的元素，反之亦然。（稍後看舉例1）
BFC區域不與旁邊的float box區域重疊。（能夠用來清除浮動帶來的影響）。（稍後看舉例2）
計算BFC的高度時，浮動的子元素也參與計算。（稍後看舉例3）

3.BFC的應用

解決margin重疊

當父元素和子元素髮生 margin 重疊時，解決辦法：給子元素或父元素建立BFC
BFC區域不與float區域重疊
清除浮動

參考連接：CSS盒模型及BFC

10 分鐘理解 BFC 原理

2、選擇器

1.經常使用CSS選擇器

id選擇器(#myid)
類選擇器(.myclass)
標籤選擇器(div, h1,p)
通配符選擇器(*)
相鄰選擇器（h1 + p）
子選擇器(ul > li)
後代選擇器(li a)
屬性選擇器(a[rel="external"])
僞類選擇器(:link, :visited, :active , :hover, :before, :after)

2.CSS3新增僞類

:first-child 匹配父元素中第一個子元素
:last-child 匹配父元素中最後一個子元素
:nth-child() 匹配父元素中第n個子元素（n能夠是一個數字，一個關鍵字，或者一個公式）
- 參數n時選中全部行
- 參數爲n+i時表示從第i行開始下面的都被選中，如n+3，從第3行開始下面所有選中
- 參數爲-n+i時表示選中前i個元素，如-n+6表示選中前6個
- 2n表示2的倍數行被選中，選中偶數行
- 2n+1表示選中奇數行
- 3n表示每一個3行選中一次
- odd表示偶數，even表示奇數
:nth-last-child(n) 匹配倒數第n個同級兄弟元素
:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素
:root 根元素
:not(selector)

3、樣式

1.優先級計算規則

最近的祖先樣式比其餘祖先樣式優先級高
"直接樣式"比"祖先樣式"優先級高
內聯樣式 > ID 選擇器（權重100）> 類選擇器（權重10）= 屬性選擇器 = 僞類選擇器 > 標籤選擇器（權重1）= 僞元素選擇器
!important 擁有最高優先級

2.HTML中引入CSS的方式

內聯方式：直接在 HTML 標籤中的 style 屬性中添加 CSS

<div style="background: red"></div>

嵌入方式：在 HTML 頭部中的 <style> 標籤下書寫 CSS 代碼

<head>
    <style> .content { background: red; } </style>
</head>
複製代碼

連接方式:使用 HTML 頭部的<head>標籤引入外部的 CSS 文件

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
複製代碼

導入方式指的是使用 CSS 規則引入外部 CSS 文件
```
<style> @import url(style.css); </style>
複製代碼
```

比較連接方式和導入方式（link和@import的區別）

link屬於html標籤，除了引入css樣式之外還能夠定義RSS等其餘事物，@import是css提供的，只能引入css

lilnk在頁面加載的時候會同時加載，@import引用的css要等頁面加載結束後再加載

link是html標籤，沒有兼容性，@import只有ie5以上才能識別

3.常見單位

px：絕對單位，頁面按精確像素展現
em：相對單位，基準點爲父節點字體的大小，若是自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值
rem：相對單位，可理解爲」root em」, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持
vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%
vmin：vw和vh中較小的那個
vmax：vw和vh中較大的那個
%:百分比

4、字體

1.如何使用自定義字體

經過@font-face添加樣式

支持的字體文件類型：

EOT
OTF
TTF
WOFF
WOFF2

@font-face {
  font-family: 'Open Sans';
  src: url('OpenSans-Regular.ttf') format('truetype');
}

#text-element {
  font-family: 'Open Sans', Arial, sans-serif;
}
複製代碼

2.如何使用字體圖標

3.讓頁面裏的字體變清晰，變細用CSS怎麼作？

-webkit-font-smoothing在window系統下沒有起做用，

可是在IOS設備上起做用-webkit-font-smoothing：antialiased是最佳的，灰度平滑

5、文本屬性

1.多行文本省略

text-overflow:ellipsis

使用text-overflow時須要知足：

塊級元素
overflow:hidden(非visible)
width:具體值(max-width,flex也可)
white-space:nowrap|pre;(不折行)

2.CSS有哪些屬性能夠繼承？

字體系列屬性：如font，font-family，font-size，font-weight，font-style
文本系列屬性：如color，text-indent(文本縮進)，text-align(文本水平對齊)，line-height，word-spacing(字間隔)
元素可見性：visibility
表格佈局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表屬性：list-style-type、list-style-image、list-style-position、list-style
cursor

參考連接：css有哪些屬性能夠繼承

6、基本視覺格式化

1.display有哪些值

inline（默認）–內聯
none–隱藏
- block–塊顯示
- table–表格顯示
- list-item–項目列表
- inline-block-內聯塊
- flex
- grid-網格佈局

2.display：inline-block產生間距解決方法

爲何產生間距？

歸根結底這是一個西文排版的問題。舉一個很簡單的例子：

I am very happy

南京市長江大橋歡迎您

英文有空格做爲詞分界，而中文則沒有。（這背後延伸出一箇中文分詞的問題）

這個問題的緣由能夠上述到SGML(標準通用標記語言)和TeX(排版工具)，它其實是一個行內（inline）的問題，它由空格、換行或回車所產生空白符所致
解決方法
- 改變書寫方式：去掉html中的空格
- 在父容器使用 font-size:0
- 使用margin負值
- 使用word-spacing或letter-spacing

3.display:none 與 visibility:hidden 的區別是什麼？

是否佔據空間

display:none，該元素不佔據任何空間，在文檔渲染時，該元素如同不存在（但依然存在文檔對象模型樹中）。 visibility:hidden，該元素空間依舊存在。即一個（display:none）不會在渲染樹中出現，一個（visibility :hidden）會。
是否渲染

display:none，會觸發reflow（迴流），進行渲染。 visibility:hidden，只會觸發repaint（重繪），由於沒有發現位置變化，不進行渲染。
是不是繼承屬性

display:none，display不是繼承屬性，元素及其子元素都會消失。 visibility:hidden，visibility是繼承屬性，若子元素使用 visibility:visible，則不繼承，這個子孫元素又會顯現出來。
讀屏器是否讀取

讀屏器不會讀取display：none的元素內容，而會讀取visibility：hidden的元素內容。

4.visibility:collapse

對於通常的元素，它的表現跟display:hidden是同樣的。
但例外的是，若是這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現卻跟display: none同樣，也就是說，它們佔用的空間也會釋放。

在不一樣瀏覽器下的區別：

在谷歌瀏覽器裏，使用collapse值和使用hidden值沒有什麼區別。
在火狐瀏覽器、Opera和IE11裏，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。

5.rgba和opacity透明有何不一樣？

rgba()只做用於元素自身的顏色或背景色，對元素的內容沒有影響。
opacity在做用於元素自身的顏色或背景色的同時，也做用於元素內的內容的透明度。

7、定位

1.position有哪些值

static：默認值。沒有定位，元素出如今正常的文檔流中（忽略 top, bottom, left, right 或者 z-index 聲明）
relative：生成相對定位的元素，相對於其正常位置進行定位，不脫離文檔流
absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位
fixed：生成固定定位的元素，相對於瀏覽器窗口進行定位。（老IE不支持）
inherit：規定應該從父元素繼承 position 屬性的值
sticky：粘性定位，它主要用在對 scroll 事件的監聽上

2. 居中

絕對定位技巧：

定位參照對象的寬度 = left + right + margin-left + margin-right + 絕對定位元素的實際寬度

定位參照對象的高度 = top + bottom + margin-top + margin-bottom + 絕對定位元素的實際高度

1.1 如何居中div？

參考連接：blog.csdn.net/weixin_3758…

1.1.1 水平居中

行內元素：父元素是塊級元素，給父元素設置text-align:center，父元素不是塊級元素，先將父元素設置爲塊級元素，再給父元素設置text-align:center
圖片：給圖片設置clear:both;display:block;margin:auto;
塊級元素

方案一：（1）寬度定，須要誰居中，就給誰設置margin:0 auto;

（2）寬度不定，默認子元素寬度與父元素寬度同樣，給子元素設置display:inline-block;或display:inline,將其轉換成行內塊級元素/行內元素，給父元素設置text-align:center

方案二：使用定位屬性

子元素設置絕對定位，父元素設置相對定位，left:50%,margin-left:-子元素的寬度的一半(寬度定),或者transform:translateX(-50%)(寬度不定)

方案三：使用flexbox佈局實現（寬度定不定都行）

父元素設置display:flex;justify-content:center;

1.1.2 垂直居中

單行的行內元素：設置行高=父元素的高
多行的行內元素：父元素設置display:table-cell;vertical-align:middle（行級、塊級、圖片都通殺）
塊級元素：

方案一：子元素設置絕對定位，父元素設置相對定位，子元素設置top:50%;``margin-top:-子元素高度的一半(高度定)，transform:translateY(-50%);(高度不定)

方案二：flex佈局，給父元素設置display:flex;align-items:center;（行級、塊級、圖片都通殺）

1.1.3 水平垂直居中

已知高度和寬度的元素

方案一：子元素設置絕對定位，父元素設置相對定位，子元素設置left:0;right:0;top:0;bottom:0;margin:auto;

方案二：子元素設置絕對定位，父元素設置相對定位，子元素設置top:50%;left:50%(左上角垂直居中)，margin-top:-子元素高的一半,margin-left:-子元素寬的一半
未知高度和寬度的元素

方案一：（定位屬性）子元素設置絕對定位，父元素設置相對定位，子元素設置top:50%;left:50%(左上角垂直居中)，transform:translate(-50%,-50%)(根據自身定位實現偏移)

方案二：（flex佈局）父元素定義display:flex;justify-content:center;align-items:center;

1.2 如何居中絕對定位的div？

1.3 如何居中一個浮動元素？

參考連接：segmentfault.com/a/119000001…

水平居中
- 定寬：relative + margin-left + left
給浮動元素自己設置position:relative;left:50%;margin-left:-浮動元素寬的一半
- 不定寬：父float + 父relative + 子relative
給父元素清除浮動，設置float:left;，父元素設置position:relative;left:50%;，內部浮動元素設置position:relative;left:-50%;或right:50%;
- 無論定寬仍是不定寬：flex
  
  父元素設置display:flex;justify-content:center;
垂直居中
- 定高：（父relative + 子absolute + line-height） + top/bottom或margin-top

方式一：relative + absolute + line-height + top/bottom
   #outer {
      position: relative;
    }
    #inner {
      line-height:100px;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
    }

方式二：relative + absolute + line-height + margin-top
#outer {
      position: relative;
}
#inner {
      line-height:100px;
      position: absolute;
      top: 50%;
      margin-top:-50px
}

<div id="outer" style="height:200px;">
  <div id="inner" style="float: left;height: 100px;">我是垂直居中的元素</div>
</div>
複製代碼

通用：flex

#outer {
    display:flex;
    align-items:center;
}

<div id="outer" style="height:200px;">
  <div id="inner">我是垂直居中的元素</div>
</div>
複製代碼

水平垂直居中
- flex
- 子元素能夠設置 mairgin 以及word-wrap:break-word; 方便效果

8、浮動

1.爲何出現浮動

浮動的初衷，是實現相似word裏的文字環繞圖片的效果。

普通文檔流，由於從上到下，從左到右，規定的太死了，每一個元素都被限制了位置。因此才引入了浮動，造成豐富的頁面效果。

定位的引入，更加加強了，頁面佈局的可能。

2.浮動的工做原理

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

3.浮動元素引發的問題

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

4.清除浮動的方式

父級div定義height
- 原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題
- 優勢：簡單，代碼少，容易掌握
- 缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題
- 建議：不推薦使用，只建議高度固定的佈局時使用
額外標籤法
- 原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度
- 優勢：簡單，代碼少，瀏覽器支持好，不容易出現怪問題
- clear屬性只適用於塊級元素。這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。
- 建議：不推薦使用，但此方法是之前主要使用的一種清除浮動方法
父級 div 定義 overflow:hidden
- 原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
- 優勢：簡單，代碼少，瀏覽器支持好
- 缺點：不能和position配合使用，由於超出的尺寸的會被隱藏
- 建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用
父級div定義僞類:after和zoom
- 原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點相似，zoom(IE專有屬性)可解決ie6,ie7浮動問題
- 優勢：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
- 缺點：代碼多，很多初學者不理解原理，要兩句代碼結合使用，才能讓主流瀏覽器都支持
- 建議：推薦使用，建議定義公共類，以減小CSS代碼
```
.clearfix:after{
    content:"\0020"; //父元素結尾放一個空白符
    height:0; //讓這個空白字符不顯示出來
    display:block;
    clear:both; //確保這個空白字符是非浮動的獨立塊
}
.clearfix{
    zoom:1; //兼容IE6
}
複製代碼
```

5.設置元素浮動後，該元素的display值是多少？

自動變爲display：block

9、Sass、Less、Stylus區別

1.什麼是CSS預處理器?

CSS預處理器是一種語言用來爲CSS增長一些編程的特性，無需考慮瀏覽器兼容問題，例如你能夠在CSS中使用變量，簡單的程序邏輯、函數等在編程語言中的一些基本技巧，可讓CSS更加簡潔，適應性更強，代碼更直觀等諸多好處

2.區別

基本語法區別
- Sass是以.sass爲擴展名，Less是以.less爲擴展名，Stylus是以.styl爲擴展名
變量的區別
- Sass 變量必須是以$開頭的，而後變量和值之間使用冒號（：）隔開，和css屬性是同樣的。
- Less 變量是以@開頭的，其他sass都是同樣的。
- Stylus 對變量是沒有任何設定的，能夠是以$開頭或者任意字符，並且變量之間能夠冒號，空格隔開，可是在stylus中不能用@開頭
三種預處理器都有：嵌套、運算符、顏色函數、導入、繼承、混入。Stylus還有一些高級特性。例如循環、判斷等

10、flex佈局

1.基本概念

Flex佈局元素，稱爲Flex容器，簡稱"容器"。它的全部子元素自動成爲容器元素，簡稱"項目"。
容器默認存在兩根軸：水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的排列方式：從左到右；交叉軸的排列方式：從上到下;

2.容器的屬性

1.flex-direction

屬性決定主軸的方向 (即項目的排列方式）

row 主軸水平方向，起點在左端
row-reverse 主軸水平方向，起點在末端
column 主軸垂直方向，起點在上沿
colunm-reverse 主軸垂直方向，起點在下沿

2.flex-wrap

nowrap 默認，不換行
wrap 換行，第一行在上面
wrap-reverse 換行，第一行在下面

3.flex-flow

是flex-direction 屬性和flex-wrap屬性的簡寫，默認值row、nowrap

4.justify-content

屬性定義了項目在主軸上的對齊方式

flex-start 默認值，左對齊
flex-end 右對齊
center 居中
space-between 兩端對齊，項目之間間隔相等
space-around 兩端間隔是中間項目的一半
space-evenly 項目之間間隔均分（包括與兩端的間隔）

5.align-items

定義項目交叉軸上如何對齊（單行）

flex-start 交叉軸起點對齊
flex-end 交叉軸終點對齊
center 垂直方向，居中對齊
baseline 項目第一行文字基線對齊
stretch 默認值，若是項目未設置高度或設爲auto,將佔滿整個容器的高度

6.align-content

多行軸線對齊，用法痛align-items

3.項目的屬性

1.order

定義項目排列順序，數值越小越靠前，默認爲0

2.flex-grow

定義項目放大比例，默認爲0

3.flex-shrink

定義項目縮小比例，默認爲1，若是空間不足則會縮小，值爲0不能縮小

4.flex-basis

定義項目自身大小，默認auto

5.flex

屬性是flex-grow，flex-shrink ,flex-basis的簡寫，默認值爲0、一、auto

6.align-self

項目自身對齊

11、頁面佈局

參考連接：各類頁面常見佈局

頁面佈局

1.兩欄式佈局

1.1 左列定寬，右列自適應

1.2 左列自適應，右列定寬

1.3 一列不定，一列自適應

2.三欄式佈局

2.1 兩列定寬，一列自適應

2.2 兩側定寬，中間自適應

1.浮動

左側設置左浮動，右側設置右浮動便可，中間會自動地自適應。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style> .layout article div{ height:100px; } .layout.float .left{ float:left; width:300px; background-color:red; } .layout.float .right{ float:right; width:300px; background-color:blue; } .layout.float .center{ background-color:green; } </style>
    </head>
    <body>
        <section class="layout float">
        	<article class="left-center-right">
            	<div class="left">
                    我是left
                </div>
                <div class="center">
                    我是center
                </div>
                <div class="right">
                    我是right
                </div>
            </article>
        </section>
    </body>
</html>
複製代碼

2.絕對定位

左側設置爲絕對定位， left：0px。右側設置爲絕對定位， right：0px。中間設置爲絕對定位，left 和right 都爲300px，便可。中間的寬度會自適應。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style> .layout article div{ height:100px; } .layout.absolute .left-center-right { position: relative; } .layout.absolute .left { position: absolute; left: 0; width: 300px; background: red; } /* 【重要】中間的區域，左側定位300px，右側定位爲300px，便可完成。寬度會自使用 */ .layout.absolute .center { position: absolute; left: 300px; right: 300px; background: green; } .layout.absolute .right { position: absolute; right: 0; width: 300px; background: blue; } </style>
    </head>
    <body>
        <section class="layout absolute">
        	<article class="left-center-right">
            	<div class="left">
                    我是left
                </div>
                <div class="center">
                    我是center
                </div>
                <div class="right">
                    我是right
                </div>
            </article>
        </section>
    </body>
</html>
複製代碼

3.flexbox佈局

將左中右所在的容器設置爲display: flex，設置兩側的寬度後，而後讓中間的flex = 1，便可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> html * { padding: 0; margin: 0; } .layout article div { height: 100px; } .left-center-right { display: flex; } .layout.flex .left { width: 300px; background: red; } .layout.flex .center { flex: 1; background: green; } .layout.flex .right { width: 300px; background: blue; } </style>

</head>

<body>
    <section class="layout flex">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>flex佈局解決方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>

        </article>
    </section>

</body>

</html>
複製代碼

4.表格佈局

設置整個容器的寬度爲100%，設置三個部分均爲表格(display:table-cell)，而後左邊的單元格爲 300px，右邊的單元格爲 300px，便可。中間的單元格會自適應。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> html * { padding: 0; margin: 0; } .layout.table div { height: 100px; } /* 重要：設置容器爲表格佈局，寬度爲100% */ .layout.table .left-center-right { width: 100%; display: table; height: 100px; } .layout.table .left-center-right div { display: table-cell; /* 重要：設置三個模塊爲表格裏的單元*/ } .layout.table .left { width: 300px; background: red; } .layout.table .center { background: green; } .layout.table .right { width: 300px; background: blue; } </style>

</head>

<body>
    <section class="layout table">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>表格佈局解決方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>

        </article>
    </section>

</body>

</html>
複製代碼

5.網格佈局grid

設置容器爲網格佈局，寬度爲100%，設置網格爲三列，並設置每列的寬度，便可。

方法1：浮動：

優勢：兼容性好。
缺點：浮動會脫離標準文檔流，所以要清除浮動。咱們解決好這個問題便可。

方法:2：絕對定位

優勢：快捷。
缺點：致使子元素也脫離了標準文檔流，可實用性差。

方法3：flex 佈局（CSS3中出現的）

優勢：解決上面兩個方法的不足，flex佈局比較完美。移動端基本用 flex佈局。

方法4：表格佈局

優勢：表格佈局在不少場景中很實用，兼容性很是好。由於IE8不支持 flex，此時能夠嘗試表格佈局
缺點：由於三個部分都當成了單元格來對待，此時，若是中間的部分變高了，其會部分也會被迫調整高度。可是，在不少場景下，咱們並不須要兩側的高度增高。

何時用 flex 佈局 or 表格佈局，看具體的場景。兩者沒有絕對的優點，也沒有絕對的不足。

方法5：網格佈局

CSS3中引入的佈局，很好用。代碼量簡化了不少。

PS：面試提到網格佈局，說明咱們對新技術是有追求的。

延伸：若是題目中去掉高度已知

問題：題目中，若是去掉高度已知，咱們往中間的模塊裏塞不少內容，讓中間的模塊撐開。會發生什麼變化？哪一個佈局就不能用了？

分析：其實能夠這樣理解，咱們回去看上面的動畫效果，當中間的模塊變得很擠時，會發生什麼效果？就是咱們想要的答案。

答案是：flex 佈局和表格佈局能夠通用，其餘三個佈局都不能用了。

3.多列布局

3.1 等寬佈局

3.2 九宮格佈局

3.3 柵格系統

12、CSS優化、提升性能的方法

避免過分約束
避免後代選擇符
避免鏈式選擇符
使用緊湊的語法
避免沒必要要的命名空間
避免沒必要要的重複
最好使用表示語義的名字。一個好的類名應該是描述他是什麼而不是像什麼
避免！important，能夠選擇其餘選擇器
儘量的精簡規則，你能夠合併不一樣類裏的重複規則
修復解析錯誤
避免使用多類選擇符
移除空的css規則
正確使用display的屬性：因爲display的做用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。
display:inline後不該該再使用width、height、margin、padding以及float。
display:inline-block後不該該再使用float。
display:block後不該該再使用vertical-align。
display:table-*後不該該再使用margin或者float。
不濫用浮動：雖然浮動不可避免，但不能否認不少css bug是因爲浮動而引發。
不濫用web字體
對於中文網站來講Web Fonts可能很陌生，國外卻很流行。web fonts一般體積龐大，並且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷性能。
不聲明過多的font-size：這是設計層面的問題，設計精良的頁面不會有過多的font-size聲明。
不在選擇符中使用ID標識符，主要考慮到樣式重用性以及與頁面的耦合性。
不給h1~h6元素定義過多的樣式
全站統必定義一遍heading元素便可，若需額外定製樣式，可以使用其餘選擇符做爲代替。
不重複定義h1~h6元素
值爲0時不須要任何單位
標準化各類瀏覽器前綴：一般將瀏覽器前綴置於前面，將標準樣式屬性置於最後，相似：.foo{

-moz-border-radius: 5px;
    border-radius: 5px; 
}複製代碼
複製代碼

使用CSS漸變等高級特性，需指定全部瀏覽器的前綴
避免讓選擇符看起來像正則表達式
CSS3添加了一些相似~=等複雜屬性，也不是全部瀏覽器都支持，需謹慎使用。
遵照盒模型規則（Beware of broken box models）

十3、響應式設計

響應式設計就是網站可以兼容多個終端，而不是爲每一個終端作一個特定的版本
基本原理是利用CSS3媒體查詢，爲不一樣尺寸的設備適配不一樣樣式

對於低版本的IE，可採用JS獲取屏幕寬度，而後經過resize方法來實現兼容：

$(window).resize(function () {
  screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
  $("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
  $("body").attr("class", "w1400");
}
if(screenWidth > 1800){
  $("body").attr("class", "");
}
}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。