css外边距重叠及避免方法
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div {
width: 200px;
height: 200px;
}
.div1 {
margin: 50px;
background: red;
}
.div2 {
margin: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="div1 div"></div>
<div class="div2 div"></div>
</body>
</html>
上述代码中，div1和div2都设置了外边距，但是这两个垂直方向的外边距却会发生重叠，实际边距为大的那个盒子的外边距
避免方法：
1.给下面的盒子设置flot:left
2.给下面的盒子设置position:absolute
3.两个盒子都同时设置margin-top/bottom
css外边距重叠及避免方法的更多相关文章
- CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
- CSS外边距margin上下元素重叠
CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...
- margin属性以及垂直外边距重叠问题
盒子的margin属性 盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...
- CSS外边距叠加问题
CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它 ...
- __x__(22)0907第四天__ 垂直外边距重叠
外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...
- __x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷
<div class="box1"> <tabl></table> <div class="box2">< ...
- CSS 外边距
CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...
- margin,CSS边距重叠
CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合. 重叠结果计算规则: 两个相邻的外边距都是正数时,折叠结果是它 ...
- Css 外边距折叠(collapsed margin ) 浅析
Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more bo ...
随机推荐
- Cassandra + JSON？答案就是Stargate Documents API
JSON已经被开发者在很多场景中频繁使用,但是其实将Cassandra用于JSON或其他面向文档的用例并不容易. 为了让开发者在使用原生的JSON的同时还能享受Cassandra带来的可靠性和伸缩性, ...
- JS逆向课程笔记
扩展知识 Sources-js代码格式化
- SpringIOC的高级特性
目录 1. lazy-Init延迟加载 1.1 XML方式开启延迟加载: 1.2 注解开启延迟加载: 1.3全局配置--default-lazy-init="": 应用场景: 2. ...
- 吉他自学用Guitar Pro好不好？
很多人心中都有一个吉他梦,可苦于没有坚持下来.其实一个人自学吉他过程是非常枯燥的.经常手上被磨得都是茧,但是也不清楚自己弹的到底对不对. 如果不跟着老师练习,那很有可能就走了歪路或者是无法长期坚持.所 ...
- Ⅶ. Policy Gradient Methods
Dictum: Life is just a series of trying to make up your mind. -- T. Fuller 不同于近似价值函数并以此计算确定性的策略的基于价 ...
- leetcode 33和 leetcode81 II
//接上上一篇博客,继续这个题目,现在数组中会有重复元素,情况将会变得十分复杂,比如说1,1,1,1,1 或者1,1,3,1再来 3,3,3,1,1,1,3,这些都是可以的,都是符合题目要求的,如 ...
- Jmeter(二十八) - 从入门到精通 - Jmeter Http协议录制脚本工具-Badboy1（详解教程）
1.简介 在使用jmeter自动录制脚本时会产生很多无用的请求,所以推荐使用badboy录制脚本之后保存为jmx文件,在jmeter中打开使用.因此宏哥在这里介绍一下Badboy这款工具,本来打算不做 ...
- 记 · ElemetnUI + Vue v-if 视图切换踩过的那些坑
使用EleUI 做一个用户登录窗口,需要用v-if 动态切换三个表单:手机登录.账密登录和密码找回.其中需要实现一个重置表单的功能,但其间出了一些小bug.密码找回表单中有三个表单项,手机登录和账密登 ...
- kafka入门之broker--日志存储设计
kafaka并不是直接将原省消息写入日志文件的,相反,它会将消息和一些必要的元数据信息大宝在一起封装成一个record写入日志.其实就是我们之前介绍的batch 具体对每个日志而言,kafka又将其进 ...
- 本人的CSDN博客
本人的CSDN博客链接: 传送门