聖杯布局
解釋：利用浮動，負邊距，相對定位實現主體百分比布局，兩邊固定寬度布局
雙飛翼布局
垂直居中布局
我認為這個需要分為幾個方面來談（這裡主要只寫我覺得容易記住的常用的好用的，其他一些不太能記住的我就暫時不寫了）
1、行內元素和塊級元素
行內元素：
水平居中 text-align:center
2、塊級元素（分為定寬定高 不定寬高）
定高定寬
1.一般利用絕對定位和負邊距 2、利用絕對定位 和margin auto
.testclasscenter
.testclass
這種一般是父級元素是定寬高的不然裡面的元素很難定義到垂直居中 使用絕對定位和水平移動的屬性設定
.csss
.test
1、標有!important的使用者樣式
2、標有!important的作者樣式
3、作者樣式
4、使用者樣式
5、瀏覽器/使用者**應用的樣式
6、id選擇器，如：#content
7、類，偽類和屬性選擇器，如： content、:hover
8、標籤選擇器和偽元素選擇器，如：div、p、:before
9、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）
摘自《精通css高階web標準解決方案》
首先需要了解，屬性值分為三種，即 css 規範定義的初始值、瀏覽器廠商重置的使用者**樣式和我們開發人員設定的樣式，優先順序也是按照這個順序遞增。
css 為控制繼承提供了四個特殊的通用屬性值，每個 css 屬性都能使用這些值。
設定該屬性會使子元素屬性和父元素相同。實際上，就是「開啟繼承」。
將屬性的初始值應用於元素。實際上，就是「重置為預設值」。
將屬性重置為自然值，也就是如果屬性是自然繼承的那麼就是inherit，否則和initial一樣。
css3
transform 在2d或者3d效果中使用的乙個初始引申設定值
2d屬性
scale(x,y) 設定模組放大或者縮小相對原模組的寬高
rotate(xdeg) 元素順時針旋轉給定的角度
skew(x,y) 元素按照引數翻轉給定的角度
translate(x,y) 當前位置移動
matrix() 方法把所有 2d 轉換方法組合在一起。
matrix() 方法需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素。
3d屬性
一般就屬性直接新增了三維概念
可以通過scale3d()這樣設定也可以通過scalex scaley scalez的方法進行更改
transition 過度效果 動畫效果 一般是設定某個已有的屬性，動畫多少時間，（運動規律，是否勻速等（linear，ease）），延遲多少時間執行。 進行了某項重新設定或者更改包括transform的動畫設定效果 一般是乙個過渡 有初始狀態和後期需要顯示的狀態
eg：
請把滑鼠指標放到黃色的 div 元素上，來檢視過渡效果。
注釋：本例在 internet explorer 中無效。
@keyframes animation
-webkit- /* safari 和 chrome */-moz- 火狐@keyframes myfirstani
25%：
50%：
75%：
100%：
}@keyframes myfirstani
to：}
規定動畫。
3animation
所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
3animation-name
規定 @keyframes 動畫的名稱。
3animation-duration
規定動畫完成乙個週期所花費的秒或毫秒。預設是 0。
3animation-timing-function
規定動畫的速度曲線。預設是 "ease"。
3animation-delay
規定動畫何時開始。預設是 0。
3animation-iteration-count
3animation-direction
3animation-play-state
規定動畫是否正在執行或暫停。預設是 "running"。
3animation-fill-mode
規定物件動畫時間之外的狀態。
div
css 3d 動畫相關總結
傾斜 transform skew 水平傾斜 transform skew 水平,垂直 transform skewx transform skewy target 選擇器可用於選取當前活動的目標元素。css樣式 圓角 border radius 元素是正方形 寬度的一半px 50 正圓 元素是長方...
CSS3相關知識總結
moz代表firefox瀏覽器私有屬性 ms代表ie瀏覽器私有屬性 webkit代表safari chrome私有屬性 o代表歐朋 opera 核心識別碼 參考文章 布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，...
CSS 布局相關
多欄布局 column count n 欄數 column width width 欄寬 可以單獨設定每一欄的寬度，也可以只設定元素的寬度，然後自適應 column gap width 欄間距 column rule 2px solid red 間隔線 盒布局 display box 使用盒布局 b...