主要的块级元素
- 文档分区:
<div> - 标题:
<h1> <h2> <h3> <h4> <h5> <h6> - 段落行:
<p> - 列表:
<ul> <ol> - 表单:
<form> - 预格式化文本:
<pre> - 其他标签:
<header> <nav> <section> <article>
主要的行内元素
- 表单:
<input> <button> <textarea> <select> <label> - 强调:
<strong> <em> - 小块内容:
<span> - 超链接:
<a> - 图片:
<img> - 换行:
<br> - 代码块:
<code> - 脚本:
<script>
主要区别
| 区别 | 块级元素 | 行内元素 |
|---|---|---|
| width | 与爸爸元素的宽度一致 | 宽度就是内容宽度,设置 width 没用 |
| height | 可以设置,如果没有设置，高度与儿子元素高度一致 | 设置高度同样没用 |
| margin 和 padding | 设置上下左右都有用 | 设置上下没用，设置左右可以 |
| vertical-align | 设置对包含的行内元素有用 | 没用 |
| 放置情况 | 另起一行放在前一个元素的下面 | 一串文字流 |
| 浮动情况 | 浮动并挤入上一行(条件是上一行宽度够) | 几乎变成了个块级元素 |
注意几点
<img>这个标签是个很特殊的元素，它同时具有块级元素与行内元素两者的特点(replace element)- 块级元素里面既可以有块级元素，也可以有行内元素(感觉像是废话…)
- 若不做任何 css 设置,则行内元素里面只能有行内元素