一个新手后端需要了解的前端核心知识点之margin（二）

最近以开发自己博客网站为出发点开始决心打牢几个非常重要的前端知识点：

margin，这个在我刚刚接触编程的时候留下的困扰的东西，一开始只想着怎么快速开发自己的网站，别人的终归是别人的，想要挖墙脚，必须锄头好。知道原理才知道怎么调整啊。我看了一个博客，里面已经写得非常好了。但是自己还是得练手，还是要写点总结的东西，留下demo，留下想法

我自己是参考这位博主学习的 http://www.cnblogs.com/zhuzhenwei918/p/6124263.htm

我这边就不画图什么的，就是单纯的文字总结，是编写代码时顺带写的

参考的博客分了四个步骤（我直接写上结论）：

# 基础知识：margin是盒子模型的最外层的距离，盒子模型中border其实默认是没有宽度的，也就是0，要设置之后才占据宽度

# 同级之间：

　　（1）水平方向的外边距合并,两个水平方向的盒子相遇，那么最终两者之间的距离为左边盒子的右外边距和右边盒子的左外边距之和

　　（2）竖直方向的外边距合并,两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个

　　（3）另外一个有趣的例子就是：假设有一个元素同时设置了margin-top和margin-bottom，但是内容为空，那么这两个margin值也会叠加，值为两者最大的一个，它类似与竖直方向上两个盒子margin值的叠加。比如一个div设置了margin-top=100px和margin-bottom=50px，里面没有内容，那么上下的margin为100px

# 父子之间

　　（1）父子之间要考虑父元素的padding，子元素的margin是子元素border到父元素padding内侧的距离

　　（2）当父元素没有设置padding值以及border值时，垂直方向的margin“不起作用”,子元素上边框和父元素融为一体，子元素的margin相当于父元素的margin，我们称这个为margin穿透，有几种方式可以解决（或者说正常显示margin的情况）：

　　　　方法一：给父元素添加padding-top值。 padding-top=1px 缺点，增加1px误差

　　　　方法二：给父元素添加border值 border-top:1px solid transparent 缺点同上

　　　　方法三：给父元素添加属性overflow:hidden; overflow:hidden 基本上完美

　　　　方法四：给父元素或者子元素声明浮动float float:left 缺点，float有时候是不必要的

　　　　方法五：使父元素或子元素声明为绝对定位：position:absolute; 不使用left和top就挺ok的

　　　　方法六：给父元素添加属性 overflow:auto; positon:relative

　　（3）

# margin设置百分比（%）的情况 : 同级元素之间在竖直方向上使用margin，当值的单位为%时，它是相对于父元素的宽度

巴特西

一个新手后端需要了解的前端核心知识点之margin（二）

最新文章

热门文章