CSS其他属性

news2025/11/4 21:12:10

文章目录

1. vertical-align
- 1.1. 概念
- 1.2. 常用值
- 1.3. 作用
- 1.4. 出现的情况一
- - 1.4.1. 原因
  - 1.4.2. 解决方案
- 1.5. 出现情况二
- - 1.5.1. 解决方案一
  - 1.5.2. 解决方案二
  - 1.5.3. 解决方案三
- 1.6. 出现情况三
- - 1.6.1. 原因
  - 1.6.2. 解决方案
2. 溢出效果
- 2.1. 作用
- 2.2. 属性名
3. 隐藏效果
- 3.1. 使用 display 隐藏
- 3.2. 使用 visibility 隐藏
- 3.3. 完整代码

1. vertical-align

1.1. 概念

用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。

1.2. 常用值

baseline （默认值）：元素的基线与父元素的基线对齐。
top ：使元素的顶部与其所在行的顶部对齐。
middle ：中部对齐。
bottom ：使元素的底部与其所在行的底部对齐。
length：将元素升高或降低指定的高度，可以是负数。

1.3. 作用

可以解决行内块的幽灵空白问题。

1.4. 出现的情况一

图片和文字在一行显示的时候，图片底部和文字的底部并没有对齐。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-其他属性-vertical-align使用</title>
    <style>
      .box {
        border: 1px solid #000;
      }
      img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box"><img src="./images/girl.png" alt="girl" />girl</div>
  </body>
</html>

注意：这里给图片宽度 100px，是因为图片过大，适当地缩小图片，没有影响的，因为父元素没有设置宽高，内容是由子元素撑开的。

1.4.1. 原因

图片和文字默认沿着这一行的基线对齐。

1.4.2. 解决方案

给 img 加上vertical-align: bottom;，文字就能对齐底端了。

如果单单解决空白问题，而不是文字对齐底端，vertical-align取值除了 baseline 外，其他值( middel 、 bottom 、top)都可以。

1.5. 出现情况二

图片下面与最底端出现空白问题。

1.5.1. 解决方案一

给图片vertical-align，除了 baseline 外，其他值都可以解决。

1.5.2. 解决方案二

如果父元素只有一张图片，可以给图片加display: block;，也能解决。

/* vertical-align: middle; */
display: block;

1.5.3. 解决方案三

如果父元素只有图片，没有文字的话，可以给父元素设置font-size: 0;，也可以解决。如果该行内块内部还有文本，则需单独设置 font-size 。

1.6. 出现情况三

设置单行文本垂直居中时，设置line-height: height;之后，文字居中了但是图片没有居中。

1.6.1. 原因

图片还是沿着所在一行的基线对齐。

1.6.2. 解决方案

给图片设置vertical-align:middle，把子元素放置在父元素的中部。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03-其他属性-vertical-align解决img垂直居中问题</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        line-height: 300px;
      }
      img {
        width: 100px;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="box"><img src="./images/girl.png" alt="girl" />girl</div>
  </body>
</html>

2. 溢出效果

2.1. 作用

控制溢出部分的显示效果。

2.2. 属性名

overflow，属性值如下：

visible ：内容不会被修剪，会呈现在元素框之外(默认值)。
hidden ：隐藏内容，其余内容是不可见的。
scroll ：显示滚动条以便查看其余的内容，不论内容是否溢出。
auto ：自动显示滚动条，内容不溢出不显示。

3. 隐藏效果

3.1. 使用 display 隐藏

display:none 不占位置(最常用)。

加了display:none后：

.c2 {
  width: 100px;
  height: 100px;
  background: red;
  /* 使用display隐藏:不占位置*/
  display: none;
}

3.2. 使用 visibility 隐藏

visibility:hidden 占据位置

.c2 {
  width: 100px;
  height: 100px;
  background: red;
  /* 使用visibility隐藏:占据位置 */
  visibility: hidden;
}

3.3. 完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-其他属性-隐藏效果</title>
    <style>
      .c1 {
        width: 100px;
        height: 100px;
        background: lightblue;
      }
      .c2 {
        width: 100px;
        height: 100px;
        background: red;

        /* 使用display隐藏:不占位置*/
        /* display: none; */

        /* 使用visibility隐藏:占据位置 */
        visibility: hidden;
      }
      .c3 {
        width: 100px;
        height: 100px;
        background: green;
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
  </body>
</html>