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}