2、html标签css选择器 盒子模型

1.常用的html标签

div  ul~li input button img h1~h6

2.class选择器

1.可以给多个元素同一个class名 
2.可以给一个元素添加多个class名

3.设置文本的对齐方式

设置文本的对齐方向text-align:left|right|center
 text-align: center;

 给一段文本行高,会将文字撑开,让其在行高中垂直居中
 line-height: 80px;

4.盒子模型

4.1盒子模型

margin:0;  //四个方向都改变
margin:0 10px; //top,bottom为0px;left,right为10px
margin:0 10px 20px; //top 0;left,right 10px;bottom 20px;

5.html标签分类

5.1标签分类

• 块标签 ``` //特点 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

<a name="c7T6G"></a>
### 5.2 原理
**块标签：独占一行，能够设置宽高**<br />`div,h1~h6,p,ul,li,dl,dt,dd`

display:block;

**内联标签：并排显示，不能设置宽高，设 margin-top,margin-bottom没用**<br />`a,i,span,em,strong `

display:inline

**内联块标签：并排显示，能设宽高**<br />`input,img,button`

display:inline-block;

<a name="QRi0w"></a>
### 5.3内联元素和内联块元素水平居中
<a name="pIeZg"></a>
#### 方法一：

display:block; margin-left:auto; margin-right:auto;

<a name="5pehk"></a>
#### 方法二：

// 给父元素加 text-align:center;

<a name="tCxJs"></a>
## 6.CSS选择器
<a name="uvSyn"></a>
### 6.1 分类

hello world

标题

```
(1)css元素选择器
p{color:pink}
(2)class选择器
.test{color:yellow}
(3)id选择器
#first{color:blue}
(4)分组选择器
p,h4{background:gray}
(5)后代选择器
div>span{} //选取div所有子元素为span的标签
div span{} //选中div之后的所有span元素
(6)兄弟选择器
div+p{}选取紧邻div之后的第一个兄弟元素
div~p{}选取紧邻div之后的所有兄弟元素
(7)伪类选择器
div:hover{}
input:focus{}
(8)伪元素-->用css自定义生成的元素
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
  content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
 content:''
}
(9).属性选择
div[class='test']{}

http://www.w3school.com.cn/cssref/css_selectors.asp

3.2选择器的优先级别排序

<div class='test' id='first'>hello world</div>

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

3.3选择器的权重

<div class="parent">
        <div class="child">child</div>
</div>

/* 选择器嵌套的层次越深,那么权重越高 */
.child{
   color:red;
}
.parent>.child{
   color:green;
}