您的位置:首页> 前端教程> HTML教程
文章导航

HTML 块级元素和内联元素

2018-9-16 11:16| 作者: admin| 查看: 865| 评论: 0|来自: 蚂蚁部落

一.块级元素:

块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素,例如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.softwhy.com/" />
<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.softwhy.com/" />
<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.softwhy.com/" />
<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,它们就可以在同一行显示,也能够设置尺寸和内外边距。


鲜花

握手

雷人

路过

鸡蛋
上一篇:HTML <iframe>标签下一篇:HTML 表单概述

最新评论

返回顶部