宽度单位

在CSS中，width 属性用于设置元素的宽度。它可以采用多种单位来指定尺寸。以下是一些常用的单位：

  1. 像素 (px)：最常见的单位，以像素为单位指定宽度。

    1.element {
2  width: 100px;
3}

  2. 百分比 (%)：根据父元素的宽度来指定宽度的百分比。

    1.element {
2  width: 50%;
3}

  3. em：相对于元素的字体尺寸来指定宽度。如果父元素的字体大小为16px，那么1em等于16px。

    1.element {
2  width: 10em;
3}

  4. rem：相对于根元素（<html>）的字体尺寸来指定宽度。

    1.element {
2  width: 5rem;
3}

何时在CSS中使用em和 rem 单位

对字体大小、边距和填充等全局值使用 rem 单位是一个好主意，特别是想为整个文档指定一个字体大小并让它统一缩放而不是受字体影响父元素的大小。
em 更适合特定于特定元素及其子元素的值。 这可以建立一致且灵活的布局，以适应不同的屏幕尺寸和字体大小。

在CSS中使用em和 rem 单位的潜在问题

em 和 rem 是目前指定长度时使用的最佳单位，以下是在使用 em 和 rem 时可能会遇到的几个问题：

复杂的计算：使用 em 和 rem 单位会导致复杂的计算，尤其是当涉及嵌套元素时。 这会使准确预测和控制页面上元素的大小变得困难。

继承问题： 因为 em 单位是相对于其父元素的字体大小的，所以很难理解和控制如何在页面上继承大小。 这可能会导致意外结果，需要额外调试才能解决。

性能问题：在极少数情况下，使用 em 和 rem 单位会对性能产生负面影响，尤其是在与复杂计算结合使用或在页面上过度使用时。

  1. vw：视口宽度的百分比，100vw 等于视口的宽度。

    1.element {
2  width: 50vw;
3}

  2. vh：视口高度的百分比，100vh 等于视口的高度。

    1.element {
2  width: 25vh;
3}

  3. cm：厘米。

    1.element {
2  width: 10cm;
3}

  4. mm：毫米。

    1.element {
2  width: 20mm;
3}

  5. in：英寸，1英寸等于2.54厘米。

    1.element {
2  width: 1in;
3}

  6. pt：点，主要用于打印文档。1点等于1/72英寸。

    1.element {
2  width: 72pt;
3}

  7. pc：派卡（Pica），主要用于打印文档。1pc 等于 12点。

    1.element {
2  width: 1pc;
3}

  8. ch：字符宽度，0（数字零）的宽度。

    1.element {
2  width: 5ch;
3}

  9. ex：相对于当前字体尺寸的x-height（小写字母x的高度）。

    1.element {
2  width: 3ex;
3}

  10. fr：用于网格布局，表示可用空间的分数。

    1.grid-container {
2  display: grid;
3  grid-template-columns: 1fr 2fr 1fr;
4}

  11. auto：浏览器自动计算元素的宽度。

    1.element {
2  width: auto;
3}

这些单位可以根据不同的需求和上下文来使用，以实现响应式设计和灵活的布局。