CSS 宽度和高度
width和height属性用于设置元素的宽度和高度。
width和height属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的宽度和高度。
下面是通过width和height属性，来设置宽度和高度的演示效果：
此元素的宽度为 100％，高度为 150 像素
- 宽度 100%
- 高度 150px
CSS 宽度和高度值
width和height属性可设置如下值：
- 默认值：
auto默认值，浏览器自动计算元素的宽度或高度。 - 固定单位值：通过具体单位（如
px、cm、em、rem等）显式定义宽度或高度。 - 百分比：
%百分比，相对于父容器的对应属性值计算。 - 初始值：
initial初始值，将属性重置为 CSS 规范定义的默认值（非浏览器默认样式）。 - 继承值：
inherit继承值，从父元素继承对应的属性值。
CSS 设置 max-width
max-width属性用于限制元素的最大宽度，max-height属性同理。
max-width属性常用于响应式布局，确保元素在屏幕上不会变得过大。使用max-width属性能够改善浏览器对小窗口的处理。
width>max-width时，max-width会限制最大宽度，最终宽度以max-width为准。width<max-width时，max-width未达到最大值，不会生效，最终宽度以width为准。
下面是在设置了max-width和max-height固定值的情况下，来设置宽度和高度的演示效果：
蓝色背景 {width: 100%; height:150px;}
黄色背景 {max-width: 100%; max-height:150px;}
- 宽度 100%
- 高度 150px
更多实例
- 设置元素的宽度和高度
- 本例演示如何设置不同元素的宽度和高度。
- 使用百分比设置图像的宽度和高度
- 本例演示如何使用百分比值设置图像的宽度和高度。
- 设置元素的最小宽度和最大宽度
- 本例演示如何使用像素值设置元素的最小宽度和最大宽度。
- 设置元素的最小高度和最大高度
- 本例演示如何使用像素值设置元素的最小高度和最大高度。
CSS 尺寸属性
| 属性 | 描述 |
|---|---|
| width | 设置元素宽度 |
| height | 设置元素高度 |
| max-width | 元素最大允许宽度 |
| max-height | 元素最大允许高度 |
| min-width | 元素最小保持宽度 |
| min-height | 元素最小保持高度 |
评论区 0
发表评论
教程介绍
CSS 层叠样式表（Cascading Style Sheets），一种用于为 HTML 或 XML 添加样式的语言。
38
章节
310
阅读
0
评论