1-4. 语义化元素的优势
详见Section 14
5. 盒子无处不在
关于视觉设计的两个hint：
任何设计都可以被转化成为盒子
有各式各样的盒子去满足不同的用途
6. Web 上的框
元素的标签（tag）会使得元素在页面上占据不同的宽度，在网站开发的术语中我们说这些元素具有不同的display属性。两大主要的display属性分别为：block和inline。其余的display属性值都由两者衍生而来。
display: block; display: inline;
7. 盒子模型
<div> 代表division区块，是网页中最常见的块元素。盒模型决定了HTML元素在屏幕上的空间构成。每个盒模型都由下面四部分组成：
the box model.png
其中margin（外边框）是指该元素和其相邻元素之间的空间，是元素的外部空间；而从边框到内容之间的部分属于元素的内部空间。
* { * {
box-sizing: content-box; box-sizing: border-box;
} }
W3C的原始content-box & 微软IE的border-box.png
将属性
box-sizing设置为border-box，则内边框（padding），边框（border）都包含在元素的宽度（width）高度（height）内。
9. 更改盒
- 块元素会尽可能占据最大的宽度
- 元素总是受到其父元素在空间上的限制
- 块元素会尽可能少的占据最小高度
- 如果块元素里没有内容，它就没有高度
11. 容器
因为DOM（document object model）是树状结构，即每个元素都会被包含在另一元素内。因为这种嵌套的原因，子元素的大小会受到父元素的影响。而这种父元素可以被称为容器（container）。
13. 内联元素（Inline Elements）
内联（Inline）元素是内容决定性的，即它和它的内容一样宽。元素框的大小只与内容有关，也就是说无法设置内联元素的高度及宽度（height & width）。如果内联元素的内容大于其可用空间时，会自动换行（wrap），如下图所示。
multi line-boxs belongs to the same inline element.png
每一行都被称为一个行盒（line box），但都同属一个行内元素（inline element）。
然而，内联元素可以设置内外边框（margin & padding）。添加之后，外边框（margin）会使元素在水平方向延展，而非竖直方向。
14. 语义元素
过多使用<div>标签，会使得 HTML 文件代码冗余且可读性差。使用语义元素（semantic element）会使得代码条理更为清晰，更易读懂。
我的答案
my-answer.png
参考答案
reference_answer.png
网友评论