在CSS中盒模型是最重要的章节之一,在真正做web前端都会经常用到盒模型,所以初学者必须要掌握盒模型。
所有HTML元素都可以看作一个盒子,在CSS中盒模型这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,用来封装它周围的元素,包括:
内边距,外边距,边框,填充和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。看一张图片可以很好的理解盒模型。
元素内容(content)、
内边矩(padding-top、padding-right、padding-bottom、padding-left):内容到边框的距离。
边框(border-top、border-right、border-bottom、border-left):可以看成是盒子的厚度。
外边距(margin-top、margin-right、margin-bottom、margin-left):盒子与盒子或盒子与边界的距离。
其中padding和margin的赋值都有四中方式,取值是按照顺时针方向取值,情况分别是:
padding: 100px; (上下左右内边距是100px)
padding: 100px 50px;(上下内边距是100px,左右内边距都是50px)
padding: 100px 50px 120px;(上边距100px,左右边距50px,下边距120px)
padding: 100px 50px 120px 60px;(上边距100px,右边距50px,下边距120px,左边距60px)
内边距、外边距、边框的数值根据具体要求设置,如果不设置将会由默认数值代替。如果直接写一个宽度和高度时,那只是设置了内容区域