BemoDB

Appearance

调整大小 ​

在CSS中调整元素大小是一项基础但重要的技能。这里将介绍不同的调整元素大小的方法及其应用场景。

固有尺寸 ​

HTML元素在受CSS影响之前都有其原始的尺寸，这就是固有尺寸（或内在尺寸）。

图片的固有尺寸 ​

图像是最典型的具有固有尺寸的元素：

  • 由图像文件本身的尺寸决定
  • 不设置CSS尺寸时，将使用其固有尺寸显示
  • 可以通过CSS改变显示尺寸

空元素的固有尺寸 ​

空的块级元素（如空的<div>）的特点：

  • 没有内容时没有固有高度（高度为0）
  • 宽度默认占满父容器
  • 高度由其内容决定
css
/* 空div示例 */
.empty-div {
    border: 2px solid black;
    /* 没有高度，只显示一条线 */
}

/* 有内容的div */
.content-div {
    border: 2px solid black;
    /* 高度由内容决定 */
}

设置具体尺寸 ​

外部尺寸 ​

当我们给元素指定具体尺寸时，这被称为外部尺寸：

css
.box {
    width: 200px;
    height: 100px;
}

注意事项：

  • 固定高度可能导致内容溢出
  • 应谨慎使用固定高度
  • 优先考虑让内容决定高度

使用百分比 ​

百分比是相对于父容器的尺寸计算的：

css
.parent {
    width: 400px;
}
.child {
    width: 50%; /* 200px */
}

百分比外边距和内边距 ​

百分比用于margin和padding时的特殊行为：

  • 所有方向的百分比都是相对于父元素的宽度计算
  • 这包括上下外边距和内边距
  • 这可能会产生意想不到的效果
css
.box {
    width: 200px;
    margin: 10%; /* 上下左右都是父元素宽度的10% */
    padding: 10%; /* 上下左右都是父元素宽度的10% */
}

最小和最大尺寸 ​

最小尺寸 ​

使用min-height和min-width可以设置元素的最小尺寸：

css
.box {
    min-height: 150px;
    /* 内容少时保持150px高度 */
    /* 内容多时可以继续增长 */
}

最大尺寸 ​

使用max-height和max-width可以限制元素的最大尺寸：

css
.responsive-image {
    max-width: 100%;
    /* 图片可以缩小 */
    /* 但不会超过其原始尺寸 */
}

图片响应式处理 ​

处理响应式图片的最佳实践：

css
img {
    max-width: 100%;
    height: auto;
    /* 图片会随容器缩小 */
    /* 但不会超过原始尺寸 */
}

视口单位 ​

视口单位是相对于浏览器视口尺寸的单位：

  • vw：视口宽度的1%
  • vh：视口高度的1%
css
.hero {
    height: 100vh; /* 占满整个视口高度 */
    width: 50vw; /* 占据视口宽度的一半 */
}

.text {
    font-size: 5vh; /* 字体大小随视口高度变化 */
}

使用场景：

  • 创建全屏展示区域
  • 响应式字体大小
  • 视口相关的布局

最佳实践 ​

  1. 避免固定高度：

    • 优先使用min-height
    • 让内容决定高度
    • 防止内容溢出

  2. 响应式图片：

    • 使用max-width: 100%
    • 设置合适的原始图片尺寸
    • 考虑使用picture元素和srcset

  3. 灵活使用视口单位：

    • 创建全屏布局
    • 实现响应式设计
    • 配合其他单位使用