这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天。
盒子
块级盒子（Block box）和 内联盒子（Inline box）
CSS 中广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面会表现出不同的行为：
块级（block）盒子：
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽。
- 一行只能放一个盒子。
width和height属性可以使用。- 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”。
内联（inline）盒子： - 一行可以放多个盒子。
width和height属性将不起作用。- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
inline状态的盒子推开。 - 水平方向的内边距、外边距以及边框会被应用且会把其他处于
inline状态的盒子推开。
<a><span><em><strong>都是默认处于inline状态的。
CSS 块级盒子组成部分： - Content box: 这个区域是用来显示内容，大小可以通过设置
width和height - Padding box: 包围在内容区域外部的空白区域；大小通过
padding相关属性设置。 - Border box: 边框盒包裹内容和内边距。大小通过
border相关属性设置。 - Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过
margin相关属性设置。
最终元素的总宽度计算公式：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
个人学习总结：巩固了HTML基础知识，加强了记忆。
