尺寸测量

可用

3.1 属性 width

CSS 中块的尺寸在网页布局中起到重要作用。它们决定了元素如何显示和与周围元素的交互。现在我们来看看 width, height, max-widthmax-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; 而滚动
1
任务
Frontend SELF ZH,  第 16 级课程 3
已锁定
块的宽度
块的宽度
1
任务
Frontend SELF ZH,  第 16 级课程 3
已锁定
最大高度
最大高度
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论