今天完成的事情：

1.来到了上海分院线下。

2.在师兄的帮助下简单配置了环境。

3.尝试使用常用的标签，例如<p>,<div>,<span>,<hr>。

4.了解了盒子模型：内边距，外边距，内容，边框。假设有一双鞋放在鞋盒里，内容是鞋子，鞋子到鞋盒的距离是内边距，鞋盒即边框，外边距是鞋盒之外的留白。且css盒子具有弹性。

5.浏览了浮动float。

6.大致理解任务目标：页面尺寸改变时，小方块可以自适应改变大小，保持3*3的阵型不浮动到其他位置。并且可以适配不同移动设备。

明天计划的事情：

1.搞明白float的作用和用法。

2.着手开始写任务1。
遇到的问题：

1.尝试写标签的时候出现很多格式错误。以及需要注意分号的中英文输入等等格式问题。

2.浏览标签用了太多时间，应该多用些时间去敲代码试错。
收获：

1.html用来定义语义，css用来表现。例如html描述这是一根笔，css负责确定笔的尺寸颜色等等。

2.通过link使html和css搭配工作。

3.css由选择器和声明构成，声明包括属性和值，属性必须有值。

4.我们常用div+css模式。div负责布局结构分块，css负责样式。

5.div标签是一个容器级的标签，div里所有元素是一个小区域，因此选择用它实现九宫格。

6.css具有优先级和权重。分别有行内样式，id选择器，class选择器，元素选择器。

内联样式  > id选择器样式 > 类选择器样式 > 元素选择器样式；

!important 表示强制应用该样式，例如：button{ width: 150px !important;}，与以上的选择器相遇时，强制使用此样式；但是应该避免使用这种方式。

7.盒子模型中，总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距。

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距。

顺带一提，行内元素只能设置左右边距。高度应用line-height实现。

8.分组选择器可以减少代码。

嵌套选择器适用于选择器内部的选择器的样式。

• p{ }: 为所有 p 元素指定一个样式。
• .marked{ }: 为所有 class="marked" 的元素指定一个样式。
• .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
• p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

9.块元素相当于前后有两个换行符，所以会单独占一行。内联元素只需要必要的宽度，不强制换行。

可以通过display改变元素显示。bolck（块元素默认）inline（内联元素默认）。

10.使用float使元素向左向右移动，可以改变元素的排列。

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。