发表于： 2018-11-27 23:06:52

今天完成的事情：

1.修改学员展示一栏的bug，因为切图的时候不规范导致图片整体的长度不一致，在第三排变换的时候卡主了使其不能左浮动导致整体的布局崩溃，后重新切图并且统一了图片的大小后后就恢复了布局，这地方的代码可以把重复的单独设置一个类目进行添加，精简代码量

2.如何学习一栏的修改，在开始制作时部分用于margin来确定位置，部分的使用padding来定位，导致在媒体查询变化的时候布局崩溃，后面就删掉margin的值统一用padding来设置就可以在变换的时候不会变形了，尽量统一标准来调整元素的位置，这样可以避免布局崩溃，尽量使用padding来调整。

css中margin和padding的使用

01、设置属性方法

margin和padding都是用来隔开元素，margin用于布局元素使元素与元素互不相干，padding是用于元素与内容之间的间隔。元素四边可以设置的属性：margin-top,margin-right,margin-bottom,margin-left,padding-top,padding-right,padding-bottom和padding-left。还可以按照上、右、下、左的顺序分别设置各边的边距，各边均可以使用不同的单位或百分比值：比如p{padding:10px 0.25em 2ex 20%}.

02、什么时候用margin，什么时候用padding

margin和padding在许多地方往往达到的效果都是一模一样的，所以有时我们会迷惑margin和padding应当什么时候用哪个比较好。

何时应当使用margin：

（1）需要在border外侧添加空白时，

（2）空白处不需要有背景（色）时，

（3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白（注意地方见第三点）。

何时应当使用padding

（1）需要在border内侧添加空白时（往往是文字与边框距离的设置），

（2）空白处需要背景（色）时，

（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

03、margin使用时应该注意的地方

margin在垂直方向上相邻的值相同时会发生叠加，水平方向上相邻的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠。但是，此时一个为正值，一个为负值，并不是取其中较大的值，而是用正边界减去负边界的绝对值，也就是说，把正的边界值和负的边界值相加