1:inline-block 元素
ie6 7下只有 inline 的元素有 inline-block, 比如 span元素，如果要使其它元素有 inline-block，比如 div 有 inlne-block，只要設定它為 inline, 再給它乙個 zoom: 1 使 它有 layout。
2:margin-top: 10%
指的是包含它的 containing block 的 寬度的 百分比，其它屬性也是這樣 margin-bottom padding-top padding-bottom (參考
3:垂直居中的**
1) display table 屬性 ie8 和 ie8 以上支援，所以可以這麼寫。
<div
style
='height:
200px;display: table-cell; vertical-align: middle;'
>
test
div>
2) 對於垂直居中 如果用百分比來實現，position: relative; top: -50%; 對於 ie8 ie9 chrome ff, 是不起作用的，必須顯示的設定containing block 的高度，而恰恰 ie6 和ie7 卻不需要，這是乙個bug。(
// 對於ie6 ie7 垂直居中<
div
style
='position:
relative'
>
<
div
style
='position:
absolute; top: 50%;'
>
<
div
style
='position:
relative; top: -50%;'
>test
div>
div>
div>
// chrome ie8 ie9 ff
<
div
style
='height:
200px;display: table-cell; vertical-align: middle;'
>
test
div>
// 都支援 瀏覽器
<
div
style
='height:
200px; width: 100px;
>
<
span
style
='display:
inline-block; vertical-align: middle;'
>hello world!
span
>
<
span
style
='display:
inline-block; vertical-align: middle;width: 1px; height: 100%;'
>
span
>
div>
3) wap 手機端的居中, 雖然可以用 display: table-cell; 但是我更喜歡用 translatex, translatey 來操作
/*上下左右都居中
*/.center
/*水平居中
*/.center-horizontal
/*垂直居中
*/.center-vertical
css專案知識小彙總
背景 background url assets image video img 1.png no repeat center background size 100 auto 寬度充滿，高度自適應 background url assets image video img 1.png no rep...
CSS3基礎知識彙總
css3樣式表優勢 1 豐富的修飾樣式 2 內容與修飾分離，利於專案開發 3 實現樣式復用，提高開發學歷 4 實現頁面的精準控制 css3語法 type text css listyle 3.樣式表分類 1 外部樣式表 head 其中rel stylesheet 表示在網頁中使用該外部樣式表，typ...
css疑難彙總
關於a標籤不換行頂開容器的問題 自 我們用div，p,ul，li 等塊級元素 布局給其設定了特定的width，那麼就會自動的換行。用span，a 等內聯元素 設定了display inline block,或者display block 也可以自動換行了。但是含英文的時候這種方法就無效了，還是會超出...