[TOC] > ### 選擇器 - 元素選擇器 - class選擇器 .classname{} - id選擇器 #id{} - 分組選擇器 用','隔開可以同時選擇多個元素 - 兄弟選擇器 div+p{} 選擇div之后第一個同級P元素 div~p{} 選擇div之后的所有同級p元素 - 后代選擇器 .parent>p 親兒子 .parent p 選中parent之后所有的p - 偽類選擇器 :hover //覆蓋 :focus //聚焦 - 偽元素選擇器 偽元素-->用css自定義生成的元素 ":before" 偽元素可以在元素的內容前面插入新內容 p:before{ content:'' } ":after" 偽元素可以在元素的內容之后插入新內容。 p:after{ content:'' } - 屬性選擇器 div[class='test']{} 權重 嵌套越深，權重越大 id > class > 元素 > ### 盒子模型 content margin padding border - 樣式重置 *{ margin: 0; padding: 0; } - 行高 line-height /*行高可以將一段文本撐開，讓文字在行高中居中 設置行高就不用設置高度了*/ - 對齊方式 text-align (center 居中 left 左對齊 right 右對齊) - 參數設置 設置兩個參數 第一個：top,buttom 第二個：right, left 設置三個參數 第一個：top 第二個：right,left 第三個：bottom > ### 標簽分類 - 塊標簽 //特點 1.獨占一行 2.能夠設置width,height //常用的塊標簽 div,h1~h6,p,ul,li,dl,dt,dd - 內聯標簽 //特點 1.并排顯示 2.不能設置width,height 3.不能設置margin-top,margin-bottom a,span,em,strong - 內聯塊 //特點 1.并排顯示 2.可以設置寬高 //常用的內聯塊標簽 button,img,input > ### 水平居中 - 塊元素水平居中 margin-left:auto; margin-right:auto; - a.如何讓內聯元素和內聯塊元素水平居中 display:block; margin-left:auto; margin-right:auto; - b.如何讓內聯元素和內聯塊元素水平居中 //給父級加 text-align:center