2021-07-22

一、垂直对齐

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

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

语法：vertical-align（bottom，如果父级元素设置了line-height，那么bottom在父级div的最下方）

属性值：middle/top/text-top/bottom/text-bottom

middle（实现垂直居中）/texte-top/bottom（文字的最上/下方）/top/bottom（，在line-height的最上/下方）

二、white-spacing：对于空白区域的设置

属性值：nowrap（强制内容在一行中显示出来）

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

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

pre-line（保留部分的空白区域[文本中的回车及文字间的空格]，在文本中换行显示）

三、文本溢出

1、text-overflow:ellipsis（单行文本溢出时显示省略号（...））/clip（文本溢出时不会显示省略号，而是简单地裁剪）

2、多行文本溢出

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

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

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

3、overflow

属性值：

visible（默认值，内容不会被修剪，会呈现在元素框之外）

hidden（内容会被修剪，并且其余内容是不可见的）

auto（如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容）

scroll（内容会被修剪，但是浏览器会显示滚动条，以便查看其余内容）

三、宽高自适应

1、宽度自适应

（1）设置宽度时，单位使用百分比%，如果不设置宽度，则默认为继承父元素的宽度；

（2）当设置浮动之后，子元素无法继承父元素的宽度；

（3）也可以使用min-width、max-width设置

（4）min-width作用：当页面显示的区域大于这个宽度时，会根据百分比进行缩放，小于这个宽度时，会被覆盖住。

2、高度自适应

（1）不设置元素的高度（缺点：子元素设置浮动时，父元素会出现高度塌陷）

（2）设置高度，但是单位不使用px，而是用%，但在默认情况下height使用%是不会生效的，需要进行设置：body,html{height:100%}

（3）使用min-height、max-height进行设置

四、高度塌陷

1、产生条件：父元素自身没有设置高度宽度，所有的子元素设置浮动的情况下，最近的父元素就会发生高度塌陷。

2、解决方法：

（1）给产生高度塌陷的元素添加overflow:hidden

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

缺点：如果有定位的元素，则会隐藏

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

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

缺点：代码的冗余（多余）

（3）万能法：

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

好处：

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

b、避免了定位元素被隐藏

五、伪对象（伪元素）选择器（权重为1）

:after[::after]（在后面添加内容）

:before[::before]（在前面添加内容）

::first-line（在第一行中添加样式）

:first-letter（给第一个文本添加样式）

::selection（选中之后的样式操作，只能改变字体颜色和背景颜色）（只能用在块级元素中）

六、显示和隐藏

visibility:hidden/visible;隐藏/可见

visibility:hidden与display:none;

相同点：都会使元素隐藏

不同点：visibility:hidden;属性会使对象不见，但是该元素在网页中占据的空间并未发生改变

display:none;属性则会使这个对象彻底消失。