html怎样给盒子标签加分类,盒子模型 · HTML-CSS样式 · 看云

# 1.盒子模型

## 1.1盒子模型的传参

~~~

margin:0; //四个方向都改变

margin:0 10px; //top,bottom为0px;left,right为10px

margin:0 10px 20px; //top 0;left,right 10px;bottom 20px;

~~~

padding如上

1.2元素在盒子中的起始位置

~~~

从自身的宽度开始

~~~

# 2.HTML标签的分类

## 2.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

~~~

## 2.2 原理

### **块标签：独占一行,能够设置宽高**

~~~

div,h1~h6,p,ul,li,dl,dt,dd

~~~

~~~

display:block;

~~~

### 内联标签:**并排显示,不能设置宽高,margin-top,margin-bottom**

~~~

a,span,em,strong

~~~

~~~

display:inline-block

~~~

## 2.3 skill

a.如何让内联元素和内联块元素水平居中

~~~

display:block;

margin-left:auto;

margin-right:auto;

~~~

b.如何让内联元素和内联块元素水平居中

~~~

//给父级加

text-align:center

~~~

# 3.css 选择器

> 定义选定你所要改变的元素的一种方式。

## 3.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 选择器的优先级别排序

```

hello world

```

```

元素选择器

div{color:pink}

```

### 3.3 选择器的权重

```

child

```

```

/* 选择器嵌套的层次越深,那么权重越高 */

.child{

color:red;

}

.parent>.child{

color:green;

}

```