2021-07-22文本溢出及宽高自适应相关属性

垂直对齐：

在垂直方向设置元素的位置。

应用场景：logo垂直居中，下拉菜单垂直居中，控制文本与图片的位置。

语法：vertical-align

vertical-align：middle/text-top/top/text-bottom/bottom/baseline默认

bottom如果父级元素设置了line-height那么父级元素在div的最下方

top设置line-height没有太大影响，带有text的会有影响

middle实现垂直居中

text-top【】

text-bottom文字的最下方

top【line-height的最上方】

bottom【line-height的最下方】

top，bottom，middle必须加line-height，否则会和text-top;text-bottom效果一样

文本溢出：

White-space：nowrap 强制内容在一行中显示  遇到<br>标签才会换行

White-space：pre 所有空白符会被保留，并且强制在一行中显示出来

White-space：pre-line 保留部分空白符，在文本中可以换行显示，

White-space： wrap 空白符不会完全保留，不强制在一行中显示

White-space：pre-wrap空白符会被保留，不强制在一行中显示

属性	描述
white-space：normal	默认值
white-space：nowrap	文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；
white-space：pre；	空白符会被保留，就是说浏览器可以识别空格。
white-space：pre-line	合并空白符序列，但是保留换行符。
white-space：pre-wrap	保留一部分空白符序列，但是正常的进行换行

Overflow属性：设置超出盒子模型部分内容的显示状态

1. hidden：溢出隐藏
2. scroll：滚动条【一直有】
3. auto：在文本溢出时显示滚动条
4. visible：默认值，按正常显示

属性	描述
overflow:visible;	visible:默认值，内容不会被修剪，会呈现在元素框之外；
overflow:hidden;	hidden：内容会被修剪，并且其余内容是不可见的；
overflow:auto;	auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
overflow:scroll;	scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;

text-overflow：

ellipsis：单行文本溢出时显示…

clip：不显示省略号，默认情况【加上overflow：hidden之后效果一样】

属性	描述
text-overflow：clip；	不显示省略号（...），而是简单的裁切;
text-overflow：ellipsis；	当单行文本溢出时显示省略标记

多行文本溢出

1.display: -webkit-box;   将对象作为弹性伸缩盒子模型显示

2.-webkit-box-orient: vertical;   设置或检索伸缩盒对象的子元素的排列方式 

3.-webkit-line-clamp: 3;   用来限制在一个块元素显示的文本的行数

4.overflow: hidden;隐藏

宽高自适应：解决页面缩放与扩大时出现页面排版出错的问题

宽度自适应：

1. width设置百分比
2. 不设置宽度，默认继承父元素的宽度

缺点：若是加上float之后宽度无法继承来自父元素的宽度

Min-width：作用当页面显示的区域大于这个宽度时，会根据百分比缩放，

如果小于等于这个宽度时会被覆盖住

高度自适应：

1.不设置高度，继承父元素得高度

2.继承父元素的高度，最小高度设置为 min-height

3.浮动元素添加高度自适应，添加浮动元素的父元素没有高度，会出现高度坍塌

清除高度塌陷的三种解决方法：

1. 给产生高度塌陷的元素加overflow：hidden

实现原理：出发bfc，bfc在计算高度时会把浮动的元素的高度计算在内

缺点：如果有定位的元素时，则会隐藏【切记！】

    2.让子元素高度随父元素高度进行改变

前提：

body,html{

height:100%;

}

给产生高度塌陷的元素最后面添加一个div：并且给他设置高度为0，clear：both【清除浮动对添加的div的影响】

实现原理：清除浮动带来的影响

缺点：代码的冗余

   3.万能法:

：after{content：”.”;display:block;clear:both;height:0;overflow:hidden;visibility:hidden}

好处：

1. 如果一个界面中有多个高度塌陷的存在，减少重复代码的使用量
2. 避免定位元素被隐藏

伪对象选择符：

1.

::after{

content:"";

}

在元素的后面添加内容（图片，文本）

2.

::before{

content:"";

}

在元素前面添加内容（图片，文本）

3.

::first-letter{

}

控制第一个字符的样式 

4.

::first-line{

}

 效果显示：

 

控制第一行的样式

display:none;

 

 对比图：

 

 

 效果显示：

 

 

 

 

 将元素彻底隐藏，不再占据空间

visibility:hidden

将元素隐藏，占据空间，在页面上留下空白

效果显示：上部分是留白区