CSS盒子模型

最新推荐文章于 2024-05-18 06:08:21 发布

酥脆角

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量114

点赞数 2

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_70134200/article/details/129442063

版权

什么是盒子模型

盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与中的盒子又有点不同，这里的盒子是二维的。

盒子的组成

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（[内边距]、content（内容）。

margin（外边距）：可以控制盒子与其他盒子的距离

border（边框）：给盒子加边框可以撑大盒子

padding（内边距）：可以能改变盒子内容的位置，并撑大盒子的大小

content（内容）：自身的大小

盒子的大小

盒子的大小初学者可能会认为盒子的宽高就是盒子本身的大小，其实不然，宽和高只是设置内容部分的宽高的，并不是真正意义上的盒子大小。

盒子大小真正的计算公式：

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

一般内边距和边框都会撑大盒子，这样很页面影响布局，所以我们一般会用一个属性来解决这个问题。

box-sizing属性值，是解决盒子被撑大的

`content-box`：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。

`border-box`：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

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

当box-sizing：content-box时，这种盒子模型成为标准盒子模型，当box-sizing: border-box时，这种盒子模型称为IE盒子模型可以解决盒子被撑大问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自动内减</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: aqua;
      /* 给盒子加个边框 */
      border: 10px solid red;
      /* 给盒子加个内边距  上下左右为10px*/
      padding: 10px;
      /*border-box 表示自动內减外边距，边框的样式 */
      /* 若是注释掉就会撑大盒子 */
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

运行结果：

（若是不自减内边距和外边距会撑大盒子的）

盒子成分分析

margin（外边距）

margin 盒子的外边距，它是完全透明的，开发者只可以设置它的外边距。

margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

margin-top: 上边距;
margin-left: 左边距;
margin-right: 右边距;
margin-bottom: 下边距;

连写模式：margin: 像素; （最多可以写四个像素）

1、若是只写一个值表示上下左右四条边距相同

2、若是写两个值，第一个值表示上下边距第二个值表示左右边距

3、若是写三个值，第一个值表示上边距第二个值表示左右边距第三个值表示下边距

4、若是写四个值，第一个值表示上边距第二个值表示右边距第三个值表示下边距第四个值表示左边距

注意点：外边距塌陷现象

塌陷现象: 互相嵌套的块级元素,给子元素设置margin-top会作用在父元素身上,导致父元素一起往下移动

解决塌陷问题:

1.给父元素设置border-top

2.给父元素设置padding-top

3.给父元素设置overflow: hidden;(推荐使用)

4.转换为行内块元素

5.设置浮动(浮动的盒子不会有塌陷问题)

6.设置定位（定位的盒子不会有塌陷问题）

7.设置弹性盒（设置弹性盒的盒子不会有塌陷问题）

padding（内边距）

padding表示盒子的内边距。与外边距不同，padding不是完全透明的，可以设置背景颜色和图片。

与margin类似，padding也包含了上下左右四条边，开发者可以单独设置每一条边的边距。

padding-top: 上内边距;
padding-left: 左内边距;
padding-right: 右内边距;
padding-bottom: 下内边距;

既然说了跟上面margin类似那就说明连写模式和值也是差不多的，一个表示盒子外面的距离，一个表示盒子内部的距离。

border（边框）

border表示盒子的边框，它可以设置成可见的，样式多样的。

最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。

border-top: 上边框;
border-left: 左边框;
border-right: 有边框;
border-bottom: 下边框;

注意点：当border属性的色值不明确指定时，如border: 1px solid，边框颜色与当前元素的字体颜色color相同。

border连写属性：border: 粗细（数字+px）solid（实线）颜色;(可以任意颠倒顺序，不过推荐的顺序就是粗细样式颜色)

border-sytle属性可取值(边框样式)：

none：定义无边框。

hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted：定义点状边框。在大多数浏览器中呈现为实线。

dashed：定义虚线。在大多数浏览器中呈现为实线。

solid：定义实线。

double：定义双线。双线的宽度等于 border-width 的值。

groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。

inset：定义 3D inset 边框。其效果取决于 border-color 的值。

outset：定义 3D outset 边框。其效果取决于 border-color 的值。

inherit：规定应该从父元素继承边框样式。