今天完成的事情

完成了任务十三的第三个页面，如下图

今天遇到的问题

问题1：如下图，下图中盒子定义高度为82px，但是使用padding属性后，发现padding属性变成了类似margin属性的作用，增加了盒子的高度，使其变成了105.8px

解 决：自己先是不停的改，但是怎么改都没解决，最后还是请教师兄才解决的，解决方法是添加box-sizing：border-box；属性，后来又发现其他的盒子在使用padding后都会出现同样情况，最终在*中添加了这个属性从而应用于全局，在之前从来没有遇到过这个问题，因为一般这个属性是默认自带的，今天应该是我不小心触发了某些机关才导致其失效的。

今天的收获

box-sizing

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现:

 >>>  content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中

 >>>  border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高

注意： border-box不包含margin

语法：

css重置样式表

关于css样式重置 ，相信对于接触过前端的人都知道在开始编写属于自己的代码之前都需要完成这一步。不过，我还是想说说自己对css重置的理解。希望可以利人利己（哈哈，对，就素介么任性！）

首先，我觉得像我一样对于理解概念无感，容易混淆的前端小白要清楚什么是css重置样式，就要弄清楚两个概念：CSS Reset以及css重置（其实概念很相近，但是还是有所区别的），不然傻傻只知道css样式要重置，知其然不知其所以然，这对于我这种对概念有点强迫症的人来说，不搞清楚实在是太痛苦了。（哈哈哈，闲话少说，进入正题）

就我自己的理解而言，对于css重置样式表可以分为下面3个问题：

（1）什么是CSS Reset ？要用到CSS Reset的原因是？

（2）为什么要重置CSS？

好啦，问题抛出了，我也该说说我自己的理解了：（1）CSS Reset简单来讲就是根据我们自己编写页面的需求重新设置css属性（废话，这个当然大家都知道！可是我重点想说的是css reset的原因耶~）css reset主要是因为html标签在浏览器中都有各自的默认样式，比如： p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE 下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻 烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简 单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

（2）涉及到为什么要重置css，这点要从浏览器出发，因为不同的浏览器对于html标签的解释各不相同，重置css可以使得html标签在各个浏览器下产生相同的表现效果。

明天的计划

1.开始任务十四