前言
对于新入手前端的小白有没有以下场景?
margin和padding的用法常常搞不清,想给元素之间加点距离,好像加padding也行,加margin也能实现,但是如果页面中元素很多的时候,每个元素的占位却和你想象的不一样,只能再一个个排查。
我们来讨论一下关于CSS盒模型和这几个属性的使用。
一、CSS盒模型是什么?
页面是由一个个元素组成的,这些元素我们也可以称为盒子。关于盒模型的定义,MDN官网的定义是这样的:
我们翻译成人话。
就是说一个块级元素(block)在页面上占位的总面积是由外边距,边框,内边距和内容组成的,这个内容我们也可以是说width和height组成的部分,因为行内元素(inline)没有宽高(width和height)所以只有盒模型的一部分。
那么这个元素在页面的占位实际是这样的:
很明显的发现,肉眼直观的看见这个元素的大小是没有外边距margin的,也就是说一个元素实际大小不包含外边距。面试如果问一个元素的实际大小,不要算外边距这一块,但是要问盒模型的大小,要计算外边距,来算道题。
二、属性应用
1.margin
margin是一个复合属性,是包含四个属性(上外边距,右外边距,下外边距,左外边距)的合并,简记"上右下左",用这个比较方便,当然你如果怕搞混,也可以分着用。
现在有一个width400px,height200px的元素在网页中我们看到的样子,
给它设置margin: 10px 20px 30px 40px;通过检查元素,实际它的占位是这样:
2.padding
padding也是复合属性,具体和margin差不多,不做过多赘述。
padding:padding-top,padding-right,padding-bottom,padding-left;
同样刚才那个元素,我们把margin设置的值改成padding,元素就变大了,因为内边距是占元素实际显示大小里面的。
3.border
border也是个复合属性,它是由边框宽度(border-width),边框样式(border-style)和边框颜色组成的(border-color),边框样式有这些可选值。
同样,刚才那个元素加一个边框,宽度10px,边框样式实线,边框颜色黑色(也可以用16进制表示颜色),设置border: 10px solid black;就是这样。
三、为什么布局总用div
这里提出一个小问题,有没有想过,为什么我们页面布局中,最常用的标签是div? p 标签不行吗?ul标签不行吗?span不行吗?
首先,span是行内元素,所以很难用它去布局整个页面。
而只有div标签是没有语义的。就是说没有原始样式。
我们把一段文字用一个p标签和ul 标签包裹,会发现ul很明显有原始样式,而p标签有自己的边距。
<p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
<ul>
<li>hhhhhhhhhhhhhhhhhhhhhhhhhhhhh</li>
</ul>
<div>hhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div>
当然你可以手动去掉这些,但是对于空白的页面来说,没有语义的元素对于布局来说会更加可控。
总结
好了,就讨论到这里,如果还有不懂的地方,可以查看MDN文档,具体属性忘记了也可以随时去上边查看。