超级小白学习日记（4.25）

如图，margin边框分别设置为10 20 20 20

按顺序，四个数字的定位从top顺时针方向行使命令。

原lsider高为650，里面两个test高均为300。由于上下分别设置了边框，那应该是top10，bottom20，为什么如图，bottom也是10？

原lsider宽为700，里面两个test宽均为300。由于lsider宽比高多50，所以左右设置的边框均为20，为什么左是20，而右却是40？

中间的十字结构为40。这个我并没有赋值。是lsider高宽的总数减test和边框后的余数。那，上面的两个问题，是否是因为先给中间赋值，再分给边框呢？

我刚刚发现，这里的margin是赋值给test的，那就是说，设置的是每个独立的test的值为10 20 20 20.

border其实是外围的边框，实际border里面的内容并不会因为加了边框就变小。依然是实际大小。

于是导致黑色的border可以实现，但是让他透明就原来的棕色就显示出来了。是因为透明的是实际内容外面的部分，而不是我想要的效果里，覆盖黑色的那一部分。

所以暂时只能用白色border实现覆盖棕色部分。

border、margin、padding的区别。

margin：定义cont与边界的距离。定义大小。

border：定义cont与margin的距离（没有margin就是与边界的距离）定义大小、形状、颜色。且每一边都可以分别定义。

padding：定义cont与border的距离。定义大小、形状、颜色

cont+三者任一，都不会导致cont发生变化，因为cont有独立的width和height。三者会导致整个画面变大。