今天完成了什么：

今天完成任务三初步布局。

今天遇到什么问题：

对盒子模型理解不够透彻，个人觉得缺少刷题，就是刷每个知识点的题，没有敲代码，光看概念很懵，任务拿出来一点思路也没有，怎么想都想不清楚。

对设计稿一不知道怎么去网页布局没有概念。这里为什么去用padding，那里要用margin，用px还是用em还是用%，是如何定义的这些不了解。

明天计划完成什么：

努力理解盒子模型，同时把任务三完成。

今天收获了什么：

一个盒子中有五个属性：

width、height、padding、border、margin。

width和height：指内容的宽度、高度（不是盒子的宽度、高度）。

padding：内边距。

border：边框。

margin：外边距。

标准盒子模型范围包括：margin、border、padding、content、并且content部分不包含其他部分。Width就是content的width。

iE盒子模型范围包括margin、border、padding、contenr。但是width不仅包含了content还包含了padding和border

在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

padding区域也有颜色，background-color将填充所有border以内的区域。

Padding有top，right、bottom、left。字面上就是顺时针上右下左理解。

如果写了四个值，则顺序为：上、右、下、左。

如果只写了三个值，则顺序为：上、右、下，左和右一样。

如果只写了两个值，比如说：

Padding：20px 10px；

指的是上下为20px，左右为10px。

另外还有padding:20px;

Padding-top:10px;

这意思指的是上为10px下右左为20px，越往下接近元素body等标签权限越大。