CSS教程：块级元素、内联元素（行内元素）、内联块状元素-马育民老师

# 块级元素

1. 独占一行，前后有其他标签时，会换行
2. 元素宽度默认 和父元素的宽度一致
3. 元素的高度、宽度、行高以及顶和底边距都可设置

```
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>
```

### 例子
```
<style type="text/css">
div,p{
	background:pink;
}
</style>

<div>div1</div>
<div>div2</div>
<p>测试</p>
```

# 内联元素（行内元素）

与块级元素相反

1. 不独占一行
2. 元素的宽度就是它包含的文字或图片的宽度，不可改变
3. 元素的高度、宽度及顶部和底部边距 **不可设置**

```
<a>、<span>、<br>、<i>
```

### 例子

```
<style type="text/css">
a,span,em{
	background:pink;/*设置a、span、em标签背景颜色都为粉色*/
}
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em>
```

# 内联块状元素

1. 不独占一行
2. 元素的高度、宽度、行高以及顶和底边距都 **可设置**

```
<img>、<input>
```

### 例子

```
<style type="text/css">
a{
    
	width:20px;/*在默认情况下宽度不起作用*/
	height:20px;/*在默认情况下高度不起作用*/
	background:pink;/*设置背景颜色为粉色*/
	text-align:center; /*设置文本居中显示*/
	display:inline-block;
}
</style>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
```

# 改变显示方式

### 设置为 **块状元素**
```
display:block;
```

### 设置为 **内联块状元素**
```
display:inline-block
```

### 设置为 **内联元素**
```
display:inline
```

原文出处：http://www.malaoshi.top/show_1IX1GOg0vFOG.html