理解CSS外边距margin
前面的话
margin是盒模型几个属性中一个非常特殊的属性。简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性。之前的博文中已经分别详细地介绍了margin的基础知识和负margin的详细用法。本文将详细介绍外边距margin的几个重点部分,包括重叠、auto和无效情况
重叠
【前提】
margin重叠又叫margin合并,发生这种情况有两个前提
1、只发生在block元素上(不包括float、absolute、inline-block元素)
2、只发生在垂直方向上(不考虑writing-mode)
【分类】
margin重叠共包括以下3种情况
1、相邻的兄弟元素
<style>
p{
line-height: 2em;
margin:1em 0;
background-color: lightblue;
display:inline-block;
width: 100%;
}
</style>
<p>兄弟一</p>
<p>兄弟二</p>
2、父级元素和第一个或最后一个子元素,父子级的margin重叠又叫margin传递
<style>
.box{
background-color: pink;
height:30px;
}
.inner{
margin-top: 1em;
background-color: lightblue;
}
</style>
<div class="box">
<div class="inner">子级</div>
</div>
条件
相对比相邻兄弟元素margin重叠来说,父子级margin重叠需要满足以下几个条件(以margin-top重叠为例):
a、父元素不是BFC元素
b、父元素没有padding-top值
c、父元素没有border-top值
d、父元素和第一个子元素之间没有inline元素分隔
如果是父子级的margin-bottom重叠,第d条改为父元素和最后一个子元素之间没有inline元素分隔,以及还需要满足父元素没有height、min-height、max-height限制
3、空的block元素
<style>
.box{
background-color: lightgreen;
overflow: hidden;
}
.void{
margin: 1em 0;
}
</style>
</head>
<body>
<div class="box">
<div class="void"></div>
</div>
一行文字
从下面结果中,可以看出空block元素应该撑开父级margin-top+margin-bottom共2em的高度,但由于margin重叠,只有1em
同样地,空block元素发生margin重叠也需要满足一些条件
a、元素没有border值
b、元素没有padding值
c、里面没有inline元素
d、没有height或min-height
【规则】
两个正垂直外边距,浏览器取大值;如果垂直外边距都设置为负值,浏览器会选取两个外边距的绝对值的最大值;如果一个正外边距与一个负外边距合并,会从正外边距减去这个负外边距的绝对值
简单点说,就是正正取大值、正负值相加、负负最负值
【用途】
在网页布局中,因为margin重叠的原因,我们常常把margin作为一个“问题样式”而尽量少地使用它。但实际上,它是在很大的作用的
HTML文档创建的初衷只是用来展示信息的。HTML文档只使用默认样式的前提下,如果上下margin不发生重叠,则会出现以下几个问题:1、连续段落或列表之类,如果没有margin重叠,首尾项间距会和其他兄弟元素呈现1:2的关系,排版不自然;2、web中任何地方嵌套或直接放入任何裸div,都会影响原生的布局,与web设计原则相违背;3、遗落的空的任意多个p标签,会影响原来的阅读排版
所以,我们要善用重叠,可以在列表项中同时使用margin-top和margin-bottom。这样,使页面结构更具有健壮性,最后一个元素移除或位置调换,都不会破坏原生的布局
【新属性】
-webkit-margin-collapse
-webkit-margin-collapse: <collapse>(默认重叠) | <discard>(取消) | <separate>(分隔)
该属性用于设置margin是否重叠,作用于发生margin重叠的两个元素之一。如果,两个都使用该属性,一个设置为discard,一个设置为separate,则最终效果为重叠collase
auto
只有width/height和margin可以设置auto。关于auto的详细信息,已经在CSS视觉格式化中详细介绍过。下面仅介绍关于margin:auto的部分
【为什么margin:auto无法实现垂直居中】
水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的,如果给宽度设置一个固定值,而左右margin设置为auto,则可以平分剩余空间
垂直方向不可以居中是因为块级元素的高度默认是内容高度,与父级元素的高度并没有直接的关系,而上下margin设置为auto,则被重置为0
【为什么图片使用margin:auto不能水平居中】
图片无法水平居中,类似于块级元素无法垂直居中。因为图片的宽度width默认是自身宽度,与父元素的宽度没有直接关系。左右margin设置为auto,会被重置为0
所以,图片要水平居中,需要设置为display:block元素
【实现垂直居中】
使用margin:auto实现垂直居中,有以下两种方法
1、使用writing-mode:vertical-lr;
writing-mode代表页面流方向,默认是水平方向。改为垂直方向后,可实现垂直居中,但水平不居中了
2、将元素变为绝对定位元素(IE7-浏览器不支持)
将元素变为绝对定位元素后,设置top:0;bottom:0;,使绝对定位元素与定位父级的高度有了直接的联系。再设置margin:0 auto;,使margin-top和margin-bottom平分剩余空间,达到垂直居中的效果
无效情形
1、行内元素垂直margin无效
因为行内元素垂直布局主要是通过行高line-height和垂直对齐vertical-align来影响的,垂直margin并不会影响它们,所以不会影响垂直布局。而在显示方式,margin区域不会显示元素背景,所以也不会影响自身元素的显示,所以行内元素垂直margin无效
[注意]不包括inline-block或设置writing-mode为vertical-lr的情况
2、某些表格类元素margin无效
<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>
不可设置margin。对于display属性来说,display为table相关类型(不包括table-caption、table、inline-table),margin声明无效
3、绝对定位元素非定位方向的margin值看似无效
绝对定位的margin值是一直有效的,只是因为绝对定位元素是脱离文档流的,与其他元素节点没有什么关系,所以看不出效果
4、BFC造成的margin看似无效
左侧元素使用浮动,右侧元素使用overflow-hidden实现两栏自适应的布局时,右侧元素的margin-left值只有足够大,才能看到效果。这是因为margin-left是相对于父元素左侧,而不是图片右侧
5、内联特性导致的margin无效
一个div里面包着一张图片,当图片的margin-top小到一定值时,图片就不再接着向上移动了。这是因为图片是内联元素,它受制于内联元素vertical-align对齐特性的影响。默认基线对齐。以页面假想的大写X字符为例,X是不会因为图片margin-top足够小而跑到父元素外面的,所以图片移动到一定位置就不再接着向上移动了
理解CSS外边距margin的更多相关文章
- CSS外边距margin上下元素重叠
CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...
- CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
- 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)
前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...
- css外边距margin
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- W3School-CSS 外边距 (margin) 实例
CSS 外边距 (margin) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS ...
- Css 外边距折叠(collapsed margin ) 浅析
Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more bo ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- CSS外边距合并的几种情况
CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...
随机推荐
- 关于解决python线上问题的几种有效技术
工作后好久没上博客园了,虽然不是很忙,但也没学生时代闲了.今天上博客园,发现好多的文章都是年终总结,想想是不是自己也应该总结下,不过现在还没想好,等想好了再写吧.今天写写自己在工作后用到的技术干货,争 ...
- 使用 Roslyn 编译器服务
.NET Core和 .NET 4.6中 的C# 6/7 中的编译器Roslyn 一个重要的特性就是"Compiler as a Service",简单的讲,就是就是将编译器开放为 ...
- TechEmpower 13轮测试中的ASP.NET Core性能测试
应用性能直接影响到托管服务的成本,因此公司在开发应用时需要格外注意应用所使用的Web框架,初创公司尤其如此.此外,糟糕的应用性能也会影响到用户体验,甚至会因此受到相关搜索引擎的降级处罚.在选择框架时, ...
- CI Weekly #10 | 2017 DevOps 趋势预测
2016 年的最后几个工作日,我们对 flow.ci Android & iOS 项目做了一些优化与修复: iOS 镜像 cocoapods 版本更新: fir iOS上传插件时间问题修复: ...
- SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...
- bzoj1079--记忆化搜索
题目大意:有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其中第i种颜色的油漆足够涂ci个木块.所有油漆刚好足够涂满所有木块,即c1+c2+...+ck=n.相邻两个木块涂相同色显得 ...
- 面向对象相关知识点xmind
- Android Studio —— 创建Menu菜单项
大多数android程序的右上角都会设置一个菜单按钮比如微信的界面右上角的加号. 这个需要在layout同级目录下新建文件夹命名为menu,再右击新建的menu新建xml文件:
- Android的Kotlin秘方(I):OnGlobalLayoutListener
春节后,又重新“开张”.各位高手请继续支持.谢谢! 原文标题:Kotlin recipes for Android (I): OnGlobalLayoutListener 原文链接:http://an ...
- Mysql - 数据库操作
之前介绍了数据库的增删改查, 发现忘记了数据库的一些基本操作, 比如建库, 建表, 改表等等. 那这里就来小结一下数据库sql形式的基本操作. 一.库操作 1. 建库 在建库之前, 可能需要看一下, ...