这个练习的目标是了解掌握基本的布局方法
涉及以下知识点
CSS Reset
html 标签的默认样式需要重置。
一方面受历史因素影响，有的标签默认值不统一、不合理。 另一方面重置也能减轻记忆负担。相关的库
对于一个团队，一般会维护自己的 reset.css入门的时候当然怎么简单怎么来
* { padding: 0; margin: 0; box-sizing: border-box;}复制代码 关于 box-sizing 是否需要被统一重置是有一定争议的，我们先搁置争议求发展
box-sizing
作为写过 Android/Qt/Wxpython 的程序员，对于 html 的宽度高度一直掌握不了，总之就是达不到期待的效果。
其实在默认情况中，高度指的是内容高度（不包括 padding border margin） 设置box-sizing: border-box 后，宽度高度的设置包含了 padding 和 border，不包括 margin block, inline
这里也是和 Qt 等差异很大的一部分
block 就是我们常说的块元素，一个占一整行 inline 是行内元素，只是恰好包裹住内容 关键是很多属性对于 block 和 inline 不通用 比如你可以对行内元素设置 margin-top 和 margin-bottom 试试，无效 常用来控制行内元素空间位置的有以下几个属性- 行高
line-height - 字体大小
font-size - 父元素（注意要有宽度）的
text-align有时行内元素中的元素需要是块元素，就用 inline-block
position
这个很常用
一般的教程会给出大概有几个值：- static，默认值，无定位。会忽略 left，right，top，bottom，z-index 等属性。
- absolute，绝对定位，相对于第一个非 static 的父元素进行定位。
- relative，相对于正常位置进行定位。
- fixed，相对于浏览器窗口进行定位。
但是很少给出常用的模式：
- 最常见的是 relative + absolute 配合使用。父元素声明为 relative，子元素用 absolute 指定位置
- fixed 用于固定在浏览器中某个位置。
- 单独使用 relative。多出现在 relative 足够用或者需要使用 z-index 的情况。
::before, ::after
伪元素，用于在元素之前/之后插入新的元素
有 content 属性，用于指定元素的值 也经常和伪类一起使用，比如 :hover，就是特定行为时的元素选择器 注意使用时一般至少有 content 和 display 两个属性.content::before { content: ""; display: block; width: 10px; height: 10px; color: green;}复制代码 em，rem，px，vw，vh，vmin，vmax
em 是相对字体大小，比如字体默认是 16px，1em 就是 16px，可以用来控制内容每行字符数
它的值是多层继承嵌套的 比如当前行的字体大小设置为了 20px，那么 1em 就是 20px rem 是指相对 html font size 的 px 大小的相对值，更容易把控 rem 的兼容性是 ie8+，可以用 Xpx，Yrem 的写法兼容不支持 rem 的浏览器 1 vw 是 1% 的宽度，1 vh 是 1% 的高度，更适合用于布局 vmin = min(vw, vh)，vmax = max(vw, vh)，对于可能横向的移动端是很有价值的 移动端切换到 PC 端的场景可能 rem 就更合适 移动端开发弹性布局首选就是 vw
float
浮动元素，可以实现右对齐等效果
使用时记得在父元素中设置overflow: hidden;复制代码
基本就没有问题了
flex
其实在前端中做垂直居中并不容易
有 flex 布局之后就简单多了flex 布局中有主轴、交叉轴的概念，其中主轴是子元素的排列方向，交叉轴是另一个轴 flow-direction 决定主轴方向：row、row-reverse、column、column-reverse
所以定义分布的属性不是以水平、垂直的名字定义的 justify-content 规定了主轴上的排列方式：flex-start、flex-end、center、stretch（各列之间用空格间隔开）、space-around（边上也用空格包起来） align-items 规定了交叉轴上的排列方式：flex-start、flex-end、center、stretch（强制拉伸至充满空间）、baseline（首行文本基线一致） align-self 可以局部覆盖 algin-items 属性 flex-grow 元素的放大空间，默认为 0，不放大 flex-shrink 元素的缩小空间，默认为 1，同等缩小。0 是不缩小