简介
IFE 2018 05-06天的编程作业
一份 HTML 文档，用三份 CSS 进行修饰
效果如图：
过程
HTML 文档（resume.html）
先按照第一份简历大体编写了 HTML 文档，然后综合思考了一下怎么样让三份简历都好实现进行了细微修改
问题：比较头痛的地方是，不知道”姓名“、”性别“等小字要使用什么标签，为了语义化一开始用的 h3；
改动1：在写 style_1.css 时，将 h3 改成了 span，最后将 span 嵌套在 p 元素中；
改动2：在写 style_3.css 时，将“基本信息”等 h2 标签放在 section 外部，然后用 div 标签将 h2 标签和各自的 section 嵌套
CSS 文档1（style_1.css）
问题1：一开始因为行内元素和块元素弄混淆了，换行问题一直没解决，写代码的时候才发现 display:inline-block 学习不够，然后又回顾了一遍
解决1：将三个 p 元素应用该语句，然后才将三者放在同一行，剩下的为了换行，将后三个的 span 改为块元素
问题2：间距不一致，前两个 section 和后三个 section 间距不一致
解决2：想起来居中用的 margin: 0 auto; 然后左右间距就自动均分了，所以就将前两个 section 的上下外边距使用了auto
CSS 文档2（style_2.css）
问题1：主体部分套用文档1的，h1标题用了 float，结果宽度和高度无法填充满，背景色只包裹在文章内容
解决1：看了别人笔记没看懂，上网搜的，然后使用了 内边距，才想起来盒模型原来是这么用的，能被着色的地方是box内部，包括内容和内边距，所以通过设置内边距填充内容
问题2：padding-bottom 设置了 100%，然后就变得很长。
解决2：也是上网搜，然后发现，在其父元素上使用 overflow:hidden，就可以将超出父元素部分的背景色隐藏，这里不展开，直接搜索 overflow，在菜鸟教程里看样例和说明就可以理解的很明白
问题3：分两栏效果
解决3：看到网上的，在要分的第二栏，使用 overflow:hidden
好像是，浮动元素后的元素不等高（父元素高度塌陷），所以父元素用
overflow:hidden就让父元素的两个子元素等高了。但是虽然等高了，其实两者有重叠的地方（没浮动围绕着浮动的，即没浮动的给浮动的留白了一部分，这就是重叠的地方），所以没浮动的再用
overflow:hidden，这样两者就不重叠了！！！吐槽一句666
至于为什么这条语句可以实现等高，去重叠，这和CSS的规则有关，此处和BFC（block formatting context）块级格式化上下文有关，详情可自行了解
问题4：最上和最左被留白了
解决4：父元素 body 的外边距为0
CSS 文档3（style_3.css）
问题1：上下分五行，分不了
解决1：看了那个笔记，得到了启发；有点像百度贴吧，一层楼就是一行，用一个div包裹，内部和文档2一致，分两栏。更改了 HTML 文档，增加了5个 div（为什么不用 section，用过了，然后没想起来别的更好的语义。此处可修改）
代码
HTML 文档（resume.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style_3.css">
<title>Resume</title>
</head>
<body>
<h1>简历</h1>
<main>
<div>
<h2>基本信息
最低0.47元/天 解锁文章
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
