margin百分比,重叠和auto
一. margin百分比
1. 普通元素的百分比margin都是相对于容器的宽度计算
2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算
这是在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下,
若书写模式变成纵向的时候,其参照将会变成包含块的高度。
二. margin重叠
1. 通常特性
block水平元素(不包括float和absolute元素)
不考虑writing-mode,只发生在垂直方向(margin-top/margin-bottom)
2. 重叠的3种情境
A.相邻的兄弟元素
B. 父级和第一个/最后一个子元素
子元素的margin-top相当于父元素的margin-top
a.margin-top重叠
父元素非块状格式化上下文元素
父元素没有border-top设置
父元素没有padding-top值
父元素和第一个子元素之间没有inline元素分隔
b.margin-bottom重叠
父元素非块状格式化上下文设置
父元素没有border-bottom设置
父元素没有padding-bottom值
父元素和第一个子元素之间没有inline元素分隔
父元素没有height,min-height,max-height
C.空的block元素
元素没有border设置
元素没有padding值
里面没有inline元素
没有height或者min-height
3. 计算规则
正正取大值
正负值相加
负负最负值
4. margin重叠的解决方法
4.1 相邻兄弟元素的重叠
最简单的方法是,使用同方向的margin,即A盒子margin-bottom: 50px,B盒子margin-top: 100px,直接用B盒子margin:150px就行了,不用使用两个方向的margin。
4.2 父子元素的重叠
4.2.1 给父元素添加一个before伪元素,.father:bofore{content:' ';display:table;},content中有个空格
4.2.2 将父元素做成BFC,例如overflow:hidden
4.2.3 对父元素使用padding-top,不使用margin
4.2.4 将父元素定位,例如,position:fixed
三. margin auto
margin的值为auto,是自动占据包含块的剩余空间,例如
<div id="demo">
<p>恩,我就是那个p。</p>
</div>
#demo{
width: 500px;
}
#demo p{
width: 100px;
margin-left: auto;
}
则p的实际margin-left为500-100=400px,p元素右对齐
当margin-left和margin-right同为auto时,左右平分剩余空间,元素居中
参考:https://segmentfault.com/a/1190000006212076
http://www.ituring.com.cn/article/64580
http://www.ituring.com.cn/article/64581
https://blog.csdn.net/shi_1204/article/details/80180224
https://tech.youzan.com/css-margin-collapse/
margin百分比,重叠和auto的更多相关文章
- 须知的css——margin不重叠的情形
margin重叠 摘自css2.1规范中文版 CSS中,两个或者多个盒(可能但不一定是兄弟)的相邻的margin会被结合成一个margin.Margin按这种方式结合叫重叠(collapse),产生的 ...
- margin的重叠现象
当两个相邻的普通元素设置margin时,则它们的间距并不是简单的外边距相加. <!DOCTYPE html> <html lang="en"> <he ...
- 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)
前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...
- H5移动前端完美布局之-margin百分比的使用
一 ,背景 在移动端页面开发我们经常会遇到一件尴尬的事 我们所开发出来的页面跟设计师所给的页面差别很大 再加上移动设备屏幕的大小不一出来的效果更是参差不齐 然后.... 当然 现实情况没有这么糟糕.. ...
- margin系列之keyword auto
本系列摘自 px; margin: auto; /* 或者 margin: 0 auto; */ } HTML: <div id="demo"> <p>恩 ...
- margin纵向重叠
速记: 如p的纵向 margin 是 16px,那么两个之间纵向的距离是多少?-- 按常理来说应该是 16 + 16 = 32px,但是答案仍然是 16px. 因为纵向的 margin 是会重叠的,如 ...
- margin 百分比是按參照物来计算滴 不知道吧?
<style> #demo{ margin: 0 auto; width: 1000px; height: 500px; background: #eee; overflow: hidde ...
- margin百分比的相对值--宽度!
假设一个块级包含容器,宽1000px,高600px,块级子元素定义 margin:10% 5%; 那么 margin的 top, right, bottom, left 计算值最终是多少px? 不是1 ...
- css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
随机推荐
- 在 publicId 和 systemId 之间需要有空格。
spring applicationContext_datasource.xml中约束错误 org.springframework.beans.factory.xml.XmlBeanDefiniti ...
- Redis 4.0 从节点写入不同步问题
redis4.0出现了很多新的特性,删除键值unlink,slowlog记录来源ip.内存统计信息等.其中一个重要的同步祭祀是Psync2.psync2主要让redis在从实例重启和主实例故障切换场景 ...
- PHP时间日期操作增减(date strtotime) 加一天 加一月
date_default_timezone_set('PRC'); //默认时区 //当前的时间增加5天 $date1 = "2014-11-11"; echo date('Y-m ...
- Python学习之高级特性
切片 在Python基础篇里,我们知道Python的可序列对象可以通过索引号(下标)来引用对象元素,索引号可以由0开始从左向右依次获取,可以从-1开始由右向左获取.这种方法可以帮助我们依次获取我们想要 ...
- GCJ:2008 Round1AA-Minimum Scalar Product(有序数组倒序乘积和最小)
题目链接:https://code.google.com/codejam/contest/32016/dashboard#s=p0 Minimum Scalar Product This contes ...
- POJ:3276-Face The Right Way(线性反转)
Face The Right Way Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 6259 Accepted: 2898 De ...
- 17-比赛1 C - Binary Nim (栈的游戏)
题目描述 Tweedle-Dee 和 Tweedle-Dum 正在进行一场激烈的二进制 Nim 游戏.这是你没有玩过的船新版本,游戏包含 N 个栈,每个栈只包含 0 和 1 的元素.就像一般的 Nim ...
- perl语言入门总结-第2章
$what ='steak'; print "fred ate $n ${what}s.\n"; 布尔值 如果是数字0为假, 如果是空字符串''为假, 如果即不是数字也不是字符串, ...
- Weblogic Linux jar包安装
环境/工具: 系统:CentOS 7 JDK:Oracle JDK fmw_12.2.1.2.0_wls.jar 0x01.新建普通用户weblogic 在Linux环境下建议使用普通用户安装,web ...
- sourceInsight *** more bytes are required
现象:用sourceinsight修改的文件无法保存,提示 No enough space to save "XXX", xxx more bytes are required. ...