CSS 尺寸：Dimension

---

CSS 尺寸

CSS支持多种尺寸单位，包括像素（px）、百分比（%）、厘米（cm）、毫米（mm）、英寸（in）、视口高度或宽度的1/100（vh、vw）以及字体尺寸单位（em、rem、pt、pc）。

可以根据需求选择合适的单位，例如：

• px：绝对大小单位，固定不变。
• em：相对大小单位，相对于当前元素字体大小。
• rem：相对大小单位，相对于根元素字体大小。
• %：相对大小单位，相对于父元素的百分比。
• vw/vh：视口单位，分别为视口宽度的1/100和视口高度的1/100。
• in/cm/mm：实际尺寸单位，分别为英寸、厘米和毫米。
• pt/pc：字体尺寸单位，分别为磅和派卡。

在设置元素的宽度、高度、溢出等属性时，可以选择以上尺寸单位进行控制。

示例

1，设置元素高度

可以使用CSS的height属性来设置元素的高度。以下是一些示例：

1. 设置元素的高度为200像素：

.element {
    
    
  height: 200px;
}

2. 设置元素的高度为父元素高度的50%：

.element {
    
    
  height: 50%;
}

3. 设置元素的高度为视口高度的50%：

.element {
    
    
  height: 50vh;
}

4. 设置元素的高度为10em（相对大小单位）：

.element {
    
    
  height: 10em;
}

2，使用百分比设置图像高度

可以使用CSS的height属性来设置图像的高度，并且可以使用百分比来指定相对于其父元素的高度。以下是一个示例：

img {
    
    
  height: 50%;
}

在这个示例中，图像的高度将设置为其父元素高度的50%。如果父元素的高度为400像素，则图像的高度将为200像素。请注意，这可能会导致图像的宽度和高度不成比例，因此可能需要使用object-fit属性来控制图像的适应方式。

3，使用像素值设置元素宽度

可以使用CSS的width属性来设置元素的宽度，并且可以使用像素值来指定具体的宽度。以下是一个示例：

.element {
    
    
  width: 200px;
}

在这个示例中，元素的宽度将设置为200像素。请注意，这可能会导致元素的宽度和高度不成比例，因此可能需要使用height属性来控制元素的高度。

4，设置元素的最大高度

可以使用CSS的max-height属性来设置元素的最大高度。以下是一个示例：

扫描二维码关注公众号，回复： 16803994 查看本文章

.element {
    
    
  max-height: 200px;
}

在这个示例中，元素的最大高度将设置为200像素。如果元素的内容超出了这个高度，将会出现滚动条或者内容被裁剪。请注意，这并不会影响元素的宽度，因此可能需要使用width属性来控制元素的宽度。

5，使用百分比来设置元素的最大宽度

可以使用CSS的max-width属性来设置元素的最大宽度，并且可以使用百分比来指定相对于其父元素的宽度。以下是一个示例：

.element {
    
    
  max-width: 50%;
}

在这个示例中，元素的最大宽度将设置为其父元素宽度的50%。如果元素的内容超出了这个宽度，将会出现滚动条或者内容被裁剪。请注意，这并不会影响元素的高度，因此可能需要使用height属性来控制元素的高度。

6，设置元素的最低高度

可以使用CSS的min-height属性来设置元素的最低高度。以下是一个示例：

.element {
    
    
  min-height: 200px;
}

在这个示例中，元素的最低高度将设置为200像素。如果元素的内容不足这个高度，将会出现空白空间。请注意，这并不会影响元素的宽度，因此可能需要使用width属性来控制元素的宽度。

7，使用像素值设置元素的最小宽度

可以使用CSS的min-width属性来设置元素的最小宽度，并且可以使用像素值来指定具体的宽度。以下是一个示例：

.element {
    
    
  min-width: 200px;
}

在这个示例中，元素的最小宽度将设置为200像素。如果元素的内容不足这个宽度，将会出现空白空间。请注意，这并不会影响元素的高度，因此可能需要使用height属性来控制元素的高度。

CSS 尺寸属性

属性	描述
width	设置元素的宽度。值可以是绝对大小（如像素或点）、相对大小（如百分比）或内容的大小（例如，auto）。
height	设置元素的高度。值可以是绝对大小、相对大小或内容的大小（例如，auto）。
max-width	设置元素的最大宽度。值可以是绝对大小、相对大小或固定大小（例如，none）。
max-height	设置元素的最大高度。值可以是绝对大小、相对大小或固定大小（例如，none）。
min-width	设置元素的最小宽度。值可以是绝对大小、相对大小或固定大小（例如，auto）。
min-height	设置元素的最小高度。值可以是绝对大小、相对大小或固定大小（例如，auto）。
box-sizing	确定元素的宽度和高度如何计算。可选值包括content-box（默认值）和border-box。
aspect-ratio	确定元素的宽高比。值是宽度除以高度的比例。例如，16 / 9表示宽高比为16:9。
object-fit	确定如何适应替换元素的内容到其指定的高度和宽度。可选值包括fill、contain、cover、none和scale-down。
object-position	确定替换元素的内容相对于其边界框的位置。可以使用像素值或位置关键字（如center）。