CSS深入理解之margin
2016-12-16 09:38 紫日残月 阅读(336) 评论(0) 编辑 收藏 举报
前言
改变容器尺寸
margin改变容器尺寸有以下两个限制条件:
-
使用于没有设置宽高的普通block元素
float/absolute/fixed元素 以及 inlines水平 table-cell元素. -
只试用于水平方向
margin百分比
1.普通元素的百分比margin值是相对于容器宽度计算的
2.绝对定位元素的百分比margin值是相对于第一个定位祖先元素的宽度计算
也就是说margin的宽度都是相对于其祖先元素计算的.
margin重叠
1.block水平元素(不包括float和absolute)
2.只发生在垂直方向(如果修改了writting-mode)
父子元素margin重叠条件
-
父元素非块状格式化上下文元素
-
父元素没有border值;
-
父元素没有padding值;
-
父元素与第一个子元素之间没有inline父元素分隔
-
父元素没有高度限制
我们可以通过设置;(添加overflow:hidden).设置border/padding/添加一个inline元素/添加高度等方法来解决margin重叠的问题;
margin重叠的规则,简而言之就是取两个值的和
margin auto属性
有时候,就算没有给元素设置宽高,他也会自动填满容器,那么如果我们设置宽高以及margin:auto后,就可以有自动margin填充了
图片是默认inlie的,所以不会自动居中,需要修改它的block值;
垂直居中 绝对定位元素在拉伸的情况下,设置一个宽高度,然后margin :auto,那么就可以实现自动居中了,也就是时候margin填充了拉伸后这只宽高留下的空白.
margin 无效的情形
1.inline水平元素垂直margin无效
2.display:table-cell/table-row等声明的margin无效