1.HTML标签的分类

1.1块标签

//常用的块标签
div,p,h1~h6,ul,li,dl,dt,dd
//默认的display
display:block

特点：

1.独占一行
2.能够设置width,height

1.2内联标签

//常用的内联标签
a,span,i,em,strong
//默认的display
display:inline

特点：

1.并排显示
2.不能够设置width,height
3.不能设置margin-top,margin-bottom

1.3内联块标签

//常用的内联块
img,input,button
//默认的display
display:inline-block

特点：

1.并排显示
2.能够设置width,height

2.水平居中(内联元素和内联块)

2.1 display:block

//HTML
<span>span</span> <br/>
<button>btn</button>

//css
<style>
span,button{
  display:block;
  width:100px;
  margin-left:auto;
  margin-right:auto;
}
</style>

2.2 给父级加text-align:center

//HTML
<div>
  <span>span</span> <br/>
  <button>btn</button>
</div>

//css
<style>
div{
    text-align:center
}
</style>

3.选择器

3.1 css元素选择器

3.2 class元素

3.3 id选择器

//HTML
<p class=”test” id=”two”>hello world</p>
//css
<style>
//元素选择器
p{}
//class选择器
.test{}
//id选择器
#two{}
</style>

3.4伪类选择器hover,focus

//HTML
<input type="text"/>
<p>hello world</p>
//css
input:focus{
  background-color:red;
}
p:hover{
  color:pink;
}

3.5分组选择器

//HTML
<div>div</div>
<span>span</span>
<p>hello world</p>
//css
div,span,p{
 color:pink;
}

3.6后代选择器

//HTML
<div>
  <p>hello world</p>
  <p>hello world</p>
  <ul>
    <li><p>hello world</p></li>
    <li><p>hello world</p></li>
  </ul>
</div>

div>p //选取div所有子元素为p的标签

//css
div>p{
  color:pink;
}

div p //选取div之后的所有元素

//css
div p{
  color:red;
}

3.7兄弟选择器

//HTML
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>

div+p //选中div之后的第一个p元素

//css
div+p{
  color:red;
}

div~p //选中div之后的所有p元素

//css
div~p{
  color:red;
}

3.8伪元素

//HTML
<p>hello world</p>

//css
p:before{
  content:"我是前面";
  *display:block;*
}
p:after{
  content:"我是后面";
*  display:block;*
}

3.9属性选择器(了解)

//HTML
<p class="one">hello world</p>
//css
<style>
p[class="one"]{
  color:red;
}
</style>

4、选择器的优先级

//HTML
<div class='test' id='first'>hello world</div>
~~
元素选择器<class选择器<ID选择器<!important
div{color:pink}<.test{color:blue}<#first{color:yellow}<div{color:red !important}