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

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>

在这里插入图片描述

2.表单和表单 input框没对齐时
可以为两个表单都设置vertical-align:middle

3.文字和图片没对齐时
为图片设置vertical-align:middle

4.文字和表单没对齐时
为表单设置 vertical-align:middle