一、盒子模型
1.標準盒子模型和IE盒子模型
- **標準(W3C)盒子模型：**內容content+填充padding+邊框border+邊界margin
寬高指的是 content 的寬高
- **低版本IE盒子模型：**內容（content+padding+border）+ 邊界margin，
寬高指的是 content+padding+border 部分的寬高
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是可以疊加的，即水平方向沒有塌陷現象)。
PS：如果不在標準流，比如盒子都浮動了，那麼兩個盒子之間是沒有margin重疊的現象的。
-
兄弟元素之間
豎直方向的margin不疊加，以較大的為準
-
父子元素之間
margin這個屬性，本質上描述的是兄弟和兄弟之間的距離； 最好不要用這個marign表達父子之間的距離。
所以，如果要表達父子之間的距離，我們一定要善於使用父親的padding，而不是兒子的margin。
5.BFC
BFC 即 Block Formatting Contexts (塊級格式化上下文)，它屬於上述定位方案的普通流。
具有 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
二、選擇器
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)
三、樣式
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中較大的那個
-
%:百分比
四、字型
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.如何使用字型圖示
推薦：阿里巴巴圖示庫
-
找到網站，搜尋需要的圖示
-
將圖片加入購物車，點選頁面右上角的購物車按鈕，將所有圖示新增到自定義專案中。
-
在彈出的頁面中，點選下載至本地。
-
解壓下載後的資料夾，我們需要的是fonts資料夾和style.css, 將這個檔案放入你的專案中,style.css檔案中引入了字型檔案，所以會有路徑，這個時候你在使用的時候要注意路徑問題，程式碼如下：（這裡的多種字型檔案是為了相容瀏覽器）
@font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?snsrp8'); src: url('../fonts/icomoon.eot?snsrp8#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?snsrp8') format('truetype'), url('../fonts/icomoon.woff?snsrp8') format('woff'), url('../fonts/icomoon.svg?snsrp8#icomoon') format('svg'); font-weight: normal; font-style: normal;} 複製程式碼 -
在頁面中，我們只要給一個元素新增相應的類名就行，因為在style.css中已經將類名對應的圖示寫好了。
.icon-account:before { content: "\e900"; } .icon-caifu:before { content: "\e901"; } .icon-edit:before { content: "\e902"; } 複製程式碼<span class="icon-account"></span> 複製程式碼
3.讓頁面裡的字型變清晰，變細用CSS怎麼做？
-webkit-font-smoothing在window系統下沒有起作用，
但是在IOS裝置上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑
五、文字屬性
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有哪些屬性可以繼承
六、基本視覺格式化
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在作用於元素自身的顏色或背景色的同時，也作用於元素內的內容的透明度。
七、定位
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？
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 如何居中一個浮動元素？
-
水平居中
- 定寬：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; 方便效果
八、浮動
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
九、Sass、Less、Stylus區別
1.什麼是CSS前處理器?
CSS前處理器是一種語言用來為CSS增加一些程式設計的特性，無需考慮瀏覽器相容問題，例如你可以在CSS中使用變數，簡單的程式邏輯、函式等在程式語言中的一些基本技巧，可以讓CSS更加簡潔，適應性更強，程式碼更直觀等諸多好處
2.區別
-
基本語法區別
- Sass是以.sass為副檔名，Less是以.less為副檔名，Stylus是以.styl為副檔名
-
變數的區別
-
Sass 變數必須是以$開頭的，然後變數和值之間使用冒號（：）隔開，和css屬性是一樣的。
-
Less 變數是以@開頭的，其餘sass都是一樣的。
-
Stylus 對變數是沒有任何設定的，可以是以$開頭或者任意字元，而且變數之間可以冒號，空格隔開，但是在stylus中不能用@開頭
-
-
三種前處理器都有：巢狀、運算子、顏色函式、匯入、繼承、混入。Stylus還有一些高階特性。例如迴圈、判斷等
十、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、1、auto
6.align-self
專案自身對齊
十一、頁面佈局
參考連結：各種頁面常見佈局
頁面佈局
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 柵格系統
十二、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）
十三、響應式設計
-
響應式設計就是網站能夠相容多個終端，而不是為每個終端做一個特定的版本
-
基本原理是利用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", ""); } } 複製程式碼