今天完成的事：

  对师兄的提问进行深度思考

       1，为什么这里用了padding-top而没有用height，30%是相对于谁的30%  

padding 简写属性在一个声明中设置所有内边距属性。

height检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。 也就是文本的行距。文本通常是一行或多行组成的，表示各行之间的距离.

因为没有文本所以用padding内边距填充。

padding-top30%是相对于父元素width的30%

         2，背景颜色填充是填充的哪几个部分，margin能填充吗？

 border定义：

1 元素的边框 (border) 是围绕元素 内容（width+height） 和 内边距（padding）的一条或多条线。 

2 边框与背景 

CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。 

CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

背景颜色填充在边框区、内边距、内容这几个部分，百度了背景颜色能否填充margin有人说可以在外面套个div，把子盒子的margin值改为大盒子的padding值，大盒子背景颜色给你想要给margin设置的颜色，子盒子给子盒子的背景颜色

    3，外边距的单位除了用vw还能用什么单位？

相对长度单位中vh和vmax不能用，其他的换上去都可以，因要达到自适应，相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

用绝对定位不能实现自适应

em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；

ex 依赖于英文字母小 x 的高度

ch 数字 0 的宽度

rem 根元素（html）的 font-size

vw viewpoint width，视窗宽度，1vw=视窗宽度的1%

vh viewpoint height，视窗高度，1vh=视窗高度的1%

vmin vw和vh中较小的那个。

vmax vw和vh中较大的那个。

%

我把div标签换成了p标签在谷歌浏览器里调试并没出现问题可以自适应，但我想师兄提出来肯定是它们使用上有本质差别的，在网上找到一段资料让我理解了它们的区别。

原文链接：http://stackoverflow.com/questions/2226562/what-is-the-difference-between-p-and-div

   它们有语义差异-<div>元素被设计用来描述数据容器，而<p>元素被设计用来描述一段内容。语义决定了一切的不同。HTML是一种标记语言，这意味着它旨在以一种对标记使用者有意义的方式“标记”内容。大多数开发人员认为，文档的语义是浏览器应用于这些元素的默认样式和呈现，但事实并非如此。选择标记内容的元素应该描述内容。不要根据你的文档的外观来标记它-根据它是什么来标记它。如果您只需要一个泛型容器来进行布局，那么就使用<div>。如果您需要一个元素来描述一段内容，那么请使用<p>。注意：重要的是要理解<div>和<p>都是块级元素，这意味着大多数浏览器将以类似的方式对待它们。

明天计划：

  配置nginx和上传任务