今天完成的事：天任务五整体布局完成的差不多了，还有页尾和一些细节没有弄好。

任务名称：css-task-03

成果链接：https://1239937890.github.io/mywork/task3/HTML/taskthree.html

任务耗时：2018.10.19-2018.10.21

官方脑图：

自己脑图：

任务3总结：

PS 切图 导图 测量  建议下个蓝湖，很好用，一部到位；

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

rem是新增的一个相对单位，这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

浮动。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止 ，浮动元素之后的元素将围绕它。

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距；总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

只要把基础打好了，多去考虑为什么？弄明白了就都能解决了。