CSS学习--盒子模型

最新推荐文章于 2025-04-06 22:10:03 发布

原创最新推荐文章于 2025-04-06 22:10:03 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析CSS盒模型，包括概念、组成元素、外边距合并、box-sizing属性及其应用场景，帮助理解网页布局原理。

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

跟着学习布局和https://css-tricks.com一起学习css。

盒模型

概念

css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：
在这里插入图片描述
图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值＋ border的上下宽度。

css 外边距合并（叠加）

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：
在这里插入图片描述
需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

box-sizing

css reset中有可能会用到它。
box-sizing : content-box|border-box|inherit;
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距(padding)和边框(border)不再会增加它的宽度,即不会挤爆父容器。

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

在这里插入图片描述

content-box

标准模型content-box，整个盒子宽度，需要再加上padding和border的厚度。

content-box的最大缺点就是：当你想让两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，一切想的挺美好，然而你发现结果并不是这么美好，因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，于是，width就不能50%了，只能是50%再减去padding的像素值。

inherit

规定应从父元素继承 box-sizing 属性的值

关于border-box的使用：
1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

实际开发中遇到的和框模型相关的应用及小问题。

1 margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题）

以第一个子元素的margin-top 为例：
当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，
即：在这里插入图片描述
解决方法有四个：
（1）给父元素加边框border （副作用）
（2）给父元素设置padding值（副作用）
（3）父元素添加 overflow：hidden （副作用）
（4）父元素加前置内容生成。（推荐）
以第四种方法为例：
在这里插入图片描述

再看一个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css-learning</title>
        <style type="text/css">
            .content-box{
                box-sizing:content-box;
                -moz-box-sizing:content-box;
                width: 100px;
                height: 100px;
                padding: 20px;
                border: 5px solid #E6A43F;
                background: blue;
            }
            .padding-box{
                box-sizing:padding-box;
                -moz-box-sizing:padding-box;
                width: 100px;
                height: 100px;
                padding: 20px;
                border: 5px solid #186645;
                background: red;                
            }
            .border-box{
                box-sizing:border-box;
                -moz-box-sizing:border-box;
                width: 100px;
                height: 100px;
                padding: 20px;
                border: 5px solid #3DA3EF;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div class="content-box"></div>
        <div class="padding-box"></div>
        <div class="border-box"></div>
    </body>
</html>