day09

垂直对齐

什么是垂直对齐：

在垂直方式设置元素的位置

应用场景：

log垂直居中，下拉菜单垂直居中，控制文本与图片的位置

语法：

vertical-align

属性值：

middle【实现垂直居中】

text-top【重要】

text-bottom【文字的最下放】

top【line-height的最上方】

bottom【line-height的最下方】

实现垂直居中

1.搭建骨架的结构

2.清除浏览器自带的内外边距，以及li自带的样式

3.设置ul的宽度高度，并且让他水平居中

4.让所有的li显示在一行中，并且给她设置宽度，高度，水平居中，line-height

5.设置图片的样式：转化为行内块，设置行高，让内容垂直居中

6.设置鼠标滑过之后背景图片的变化

空白区域设置

语法：

white-space:

属性值：

nowrap; 强制内容在一行中显示出来

pre:保留所有的空白区域，并且强制在一行中显示出来

pre-wrap: 没有完全保留空白区域，不让他强制在一行中显示

pre-line:保留部分空白区域【在文本中的换行显示】

溢出隐藏

语法：

overflow

属性值：

hidden:溢出隐藏

scroll:显示滚动条【一直有】

auto:在文本溢出时显示滚动条

visible:默认值

单行文本溢出

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

多行文本溢出

display: -webkit-box;转化为老版的盒子模型

-webkit-box-orient: vertical; 设置对齐方式

-webkit-line-clamp: 3;设置行数：在第几行中显示...

overflow: hidden; 溢出隐藏

宽度自适应

width设置百分比

不设置宽度，默认继承父元素的宽度

float之后宽度无法继承来自父元素的宽度

min-width:作用当页面显示的区域大于这个宽度是，会根据宽度百分比缩放，如果小于等于这个宽度时，会被覆盖住

参考案例：小米官网放大缩小

伪对象【伪元素选择器】选择器

:after::after

:before::before

::first-line(在第一行中添加样式 )

:first-letter(给第一个文本添加样式)/【只能用在块级元素中】

::selection(选中之后的样式操作只能改变字体颜色和背景颜色)

清除高度塌陷

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

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

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

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

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

缺点:代码的冗余

3.万能法： :after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden}

好处:

1.如果一个界面中有多个高度塌陷的存在，减少重复代码的使用量

2.避免了定位元素被隐藏