1.HTML標簽的分類

1.1 塊標簽

標簽名稱 : div(盒子容器),p(段落),h1~h6(標題),ul,li（不排序目錄),dl,dt,dd(定義目錄)
標簽特點 : 獨占一行,可以設置width和height
默認顯示 : display:block

1.2 內聯標簽

標簽名稱 : a(超鏈接),span(普通字),em(字體傾斜),strong(字體加粗)
標簽特點 : 并列顯示,不能設置width和height,不能設置margin-top,margin-bottom
默認顯示 : display:inline

1.3內聯塊標簽

標簽名稱 : input(輸入框),img(圖片),button(按鈕)
標簽特點 : 并列顯示,可以設置width和height
默認顯示 : display:inline-block

1.4 如何讓內聯元素和內聯塊元素水平居中

塊標簽可以使用以下方法水平居中:
margin-left:auto;
margin-right:auto;

內聯標簽(display:inline)以及內聯塊標簽(display:inline-block)
可以通過改變默認顯示方法 display:block 改變為塊標簽后再使用 margin-left:auto; margin-right:auto; 實現水平居中的效果;
以及給父級加 text-align:center;實現水平居中,如下: 
div{
            width: 300px;
            height: 300px;
            background-color: pink;
            text-align: center;
            /*父級中加入此語句能使 內聯標簽以及內聯塊標簽 達到居中的效果*/
            margin-left: auto;
            margin-right: auto;
            /*以上為塊標簽居中*/
        }

2.CSS選擇器

選擇你所要改變元素的一種方式

2.1分類

(1) css元素選擇器 (文檔的元素就是最基本的選擇器)
    p{color: white}

(2 )class選擇器
    .test{color: white}

(3) id選擇器
    #one{color: white}

(4) 分組選擇器
    p,h4{color: white}

(5) 后代選擇器
   div>p{color: white} 選擇div子目錄下所有的p元素,不選擇孫目錄的p元素
   div p{color: white} 選擇div目錄下面的所有p元素

(6) 兄弟選擇器
     div+p{color: white} 選取div下面相鄰的第一個元素p,如果不是p則不選擇
     div~p{color: white} 選取div下面的所有p元素

(7) 偽類選擇器
     p:hover{color:red;} 鼠標移動到p段落時 p文字顏色變成紅色
     input:focus{background-color:red;} 焦點控制,當鼠標點擊輸入框時,輸入框背景顏色變成紅色

(8) 偽元素
     ":before" 偽元素可以在元素的內容前面插入新內容
p:before{
  content:''
}
":after" 偽元素可以在元素的內容之后插入新內容。
p:after{
 content:''
}

(9) 屬性選擇
    div[class='test']{}
   <div class='test' id='first'>hello world</div>
   <h2 class='test' id='first'>hello world</h2>

2.2 選擇器的優先級排序

元素選擇器<class選擇器<ID選擇器<!important
div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}