在源码之家下载的网站模板可以作为自己的网站吗湖南网站网络推广哪家奿

盒模型

CSS盒模型是网页布局的核心概念之一，它描述了网页元素的物理结构和元素内容与周围元素之间的关系。根据W3C规范，每个HTML元素都被视为一个矩形盒子，这个盒子由以下四个部分组成：

1. 内容区（Content area）：

   • 这个区域包含了元素的实际内容，比如文本、图片等。

   • 它是由width和height属性定义的。

2. 内边距（Padding）：

   • 内边距位于内容区的四周，用来在内容和其他部分之间创建空间。

   • 它可以通过设置padding属性来调整，包括padding-top, padding-right, padding-bottom, 和 padding-left。

3. 边框（Border）：

   • 边框围绕着内边距和内容区，用来划分和装饰元素。

   • 可以通过border属性设置边框的样式、宽度和颜色。

4. 外边距（Margin）：

   • 外边距位于边框之外，用于分隔相邻的元素。

   • 可以通过margin属性控制，包括margin-top, margin-right, margin-bottom, 和 margin-left。

默认情况下，块级元素的宽度为父元素的100%，而高度则根据内容自动调整。但是，当设置了width和height时，这些尺寸只适用于内容区。如果需要考虑内边距、边框和外边距，则可以使用box-sizing属性。例如：

• box-sizing: content-box;（默认值）：width和height仅适用于内容区。

• box-sizing: border-box;：width和height包括内边距和边框。

理解盒模型对于正确地设计和调试网页布局至关重要。通过合理设置这四个部分，开发者可以精确地控制网页上各个元素的位置和外观。

什么是“盒子”

初学 CSS 的朋友，一开始学 CSS 基础知识的时候一定学过 padding border和margin，即内边距、边框和外边距。它们三者就构成了一个“盒子”。就像我们收到的快递，本来买了一部小小的手机，收到的却是那么大一个盒子。因为手机白色的包装盒和手机机器之间有间隔层（内边距），手机白色盒子有厚度，虽然很薄（边框），盒子和快递箱子之间还有一层泡沫板（外边距）。这就是一个典型的盒子。

如上图，真正的内容就是这些文字，文字外围有 10px 的内边距，5px 的边框，10px 的外边距。看到盒子了吧？

盒子模型的宽度如何计算

固定宽度的盒子

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》，文章言简意赅的介绍的浏览器的工作过程，web前端
</div>

如上图，得到网页效果之后，我们可以用截图工具来量一下文字内容的宽度。发现，文字内容的宽度刚好是 300px，也就是我们设置的宽度。

因此，在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + border宽度 + padding宽度 + margin宽度）之和。这样我们改四个中的其中一个，都会导致盒子宽度的改变。这对我们来说不友好。

没关系，这个东西不友好早就有人发现了，而且已经解决，下文再说。

充满父容器的盒子

默认情况下，div是display:block，宽度会充满整个父容器。如下图：

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》，文章言简意赅的介绍的浏览器的工作过程，web前端之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》，文章言简意赅的介绍的浏览器的工作过程，web前端
</div>

但是别忘记，这个 div 是个盒子模型，它的整个宽度包括（内容宽度 + border宽度 + padding宽度 + margin宽度），整个的宽度充满父容器。

问题就在这里。如果父容器宽度不变，我们手动增大margin、border或padding其中一项的宽度值，都会导致内容宽度的减少。极端情况下，如果内容的宽度压缩到不能再压缩了（例如一个字的宽度），那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。

包裹内容的盒子

这种情况下比较简单，内容的宽度按照内容计算，盒子的宽度将在内容宽度的基础上再增加（padding宽度 + border宽度 + margin宽度）之和。

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;">之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》
</div>

box-sizing:border-box

前面提到，为盒子模型设置宽度，结果只是设置了内容的宽度，这个不合理。如何解决这一问题？答案就是为盒子指定样式：**box-sizing:border-box**。

<div style="padding:10px; border:5px solid blue; margin: 10px; width:300px; box-sizing:border-box;">之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》
</div>

上图中，为div设置了box-sizing:border-box之后，300px 的宽度是内容 + padding + 边框的宽度（不包括margin），这样就比较符合我们的实际要求了。建议大家在为系统写 CSS 时候，第一个样式是：

* {box-sizing:border-box;
}

大名鼎鼎的 Bootstrap 也把box-sizing:border-box加入到它的*选择器中，我们为什么不这样做呢？

纵向 margin 重叠

这里提到 margin，就不得不提一下 margin 的这一特性——纵向重叠。如<p>的纵向 margin 是 16px，那么两个<p>之间纵向的距离是多少？—— 按常理来说应该是 16 + 16 = 32px，但是答案仍然是 16px。因为纵向的 margin 是会重叠的，如果两者不一样大的话，大的会把小的“吃掉”。