百度前端技术学院 零基础学院 Day5
第五天和第六天 三种简历
课程目标
通过阅读及一个小型练习，掌握 CSS 盒模型及通过Float进行简单的布局
课程描述
阅读
今天我们要学习非常重要的一些知识，这些知识会伴随着你的前端生涯.
首先我们先学习一下盒模型的概念
接下来我们了解一下浮动
编码
今天的任务，我们将不在codepen上来实现，打开你电脑本地的代码编辑器（如VSCode，Sublime或者其它），创建一个项目目录，在目录下创建一个resume.html，再创建一个css目录，在css目录下创建一个style_1.css文件。
然后基于上面的阅读学习，实现如下设计稿的一份简历页面，HTML内容写在resume.html中，样式写在style_1.css中。
实现过程中，请注意：
- 实现时必须保证布局的一致
- 字体、宽高、边距等不需要完全一致
阅读
在进行今天的第二个练习时，我们希望你首先阅读一些来自企业的HTML及CSS规范，比如下方的百度规范，你也可以自行搜索其他公司的编码规范
然后学习规范后，我们继续下一个编码任务
编码
依然还是使用resume.html，在css目录下创建style_2.css，然后在resume.html的CSS文件引用改为style_2.css。
参照下方设计稿进行页面实现。HTML代码请在上一个任务的基础上，根据样式需要进行调整。并在style_2.css中写入新样式。
编码
最后一个任务，我们把这个挑战极端一些。在css目录中创建style_3.css。把resume.html中引用的css改为style_3.css。
参照下方设计稿进行页面实现。HTML代码请在上一个任务的基础上，根据样式需要进行调整。并在style_3.css中写入新样式
编码
接下来，请你把resume.html中引用的css文件从style_3.css改回style_1.css或者style_2.css，看一下样式是否还健在？
如果没有，请对HTML或CSS代码进行相应调整，保证，无论是用 style_1.css 还是 style_2.css 或是 style_3.css，都可以保证页面按照设计稿的要求呈现。也就是说同一份HTML，可以在改变CSS代码的情况下，实现不同样式，达到HTML结构内容和CSS样式的解耦。
提交
把你的代码提交到 Github，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在Github中预览你的HTML代码，并提交预览地址。
验证
这两天的内容稍多，请反复确认你是否掌握了以下概念
1、盒模型的概念。
CSS盒模型是网页布局的基础 ——每个元素被表示为一个矩形的方框，框的内容（content box）（width height）、内边距（padding）、边界（border）、外边距（margin）默认情况下，是这样的。
width 和 height
设置内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框。padding
表示一个 CSS 框的内边距。该层的大小可以通过简写属性padding 一次设置所有四个边，或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边。border
CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。margin
外边距（margin）代表 CSS 框周围的外部区域，称为外边距，它在布局中推开其它 CSS 框。其表现与 padding 很相似；简写属性为 margin，单个属性分别为 margin-top、margin-right、margin-bottom 和 margin-left。
2、inline、block和inline-block的概念。
1.display:inline
行内框（ inline box）与块框是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。
2.display:block
块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框 （ block box）
3.display:inline-block
行内块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。（在下面的示例中，行内块状框会放在第二行文本上，因为第一行没有足够的空间，并且不会突破两行。然而，如果没有足够的空间，行内框会在多条线上断裂，而它会失去一个框的形状。）
3、内外边距，宽度，高度，box-sizing等属性。
| 属性 | 描述 | 值 |
|---|---|---|
| 内边距（padding） | 设置一个元素的内容与其边界之间的空间。 | padding-top、padding-right、padding-bottom、padding-left。不允许使用负值。 |
| 外边距 （margin ） | 设置所有外边距属性。 | margin-top、margin-right、margin-bottom、margin-left。允许使用负值。 |
| 宽度 （width） | 指定了元素内容区的宽度。 | anto、length、%、max-content、min-content |
| 高度 （height） | 指定了一个元素的高度。默认情况下，这个属性决定的是content area的高度，但是，如果将 box-sizing 设置为 border-box , 这个属性决定的将是边框区域（border area）的高度。 | anto、 length、%、 |
| box-sizing | 用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。 | 默认值content-box |
4、浮动，清除浮动。
浮动（float）： 用float属性指定一个元素沿着容器的左边或右边放置，允许文本和内联元素环绕它。当初是为了排版美观而产生，并且它不是真正意义上的脱离文档流（你可以理解为脱离了半层）。
清除浮动 ： 因为当容器的高度自动（auto），且容器的内容有浮动元素，这种情况下容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
5、如何使用浮动进行布局。
| 方法 | 优点 | 缺点 |
|---|---|---|
| 1、添加额外标签 | 通俗易懂，容易掌握。 | 添加多少无意义的空标签，有违结构与表现的分离 |
| 2、使用 br标签和其自身的 html属性 | 比空标签方式语义稍强，代码量较少。 | 同样有违结构与表现的分离，不推荐使用。 |
| 3、父元素设置 overflow：hidden | 不存在结构和语义化问题，代码量极少 | 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素 |
| 4、父元素设置 overflow：auto 属性 | 不存在结构和语义化问题，代码量极少 | 多个嵌套后，firefox某些情况会造成内容全选 |
| 5、父元素也设置浮动 | 不存在结构和语义化问题，代码量极少 | 使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body |
| 6、父元素设置display:table | 结构语义化完全正确，代码量极少 | 盒模型属性已经改变，由此造成的一系列问题，得不偿失 |
| 7、使用:after 伪元素 | 结构和语义化完全正确,代码量居中。 | 复用方式不当会造成代码量增加 |
综合以上列举的方法，无非有两类：
其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动。
综上所述： 在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
在不支持 BFC的浏览器 （IE6-7），通过触发 hasLayout 闭合浮动。