盒子模型超详解——大佬不用看，新手看过来

Posted 2020-12-14 zyx110

盒子模型

一、盒子模型介绍

什么是盒子模型？

CSS盒子模型就是在CSS技术中所使用的一种思维模型。CSS假定所有的html文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。

所有的HTML元素可以看做盒子，它包括：外边距、边框、内填充和实际内容。

但是这样说实在是太官方了，对新手很不友好，我个人也不喜欢这样描述。

举个例子

在日常生活中，我们经常能看到一些精美的包装盒

 

 

在中秋节的时候，大家都吃过月饼，那些月饼的包装真是好看啊，有时候都不舍得拆包装，但拆开包装后你会发现，其实真正装的月饼没几个，价格还特别贵，感觉就是在卖包装。

 

 

闲话少说，直奔主题，在包装盒中就装着如下图所示的两个小月饼盒，看着是不是还不错啊。

 

 

我们可以把这个小月饼盒看作是页面中的一个元素，比如div元素，里面的月饼就是盒子模型的实际内容(content)，这个实际内容可以是文字，也可以是图片，还可以是另外一些标签元素。

 

 

我们把月饼盒到月饼之间的距离叫盒子模型的内填充，在CSS中的样式中叫padding

 

 

而月饼盒与另一个月饼盒之间距离叫盒子模型的外边距,在CSS中的样式中叫margin

 

 

月饼盒最外层，也就是下图中黄色的部分叫盒子模型的边框，在CSS中的样式中叫border

 

 

所以到这，我们都应该知道，原来，我们之前所学习的HTML的标签元素都是具备实际内容，包含了一些文字、图片以及一些其他的标签元素，并且，还有所谓的border、padding、margin，而这些就构成了我们现在所说的盒子模型。

我们之前所学的很多如下图所示的块级元素它们都具备盒子模型的特征。

 

 

二、盒子模型的属性介绍

 

 

 

 

大家看到上面的代码图片以及网页显示图片了吧，我来说明一下：

首先有一个div标签，里面设置了长度、宽度、内边距、背景颜色以及边框等属性。 其实别的一些属性不难理解，后面我也会讲到，在这我就想跟大家强调一个内容：

我们看到div中设置的宽度为200px，但这个宽度不是盒子的实际宽度，而是盒子内容的宽度。

那此时盒子的实际宽度又是多少呢？

盒子的实际宽度=盒子左右两边边框的宽度(3px*2)+左右两边的内边距(50px*2)+盒子内容的宽度(200px)=306px。

基本属性介绍：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

 

 

Padding(填充)

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

• padding-top：设置元素的顶部填充
• padding-bottom：设置元素的底部填充
• padding-left：设置元素的左部填充
• padding-right：设置元素的右部填充

Padding属性，也可以用一到四个值表示上下左右的内边距：

• padding:25px 50px 75px 100px;

  • 上填充为25px
  • 右填充为50px
  • 下填充为75px
  • 左填充为100px

• padding:25px 50px 75px;

  • 上填充为25px
  • 左右填充为50px
  • 下填充为75px

• padding:25px 50px;

  • 上下填充为25px
  • 左右填充为50px

• padding:25px;

  • 所有的填充都是25px

Margin(外边距)

CSS margin(外边距)属性定义元素周围的空间。

• margin-top：设置元素的上外边距。
• margin-bottom：设置元素的下外边距。
• margin-left：设置元素的左外边距
• margin-right：设置元素的右外边距。

Margin属性，也可以用一到四个值表示上下左右的内边距：

• margin:25px 50px 75px 100px;

  • 上边距为25px
  • 右边距为50px
  • 下边距为75px
  • 左边距为100px

• margin:25px 50px 75px;

  • 上边距为25px
  • 左右边距为50px
  • 下边距为75px

• margin:25px 50px;

  • 上下边距为25px
  • 左右边距为50px

• margin:25px;

  • 所有的4个边距都是25px

Border属性

边框样式(border-style 值)

 

 

border-style属性可以有1-4个值：

• border-style:dotted solid double dashed;

  • 上边框是 dotted
  • 右边框是 solid
  • 底边框是 double
  • 左边框是 dashed

• border-style:dotted solid double;

  • 上边框是 dotted
  • 左、右边框是 solid
  • 底边框是 double

• border-style:dotted solid;

  • 上、底边框是 dotted
  • 右、左边框是 solid

• border-style:dotted;

  • 四面边框是 dotted

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

清除默认样式

border:none;
或者
border:0;
复制代码

清除外线

outline:none;
复制代码

清除HTML标签元素的默认样式

 

 

盒子居中显示