盒子模型都知道,但是具体margin和padding都是可以撑开(表面上)与父亲节点或者兄弟节点的距离,用来页面布局。没什么区别,但是有时候就是会遇到一些奇奇怪怪的样式布局bug,导致改样式,实在觉得有点晕头转向,感觉总是搞不清楚。归根结底还是这两者在用法上的区别没有搞很明白,这两者常见的bug场景总结如下:
margin
margin : 0 auto;
只对块级元素起作用。(diaplay:block;
行内和行内块都不起作用)- margin在块级元素下,上下左右可随意设定,且块级元素的margin的参照基准是前一个元素即相对于自身之前的。(元素有margin距离,如果元素是第一个元素,则相当于父元素的margin距离)
- 上下两个盒子,上面盒子有margin-bottom:10px;下面盒子有margin-top:20px;两个盒子之间的距离并不是上下两个盒子的margin值相加,而是取两者最大值。
- 浏览器在默认状态下会对margin设置初值,所以在没有对div设置margin的情况下,div会出现一定的距离。
- margin-top经常会出现bug,尤其在IE浏览器下。在一个页面的第一个元素设置margin(父子元素之间),经常会错乱。。。使用padding属性就可以避免此问题。所以建议只在兄弟元素之间使用margin,在父子元素之间使用padding。
padding
- padding 设置负值不起作用。
- 行内元素(display:inline;)设置padding-top;padding-bottom;无效。设置padding-left;padding-right;起作用。
- 两个盒子套在一块,里面的盒子写padding-top:50px;时,两个盒子之间不会产生距离,而是给中间和盒子加高了50像素,这是就需要给外层的盒子(或者里面的盒子)加上
box-sizing:border-box;
以后遇见了其他问题会继续更新~~~