【前端学习】-margin

miya

一、margin描述
【概念】盒模型中的外边距,即围绕在元素边框的空白区域,关于盒模型可以参考https://segmentfault.com/a/11...
【属性值】
上外边距 margin-top:10px
右外边距 margin-right:10px
下外边距 margin-bottom:10px
左外边距 margin-left:10px
当然,也缩写为 margin :top right bottom left(上右下左,即顺时针方向)
指定三个值 margin:10px 20px 30px;分别指定了上 10px、右 20px 、下 30px,即最后左边的间距默认是0;
指定两个值 margin:10px 20px;分别指定了上下 10px、左右20px
指定一个值 margin:10px;指定上下左右都是10px。
【属性单位】接受任何长度单位(px/em/rem等),auto,百分比。

二、利用margin:0 auto实现块级元素水平居中
图片描述

三、属性单位为%
水平方向使用%,距离为父元素宽度的百分比。如下图所示,父元素宽度是500px。子元素margin-left设置为10%,渲染之后为50px
图片描述
图片描述

垂直方向使用%,距离不是父元素高度的百分比,也是父元素宽度的百分比。如下图所示,父元素宽度是500px。子元素margin-top设置为10%,渲染之后为50px
图片描述
图片描述

四、margin折叠
1.相邻元素水平方向不合并,两个元素的距离等于两个元素的外边距之和
图片描述图片描述图片描述

2.相邻元素垂直方向
margin定义的是与其他元素的最小间距。
规则:margin都为正数,则取最大值;
margin中一正一负,则取两者之和
margin中都是负数,则取最小值
图片描述

3.父子元素垂直方向
如下图所示,子元素设置margin,紧贴父元素上边,切父元素设置了margin,则会合并,合并之后的值为两者中的大值
图片描述

4.子元素穿透父元素
如下图所示,子元素设置margin,紧贴父元素上边,则会导致穿透,看上去是父元素这是了margin-top
图片描述
解决方案:
父元素设置padding-top:1px 或者border:1px solid transparent
形成新的BFC,父元素或者子元素设置float,postion,overflow:hidden(我一般比较喜欢设置overflow:hidden)
如下图所示,设置父元素上述属性,即可避免穿透
图片描述

四、注意点

1.浮动元素及inline元素不会发生重叠,包括他的子元素。
原因:a.因为margin折叠只会发生在块级元素;浮动元素脱离了正常流,与其他元素不处于同一个流。

 b.inline-block或者浮动元素的形成了一个新的BFC,与子元素不在一个BFC所以不会重叠;

图片描述图片描述

阅读 2.3k

前端工程师

249 声望
8 粉丝
0 条评论

前端工程师

249 声望
8 粉丝
文章目录
宣传栏