块级元素与行内元素
块级元素与行内元素的区别📏。
关键区别:
- 格式:默认情况下,块级元素会新起一行。
- 内容:一般块级元素可以包含行内元素和其他块级元素。
一,块级元素
display
属性为block
的元素。
- 常见块级元素
div
: 文档分区。ul
: 无序列表。ol
: 有序列表p
: 行。audio
: 音频播放。video
: 视频。table
: 表格。header
: 区段头或页头。h1
~h6
: 标题。
- 举个栗子🙋
<p>
hello Jone
</p>
p{
background-color: #8c8c;
}
二,行内元素
display
属性为inline
的元素。内元素只占据它对应标签的边框所包含的空间,
- 常见行内元素:
- i
- a
- strong
- span
- button
- input
- textarea
- 举个栗子🙋
<p>
this is a block-level <span>element.</span>
</p>
span{
background-color: #8c8c;
}
参考连接: