基础 CSS 标注尺寸

CSS 标注尺寸可以帮助我们方便、快捷地调整样式尺寸。这里介绍一些常用的 CSS 标注尺寸。

宽度

width

width 属性用于设置元素的宽度，一般用相对单位或百分比表示。

div {
  width: 100px;
}

div {
  width: 50%;
}

max-width

max-width 属性用于设置元素的最大宽度，一般用相对单位或百分比表示。

div {
  max-width: 500px;
}

div {
  max-width: 80%;
}

min-width

min-width 属性用于设置元素的最小宽度，一般用相对单位或百分比表示。

div {
  min-width: 100px;
}

div {
  min-width: 20%;
}

高度

height

height 属性用于设置元素的高度，一般用相对单位或百分比表示。

div {
  height: 100px;
}

div {
  height: 50%;
}

max-height

max-height 属性用于设置元素的最大高度，一般用相对单位或百分比表示。

div {
  max-height: 500px;
}

div {
  max-height: 80%;
}

min-height

min-height 属性用于设置元素的最小高度，一般用相对单位或百分比表示。

div {
  min-height: 100px;
}

div {
  min-height: 20%;
}

边框

border-width

border-width 属性用于设置元素的边框宽度，一般用相对单位或固定单位表示。

div {
  border-width: 1px;
}

div {
  border-width: 5px;
}

border-radius

border-radius 属性用于设置元素的边框圆角，一般用相对单位或固定单位表示。

div {
  border-radius: 5px;
}

div {
  border-radius: 50%;
}

字体

font-size

font-size 属性用于设置元素的字体大小，一般用相对单位或固定单位表示。

div {
  font-size: 16px;
}

div {
  font-size: 1.2rem;
}

组合

可以将多个 CSS 标注尺寸属性组合使用，实现更复杂的样式。

div {
  width: 80%;
  max-height: 500px;
  border-width: 2px;
  border-radius: 10px;
  font-size: 1.2rem;
}

以上就是基础 CSS 标注尺寸的介绍。当然这只是一些常用的属性，CSS 的尺寸属性还有很多其他的用法，可以根据需要进行使用。