CSS3 框大小学习笔记

CSS3 提供了多种方式来控制 HTML 元素的框大小，这些方式包括长度单位、百分比和计算值等。

长度单位

CSS3 支持多种长度单位，例如：

• 像素（px）：最常用的长度单位，1 像素相当于屏幕上的一个点。
• 厘米（cm）：相对于厘米尺寸的单位，1 厘米等于 96 像素。
• 毫米（mm）：相对于毫米尺寸的单位，1 毫米等于 1/10 厘米。
• 英寸（in）：相对于英寸尺寸的单位，1 英寸等于 2.54 厘米。
• 点（pt）：印刷业常用单位，1 点等于 1/72 英寸。
• 派博（pc）：印刷业常用单位，1 派博等于 12 点。

以下是一些使用长度单位设置元素框大小的实例：

cssCopy Code
div {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

img {
  width: 50%;
  height: auto;
}

上述代码中，div 元素的宽度为 200 像素，高度为 100 像素，同时还定义了边框。img 元素的宽度是其父元素宽度的 50%，高度根据图片宽高比自动计算。

百分比

CSS3 中还支持使用百分比来设置元素框大小。当使用百分比时，元素的尺寸将相对于其父元素确定。

以下是一些使用百分比设置元素框大小的实例：

cssCopy Code
div {
  width: 50%;
  height: 50%;
  border: 1px solid black;
}

img {
  max-width: 100%;
  height: auto;
}

上述代码中，div 元素的宽度和高度都为其父元素宽度和高度的 50%，同时还定义了边框。img 元素的宽度最大为其父元素宽度的 100%，高度根据图片宽高比自动计算。

计算值

CSS3 中还支持使用计算值来设置元素框大小。计算值由加、减、乘、除和取余等运算组成，可以在设置元素框大小时非常方便地实现复杂的布局效果。

以下是一些使用计算值设置元素框大小的实例：

cssCopy Code
div {
  width: calc(50% - 20px);
  height: calc(100vh - 200px);
  border: 1px solid black;
}

上述代码中，div 元素的宽度为其父元素宽度的 50% 减去 20 像素，高度为视口高度减去 200 像素，同时还定义了边框。

以上就是 CSS3 框大小的学习笔记。