padding margin 的盒子模型 及 0 auto 为何能居中
初学css 的同学很难分清 margin 和 padding 真正所表达的意思.
很早之前我们知道 padding 表示内边距, margin 表示外边距.这个定义让人迷惑.
按照上面的盒子模型,可能理解起来更好一点.这个图里有一个盒子,就是除去最外层黄色部分.这时你独立看剩下的这个盒子,padding 表示content 距离盒子上下,左右边的距离(不包括border本身距离)
所以 padding 是指盒子内容相对盒子本身上下左右各边的距离.
当然也可以 单独通过 padding-top,padding-right,padding-bottom,padding-left 来分别制定不同方向的边框.
margin在上面这个图的表示是什么?
其实还是那个盒子(除去外层黄色部分)相对于其他盒子的距离.
margin 有一个参考值,就是另外一个盒子,如果上面的图在四周分别再加4张图,可能更好的说明 margin 的属性.
左边盒子我们称为 A , 右边盒子我们称为 B
A盒子的margin 是指A 盒子离B 盒子的距离.这个距离是透明不可见的(见上图 margin 所在的区域)
margin 相对4个方向也有4个单独的属性可以设置:
margin-top.margin-right,margin-bottom,margin-left
所以一句话总结:
padding 解决的是内部矛盾 (内容和盒子本身边距)
margin 解决的是外部矛盾 (盒子与四周其他盒子之间的距离)
经常你会看到页面最外层的div 布局会给定一个 width 或者 max-width 属性值,同时也会给定 margin: 0 auto;
这一句话的作用就是让 div 居中显示.
为什么会这样,这里一定是 margin:0 auto; 起到的作用.(你不会是以为width 决定的吧,邪恶了...)
那我们就来看看 margin 为何有这样的功能.
上面我们了解到了 margin 的作用,盒子与盒子之间的距离,这里我们说的最外面的div ,它的margin 肯定是相对于 body 的距离的.
0 auto 这种属性值如何解读.
首先我们需要了解 margin 的赋值方法:
margin: 5px 5px 5px 5px; 值当前盒子相距上下左右的盒子为5个像素.
margin:5px; 这种写法很简单,和上面的意思一样,表示当前盒子距离上下左右盒子为5个像素.
margin:0 5px; 2个属性值的赋值方法,前面表示距离上下盒子,后面表示距离左右盒子距离.
知道了上面3种命名方法,那么回头再看 margin:0 auto;
你就明白这里设置此盒子距离body 上下距离为0px ,距离body左右边距自动调整.会自动调整左右边距相等.所有达到居中效果.