在HTML标签中可以简单的划分为两类元素,一种是 块级元素 (block),一种是 行内元素 (inline)。
块级元素
<div>
是最常见的HTML标签,它是一个典型的块级元素。它的内容会独立占领至少一行,哪怕内部只有一个字符。
在HTML5时代,为了追求标签语义化,制定了新的类似<div>
的标签,比如 <section>
,<nav>
等等,他们的 display 默认属性都一致。
section,nav,article,header,footer.aside... {
display:block;
}
//HTML5新增的区块元素
在HTML5里,还有几种新标签同样是区块元素,但是兼容性不好,所以不推荐使用。
details,dialog,summary {
display:block;
}
//IE和Chrome都不支持,不建议使用
行内元素
行内元素就更加常见了,比如<a>
,<img>
,<span>
等等,它们在网页当中不会占领一行,但是会根据内容来进行扩张,某些元素可以指定 width 和 height 属性,设置元素的宽度和高度。
我们也可以改变 display 属性来把使元素能指定大小。
a {
display:inline-block;
width:15px;
height:10px;
}