HTML笔记（行内元素与块级元素区别）

这一篇应当结合盒模型那篇文章一起看。

1 行内元素与块级元素

举出几个我可能会混淆的元素类型：

• 块级元素：<table>，<caption>，<tr>，<th>，<td>，<tfoot>，<dl>，<dt>，<dd>，<hr>，<ul>，<ol>，<li>，<pre>
• 行内元素：<abbr>，<br>，<input>，<textarea>
• 可变元素：<button>

2 块级元素与行内元素的三个区别

• 1、行内元素与块级元素直观上的区别
  
  • 行内元素会在一条直线上排列，都是同一行，水平方向排列
  • 块级元素会各占据一行，垂直方向排列
• 2、块级元素可以包含行内元素以及块级元素，行内元素不能包含块级元素
• 3、行内元素在盒模型上设置width、height无效，margin-top，margin-bottom，padding-top，padding-bottom无效

3 <div>元素

这一节介绍的<div>与<span>元素堪称页面的钢铁支架，利用它们就可以构建重要的支撑架构，一旦有了这些架构，就可以用各种新颖、强大的方式为它们增加样式。
在构建结构之前，首先要找出一些逻辑区，然后把这些逻辑区分别包围在一个<div>元素中。
逻辑区是页面上彼此相关的一组元素，而<div>元素只是纯粹的结构，它在页面中没有任何“外观”或默认样式，也就是说，<div>元素只是一个块元素，可以对它引用你希望的任何样式。（比如对图像元素设置对齐样式）
不能滥用<div>元素，使用<div>元素一定要有助于你将页面分解为逻辑区，从而保证结构清晰并便于指定样式，相反的，就只会使得页面变得更复杂，而没有实际的好处。