CSS盒模型之内边距、边框、外边距（常见面试问题）

最新推荐文章于 2024-10-30 14:59:26 发布

 ;

最新推荐文章于 2024-10-30 14:59:26 发布

阅读量2.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端知识百科文章标签： javascript html5 css css3

原文链接：https://juejin.im/post/6880111680153059341

前端知识百科专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了标准盒模型与IE盒模型的区别，并提供了盒模型的设置方法。同时，文章还讲解了盒模型在JavaScript中的获取和设置方式，以及在CSS布局中可能出现的问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

什么是盒模型？
两者的区别是什么？
JS怎么设置这两种盒模型？
描述一下下面盒子的大小，颜色什么的（content-box模型）
当small盒子设置成圆形时，内容会超出圆形吗？为什么？
当元素设置成inline-block会出现什么问题？怎么消除？
行内元素可以设置padding,margin吗？
padding:1px 2px 3px;则等效于什么？
内边距的百分数值是怎么计算的？
那为什么不根据自己的宽度呢？而是根据父元素？
什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？
第二种哪里算是外边距重叠？？？
为什么回出现margin重叠的问题？粗俗点就是问设计者的脑子有问题吗？
什么是BFC?
那么BFC的原理是什么呢？
BFC由什么条件创立？
BFC的使用场景有哪些呢？
清除浮动的方法（最常用的4种）？

1、什么是盒模型？

首先，盒模型有标准盒模型和IE的盒模型。可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：外边距（margin）、边框（border）、填充（亦称内边框）（padding）、内容（content）。它在页面中所占的实际宽度是margin+border+padding+content的宽度相加。

2、标准盒模型和IE的盒模型两者的区别？

标准盒模型默认下width宽度等于content内容的宽度，height高度等于content内容的高度。

IE盒模型默认下width宽度等于content内容的宽度+padding左右宽度+border左右宽度，height高度等于content内容的高度+padding顶部和底部的宽度+border顶部和底部的宽度。

3、怎么设置这两种模型呢？

很简单，通过设置box-sizing: content-box(W3C) / border-box(IE)就可以达到自由切换的效果。

4、JS怎么获取和设置盒模型的宽高呢？

dom.style.width/height 这种方法只能获取使用内联样式的元素的宽和高。
dom.currentStyle.width/height 这种方法获取的是浏览器渲染以后的元素的宽和高，无论是用何种方式引入的css样式都可以，只有IE浏览器支持这种写法。
window.getComputedStyle(dom).width/height 这种方法获取的也是浏览器渲染以后的元素的宽和高，但这种写法兼容性更好一些。
dom.getBoundingClientRect().width/height 这种方法经常使用的场所是，计算一个元素的绝对位置（相对于视窗左上角），它能拿到元素的left/top/width/height四个属性。

5、描述一下下面盒子的大小，颜色什么的（content-box模型）

<style>
    body {
        background-color: gray;
    }
    div {
        color: blue;
        width: 100px;
        background-color: pink;
        border: 10px solid;
        padding: 20px;
    }
</style>

<body>
    <div></div>
</body>

效果图：

要考虑如下:

整个盒子的大小？ 因为height为0，所以整个盒子的大小等于0。
padding的颜色？ 继承于content的颜色，所以为pink。
border的颜色？ 继承color字体的颜色，默认为black,所以为blue。
height为0了，看得见盒子吗？虽然height为0，但是看得见盒子，因为有border和padding。

要记：

如果没有写border-style，那么边框的宽度不管设置成多少，都是无效的。
border-color的颜色默认跟字体颜色相同。
padding颜色跟背景颜色相同。

6、当small盒子设置成圆形时，内容会超出圆形时？为什么？

原因：是因为border-radius只是改变视觉上的效果，实际上盒子占据的空间还是不变的。

7、当元素设置成inline-block会出现什么问题？怎么消除？

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的例子：

去除inline-block元素间间距的N种方法：

元素间留白间距出现的原因就是标签段之间的空格。因此，去掉HTML中的空格，自然间距就木有了。考虑到代码的可读性，显然这一写法是不可取的。
使用margin负值（负值一般可取-4px/-5px）

让闭合标签吃胶囊（不可取）

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血
</div>

使用font-size：0（设置 .space为font-size:0，.span a为font-size:12px）
使用word-spacing（.space即使负值很大，也不会发生重叠）

.space {
    word-spacing: -1126px;
}
.space a {
    background-color: gray;
    padding: .5em 1em;
    display: inline-block;
    word-spacing: 0;
}

8、行内元素可以设置padding,margin吗？

行内元素与宽度，宽度不起作用
行内元素与高度，高度不起作用
行内元素与padding,margin。影响左右，不影响上下。但是由于设置padding上下不占页面空间，无法显示效果，所以无效。

9、padding:1px 2px 3px;则等效于什么？

等效于padding:1px 2px 3px 2px;

10、内边距的百分数是怎么计算的？

根据父元素的宽度width计算的

11、那么为什么不根据自己的宽度呢？而是根据父元素宽度计算？

如果不根据父元素，而是根据本身的宽度的话。那么当padding生效后，本身的宽度不就变大了吗？那么padding不是也要变大吗？就陷入死循环。
要是本身没有宽度，那岂不是怎么设置padding都是无效的。

12、什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？

边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

边距重叠分为两种：

同级关系的重叠：同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个。
父子关系的边距重叠：父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。解决方案：给父元素添加overflow:hidden这样父元素就变为BFC，不会随子元素产生外边距，但是父元素的高会变化。

13、第二种哪里算是外边距重叠？

<div style="width:100px;height:100px;background-color: gray;">
    <div style="margin:20px"></div>
</div>

实际上，可以看出父div的margin为0，然后子div的margin为20px,因此父div和子div的margin发生了重叠，然后父div的margin就取20px和0中最大的值了。

14、为什么回出现margin重叠的问题？粗俗点就是问设计者的脑子有问题吗？

在flex布局前，要实现justify-content:space-evenly的效果，利用浮动布局，然后给每个盒子设置margin-right，margin-left就可以实现了，这样就不用去单独地再去设置第一个盒子的margin-left和最后一个盒子的margin-right。

15、什么是BFC?

BFC的基本概念-BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是W3C CSS2.1规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影像。

16、那么BFC的原理是什么呢？

内部的Box会在垂直方向上一个接一个的放置。
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠。
计算BFC的高度时，浮动子元素也参与计算。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

17、BFC的使用场景有哪些呢？

1、可以用来自适应布局

<style media="screen">
  #layout {
    background-color: red;
  }

  #layout .left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #664664;
  }

  #layout .right {
    height: 110px;
    background-color: #ccc;
    overflow: auto;
  }
</style>

<body>
  <!-- BFC不与float重叠 -->
  <div id="layout">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

2、可以清除浮动（塌陷问题）

<style>
    /* BFC子元素即使是float也会参与计算 */
    #float {
      background: #434343;
      overflow: auto;
    }
    #float .float {
      float: left;
      font-size: 30px;
    }
</style>

<div id="float">
    <div class="float"></div>
</div>

3、解决垂直边距重叠

18、清除浮动的方法（最常用的4种）

额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear:both；）（不推荐）
父级添加overflow属性（父元素添加overflow：hidden)（不推荐）通过触发BFC方式，实现清除浮动。

使用after伪元素清除浮动（推荐使用）

.clearfix:after {
    /* 伪元素是行内元素 正常浏览器清除浮动方法*/
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /* IE6清除浮动的方式，*号只有IE6~IE7执行，其他浏览器不执行*/

    *zoom: 1;
}

使用before和after双伪元素清除浮动（推荐使用）

.clearfix:after,.clearfix:before {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

浮动父元素