3.1 属性 width
CSS 中块的尺寸在网页布局中起到重要作用。它们决定了元素如何显示和与周围元素的交互。现在我们来看看
width, height, max-width 和 max-height 属性，
用于设置块的尺寸。
width 属性指定元素的宽度。可以用不同计量单位设置，比如像素 (px), 百分比 (%), em, rem 等等。
值
- 自动值:
auto— 元素宽度依内容和环境自动确定 - 绝对单位:
px,pt,cm,mm,in等 - 相对单位:
%,em,rem,vw,vh等
使用示例：
CSS
.box {
background-color: #3498db;
color: white;
padding: 10px;
margin: 10px;
}
.box-fixed {
width: 200px;
}
.box-percentage {
width: 50%;
}
HTML
<div class="box box-fixed">固定宽度 (200px)</div>
<div class="box box-percentage">百分比宽度 (50%)</div>
代码解释：
.box-fixed: 固定宽度为 200 像素的元素.box-percentage: 宽度为父元素 50% 的元素
3.2 属性 height
height 属性指定元素的高度。也可以用不同的计量单位设置。
值：
- 自动值:
auto— 元素高度依内容和环境自动确定 - 绝对单位:
px,pt,cm,mm,in等 - 相对单位:
%,em,rem,vh,vw等
使用示例：
CSS
.container {
height: 300px;
}
.box {
color: white;
padding: 10px;
}
.box-fixed-height {
height: 150px;
background-color: #2ecc71;
}
.box-percentage-height {
height: 50%;
background-color: #7a5c71;
}
HTML
<div class="container">
<div class="box box-fixed-height">固定高度 (150px)</div>
<div class="box box-percentage-height">百分比高度 (50%)</div>
</div>
代码解释：
.box-fixed-height: 固定高度为 150 像素的元素.box-percentage-height: 高度为父元素 50% 的元素
3.3 属性 max-width
max-width 属性指定元素的最大宽度。这个限制防止元素扩展超出指定数值。
值：
- 无限制:
none— 元素可以扩展到任何宽度 - 绝对单位:
px,pt,cm,mm,in等 - 相对单位:
%,em,rem,vh,vw等
使用示例：
CSS
.box {
background-color: #e74c3c;
color: white;
padding: 10px;
margin: 10px;
}
.box-max-width {
width: 100%;
max-width: 300px;
}
HTML
<div class="box">宽度 100% (默认)</div>
<div class="box box-max-width">最大宽度 300px</div>
代码解释：
.box-max-width: 最大宽度为 300 像素的元素。内容不允许元素扩展超出 300 像素
3.4 属性 max-height
max-height 属性指定元素的最大高度。此限制防止元素增高超出指定数值。
值：
- 无限制:
none— 元素可以扩展到任何高度 - 绝对单位:
px,pt,cm,mm,in等 - 相对单位:
%,em,rem,vh,vw等
使用示例：
CSS
.box {
background-color: #9b59b6;
color: white;
padding: 10px;
max-height: 35px;
overflow: auto;
}
HTML
<div class="box">
<p>额外的文本用于演示滚动。<br>额外的文本用于演示滚动。<br>额外的文本用于演示滚动。</p>
</div>
代码解释：
.box-max-height: 最大高度为 100 像素的元素。如果元素内容超过这个值，它会因为overflow: auto;而滚动
GO TO FULL VERSION