详解CSS外边距折叠引发的问题
网站建设 2023-01-28 21:38www.1681989.com免费网站
第一种两个块级元素的上下边距折叠
第二种父元素和子元素(或者一个元素)的外边距
第三种空的块级元素的上下外边距
折叠的根本原因
marg之间直接接触,没有阻隔
折叠后外边距的计算
1.如果两个外边距都是正值,折叠后的外边距取较大的一个
2.如果两个外边距一正一负,折叠后的边距为边距之和
3.如果两个外边距都为负数,折叠后边距为较小的边距
解决方案解决方法实际上也就是阻止外边距直接接触
第一种、第三种只有静态流的元素才会发生外边距合并故设置float position le-block都可以
<style> .bother{ width: 50px; height: 50px; marg: 50px; background-color: #4400; /1.float: left;/ /2.position: absolute;/ <!--3.display: le-block;--> } /.father{/ /2.position: relative;/ /background:#cdd1;/ /}/ /.bother1{/ /2.:50px;/ /}/ /.bother2{/ /2.:250px;/ /}/ </style> <body> <div class="father"> <div class="bother1 bother"></div> <div class="bother2 bother"></div> </div> </body>
第二种(嵌套的情况)只要border paddg非0或者有le元素隔开,比如在父元素里加一行文字也可以
<style> .marg-box{ width: 50px; height: 50px; /marg: 50px;设置了上下左右的外边距/ marg: 50px; /marg-left: 50px;/ /marg-right: 50px;/ /div是块级元素,所以设置左右外边距也不会使父元素有左右外边距/ background-color: #fae900; /5.2 display: le-block;/ } .father{ <!--3.overflow: hidden;--> background:#cdd1; /1.border: 1px solid;/ /2.paddg: 20px;/ /5.1 display: le-block;/ /如果没有border和paddg只有测试这个字,那么子元素的外边距不会在父元素里显示/ /而仅仅只有上外边距显示,下外边距不显示/ /而如果在子元素狼蚁网站SEO优化同样写一个测试,那么下外边距也会显示/ } </style> </head> <body> <div class="father"> <!--4.<span>测试</span>--> <div class="marg-box"></div> <!--4.<span>测试</span>--> </div> </body>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:用CSS遮罩实现过渡效果的示例代码
下一篇:css3 给背景设置渐变色的方法