前端基础(十二)_overflow属性、clear属性、vertical-align属性

news2025/1/13 3:36:50

overflow属性

overflow的第一个属性值是x轴方向的属性，第二个值是y周方向的属性

  <style>
    .box1 {
      width: 150px;
      height: 50px;
      等价于下面两个属性
      /* overflow: hidden auto; */
      overflow-x: hidden;
      overflow-y: auto;
    }
  </style>

1、overflow-x 只包含水平方向的处理
2、overflow-y 只包含竖直方向的处理
3、visible 默认值 /溢出显示/
4、hidden 溢出隐藏
5、scroll 横向纵向内容超出显示滚动条
6、auto 上下、左右方向有溢出就显示滚动条没有溢出不显示
7、Inherit 继承父级overflow的属性

1、例子初始值（visible 溢出隐藏）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .box1 {
      width: 150px;
      height: 50px;
    }
  </style>
</head>

<body>
  <div class="box1">
    我是box1盒子，我是个div元素，这是我里面的内容，一共51个字体，当然我这里标点符号也按照了字算。
  </div>
</body>

</html>

在这里插入图片描述
其实就相当于

 <style>
    .box1 {
      width: 150px;
      height: 50px;
      overflow: visible 
     }
  </style>

2.hidden溢出隐藏

  <style>
    .box1 {
      width: 150px;
      height: 50px;
      overflow-x: hidden;
      overflow-y: hidden;
    }
  </style>

在这里插入图片描述

3.scroll横向纵向内容超出一直显示滚动条

  <style>
    .box1 {
      width: 150px;
      height: 50px;
      overflow-y: scroll;
    }
  </style>

在这里插入图片描述
这个scroll不管内容是否超出都会显示滚动条

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .box1 {
      width: 150px;
      height: 50px;
      overflow-y: scroll;
    }
  </style>
</head>

<body>
  <div class="box1">
    我是box1盒子
  </div>
</body>

</html>

overflow的第一个属性值是x轴方向的属性，第二个值是y周方向的属性

4.auto上下、左右方向有溢出就显示滚动条没有溢出不显示

  <style>
    .box1 {
      width: 150px;
      height: 50px;
      overflow: hidden auto;
    }
  </style>

在这里插入图片描述

等价于

  <style>
    .box1 {
      width: 150px;
      height: 50px;
      等价于下面两个属性
      /* overflow: hidden auto; */
      overflow-x: hidden;
      overflow-y: auto;
    }
  </style>

文字少的时候：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .box1 {
      width: 150px;
      height: 50px;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="box1">
    我是box1盒子
  </div>
</body>

</html>

在这里插入图片描述
会自动根据文本内容判断是否显示滚动条。

clear属性

清浮动

	clear:left/right/both;

给浮动的元素后面加个块元素，样式为clear:left/right/both;可以解决父元素高度塌陷的问题。

当然解决父元素高度塌陷的问题我们可以生成BFC。

vertical-align属性

针对行内元素行内块元素（图片）表单文字对齐
top 顶线
middle 中线
baseline 基线默认
bottom 底线

vertical-align的默认值baseline,即基线对齐,而基线的定义是字母x的下边缘。

1.文字与文字
文字大小不一样可以为两个文字都设置vertical-align:middle （其实给这两个设置一样的行高就可以解决问题）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .box1 {
      width: 150px;
      height: 50px;
    }

    .span1 {
      font-size: 16px;
    }

    .span2 {
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div class="box1">
    <span class="span1">span1</span>
    <span class="span2">span2</span>
  </div>
</body>

</html>

在这里插入图片描述

将span1和span2都加上vertical-align:middle即可实现两个文字居中对齐

  <style>
    .box1 {
      width: 150px;
      height: 50px;
    }

    .span1 {
      font-size: 16px;
      vertical-align: middle;
    }

    .span2 {
      font-size: 30px;
      vertical-align: middle;
    }
  </style>