HTML 块级元素和内联元素

小灰灰 2020-05-16 19:11 795阅读 0赞

# HTML 块级元素和内联元素

**一.块级元素:**

块级元素一般当做容器使用，既可以容纳内联元素也可以容纳块级元素，例如div和p。

默认状态下，块级元素总是占据一整行，除非使用CSS控制。

使用display:inline可以把块级元素转换成内联元素。

块级元素的特点:

（1）.块级元素既可以容纳内联元素也可以容纳块级元素。

（2）.块级元素在默认的情况下是独占一行的。

（3）.块级元素大小是可以控制的，css可以设定高度和宽度。

（4）.宽度默认值就是它所在容器宽度的100%。

实例代码:

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
.ant-1{
  height:200px;
  background-color:green;
}
.ant-2{
  width:200px;
  height:200px;
  background-color:red;
}
</style>
</head>
<body>
  <div class="ant-1"></div>
  <div class="ant-2"></div>
</body>
</html>
```

代码中有两个div，分别占据一行，并且设定了它们的长度和宽度。

常见的块级元素:

（1）.div：主要用来进行框架布局。

（2）.h1～h6：用来设置不同级别的标题。

（3）.p:创建段落，会自动在其前后创建一些空白。

（4）.hr:用来创建分隔先。

（5）.ol:创建有序列表。

（6）.ul:创建无序列表。

**二.内联元素:**

内联元素名称有多种，比如内嵌元素、行内元素等等，无需纠结。

任何不是块级元素的可见元素都是内联元素。

内联元素只能够容纳文本或者内联元素。

内联元素的尺寸是不可以控制的，也就是说CSS的height和width是不起作用的。

使用display:block语句可以把内联元素转换成块元素；内联元素浮动起来自动转换成块级元素。

内联元素的特点:

（1）.内联元素只能容纳文本或者内联元素。

（2）.内联元素默认情况下可以和其他内联元素元素在一行上。

（3）.内联元素默认情况下的大小是不可以控制的。

（4）.内联元素可以产生代码换行和空格。

实例代码:

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
.ant-1{
  height:200px;
  background-color:green;
}
.ant-2{
  width:200px;
  height:200px;
  background-color:red;
}
</style>
</head>
<body>
  <span class="ant-1"></span>
  <span class="ant-2"></span>
</body>
</html>
```

代码中两个内联元素是在一行排列的，但是无法给它们设定高度和宽度。

常见的内联元素:

（1）.strong：加粗强调。

（2）.em：斜体强调。

（3）.s：删除线。

（3）.u：下划线。

（3）.a：超链接。

（3）.span：常用行级，可定义文档中的行内元素。

（3）.img：图片。

（3）.input:表单。

**三.内联块级元素:**

默认状态下，元素要么内联元素，要么块级元素。

使用display:inline-block可以将一个元素转换成内联块级元素。

顾名思义，就是使元素兼具内联元素和块级元素的特性。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
ul {
  background: #ccc;
  padding: 0;
  margin: 0;
  list-style: none;
}
li {
  display: inline-block;
  width: 80px;
  height: 20px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  background: #cfc;
}
</style>
</head>
<body>
<ul>
  <li>蒲公英云一</li>
  <li>蒲公英云二</li>
  <li>蒲公英云三</li>
  <li>蒲公英云四</li>
</ul>
</body>
</html>
```

li元素应用display:inline-block，它们就可以在同一行显示，也能够设置尺寸和内外边距。