距离上一篇博客,已经过去了蛮久了。之前一直在看《js高程》,感觉看了一遍,没有看懂,回来干脆花了2个月的时间把整本书敲了一遍,才感觉有些收获。我从2016.09开始的接触前端,到现在已经过去了9个月了。虽然学了这么久,但是还是没有入门。2016.9-2017.1我是一边练习打字,一边看HTML、CSS的视频和书,这期间练习的很少。过完年之后,2017.2月才开始慢慢接触JS,也是把《JS高程》《DOM的编程艺术》过了一遍,但是感觉没记住,也没怎么理解,于是2017.4月把《JS高程》敲了一遍。说实话,现在脑子里,还是听乱的。没有建立自己的知识体系。2017.5因为知乎上的一片文章,就知道了FCC,所以最近在做上面的题目,后面的编程题目,感觉要花很多时间,应该是自己编程思维弱,做的比较吃力。
一直走到现在,感觉走的很迷茫。学习方法不到位,所以走了很多弯路,浪费了一些时间。所以,希望后续进入前端的小伙伴,多和前端的前辈聊一聊,这样就会少走弯路。
好了,开始正题。
top、padding-top、margin-top的区别。
(1)padding-top、margin-top的区别:一个是内边距,一个是外边距。先来看一下边距,都用过word文档吧,页面上 打印区域之外的空白区域就是页边距,相当于CSS里的内边距padding!]
而margin则是用来定义元素周围的空间。比如上、下、左、右的空间。margin始终是透明的。不能设置背景色。我们都上过学吧,座位与座位之间的距离就是margin。如图
小总结:例如:padding-top:10px;是指容器内的内容距离容器的顶部有10个像素,是包含在容器内的;margin-top:10px;是指容器本身的顶部距离其他容器有10个像素,不包 含在容器内;
(2)margin-top和 top的区别
margin用来定义容器本身距离其他容器的距离。比如:作为1距离座位2的距离,座位1距离讲台的距离都是margin。
当我们为了表式小明同学坐在哪个位置的时候,一般会说坐在第几排的第几个吧。如果把教室看成一个长方形,左上角是坐标原点(0,0)。小明的座位是(2,2),我们就可以说小明距离教室黑板的距离top:2,距离教室的左墙壁的距离left:2。所以使用top的时候,有一种绝对定位的感觉。看图
小总结:margin-top:10px;是指容器本身的顶部距离其他容器有10个像素,不包 含在容器内;
top:10px;是指容器本身的顶部距离页面的顶端有10个像素。
写的不是特别好,希望对你们有用。2017.06.07.为高考加油!