跳到主要内容

CSS 宽度与高度

在CSS中，宽度（width）和高度（height）是控制元素尺寸的两个基本属性。它们决定了元素在页面中占据的空间大小。理解这些属性是掌握CSS布局的关键。

1. 基本概念​

1.1 宽度（width）​

width属性用于设置元素的宽度。它可以接受多种单位，如像素（px）、百分比（%）、视口宽度（vw）等。

1.2 高度（height）​

height属性用于设置元素的高度。与width类似，它也可以接受多种单位。

备注

注意：width和height属性只对块级元素和内联块级元素有效。对于内联元素（如<span>），这些属性不会生效。

2. 使用像素单位​

像素（px）是最常用的单位之一，它表示屏幕上的一个物理像素点。

css
.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

输出效果： 一个宽度为200像素，高度为100像素的浅蓝色矩形。

3. 使用百分比单位​

百分比（%）单位允许你根据父元素的尺寸来设置元素的宽度和高度。

css
.container {
  width: 300px;
  height: 200px;
  background-color: lightgray;
}

.child {
  width: 50%;
  height: 50%;
  background-color: lightcoral;
}

输出效果： 一个宽度为300像素，高度为200像素的灰色容器，内部包含一个宽度和高度均为父元素50%的浅红色子元素。

4. 使用视口单位​

视口单位（vw和vh）允许你根据浏览器视口的尺寸来设置元素的宽度和高度。

css
.fullscreen {
  width: 100vw;
  height: 100vh;
  background-color: lightgreen;
}

输出效果： 一个宽度和高度均占满整个浏览器视口的绿色矩形。

5. 实际应用案例​

5.1 响应式布局​

在响应式设计中，width和height属性经常与媒体查询结合使用，以适应不同设备的屏幕尺寸。

css
.responsive-box {
  width: 100%;
  height: 200px;
  background-color: lightpink;
}

@media (min-width: 768px) {
  .responsive-box {
    width: 50%;
    height: 300px;
  }
}

输出效果： 在屏幕宽度小于768像素时，元素宽度为100%，高度为200像素；在屏幕宽度大于等于768像素时，元素宽度为50%，高度为300像素。

5.2 图片尺寸控制​

通过设置width和height属性，可以控制图片的显示尺寸。

css
img {
  width: 100%;
  height: auto;
}

输出效果： 图片宽度占满父元素，高度自动调整以保持图片比例。

6. 总结​

通过本文，我们学习了如何使用CSS的width和height属性来控制元素的尺寸。我们探讨了像素、百分比和视口单位的使用方法，并通过实际案例展示了这些属性在响应式布局和图片尺寸控制中的应用。

提示

提示：在实际开发中，合理使用width和height属性可以帮助你创建更加灵活和响应式的布局。

7. 附加资源与练习​

  • 练习1：创建一个宽度为50%，高度为200像素的矩形，并为其添加背景颜色。
  • 练习2：使用视口单位创建一个占满整个视口的背景色块。
  • 进一步学习：阅读MDN文档中关于CSS盒模型的更多内容。

通过不断练习和探索，你将更加熟练地掌握CSS中的宽度与高度属性，从而创建出更加精美的网页布局。