margin的特性及Bug分析

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/c__dreamer/article/details/82499028

margin是盒子模型中的外边距,在很多地方都会用到这个属性。对于margin相关的东西做了一些总结

目录

特性总结

margin的auto值的应用

margin的Bug分析

特性总结

1.不属于盒子的组成部分,不会影响盒子的尺寸设置。

2.在元素周围生成额外的空白区,这个空白区永远都是透明的。

3.主要用于控制盒子与盒子之间的间距,以及盒子在页面中的占位。

4.对inline元素,垂直margin无效(受到行间限制)

5.对table类显示模式的内部元素无效(受到外围元素限制)

      如:tr、td元素,display为table-cell或者table-row

6.元素默认margin值为0,但部分元素默认带有一定得margin

     默认有margin的元素如:body、标题标签、p、dl,大多数以呈现内容相关的标签(块状标签)会有默认的margin

7.可以设置数值,也可以设置为百分比,允许负值。

     值为百分比的时候,无论是宽度还是高度,都以父级对象的width为参考基准(基于高度自适应的特性)

margin的auto值的应用

所谓占位空间:black元素默认独占一行特性说明其存在就带有默认的占位空间,这个空间默认为水平方向。

auto的原理:让浏览器自动分配占位空间的剩余空间。

auto值的应用

1.固定宽度的1列自适应居中布局:margin:0 auto  实现水平居中

.box1{
	margin:0 auto;
}

2.模块水平方向右侧定位:margin-left左侧auto自动判断,margin-right右侧定位值

.box2{
	margin-right:20px;
	margin-left:auto;
}

3.水平垂直居中模块:position定位(top、left、right、bottom四值为0创建占位剩余空间,利用margin:auto来分配剩余空间)。

.box3{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

margin的Bug分析

垂直方向的margin合并Bug

当垂直方向的两个盒子,上面盒子有下外边距,下面盒子有上外边距,就会发生margin合并现象。

垂直margin的合并原理:当两个垂直margin相遇时,它们将合并成1个margin,合并后的margin值高度等于发生合并的margin中的较大值。

较大值:
       1.正值取大(ex:100px vs 100px---》100px)
       2.正负值取和(ex:100px vs -50px---》50px)
       3.负值取大(ex:-100px vs -50px---》 -100px)
应用范围:
    1.使用于默认文档流中的元素(浮动及定位元素除外)。
    2.不仅使用于2个同级元素,也适用于嵌套元素及元素自身。
margin重叠合并-嵌套元素解决方法:
       1.能用padding就不用margin
       2.使用border或padding隔开
margin重叠合并-元素自身解决方法
       1.没事别这么玩。
       2.不让容器空或者加隔断内容。

另外,margin合并的bug可以给元素加上BFC模式就可以解决,主要还是看自己需求。

主页传送门

展开阅读全文

没有更多推荐了,返回首页