1桨啃、樣式種類：瀏覽器默認樣式、帶有樣式的標簽檬输、內(nèi)聯(lián)樣式照瘾、style標簽、link引入樣式文件丧慈。
2析命、選擇器(http://www.ruanyifeng.com/blog/2009/03/css_selectors.html)
??2.1基本選擇器：1、通配符 ()
?????????2逃默、標簽選擇器 (div等)
?????????3鹃愤、class選擇器 (.)
?????????4、id 選擇器 (#)
??2.2組合選擇器：1完域、多組選擇器 div, span, a.on
?????????2软吐、后代選擇器 div span
?????????3、子元素選擇器 div > span
?????????4吟税、兄弟元素選擇器 div + span, div ~ span 表示 div 后所有 span 兄弟節(jié)點
??2.3屬性選擇器:input[type],input[type=”text”],input[type~=],input[type|=]
????????input[type=], input[type^=], input[type$=]
??2.4偽類和偽對象：偽類選擇器凹耙，一般常用于a標簽例如a:link,a:visited,a:hover,a:active；偽對象選擇器, :after, :before 等肠仪。
??2.5其他CSS3選擇器:E:nth-child(n)肖抱、E:not(span)、E:checked
??2.6選擇器在各瀏覽器中的兼容性：參考文檔-- ???http://labs.qianduan.net/css-selector/
3藤韵、優(yōu)先級
!important > 內(nèi)聯(lián)樣式 > #ID > .class > TAG | [attr] | 偽類 > 偽對象 > 通配符 > 繼承
樣式繼承（文本相關(guān)）? font, color虐沥、text-align,text-indent(縮進)、line-height泽艘、letter-spacing(字母間距),word-spacing(段落中的字間距)
繼承相關(guān)文檔--http://www.cnphp.info/css-style-inheritance.html
4欲险、盒模型布局
??4.1兩種盒模型
?????IE 盒模型, width = contentWidth + padding + border, 布局優(yōu)先
?????標準盒模型, width = contentWidth, 內(nèi)容優(yōu)先
http://blog.163.com/zx_1258/blog/static/133233799201301331041110/
??4.2box-sizing
????border-box(IE模式) :大部分 input 元素使用 border-box 模式, 用以解決瀏覽器間 form 表單樣式兼容性問題
????content-box(W3C模式)
http://blog.163.com/zx_1258/blog/static/13323379920130133139102/ form 表單樣式統(tǒng)一兼容性方案
5、inline,block和inline-block
??5.1匹涮、 inline內(nèi)聯(lián)元素
?????與其他元素依次排列在一行內(nèi), 直到遇到右邊界才換行
?????不可設(shè)置寬和高, 設(shè)置了 width 和 height 也無效
?????可以設(shè)置水平方向的 padding 和 margin, 垂直方向的 padding 和 margin 不會影響布局(可以設(shè)置并且可以生效, 但是對其他元素沒有影響)
?????擴展說明, 可以設(shè)置 line-height, 并且會影響布局(可以對其他元素的位置產(chǎn)生影響)
??5.2天试、bloock塊級元素
?????自己獨占一行
?????可以設(shè)置寬,高, 默認情況下, 寬度自動填滿整個父元素, 但即使設(shè)置了寬度, 仍是獨占一行
?????可以設(shè)置任意方向上的margin,padding, 并都對布局產(chǎn)生影響
??5.3、inline-block內(nèi)聯(lián)塊級元素
附帶：
?ie6,7對該屬性支持不完善, 需要做簡單 hack, e.g. display:inline-block; *display:inline; zoom:1;
(這個針對不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack)
?inline-block 元素雖好, 但是有樣式問題, 即在元素間產(chǎn)生幾像素的水平空隙(不同瀏覽器下不同), 原因是換行符,空格符和制表符轉(zhuǎn)換成空白符, 在字體大小不為0的情況下, 占據(jù)一定空間造成的;
6然低、浮動(float浮動, 即讓元素脫離文檔漂浮起來, 向左或向右移動, 直到遇到父元素邊緣或者另一個浮動元素的邊緣;元素浮動以后, 不會影響塊級元素布局, 只會影響內(nèi)聯(lián)元素排列)
??6.1喜每、浮動的使用：元素水平排列务唐、文字環(huán)繞圖片、對比inline-block:a--實現(xiàn)原理不同, float 元素已經(jīng)脫離了普通流, inline-block 元素仍在普通流中.b--都能水平排列元素, 但是 float 瀏覽器兼容性更好.c--float 可以做文字環(huán)繞, 而 inline-block 只能做水平排列.
??6.2带兜、清除浮動
在當前元素使用Css屬性 clear : left|right|both|none, 使元素清除浮動元素的影響:?被浮動元素覆蓋枫笛、?跟在浮動元素后
eg--.clear{clear:both;height:0;overflow:hidden;}
??6.3、閉合浮動
i. 浮動元素后添加帶 clear 屬性的額外標簽
?a) 添加額外標簽
?b) 使用偽對象 :after | :before
ii. 創(chuàng)建BFC(Block Formatting Contexts, W3C標準) 或 觸發(fā) hasLayout (IE獨有, IE6-7, IE8已支持BFC) 屬性
a) 觸發(fā)BFC
?1. float 除了 none 以外的值
?2. overflow 除了 visible 以外的值
?3. display (inline-block, table-cell…)
?4. position (absolute, fixed)
b) 觸發(fā) hasLayout
?1. float 除了 none 以外的值
?2. display : inline-block
?3. position : absolute
?4. width, height 除 auto 以外的值
?5. zoom : 1
??6.4刚照、為什么要清除/閉合浮動
?????浮動元素不能撐開父元素, 從而使布局上產(chǎn)生’塌陷’效果;
?????浮動會影響后面的內(nèi)聯(lián)元素的布局
?????創(chuàng)建了 BFC 或觸發(fā)了 hasLayout 以后, 相當于創(chuàng)建了一個獨立的盒子, 里面的元素與外面的元素在布局上不會相互影響
??6.4刑巧、清除/閉合浮動解決方案
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; } //在父元素內(nèi)容尾部添加 clear 屬性元素
.clearfix { zoom:1; }
//觸發(fā) IE hasLayout 屬性(IE6-7不支持 BFC)
文檔推薦：http://www.iyunlu.com/view/css-xhtml/55.html
7、定位與層級
?7.1定位分類--定位可分為在普通流和脫離普通流兩類, 對應(yīng)與 position 的取值:
?? ?static 為默認值, 元素存在與普通流中
???relative 相對定位, 元素相對于它在普通流中的位置進行定位, 其本身在普通流中的位置仍然被保留
???absolute 絕對定位, 元素相對于最近的已定位的父元素進行定位, 其在普通流中的位置已被抹除
???fixed 絕對定位的一種, 以瀏覽器窗口為已定位的父元素進行定位
前兩種在普通流中, 后兩種已經(jīng)脫離了普通流, 不再占據(jù)位置.
?7.2層級
層級關(guān)系會形成元素間的相互覆蓋效果, 另外, 浮動也會使元素產(chǎn)生的相互覆蓋效果.對 z-index 定位會使元素間產(chǎn)生層級關(guān)系, 把頁面看做一個坐標系, 一般的定位操作都是在 X 軸和 Y 軸上進行的, 而 z-index 則是控制 Z 軸的定位.
7.2.1无畔、z-index層級比較
i.父元素相同, 直接比較
a)順序規(guī)則, 默認或者 position:static 情況下, 后面元素會覆蓋前面元素
b)定位規(guī)則
1.已定位的元素會覆蓋未定位的元素
2.兩元素均已定位, z-index 值大的會覆蓋值小的
3.兩元素均已定位且z-index值相同, 后面的覆蓋前面的
4.兩元素均已定位, z-index 一個為0, 一個為 auto, 視為同一層, 后面的覆蓋前面的
ii.父元素不同, 抽出z-index 層級樹, 進行層級比較
a)參與規(guī)則, 所有已定位的元素且 z-index 值不為 auto 時, 參與層級定位(僅定位元素, position 不為 static, 不設(shè)置 z-index, 在 IE6/7下, z-index 默認值為0, 其他瀏覽器則默認值為 auto), 已定位且 z-index 值為 auto 的元素, 向上遍歷至最近的已定位且值不為 auto 的祖先元素進行層級定位
b)從父規(guī)則, 層級樹中子元素的層級關(guān)系, 由其父元素的層級關(guān)系決定
c)默認規(guī)則, 同一父元素下的子元素
1.z-index 相同, 則后面的覆蓋前面的
2.z-index 不同 , 值大的覆蓋值小的
文章推薦--http://www.cnblogs.com/ForEvErNoME/p/3373641.html
8啊楚、垂直水平居中
8.1、垂直居中
i.文字,元素居中
a)height == line-height
b)外層 display:table;
內(nèi)層 display:table-cell;vertical-align:middle;
(IE6/7不支持 display:table-cell)
ii.vertical-align : middle, 可以使文字相對于元素居中排版
8.2浑彰、水平居中
i.文字居中, text-align : center;
ii.元素居中
a)寬度固定, margin: 0 auto;
b)寬度不固定,
外層 text-align:center;
內(nèi)層 display:inline-block;text-align:left;
(IE6/7需要對 inline-block 屬性進行 hack)
8.3寬高固定的元素絕對定位解決垂直水平居中
外層: position:relative;
內(nèi)層: position:absolute; top:50%; left:50%;
margin-top:-50%Height; margin-left:-50%Width;
9恭理、表單表格
9、1表單
?一個 label 對應(yīng)一個 input 或者 inputgroup
?使用 vertical-align 使文字與 input 元素居中
?表單元素使用 box-sizing:border-box; 以在不同瀏覽器中得到一致樣式
http://www.w3school.com.cn/html/html_forms.asp
9郭变、2表格
?border-collapse : collapse, 合并相鄰單元格邊框
?colspan, rowspan, 合并相鄰單元格
?thead, tfoot, tbody
?tr 行; th 標題, td 內(nèi)容
?設(shè)置border, 設(shè)置單元格 td 與 th 的 border, 結(jié)合 border-collapse;
?使用 padding 控制單元格內(nèi)部留白大小
http://www.ruanyifeng.com/blog/2009/05/html_table_mastering.html