css浮动边距加倍错误怎么办(详解CSS外边距折叠引发的问题)
类别:Web前端 浏览量:372
时间:2022-03-31 00:01:06 css浮动边距加倍错误怎么办
详解CSS外边距折叠引发的问题第一种:两个块级元素的上下边距折叠
第二种:父元素和子元素(或者最后一个元素)的外边距
第三种:空的块级元素的上下外边距
折叠的根本原因:
margin之间直接接触,没有阻隔
折叠后外边距的计算:
1.如果两个外边距都是正值,折叠后的外边距取较大的一个
2.如果两个外边距一正一负,折叠后的边距为边距之和
3.如果两个外边距都为负数,折叠后边距为较小的边距
解决方案:解决方法实际上也就是阻止外边距直接接触
第一种、第三种:只有静态流的元素才会发生外边距合并故设置float position inline-block都可以
<style> .bother{ width: 50px; height: 50px; margin: 50px; background-color: #44cc00; /*1.float: left;*/ /*2.position: absolute;*/ <!--3.display: inline-block;--> } /*.father{*/ /*2.position: relative;*/ /*background:#cccdd1;*/ /*}*/ /*.bother1{*/ /*2.top:50px;*/ /*}*/ /*.bother2{*/ /*2.top:250px;*/ /*}*/ </style> <body> <li class="father"> <li class="bother1 bother"></li> <li class="bother2 bother"></li> </li> </body>
第二种(嵌套的情况)只要border padding非0或者有inline元素隔开,比如在父元素里加一行文字也可以
<style> .margin-box{ width: 50px; height: 50px; /*margin: 50px;设置了上下左右的外边距*/ margin: 50px; /*margin-left: 50px;*/ /*margin-right: 50px;*/ /*li是块级元素,所以设置左右外边距也不会使父元素有左右外边距*/ background-color: #fae900; /*5.2 display: inline-block;*/ } .father{ <!--3.overflow: hidden;--> background:#cccdd1; /*1.border: 1px solid;*/ /*2.padding: 20px;*/ /*5.1 display: inline-block;*/ /*如果没有border和padding只有测试这个字,那么子元素的外边距不会在父元素里显示*/ /*而仅仅只有上外边距显示,下外边距不显示*/ /*而如果在子元素下面同样写一个测试,那么下外边距也会显示*/ } </style> </head> <body> <li class="father"> <!--4.<span>测试</span>--> <li class="margin-box"></li> <!--4.<span>测试</span>--> </li> </body>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vs代码折叠
- 前端树结构数据很多怎么展示(amazeui树节点自动展开折叠面板并选中第一个树节点的实现)
- ashx文件中代码折叠
- 纯css实现多级菜单(纯CSS实现可折叠树状菜单)
- extjs accordion折叠布局
- 怎么给div添加按下去效果(DIV点击折叠实例代码)
- html5菜单栏(html5写一个BUI折叠菜单插件的实现方法)
- css浮动边距加倍错误怎么办(详解CSS外边距折叠引发的问题)
- amazeui图标(AmazeUI 折叠面板的实现代码)
- easyui layout 折叠后显示标题
- 小说 小伙穿越成刘备,用现代知识指挥作战,众谋士都看呆了(小伙穿越成刘备)
- 解析葡萄牙6-1瑞士 进攻多点开花,贡萨洛-拉莫斯一战成名(解析葡萄牙6-1瑞士)
- 这支 奇兵队 腕大 有范儿还各怀绝技,毒贩杀人犯见了都要仓皇而逃(这支奇兵队腕大)
- 雄藩崛起 奇兵队与幕末长州藩军事改革(雄藩崛起奇兵队与幕末长州藩军事改革)
- 九月初,爱如蜜糖,甜到心扉,迷恋彼此,一日不见兮,思之若狂(九月初爱如蜜糖)
- ()
热门推荐
- js的模块模式设计(如何理解JavaScript模块化)
- node中如何用import(分析node事件循环和消息队列)
- jquery中hasClass()、is()判断是否包含指定的class
- 云服务器和普通服务器有什么区别(云服务器是什么?云服务器是如何工作的?)
- 用户 IIS APPPOOLDefaultAppPool 登录失败的解决方法
- python面向对象实例教程(Python面向对象程序设计类的多态用法详解)
- idea的mysql如何连接(在IntelliJ IDEA中使用Java连接MySQL数据库的方法详解)
- 个人对云服务器ecs的理解(ecs云服务器怎么搭建网站)
- 数据库sql位置更换磁盘(SQL SERVER迁移之更换磁盘文件夹的完整步骤)
- python函数式编程源码(python仿evething的文件搜索器实例代码)