CSS 不是全宽 - CSS

当我们创建一个网页时，第一个想到的应该是设计页面的布局。在设计布局时，我们可以使用 CSS 来控制页面元素的宽度。但是，很多程序员往往存在误解，认为设置宽度时，元素会占满整个页面，但事实上，CSS 不是全宽。

什么是全宽？

在 Web 设计中，全宽指的是一个元素占满整个可视区域。可视区域指的是浏览器窗口中能够看到的网页区域。例如，一个内容区域为 800 像素的网页，如果浏览器窗口大小为 800 像素，那么这个内容区域就是全宽的。

CSS 中的宽度设置

在 CSS 中，我们可以通过设置宽度来控制元素的宽度。宽度可以使用像素（px），百分比（%）和 em 等单位来表示。

像素（px）

像素是最常用的 CSS 单位之一。一个像素通常被定义为屏幕上的一个点。在设置元素的宽度时，我们可以使用像素作为单位来指定元素的实际宽度，例如：

div {
  width: 800px;
}

上面的 CSS 代码将会将 div 元素的宽度设置为 800 像素。

百分比（%）

百分比是另一种常用的 CSS 单位。百分比单位是相对于父元素来计算的。例如，如果我们将父元素的宽度设置为 1000 像素，而子元素的宽度设置为 80%，则子元素的宽度将为 800 像素，即父元素宽度的 80%：

.parent {
  width: 1000px;
}

.child {
  width: 80%;
}

em

em 是相对于元素字体大小的单位。例如，如果我们将元素字体大小设置为 16 像素（也就是默认大小），而元素的宽度设置为 20 em，则元素宽度将为 320 像素：

element {
  font-size: 16px;
  width: 20em;
}

CSS 不是全宽

尽管我们可以使用 CSS 来控制元素的宽度，但是在实际应用中，CSS 并不是全宽的。具体来说，CSS 中的元素宽度并不包含元素的 margin、padding 和 border，这些都会增加元素的实际宽度。

例如，如果我们将一个元素的宽度设置为 800 像素，同时为元素添加 10 像素的 padding、margin 和 border，那么元素实际的宽度将为 840 像素，不是全宽的。

在实际应用中，我们应该注意到这一点，并根据实际情况来设置元素的宽度。

参考链接

• CSS Units
• Box Model