阅读 308
CSS查漏补缺:CSS盒模型、外边距重叠、BFC

CSS查漏补缺:CSS盒模型、外边距重叠、BFC

本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

1、CSS盒模型

浏览器根据CSS 基础框盒模型(CSS basic box model),将元素表示成矩形的盒子,CSS 决定这些盒子的大小、位置以及属性。

每个盒子由四个区域组成:内容区域 content area、内边距区域 padding area、边框区域 border area、外边距区域 margin area。但盒子的大小由content+padding+border这几部分决定,把margin算进去的那是盒子占据的位置,而不是盒子的大小。

CSS盒模型分为W3C标准盒模型IE盒模型

image.png

W3C标准盒模型:属性width,height只包含内容content,不包含border和padding。

IE盒模型:属性width,height包含border和padding,指的是content+padding+border。

CSS 如何设置这两种模型?

box-sizing : content-box; // 默认 W3C标准盒模型
box-sizing : border-box;  // IE盒模型
复制代码

详细阅读:MDN:box-sizing

JS 如何设置获取盒模型对应的宽和高?

dom.style.width/height;//设置获取的是内联样式
dom.currentStyle.width/height;//只有IE支持
window.getComputedStyle(dom).width/height;//兼容性好
dom.getBoundingClientRect().width/height;//适用场所:计算一个元素的绝对位置
复制代码

2、外边距重叠

MDN:块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距,其大小为单个边距的最大值(或如果它们相等,则仅为其中一个),这种行为称为边距折叠。

出现外边距重叠一般有三种情况:

  1. 同一层相邻元素之间

相邻的两个元素之间的外边距重叠:

  <style>
    div:nth-child(1){
      margin-bottom: 13px;
    }
    div:nth-child(2){
      margin-top: 87px;
    }
  </style>
  <div style="width: 100px;height: 100px;background-color:black;"></div>
  <div style="width: 100px;height: 100px;background-color:blue;"></div>
复制代码

截屏2021-05-27 23.31.14.png

这个例子如果以为边界会合并的话,理所当然会猜测上下2个元素会合并一个100px的边界范围,但其实会发生边界折叠,只会挑选最大边界范围留下,所以这个例子的边界范围其实是87px。

  1. 没有内容将父元素和后代元素分开
  <style type="text/css">
    .outer_a {
      width: 100px;
      margin-top: 13px;
      margin-bottom: 87px;
    }
    .inner_a {
      margin-top: 87px;
      width: 100%;
      height: 100px;
      background-color:black;
    }
    .inner_b {
      margin-bottom: 13px;
      width: 100%;
      height: 100px;
      background-color:blue;
    }
    .outer_b{
      width: 100px;
      height: 100px;
      background-color:red;
    }
  </style>
  <div class="outer_a">
    <div class="inner_a"></div>
    <div class="inner_b"></div>
  </div>
  <div class="outer_b"></div>
复制代码

image.png

如上图所示,会发现父级标签.outer_amargin-top:13px根本没有发挥作用,而下边距以父级元素的下边距为准。不难得出结论:父子元素的外边距,也是谁大听谁的

但当我们在.outer_a添加了边框border: 1px solid;,向上边距会将父级元素及其子元素一块计算,下边距同理。

image.png

以下几种情况会导致父子级元素出现外边距重叠:

  • 父元素完全没有设定边框border、内边距paddng、高度height、最小高度min-height 、最大高度max-height
  • 父级没有创建BFC或清除浮动
  1. 空的块级元素
  <style type="text/css">
    .box_a {
      width: 100px;
      height: 100px;
      background-color:black;
    }
    .box_b {
      margin-top: 87px;
      margin-bottom:13px;
    }
    .box_c{
      width: 100px;
      height: 100px;
      background-color:red;
    }
</style>
<div class="box_a"></div>
<div class="box_b"></div>
<div class="box_c"></div>
复制代码

image.png

在一个元素没有设定边框border、内边距paddng、高度height、最小高度min-height 、最大高度max-height,也会产生外边距重叠现象。

关于外边距重叠问题,上述情况的组合会产生更复杂的外边距折叠。

3、BFC

BFC 全称:Block Formatting Context, 名为 "块级格式化上下文"

网上有很多关于BFC的定义,很拗口。

这里就一句话:BFC 就是将一个盒子变成不影响外界、外界也不能影响它内部的绝缘盒子

以下常见方式都会创建一个BFC盒子

  • 根元素<html>是天然BFC;
  • 元素的 float 不是 none;
  • 元素的 positionabsolutefixed;
  • 元素的 displayinline-blockflex、表格布局时(table-cell、table)等;
  • overflow 不为 visible 的块元素;

BFC解决的最典型问题就是上述外边距重叠问题。

文档规则:

  • 在一个块格式化上下文中,盒在垂直方向一个接一个地放置,从包含块的顶部开始。
  • 两个兄弟盒之间的垂直距离由margin属性决定。
  • 同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并。
  • 同一个块格式化上下文中,每个盒的左外边界(left outer edge)挨着包含块的左外边界(对于从右向左的格式化,右外边界挨着)。
  • BFC的区域不会与float box重叠。
  • 计算BFC的高度时,浮动元素也参与计算。

参考文章

  1. 简述CSS盒模型

  2. CSS盒模型详解

  3. MDN-外边距重叠

  4. BFC文档规则

文章分类
前端
文章标签