css盒子模型

最新推荐文章于 2024-10-02 15:35:50 发布

Asia20010701

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量154

点赞数 1

分类专栏： CSS学习笔记文章标签： css css3 前端 html5 云原生

本文链接：https://blog.csdn.net/m0_46349460/article/details/126032632

版权

CSS学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS盒子模型

一、盒子模型简介

TIP

所有 HTML 标签都可以看成矩形盒子，具有（盒子模型）结构。
盒模型由 4 个部分组成，分别是： content、padding 、border、margin
盒模型有 5 个属性： width 宽、height 高、border 边框、padding 内边距、margin 外边距
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8nCW1Pa9-1658984317282)(./images/boxModel.png)]

注：
width、height不是盒子总宽度
在标准盒模型下，盒子模型的 content 部分就是元素的 width 和 height 属性组成的矩形部分。

简单盒模型

<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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CgExFxzJ-1658984317292)(images/simple_boxModel.png)]

二、盒模型的属性

包含内容：

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

1、width 和 height 属性 - 宽和高

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

① width 属性

TIP

当块级元素（div、h 系列、li系>列）没有设置 width 属性时，它将自动撑满，但并不意味着 width 可以继承

<style>
  /* box1 不设置width宽度，由于div是块级元素，能够自动撑满 */
  .box1 {
    height: 100px;
    background-color: skyblue;
  }
  /* 如果不是块级元素，设置或不设置宽度，都无法撑满 */
  a {
    height: 100px;
    background-color: red;
  }
</style>

<body>
  <h2>width 属性</h2>
  <p>
    当块级元素（div、h系列、li系列 ...... 等）没有设置 width
    属性时，它将自动撑满 ，但并不意味着 width 可以继承
  </p>

  <div class="box1"></div>

  <p>如果不是块级元素，设置或不设置宽度，都无法撑满</p>
  <a href="#">我是超级链接a标签</a>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bgZKGpEW-1658984317295)(images/boxModel_width.png)]

② height 属性

TIP

盒子的 height 属性如果不设置，它将自动被其内容撑开
如果没有内容，则 height 默认是 0

<style>
  /* 
  box2 如果不设置 height高度，默认是0。且没内容时，页面则不显示
  如果有内容，能够被内容自动撑起来  
  */
  .box2 {
    width: 200px;
    background-color: yellow;
  }
</style>

<body>
  <h2>height 属性</h2>
  <p>
    box2 如果不设置
    height高度，默认是0。且没内容时，页面则不显示。如果有内容，能够被内容自动撑起来
  </p>

  <div class="box2">我是内容内容内容内容内容内容内容内容内容内容</div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rZ7SYeqN-1658984317297)(images/boxModel_height.png)]

③ 总结：width 和 height 的特性

块级元素

当块级元素（如：div，p，li，h1-h6 …）等没有设置 width 属性时，盒子的宽度会自动撑满他的父元素。但并不意味着 width 可以继承，width 是无法继承的。
高度在没有设置时，其高度为内容高，如果内容为空，则高度为 0
支持宽高属性的设置

<style>
  p {
    background-color: skyblue;
  }
  div {
    width: 400px;
    height: 50px;
    background-color: tomato;
  }
  span {
    width: 400px; /*不生效*/
    height: 50px; /*不生效*/
    background-color: yellow;
  }
</style>
<body>
  <p>p标签为块级元素，独占一行，默认宽度同父元素宽一样（内容宽）</p>
  <div>div是块级元素，我独占一行，同时支持宽高设置</div>
  <span>span元素，我是内联元素，我的宽高由内容决定，不支持宽高属性</span>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81uT6MBg-1658984317299)(images/shuxing.png)]

2、border 属性 - 边框

border属性三要素

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

常见线型	描述
`solid`	实线
`dashed`	虚线
`dotted`	点状线
`double`	双边框
`grove`	定义3D凹槽边框，效果取决于border-color值
`ridge`	定义3D垄断边框，效果取决于border-color值
`inset`	3D inset 边框，其效果取决于 border-color 的值。
`outset`	3D outset 边框，其效果取决于 border-color 的值。
`

|`hidden`|	隐藏边框|
![](images/border_attribute.png)

#### **① 边框的三要素小属性**

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

> **注:**
>    
> 小属性是为了层叠大属性用的  
<br>

```html
<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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k7P6ijft-1658984317301)(images/1.png)]

② 四个方向的边框

属性	描
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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YU21lo7k-1658984317303)(images/four_border.png)]

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

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

③ 四个方向的边框的三要素小属性

属性	描述
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>
  div {
    width: 120px;
    height: 120px;
    border: 5px solid skyblue;
    float: left;
    margin: 10px;
  }

  /* 需要单独设置某个值是：使用小属性覆盖大属性 */
  .box {
    border-top-color: red;
    border-left-style: dashed;
    border-bottom-width: 10px;
  }
</style>

<body>
  <div></div>
  <div class="box"></div>
  <div></div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dIIvuTPy-1658984317304)(images/four-border-little_attribute.png)]

④ 去掉边框

border-left: none; 即：去掉左边框

/* 去掉右边框 */
border-right: none;

⑤ 边框应用场景 - 制作三角形

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m341gaqQ-1658984317306)(images/border-applicatedto-maketri.png)]

<style>
  .box1 {
    width: 0;
    height: 0;
    /* transparent 是透明色 */
    border: 30px solid transparent;
    border-top-color: red;
  }

  .box2 {
    width: 0;
    height: 0;
    /* transparent 是透明色 */
    border: 30px solid transparent;
    border-right-color: red;
  }

  .box3 {
    width: 0;
    height: 0;
    /* transparent 是透明色 */
    border: 30px solid transparent;
    border-bottom-color: red;
  }

  .box4 {
    width: 0;
    height: 0;
    /* transparent 是透明色 */
    border: 30px solid transparent;
    border-left-color: red;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</body>

⑥ 圆角 border-radius 属性

border-radius 属性的值通常为 px单位，表示圆角的半径

border-radius: 10px;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4tttj8KQ-1658984317309)(images/tri-border-radius.png)]

<style>
  div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin: 20px;
    float: left;
  }

  .box1 {
    border-radius: 10px;
  }

  .box2 {
    border-radius: 20px;
  }

  .box3 {
    /* 圆，正方形宽度的50% */
    border-radius: 50%;
  }

  .box4 {
    /* 圆：直接给数值，正方形宽度的一半即：圆的半径 */
    border-radius: 50px;
  }
</style>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</body>

单独设置四个圆角

/* 分别代表：上 右 下 左 四个值 */
border-radius: 10px 20px 30px 40px;

小属性

属性	描述
border-top-left-radius	左上角
border-top-right-radius	右上角
border-bottom-left-radius	左下角
border-bottom-right-radius	右下角

<style>
  .box {
    border-radius: 30px;
    /* 右下角 */
    border-bottom-right-radius: 0;
  }
</style>

<body>
  <div class="box"></div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1lp4XbF-1658984317310)(images/border-radius-little-attribute.png)]

以百分比为单位

border-radius 属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里
正方形盒子设置border-radius: 50%; 为正圆形
长方形盒子设置 border-radius: 50%; 为椭圆形，不能用 px 为单位

3、padding 属性 - 内边距

TIP

padding 是盒子的内边距，即边框内壁到内容之间的距离
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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDEODW4i-1658984317312)(./images/padding_attribute.png)]

4、padding 的不同数值写法

TIP
从不同数值写法中找规律，总结快速记忆的方法

① padding 的四数值写法

TIP

padding属性如果用四个值以空格隔开进行设置
分别表示（上、右、下、左）的padding
padding:上、右、下、左;
padding: 10px 20px 30px 40px;
快速记忆：

按照顺时针方向：上右下左即可

② padding 的三数值写法

TIP

padding属性如果用三个数值用空格隔开进行设置
分别表示（上、左右、下）的padding（内边距）
padding：上左右下；
padding: 10px 20px 30px;
快速记忆：

还是上右下左，左没有，就跟右一样，即：上左右下

③ padding 的二数值写法

TIP

padding 属性如果二个数值以空格隔开进行设置
分别表示（上下、左右）的 padding（内边距）
padding: 上下左右;
padding: 10px 20px;
快速记忆：

还是上右下左，下没有，就跟上一样，左没有，就跟右一样
即：上下，左右

④ padding 的一数值写

/* 上右下左内边距都是10px */
padding: 10px;

⑤ padding 属性应用场景

如果需要设置父子间间距，即给父元素添加内边距来实现

⑥ 快速灵活设置 padding 属性

/* padding: 上下30px 左右为0 */
padding: 30px 0;

/* padding: 上30px 左右10px 下20px */
padding: 30px 10px 20px;

/* padding: 上30px 左右10px 下0 */
padding: 30px 10px 0;

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

	更推荐（小属性层叠大属性）写法
*/
padding: 40px;
padding-bottom: 0;

padding 大小属性的最佳实践：

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

<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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PgeeAkCC-1658984317314)(images/padding2.png)]

5、margin 属性 - 外边距

TIP

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h35bwI0M-1658984317315)(images/margin1.png)]

margin 有四个方向

属性	描述
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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PMADQaRe-1658984317317)(images/margin-four-towards.png)]

6、margin 的不同数值写法

TIP
与padding的数值写法类同

① margin 的四数值写法

TIP

margin 属性如果用四个数值以空格隔开进行设置
分别表示（上、右、下、左）的 margin（外边距）
margin: 上右下左;
margin: 10px 20px 30px 40px;
快速记忆：

按照顺时针方向：上右下左即可

② margin 的三数值写法

TIP

margin 属性如果用三个数值以空格隔开进行设置
分别表示（上、左右，下）的 margin（外边距）
margin: 上左右下;
margin: 10px 20px 30px;
快速记忆：

还是上右下左，左没有，就跟右一样，即：上左右下

③ margin 的二数值写法

TIP

margin 属性如果二个数值以空格隔开进行设置
分别表示（上下、左右）的 margin（外边距）
margin: 上下左右;
margin: 10px 20px;
快速记忆：

还是上右下左，下没有，就跟上一样，左没有，就跟右一样
即：上下，左右

④ margin 的一数值写法

/* 上右下左外边距都是10px */
margin: 10px;

7、margin 的塌陷

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

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

TIP

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jf2pYCy1-1658984317318)(images/margin_overlap.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

② margin 在水平方向：不会塌陷

TIP

margin 在水平方向不会塌陷
margin 在垂直方向出现塌陷

<style>
  span {
    border: 1px solid red;
  }

  /* 
    margin在水平方向不会塌陷
    span标签之间的距离为: 两者之和 80px 
  */
  .span1 {
    margin-right: 30px;
  }
  .span2 {
    margin-left: 50px;
  }

  /* 
    margin在竖直方向出现塌陷
    box1,box2 两盒子之间间距为 100px
    竖直方向的margin不叠加，以大数为准 
  */
  .box1 {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    margin-bottom: 100px;
  }

  .box2 {
    width: 200px;
    height: 100px;
    background-color: gold;
    margin-top: 50px;
  }
</style>

<body>
  <h1>margin 属性</h1>

  <h2>margin在水平方向：不会塌陷</h2>
  <span class="span1">我是span标签</span><span class="span2">我是span标签</span>

  <h2>margin在垂直方向：出现塌陷</h2>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tCbgbEdA-1658984317320)(images/margin2.png)]

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

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 的间距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GS4kg55X-1658984317322)(images/margin3.png)]

解决方案：

给父元素加上 overflow: hidden;
给父元素添加 border 边框
将子元素的 margin 改成 padding
可以给父元添加对应的子元大小的 padding 值
还有更多方法，等我们后面学完浮动，定位之后再来讲解。

8、margin 负值

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

9、去掉元素的默认样式

TIP
网页中的元素为了展示元素本身的用途和结构，都会给元素添加默认的样式。

一些元素都有默认的 margin，如下常见的默认样式
h、body、ul、p 标签，都添加了默认的 margin。
ul 添加了默认的 padding、list-style
a 标签添中了默认的颜色、下划线
等等 … （后续在项目开发中还会深入所有标签的默认样式）

我们在实际的网页开发中，要将这些默认的样式清除掉，也称之为 “CSS 样式的初始化”
* 通配符选择器，表示选择所有元素（通配符有效率问题，实际工作中不使用）

10、盒子的水平居中

TIP
将盒子的左右两边的 margin 都设置为 auto ，盒子将水平居中。共有两种方法：

/* 方式一， margin: 上下0 ，左右自动 */
.box {
margin: 0 auto;
}
/* 
方式二，margin: 上10px 水平居中 下0px 
第二种方法的应用场景在于，需要当前盒子距离顶部 10px, 水平居中对齐，距离底部>0px 类似这样的需求时使用
*/
.box {
margin: 10px auto 0;
}

盒子垂直居中，需要使用绝对定位技术实现（后边会讲到）

<style>
  section {
    width: 300px;
    height: 200px;
    background-color: salmon;
    /* 盒子水平居中 */
    /* margin: 0 auto; */
    /* margin: 上150px 水平居中对齐 下0px */
    margin: 150px auto 0;
    /* 文本内容水平居中 */
    text-align: center;
    /* 文本内容垂直居中 */
    line-height: 200px;
  }
</style>

<body>
  <section>我是文档区域标签</section>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cg68fKsM-1658984317323)(images/box-center.png)]

注：

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

11、盒子模型占位计算

TIP
盒模型的内容区大小，可视宽高，盒模型实际占位宽度

① 盒模型的内容区大小

在标准盒子模型中
content 内容区，也就是盒子里面能留给子元素的宽度和高度大小,也就意味着盒子里面的内容的最大面积就是 width 和 height 形成的矩形面积。
如果只有一个子元素，子元素的宽度超过父元素，就会溢出

如果有多个子元素，子元素（行内元素，行内块元素）的宽度加起来>- 超过了父元素，那么超过的那些子元就会换行显示

<style>
  div {
    /* 盒模型内容区大小 */
    width: 200px;
    height: 200px;
    background-color: gold;
    /* 边框 */
    border: 20px solid skyblue;
    /* 内边距 */
    padding: 50px;
    /* 外边距 */
    margin: 30px;
  }
</style>
<body>
  <div class="box">
    内容区，内容区内容区，内容区内容区，内容区内容区，内容区
  </div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2mSxOIpt-1658984317325)(images/box1.png)]

② 盒模型可视宽高

TIP

可视区宽 = 宽度 + 左右内边距 + 左右边框宽
可视区高 = 高度 + 上下内边距 + 上下边框宽

③ 盒模型实际占位宽度

TIP

实际占位宽 = 宽度 + 左右内边距 + 左右边框宽 + 左右外边距
实际占位高 = 高度 + 上下内边距 + 上下边框宽 + 上下外边距

<style>
  .box {
    /* 内容区宽 */
    width: 100px;
    /* 内容区高 */
    height: 150px;
    /* 边框线 */
    border: 2px dashed #333;
    /* 内边距 */
    padding: 10px;
  }
  .box1 {
    /* 内容区宽 */
    width: 70px;
    /* 内容区高 */
    height: 120px;
    /* 边框线 */
    border: 5px solid skyblue;
    /* 内边距 */
    padding: 10px;
    /* 背景色 */
    background-color: gold;
  }
</style>
<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>