一、今天完成的事情

  1.学习了盒子模型。盒子模型的本质就是一个盒子，它可以封装周围的HTML元素，主要在设计和布局时使用。

•        盒子模型主要包括：外边距（margin）、边框（border）、填充（padding）和实际内容（content）。

•             <style>

              div {

                  width: 300px;

                  border: 25px solid green;

                  padding: 25px;

                  margin: 25px             

                 }

              </style>

•         ;

•        其中width设置的只是内容区域的宽度，其实整个盒子模型的总宽度是300px+50px+50px+50px=450px。

•        对于margin、padding来说，它们的属性值有四个时，分别对应上右下左；属性值有三个时，分别对应上、左右、下；属性值有两个时，分别对应上下、左右；属性值有一个是代表四个边距都是相同的。

•  

•  2.学习了float属性，float属性定义了元素向哪个方向浮动。在float属性中，任何元素都可以浮动，浮动的元素会生成一个块级框。假如在一行之上只有有限的空间可供浮动元素，那这个元素会跳到下一行，直到这一行拥有足够的空间为止。

•   float属性有四个属性值：left，right，none（默认值，不浮动），inherit（继承父元素）。

•  

•  3.开始着手做九宫格，先是用css样式为html添加一个黄色正方形，并为正方形设置高度和宽度px。然后继续添加样式并利用float：left属性对九个黄色的正方形进行布局，用盒子模型margin和padding设置它的外边距和内边距，还有用border-radius将每个正方形的边角设置呈圆弧形。

•    学习chorme开发者工具（没读太懂），进入chorme浏览器调试，九个正方形会随着页面的大小自动排列，但是不会形成九宫格样式。经过查资料，了解到，刚开始使用的单位是px，做成九宫格样式，单位得改成百分比，百分比会满足屏幕自适应，如图

•   

  4.学习了响应式web设计--viewport，viewport指的是用户网页的可视区域，在移动端中的浏览器是把网页放到一个虚拟的“窗口”（viewport）中，这个虚拟的“窗口”比屏幕宽，这样就可以把每个网页不拥挤在一个很小的窗口中，也不会破坏针手机浏览器中页面的布局，用户可以通过平移和缩放来查看网页的不同部分。

   一个常用的针对移动网页优化过的meat viewport标签是：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

    width：控制viewport的大小，可以指定一个数值，或者是特殊值，device-width为设备的宽度（单位为缩放为%100时css的像素）。

    height：和width相对应，指viewport的高度。

    initial-scale：初始比例的缩放，也即是当页面第一次load时候的缩放比例。

    maximum-scale：允许用户缩放到的最大比例。

    minimum-scale：允许用户缩放到的最小比例。

    user-scaleable：用户是否可以手动缩放。

  对前面的html文本在头标签中加入<meta name=“viewport" content="device-width,initial-scale=1.0">标签，并在chorme上进行模拟手机访问网页。

5.参考https://www.zhihu.com/question/41430703，配置了nginx，并直接在手机上访问网页。

二、明天计划的的事情

  复习并查验下任务一的知识点，总结学到的知识，打好基础。

  有时间的话，开任务二的头，简单了解下github。

三、遇到的问题

  做出的九宫格调试出现了纵向滚动条，九宫格超出屏幕了，是边距原因？（基本满足了自适应）

四、收获

  学会了盒子模型以及float属性，初步实现了自适应，了解了viewport，以及如何让网页适配移动端页面，简单的配置了nginx，并在手机上访问了网页。（知识点见今天完成的事情）