盒子边界(根据理解和测试记录，在概念上可能有描述错误，推荐补充)

2024年5月20日 170次阅读 来源: 哗哗的酱紫

前言：边界属性margin是盒子与盒子之间的间距，一定要记住这个前提。

BFC

满足下列条件之一就可触发BFC(IE的触发需要再额外增加zoom: 1)

  • 根元素，即HTML元素
  • overflow的值不为visible
  • 设置border
  • float的值不为none
  • display的值为inline-block、table-cell、table-caption
  • position的值为absolute或fixed

边界值重叠

两个相邻的块级元素之间的margin边界值会互相重叠。如：第一个div的margin-bottom和第二个div的margin-top区域会重叠，只显示最大值。(其实说实在的，应该没人会这么写，毕竟直接设置一个盒子的的边界值就可以了。但是这个还是需要注意的。)

<style>
  .wrapper{background: yellow;}
  .text{margin-bottom: 100px; background: #00b000}
  p{background: yellowgreen; margin-top: 100px;}
</style>
<div></div>
<div></div>

解决方法： 其中一个div增加子元素，并设置overflow的值不为visible(触发BFC的元素都可以解决,根据样式需求选择合适的方法即可)，然后子元素设置边界值。

<style>
  .wrapper{background: yellow; border: 1px solid #cccccc}
  .text{margin-bottom: 100px; background: #00b000}
  p{background: yellowgreen; margin-top: 100px;}
</style>
<div class="wrapper">
  <div class="text">测试</div>
</div>
<div class="last">测试</div>

边界值无效, 第一个子元素的margin-top和最后一个子元素的margin-bottom越界问题(
重点)

 <style>
 ul{
     background: #00b000;
 }
 ul li{
     padding: 10px;
     margin-bottom: 100px;
     background: yellow;
 }
  </style>
<ul>
  <li>测试</li>
  <li>测试</li>
  <li>测试</li>
  <li>测试</li>
</ul>

解决方法：通常情况下，我们会选择给li一个边界top或者bottom来分割开每个li之间的间隔，但是你会发现，第一个子元素的margin-top和最后一个子元素的margin-bottom不会产生跟ul之间的间距，会出现越界。其实一样的处理。

<style>
 ul{
     background: #00b000;
     overflow: auto;
 }
 ul li{
     padding: 10px;
     margin-bottom: 100px;
     background: yellow;
 }
</style>
<ul>
  <li>测试</li>
  <li>测试</li>
  <li>测试</li>
  <li>测试</li>
</ul>

ps: 在以前蠢蠢的不知道的时候，有时候会通过给ul增加padding-bottom,然后给最后一个li去除margin类似这样，虽然这样可以解决，但是不推荐。 如果li与ul的边界值大于会小于li之间的间距时，可以根据情况重新设置首尾边界的具体值。

    原文作者：哗哗的酱紫
    原文地址: https://segmentfault.com/a/1190000017757600
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞