了解CSS箱体模型

DebugUsery
273 阅读5分钟

了解CSS箱体模型

盒状模型是CSS和HTML中的一个基本概念。由于CSS中的所有内容都是由盒子组成的，因此了解CSS盒子模型的工作原理至关重要。

在本教程中，我们将了解CSS盒状模型的基本原理，以及为什么它被称为盒状模型。此外，我还将对盒状模型的行为有一个更好的理解。

什么是盒式模型？

一个或多个矩形框构成了每个可以在网页上显示的元素。CSS盒状模型解释了矩形框是如何在网页上显示的。

这些盒子可以有各种功能，并以各种方式相互作用，但它们都包含一个内容区，以及用于改变外观的可选填充、边框和空白区域。

控制盒状模型

让我们从盒状模型的布局开始，下面的附图描述了它。

css-box-model

框的样式

正如我们前面所说，我们可以通过调整内容、填充、边框和空白来改变盒子的HTML组件的外观。让我们来看看它们中的每一个。

内容

内容由文本、图像或其他形式的媒体的数据组成。width 和height 属性改变盒子的尺寸。虽然这是一个直接的定义，但应该强调的是，"内容 "也可以是指空的空间。例如，使用一个空的div 标签来为网页增加额外的独特设计，可以是很好的。

填充

填充是指内容的外缘与边界之间的间隙。padding属性可用于调整盒子的大小。Padding-left, padding-bottom, 和其他特定的边缘属性有助于获得自定义间距。

注意：你可以用一个值来表示整个盒子的padding，例如，padding: 35px; ，或者你可以给盒子的每一边一个值，例如，padding-left:25px; 。

我们来看看CSS中的一个padding的例子。

p {
    border-style: solid;
    border-color: red;
  }

由于没有为这个p标签设置padding，你将得到如下显示的结果。

padding

让我们给我们的p添加一些padding，看看结果如何。

p {
    padding: 35px;
    border-style: solid;
    border-color: red;
  }

这些是你将观察到的变化。

padding2

正如我们所看到的，段落内容和边框之间的额外填充被大大改变了。

边框

一个元素的边框是由padding的外边缘和margin的内边缘之间的距离定义的。它的宽度在默认情况下被设置为0。

border属性被用来指定一个元素的边界。单个边框也可以被定制。

以下是创建边框的三个基本属性。

  • border-style - 通常情况下，会使用以下关键词之一。, , 或 。solid dashed dotted
  • border-width - 告知浏览器边框应该有多大。对于这个属性，我们通常指定一个像素值，比如 。border-width: 15px;
  • border-color - 默认情况下，该值利用了文本的当前颜色。即使我们没有必要这样做，我们也喜欢定义它。例如， 。border-color: blue;

下面是这三个属性的基本例子。

border-width: 5px 10px 15px 20px; 
border-style: solid dashed dotted double; 
border-color: red green blue brown;

border

边距

Margin是CSS盒状模型外侧的部分。更简单地说，Margin是一个元素的框和其周围元素的框之间的距离。

这与页边距类似，页边距是一个页面的边界与内容之间的距离。它是半透明的，具有类似padding的功能，尽管它清除了元素边界外的空间。

单独的边缘，像padding一样，可以被设置为有一个特定的边距。

例如，margin-top: 15px; 。

例子

让我们看一个如何应用margin的例子。

<html>
<p>Am the first Box.</p>
<p>Am another Box.</p>

</html>
<style>

p {
    height: 150px;
    width: 150px;
    padding: 20px;
    border: 10px solid blue;
    margin: 15px;
}
</style>

上面的代码向我们展示了如何在两个方框之间应用空间。它用15px将两个盒子分开。

盒子的基本类型

  1. 块状方框。
  2. 内联框。

这是两种主要的方框类型。让我们来看看它们各自的情况。

块状框

默认情况下，块状框占据了容器的全部宽度。

<div> HTML元素是最流行的、用于块状框的HTML元素。

内联框

默认情况下，内联框占据了包装内容所需的空间。<span> HTML元素是最常使用的内联框元素。

<div>Am an Example of DIV</div>
<span>Am an Example of SPAN</span>

这是两种类型的图解介绍。

div-span

了解方框的大小

初学者通常会犯这样的错误，即认为元素的高度和宽度中包含了填充、边距和边框。这是不对的。

height 和width 属性让你定制一个网页元素内容区域的高度和宽度。网页上的其他组件并没有被考虑在内。

当我们编写HTML块宽度元素时，width: auto; ，其值默认等于行的宽度。然而，我们可以给HTML组件指定一个特定的宽度值，比如width: 200px; 。

宽度和高度的计算

我们需要做一个简单的计算，看看我们的整个盒子占据了多少空间。让我们看一个例子（让我们使用我们在上面的 margin 代码中提供的值）。

  • height: 150px;
  • 宽度：150px。
  • padding:20px。
  • 边框。10px纯蓝色。
  • margin: 15px。

我们使用下面的公式来计算宽度。

150px(Width) + 40(right and left padding) + 20px (right and left border) + 30px (right and left margin) = 240

为了计算高度，我们用高度的像素加上填充物、边框和空白的顶部和底部。

总结

在这篇文章中，我们看了盒子模型，我们看到它决定了一个盒子的内容、填充、边框和空白的外观。

avatar
文章
阅读
粉丝