目录
1. 块元素
常见的有<div>、<ul>、<ol>、<li>、<dl>、<hr />、<form>、<table>
特点如下：
- 独占一行
- 可以设置高度、宽度、外边距、内边距
- 宽度默认是父级的100%
- 里面可以放行内元素或块级元素
- 注意：文字类的块元素，如<p>、<h1> ~ <h6>，里面不能放块元素
2. 行内元素
常见的有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
特点如下：
- 一行可以放多个行内元素，父元素宽度不够则自动换行
- 不可以设置宽度、高度
- 默认宽度是内容的宽度
- 里面只能放文本或行内元素
- 注意：<a>里面不能放<a>
3. 行内块元素
常见的有<img />、<input />、<td>
同时具有块元素和行内元素的特点
4. 转换为块元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
a {
display: block;
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<a href="#">链接一</a>
<a href="#">链接二</a>
</body>
</html>
显示如下：
5. 转换为行内元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
div {
display: inline;
}
</style>
</head>
<body>
<div>盒子一</div>
<div>盒子二</div>
</body>
</html>
显示效果如下：
6. 转换为行内块元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
div {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div>盒子一</div>
<div>盒子二</div>
</body>
</html>
显示效果：
