使用flex
使用 css3 transform
使用 display:table-cell 方法
position 的常見四個屬性值: relative，absolute，fixed，static。一般都要配合"left"、"top"、"right" 以及 "bottom" 屬性使用。
float屬性的取值：
浮動的特性：
浮動元素的展示在不同情況下會有不同的規則：
重疊問題
clear屬性clear屬性：確保當前元素的左右兩側不會有浮動元素。clear只對元素本身的布局起作用。 取值：left、right、both
為什麼要清除浮動，父元素高度塌陷解決父元素高度塌陷問題：乙個塊級元素如果沒有設定height，其height是由子元素撐開的。對子元素使用了浮動之後，子元素會脫離標準文件流，也就是說，父級元素中沒有內容可以撐開其高度，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。
方法1：給父級div定義 高度原理：給父級div定義固定高度（height），能解決父級div 無法獲取高度得問題。 優點：**簡潔 缺點：高度被固定死了，是適合內容固定不變的模組。（不推薦使用）
方法二：使用空元素，如
(.clear)原理：新增一對空的div標籤，利用css的clear:both屬性清除浮動，讓父級div能夠獲取高度。 優點：瀏覽器支援好 缺點：多出了很多空的div標籤，如果頁面中浮動模組多的話，就會出現很多的空置div了，這樣感覺視乎不是太令人滿意。（不推薦使用）
方法五：父元素設定 overflow：hidden、auto；原理：這個方法的關鍵在於觸發了bfc。在ie6中還需要觸發 haslayout（zoom：1） 優點：**簡介，不存在結構和語義化問題 缺點：無法顯示需要溢位的元素（亦不太推薦使用）
方法六：父級div定義 偽類:after 和 zoom
.clearfix:after
.clearfix
複製**
:after，原理和方法2有點類似，zoom(ie轉有屬性)可解決ie6,ie7浮動問題 優點：結構和語義化完全正確,**量也適中，可重複利用率（建議定義公共類） 缺點：**不是非常簡潔（極力推薦使用）
經益求精寫法
.clearfix:after
.clearfix 照顧ie6，ie7就可以了
複製**
詳細關於浮動的知識請參看這篇文章：定義：bfc(block formatting context)直譯為"塊級格式化上下文"。它是乙個獨立的渲染區域，只有 block-level box 參 與， 它規定了內部的 block-level box 如何布局，並且與這個區域外部毫不相干。
bfc布局規則bfc 就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
哪些元素會生成 bfc
設定css盒模型為標準模型或ie模型。標準模型的寬度只包括content，二ie模型包括border和paddingbox-sizing屬性可以為三個值之一：
px畫素(pixel)。絕對單位。畫素 px 是相對於顯示器螢幕解析度而言的，是乙個虛擬長度單位，是計算 機系統的數位化影象長度單位，如果 px 要換算成物理長度，需要指定精度 dpi。
em是相對長度單位，相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定， 則相對於瀏覽器的預設字型尺寸。它會繼承父級元素的字型大小，因此並不是乙個固定的值。
rem是 css3 新增的乙個相對單位(root em，根 em)，使用 rem 為元素設定字型大小時，仍然是相對大小， 但相對的只是 html 根元素。
有四種：內聯(元素上的style屬性)、內嵌(style標籤)、外鏈(link)、匯入(@import) link和@import的區別：
流式布局使用非固定畫素來定義網頁內容，也就是百分比布局，通過盒子的寬度設定成百分比來根據螢幕的寬度來進 行伸縮，不受固定畫素的限制，內容向兩側填充。
響應式開發利用css3 中的 media query(媒介查詢)，通過查詢 screen 的寬度來指定某個寬度區間的網頁布局。
由於響應式開發顯得繁瑣些，一般使用第三方響應式框架來完成，比如 bootstrap 來完成一部分工作，當然也 可以自己寫響應式。
區別
-流式布局
響應式開發
開發方式
移動web開發+pc開發
響應式開發
應用場景
一般在已經有pc端**，開發移動的的時候只需要單獨開發移動端
針對一些新建的**，現在要求適配移動端，所以就一套頁面相容各種終端
開發正對性強，開發效率高
相容各種終端，效率低
適配只適配移動裝置，pad上體驗相對較差
可以適配各種終端
效率**簡潔，載入快
**相對複雜，載入慢
關鍵的區別是他們所側重的內容，以及這種不同造成的工作流程的差異
區別：display:none
visibility:hidden
opacity:0
設定height，width等盒模型屬性為0
其他腦洞方法
行高足夠小 - 基線位置上移：.box
「nth-child」選擇的是父元素的子元素，這個子元素並沒有指定確切型別，同時滿足兩個條件時方能有效果：其一是子元素，其二是子元素剛好處在那個位置；「nth-of-type」選擇的是某父元素的子元素，而且這個子元素是指定型別。
**：
css知識總結
background color 背景顏色。background image 元素的背景影象.background repeat 水平方向平鋪 repeat x background attachment 背景影象是否固定或者隨著頁面的其餘部分滾動 background position 屬性改變影...
CSS知識總結
基本流程 解析html以構建dom樹 構建render樹 布局render樹 繪製render樹,如下圖 名稱解釋 注意 display none 的節點不會被加入render tree，而visibility hidden 則會，所以，如果某個節點最開始是不顯示的，設為display none是更...
CSS知識總結（2）
1.css選擇器 每一條css樣式定義由兩部分組成，形式如下 選擇器在 之前的部分就是 選擇器 選擇器 指明了 中的 樣式 的作用物件，也就是 樣式 作用於網頁中的哪些元素 p上面的css樣式 的作用 為p標籤設定12px字型大小，行間距設定20px的樣式。2 2，類選擇器 類選擇器在css樣式編碼...