网页上的元素辣么多,我该用什么办法让它们排列整齐、间距合理呢。常干家务的朋友们就容易理解了,用收纳盒呀!
所以用CSS做网页布局就涉及一个盒子的概念,简单理解,我们可以把页面上的所有HTML元素看作一个个的盒子,网页上所展示出来的具体内容,如:文字、图片等都可以理解为内容,是放在盒子里面的东西。
这些装着内容的盒子排列在网页上,盒子与盒子存在着一定的间隙,我们称为外边距,
每个盒子都有边框,每条边框都可以设置自己的样式,边框与内容之间也可以存在一定的间隙,我们称为内边距。
外边距、边框、内边距按顺时针方向又都可以分为上、右、下、左四个部分,注意,这四个部分我们都是可以单独设置其样式的哟!
有图有真相,下图:
由上述可知,盒子由外到内可以列出以下四个属性:
♐外边距margin和内边距padding
外边距margin和内边距padding以边框为分界线,它们分四个方向可以分别设置四个不同的值,按顺时针方向分别是上、右、下、左,如下: