标签的显示模式
html的显示模式一般有块级标签和行内标签两种，也叫块级元素和行内元素。
一、定义
1.块级元素（block-level）
- 独占一行，一行只能有一个块级元素
- 可以设置高度、宽度、外边距和内边距
- 默认宽度为容器100%
- 可包含任何标签
常见的块级元素
<div>,<h1>~<h6>,<p>,<ul>,<ol>,<li>,<dt>,<form>等
2.块级元素(inline-level)
- 一行可以有多个行内元素
- 不可以设置高度和宽度
- 默认宽度为内容宽度
- 可包含文本和其他行内元素
常见的行内元素
<span>,<b>,<u>,<i>,<em>等
3.行内块元素(block-inline)
- 一行可以有多个行内块元素,和相邻的行内块元素之间有空隙
- 可以设置高度、宽度、外边距和内边距
- 默认宽度为内容宽度
常见的行内块元素
<img>,<input>,<td>等
二、转换
- 块转行内:
display:inline - 行内转块:
display:block - 块、行内转行内块:
display:inline-block
<style>
div {
/*块级元素->行内元素*/
display: inline;
width: 200px;
height: 200px;
background-color: hotpink;
}
span {
/*行内元素->块级元素*/
display: block;
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 2px;
text-align: center;
}
a {
/*行内元素->行内块元素*/
display: inline-block;
width: 200px;
height: 200px;
background-color: orange;
margin-bottom: 5px;
}
input {
/*行内块元素->块级元素*/
display: block;
width: 200px;
height: 30px;
background-color: bisque;
margin-bottom: 10px;
}
</style>
<body>
<div>块级元素</div>
<div>块级元素2</div>
<span><b>行内元素</b></span>
<span><b>行内元素2</b></span>
<a href="https://www.baidu.com/">百度</a>
<a href="https://weibo.com/mygroups?gid=110005271006415/">微博</a>
<input type="text">
<input type="text">
<textarea name="" id="" cols="100" rows="10" ></textarea>
</body>
经过转换的各种元素
