类型 | 元素 |
---|---|
块级元素 | <div> , <p> , <h1> , <h2> , <h3> , <h4> , <h5> , <h6> , <ol> , <ul> , <li> , <table> , <form> , <header> , <footer> , <section> , <article> , <nav> , <aside> |
行内元素 | <span> , <a> , <strong> , <b> , <em> , <i> , <u> , <sub> , <sup> , <img> , <label> , <textarea> , <input> (部分情况除外), <button> (部分情况除外) |
行内块级元素 | <img> , <input> , <label> , <button> |
块级元素(Block-level elements)
- 布局特性:通常会占据调用它的容器的整个宽度,并且其后的元素会在新的一行显示。
- 常见用途:用于创建文档或应用的结构布局。
行内元素(Inline elements)
- 布局特性:不会独占一行,其宽度仅包围其内容。
- 常见用途:用于标记文本,可以在段落内部或其他块级元素内部使用,而不会引起文本换行。
行内块级元素(Inline-block elements)
- 布局特性:类似于行内元素,不会导致换行;同时具有块级元素的某些特性,如设置宽度和高度。
- 常见用途:适合在需求同时需要行内布局和宽高控制的场景。
请注意,这个表格中的分类是基于元素的默认显示类型,但CSS可以修改这些元素的默认行为(例如,使用display:block
,display:inline
或display:inline-block
等CSS属性)。