一、盒子模型简介¶

TIP

所有 HTML 标签都可以看成矩形盒子，具有（盒子模型）结构。盒模型由 4 个部分组成，分别是： content、padding、border、margin 盒模型有 5 个属性： width 宽、height 高、padding 内边距、border 边框、margin 外边距 ![[Pasted image 20260225101950.png]]

注：

width、height 不是盒子的总宽度

在标准盒子模型下，盒子模型的 content 部分就是元素的 width 和 height 属性组成的矩形部分。

我们可以用现实生活中的相框类比： ![[Pasted image 20260225102013.png]]

简单盒子模型

<style>
  .box {
    /* 宽度 200px */
    width: 200px;
    /* 高度 200px */
    height: 200px;
    /* 边框 快捷键 bd */
    border: 10px solid red;
    /* 内边距 上右下左 30px */
    padding: 30px;
    /* 外边距 上右下左 30px */
    margin: 30px;
  }
</style>
<body>
  <div class="box">我就是div盒子的内容</div>
</body>

![[Pasted image 20260225102057.png]]

二、盒模型的属性¶

包含内容：

width、height 属性（宽、高），border 属性（边框）
padding 属性（内边框），padding 的不同数值写法
margin 属性（外边距），margin 的不同数值写法，margin 塌陷，margin 负值
去掉元素默认值，盒子水平居中，盒子模型占位计算

1、width 和 height 属性 - 宽和高¶

属性	单位	描述
width	px、移动端开发（百分比、rem、vh、vw 等单位）	盒子内容的宽度
height	px、移动端开发（百分比、rem 等单位）	盒子内容的高度

<style>
  div {
    width: 100px; /*宽度*/
    height: 100px; /*高度*/
    background-color: pink; /*背景色*/
  }
</style>
<body>
  <div>我是div盒子</div>
</body>

![[Pasted image 20260225102145.png]]

如果 width 和 height 的值为 % 百分比值，则 % 百分比相对于父元素宽和高而言。%百分比单位在移动端或响应式开发中用得较多。

<style>
  .box {
    /* 宽高 构成 内容区 */
    width: 200px;
    height: 100px;
    border: 2px solid red;
  }
  .item {
    width: 50%; /* 计算得到宽 200px * 50%=100px */
    height: 50%; /* 计算得到高 100px * 50%=50px */
    background-color: khaki;
  }
</style>
<div class="box">
  <div class="item"></div>
</div>

![[Pasted image 20260225102243.png]]

2、border 属性 - 边框¶

TIP

border 属性的三要素：

border 属性的值由三部分组成：线宽线型（风格）颜色；

/* 
  1px 线宽度
  solid 线型
  red 线颜色
*/
border: 1px solid red;

常见线型值

值	描述
solid	实线
dashed	虚线
dotted	点状线
double	双边框
groove	定义 3D 凹槽边框。效果取决于 border-color 值
ridge	定义 3D 垄状边框。效果取决于 border-color 值
inset	3D inset 边框。其效果取决于 border-color 的值。
outset	3D outset 边框。其效果取决于 border-color 的值。
none	无边框
hidden	隐藏边框
![[Pasted image 20260225102328.png]]

<style>
  div {
    width: 50px; /* 宽 */
    height: 50px; /* 高 */
  }
  .border1 {
    border: 2px solid red; /*2px 实线 红色边框线 */
  }
  .border2 {
    border: 4px dashed blue; /* 4px 虚线 蓝色边框 */
  }
  .no-border {
    border: none; /*去掉边框线*/
  }
</style>
<body>
  <div class="border1">1</div>
  <div class="no-border">2</div>
  <div class="border2">3</div>
</body>

![[Pasted image 20260225102430.png]]

2.1、边框的三要素小属性¶

小属性	描述
border-width	线宽
border-style	线型
border-color	线颜色

注：

小属性是为了层叠大属性用的

<style>
  div {
    width: 50px;
    height: 50px;
    /* 2px 实线 灰色边框 */
    border: 2px solid #666;
  }
  .box {
    /* 小属简单独立定义边框颜色为红色，覆盖上面的灰色 */
    border-color: red;
  }
</style>
<body>
  <div>1</div>
  <div class="box">2</div>
  <div>3</div>
</body>

![[Pasted image 20260225102519.png]]

2.2、四个方向的边框¶

属性	描述
border-top	上边框
border-right	右边框
border-bottom	下边框
border-left	左边框

注：

小属性是为了层叠大属性用的

border-left: 1px solid red;
...

使用方法

<style>
  div {
    width: 100px;
    height: 100px;
    /* 上边框 */
    border-top: 5px solid red;
    /* 右边框 */
    border-right: 6px double blue;
    /* 下边框 */
    border-bottom: 6px dotted orange;
    /* 左边框 */
    border-left: 5px dashed skyblue;
  }
</style>
<body>
  <div></div>
</body>

![[Pasted image 20260225102616.png]]

单独去掉某一边框线，可以将 border-top、border-bottom、border-right、border-left 的属性值设为 none

/* 去掉上边框线 */
border-top: none;
/* 去掉左边框线 */
border-left: none;
...

2.3、四个方向的边框的三要素小属性¶

属性	描述
border-top-width	上边框宽度
border-top-style	上边框线型
border-top-color	上边框颜色
border-right-width	右边框宽度
border-right-style	右边框线型
border-right-color	右边框颜色
border-bottom-width	下边框宽度
border-bottom-style	下边框线型
border-bottom-color	下边框颜色
border-left-width	左边框宽度
border-left-style	左边框线型
border-left-color	左边框颜色

注：

小属性是为了层叠大属性用的

<style type="text/css">
  .box {
    width: 200px;
    height: 200px;
    border: 20px solid red; /*20px 实线 红色 边框线*/
    border-bottom-color: turquoise; /*底边框背景色为 天蓝色*/
    border-top-style: dotted; /*上边框风格为点状*/
    border-left-width: 30px; /*左边框宽 30px*/
    /*写在后面的样式会覆盖前面的对应属性样式*/
  }
</style>
<body>
  <div class="box"></div>
</body>

![[Pasted image 20260225102720.png]]

3、padding 属性 - 内边距¶

TIP

padding 是盒子的内边距，即边框内壁到内容区之间的距离 ![[Pasted image 20260225102818.png]]

3.1、单独设置不同方向内边距¶

TIP

padding 有四个方向，可以通过以下属性分别设置不同方向内边距

属性	描述
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

<style>
  .box1 {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    /* 上内边距 */
    padding-top: 10px;
    /* 右内边距 */
    padding-right: 20px;
    /* 下内边距 */
    padding-bottom: 30px;
    /* 左内边距 */
    padding-left: 40px;
  }
</style>

<body>
  <div class="box1">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  </div>
</body>

![[Pasted image 20260225102901.png]]

3.2、padding 属性，4 值不同写法¶

TIP

padding 属性，可以一次性设置元素四个方向的内边距

1 个值

    /* padding:上下左右; */
    padding: 20px; /* 四个方向的内边距大小都是20px; */

2 个值

    /* padding:上下  左右; */
    padding: 20px 30px; /*第一个值代表上下内边距20px，第二个值是左右内边距30px */

3 个值

    /* padding:上  左右  下; */
    padding: 20px 10px 30px; /*值1代表上内边距20px  值2代表左右内边距 10px  值3 代表下内边距30px */

4 个值

    /* padding:上  右  下  左; */
    padding: 10px 20px 30px 40px; /*padding:上  右  下  左 ； 四个方向值*/

注：

应用场景： 如果设置父子间距，可以给父元素添加内边距来实现
快速记忆： 左右是一对，上下是一对，缺下时和上一样，缺左时和右一样。

3.3、快速灵活设置 padding 属性¶

TIP

padding 大小属性的最佳实践：

小属性 padding-top/padding-right/padding-bottom/padding-left 用来层叠大属性 padding 来组合使用
更推荐（小属性层叠大属性）写法

/* 小属性层叠大属性
   padding: 上右下左为40px    大属性
   padding-bottom: 下为0       小属性
*/
padding: 40px;
padding-bottom: 0;

案例

<style>
  .box {
    width: 50px;
    border: 1px solid red;
    /* 四个方向内边距都为10px */
    padding: 10px;
  }
  .box1 {
    /* 单独控制下内边距为0 */
    padding-bottom: 0;
  }
</style>
<body>
  <div class="box">文字内容文字</div>
  <div class="box">文字内容文字</div>
  <div class="box box1">文字内容文字</div>
</body>

![[Pasted image 20260225103330.png]]

4、margin 属性 - 外边距¶

TIP

margin 是盒子的外边距
即：盒子和其他盒子之间的距离

4.1、单独设置不同方向外边距¶

属性	描述
margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	左外边距

<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: skyblue;
  }
  .box1 {
    /* 上外边距 20px */
    margin-top: 20px;
    /* 左外边距 50px */
    margin-left: 50px;
    /* 下外边距 30px */
    margin-bottom: 30px;
  }
</style>
<body>
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
</body>

![[Pasted image 20260225103705.png]]

4.2、margin 属性，4 值不同写法¶

TIP

margin 属性，可以一次性设置元素四个方向的外边距

1 个值

margin: 20px; /*四个方向的外边距大小都是20px;*/
2 个值

margin: 20px 30px; /*第一个值代表上下内边距20px，第二个值是左右内边距30px padding:上下左右*/
3 个值

margin: 20px 10px 30px; /*值1代表上内边距20px 值2代表左右内边距 10px 值3 代表下内边距30px */
4 个值

margin: 10px 20px 30px 40px; /*padding:上右下左；四个方向值*/

4.3、margin 设置块级元素水平居中¶

TIP

将块级元素的 margin 属性的左右值同时设置为 auto，就可以实现元素在水平方向居中显示。

margin: 20px auto; /*上下外边距20px 水平居中显示*/
margin: 10px auto 20px; /*上20px 水平居中 下20px*/

案例

<style type="text/css">
  .box1 {
    width: 100px;
    height: 100px;
    border: 5px solid red;
  }
  .box2 {
    width: 50px;
    height: 50px;
    background-color: skyblue;
    margin: 10px auto; /*上下外边距10px 水平方向居中*/
    /* margin:20px auto 10px; */
  }
</style>
<body>
  <div class="box1">
    <div class="box2">1</div>
  </div>
</body>

![[Pasted image 20260225103853.png]]

提示：

div 块级元素水平居中，是给元素自身加上 margin:0 auto;
margin:auto 20px;这样写，并不会垂直居中
温馨提示：文字水平、图片水平居中用：text-align:center

4.4、margin 的塌陷¶

TIP

margin 塌陷也叫：外间距重叠或外边距合并或外边距穿透

① 兄弟元素之间，垂直方向：上下外边距出现塌陷

TIP

垂直方向的 margin 有塌陷现象，上一个元素的下外边距与下一个元素的上外边距会发生合并
小的 margin 会塌陷到大的 margin 中，从而 margin 不叠加，只以大值为准
以下两盒子之间间距为 100px，垂直方向的 margin 不叠加，以大数为准 ![[Pasted image 20260225103949.png]]

<style>
  .box {
    width: 200px;
    height: 100px;
  }
  .box1 {
    background-color: skyblue;
    /*下外边距 100px */
    margin-bottom: 100px;
  }
  .box2 {
    background-color: gold;
    /* 上外边距 50px */
    margin-top: 50px;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

解决办法：

方法一 任何一个元素加上 display:inline-block;
方法二 把外边距只加在其中一个元素上
方法三 选择把任意一个元素的外边距换成对应的 padding

② 父子元素之间，垂直方向：上外边距塌陷

TIP

当一个元素包含在另一个元素中时，如果父元素没有设置内边距或边框把外边距分隔开，它们的上外边距也会发生塌陷（合并）

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: gold;
    /* 父元素的上外边距 */
    margin-top: 20px;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: skyblue;
    /* 子元素的上外边距，此时父子元素的上边距发生塌陷（合并），最终上外边距的结果为 50px */
    margin-top: 50px;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

TIP

.item的 margin-top:50px;发生了穿透现象（塌陷）

穿透了父元素，并与父元素上外边距发生合并，合并后以最大的值为主。
所以看到的间距并不 .item与 .box的间距，而是 .box与浏览器上面产生了 50px的间距 ![[Pasted image 20260225104134.png]]

解决方案

方法一 ：给父元素加上 overflow: hidden;
方法二 ：给父元素添加透明的 border边框
方法三 ：将子元素的上外边距去掉，改成给父元素添加上内边距来实现两者的上间距。

还有更多方法，等我们后面学完浮动，定位之后再来讲解。

4.5、margin 负值¶

TIP

关于 margin 负值问题，我们留在 float 浮动学完后再学习。