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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- extjs accordion折叠布局
- vs代码折叠
- 纯css实现多级菜单(纯CSS实现可折叠树状菜单)
- 怎么给div添加按下去效果(DIV点击折叠实例代码)
- easyui layout 折叠后显示标题
- html5菜单栏(html5写一个BUI折叠菜单插件的实现方法)
- 前端树结构数据很多怎么展示(amazeui树节点自动展开折叠面板并选中第一个树节点的实现)
- css浮动边距加倍错误怎么办(详解CSS外边距折叠引发的问题)
- amazeui图标(AmazeUI 折叠面板的实现代码)
- ashx文件中代码折叠
- 刘智泰确认出演《Good Wife》 担纲男一号(刘智泰确认出演Good)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
- 汉族(汉族的祖先是谁)
- 中国有几个名族(中国有几个民族没列入56个民族)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
热门推荐
- sqlserver 空间数据类型(SQL Server数据类型转换方法)
- html5隐藏数字(HTML5去掉输入框type为number时的上下箭头的实现方法)
- docker容器卡死(Docker容器不识别宋体等字体的解决方案)
- 阿里云服务器可以连接几个面板(阿里云云服务器宝塔面板的安装图文教程详解)
- lazyload延迟加载有什么影响(利用原生JS实现懒加载lazyLoad的三种方法总结)
- mysql的innodb设置(修改MySQL数据库引擎为InnoDB的操作)
- 如何挑选云服务器(高质量的美国云服务器选择方法有哪些?)
- sqlserverselect选择两个参数(SQL SERVER中SELECT和SET赋值相同点与不同点推荐)
- mysql 8.0.22 winx64安装配置图文教程(mysql 8.0.22 winx64安装配置图文教程)
- 简单的肖特基二极管电路(两个元祖T1='a', 'b',T2='c', 'd'使用匿名函数将其)