css如何设置高宽

1. CSS设置元素宽度

CSS中，设置元素宽度有以下几种方式：

/* 设置像素宽度 */
.selector {
  width: 100px;
}

/* 设置百分比宽度 */
.selector {
  width: 50%;
}

其中，像素宽度是指在屏幕上的实际像素单位，百分比宽度是指相对于包含它的父元素的百分比。

2. CSS设置元素高度

同样地，CSS中，设置元素高度也有以下几种方式：

/* 设置像素高度 */
.selector {
  height: 100px;
}

/* 设置百分比高度 */
.selector {
  height: 50%;
}

/* 设置vw/vh单位高度 */
.selector {
  height: 50vh;
}

我们可以使用绝对单位像素，相对单位百分比，或者相对于视窗大小的vw/vh单位来设置元素的高度。

3. CSS页面布局中的高宽设置

在页面布局中，我们经常需要将不同元素分割、处理和排列，并设置它们的高度和宽度。以下是一些常用到的高宽设置示例：

/* 设置页面主体宽度 */
body {
  width: 960px;
  margin: 0 auto;
}

/* 设置页面头部高度 */
header {
  height: 100px;
}

/* 设置页面尾部宽度和高度 */
footer {
  width: 100%;
  height: 50px;
}

4. CSS响应式布局中的高宽设置

CSS响应式布局有时需要根据不同设备的分辨率和屏幕尺寸设置不同的宽度和高度。以下是一些响应式布局中常用到的高宽设置示例。

/* 设置页面横向滚动条宽度 */
::-webkit-scrollbar {
  width: 10px;
}

/* 设置页面上元素媒体查询高度 */
@media screen and (max-width: 768px) {
  .selector {
    height: 200px;
  }
}

/* 设置页面上元素媒体查询宽度 */
@media screen and (min-width: 1200px) {
  .selector {
    width: 60%;
  }
}

通过设置不同的@media媒体查询，我们可以适配不同的屏幕尺寸，使得我们的网页布局更具有可持续性、可扩展性和易维护性。