1 常见的行内元素和块级元素
特点 | 注意 | |
块级元素 div h1~h6 p ul ol li |
|
文字类的元素内不能使用块级元素;<p> 标签主要用于存放文字,因此 <p> 里面不能放块级元素,特别是不能放<div>;同理<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素 |
行内(内联)元素 span a strong b em i del s ins u |
|
链接里面不能再放链接;特殊情况链接 <a> 里面可以放块级元素,但是给 <a> 转换一下块级模式最安全 |
行内块元素 img input td button |
|
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
- 转换为块元素 : display:block
- 转换为行内元素 : display:inline
- 转换为行内块 : display: inline-block
测试块级元素、行内元素、行内块元素
<!--块级-->
<div>div</div>
<div>div</div>
<hr>
<!--行内-->
<span>1</span>
<span>1</span>
<hr>
<!--行内块-->
<button>button</button>
<button>button</button>
<style>
div {
height: 50px;
width: 100px;
background-color: pink;
}
span {
height: 50px;
width: 100px;
background-color: pink;
}
button {
height: 50px;
width: 100px;
background-color: pink;
}
</style>
https://blog.csdn.net/weixin_44307807/article/details/85872703