CSS的盒子模型

最新推荐文章于 2024-10-31 19:10:44 发布

原创最新推荐文章于 2024-10-31 19:10:44 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

HTML+CSS 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了CSS中的盒模型，包括内容区域、内边距、边框和外边距，以及它们如何影响元素的布局。重点讲解了如何设置和计算盒子尺寸，特别是CSS3的`box-sizing:border-box`属性，使得宽度和高度包含边框和内边距。此外，还讨论了内外边距的清除、外边距折叠和塌陷现象及其解决方案，以及行内元素的margin和padding行为。内容涵盖了盒模型的基本概念和实践技巧。

什么是盒子模型

CSS中规定由内容区域，内边距区域，边框区域，外边框区域组成，这就是盒子模型。
通过盒子的视角更方便的进行布局。

在这里插入图片描述

内容区域的宽度和高度

width和height来规定内容区域的大小

边框

给边框设置粗细，样式以及颜色

在这里插入图片描述

内边距

设置边框与内容区域之间的距离，padding
从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的。

在这里插入图片描述

外边距

设置边框以外，盒子与盒子之间的距离。
方法同内边距

在这里插入图片描述

我们可以把盒子与盒子之间的距离，换一种说法

在这里插入图片描述

盒子的计算公式

盒子尺寸300*300 边框10px实线黑色上下左右20px的内边距

设置width和height是内容的宽高，设置border会撑大盒子，设置padding会撑大盒子
当盒子被撑大后，我们应该自己计算多余大小，手动从内容中减去

在这里插入图片描述

下面介绍一种不会撑大盒子的特殊情况。仅作为了解即可。

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
（代码可自行运行并且观察最终结果）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    .son {
      /* 1、块级元素宽度不设置，默认占满父元素一行 */
      /* width: 100px; */
      height: 100px;
      background-color: blue;

      /* 2、此时左右的border和padding是不会撑大盒子的 */
      border-left: 10px solid red;
      border-right: 10px solid red;
      padding: 0px 20px;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

CSS3的盒模型

给盒子设置属性box-sizing:border-box即可。优点是浏览器会自动计算多余大小，自动在内容中减去。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 如果设置了box-sizing：border-box，其实此时的width和height属性设置的就是盒子的实际大小 */
      width: 300px;
      height: 300px;
      background-color: pink;
      /* border会撑大盒子 */
      border: 10px solid #000;
      /* padding也会撑大盒子 */
      padding: 20px;
      /* 自动内减 */
      box-sizing: border-box;

      /* 
        要求：300*300
        现在：360*360
        多出：60

        解决1：手动内减
        解决2：自动内减
        只要设置一个属性，浏览器会自动计算多出了多少，自动在内容中减去

          CSS3盒模型：
          属性名：box-sizing
          属性值：border-box
       */
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

清除内外边距

浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left

在这里插入图片描述

前期我们可以用京东的类似代码，简单高效。

外边距折叠现象

合并现象

垂直布局的块级元素，上下的margin会合并，最终两者距离为Margin的最大值。因此我们只给其中一个盒子设置margin即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
    }

    .red {
      background-color: red;
      /* margin-bottom: 200px; */
      /* 不用设置bottom 因为blue这个盒子已经设置了top.已经把盒子顶起来了。*/
    }

    .blue {
      background-color: blue;
      margin-top: 200px;
    }
  </style>
</head>
<body>
  <div class="red"></div><div class="blue"></div>
</body>
</html>

塌陷现象

互相嵌套的块级元素，子元素的margin-top会作用在父元素上。导致父元素一起往下移动。

因此这里给出四种解决方案。
1 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden
3. 转换成行内块元素
4. 设置浮动（详见CSS布局初级）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 400px;
      height: 400px;
      background-color: pink;

      /* border-top: 1px solid #000; */
      /* padding-top: 1px; */

      /* overflow: hidden; */

      /* display: inline-block; */

      float: left;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: 100px;
    }

  </style>
</head>
<body>
  <div class="father">
    <!-- 我是一行文本 -->
    <div class="son"></div>
  </div>
</body>
</html>

行内元素margin和padding无效的情况

水平方向的布局有效，垂直方向的布局无效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 600px;
      height: 100px;
      background-color: orange;
    }

    span {
      /* margin-right: 100px; */
      /* padding-right: 100px; */

      /* margin-bottom: 100px; */
      padding-bottom: 100px;
    }

  </style>
</head>
<body>
  <div></div>

  <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>

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