2021-07-22 知识总结

1。垂直对齐

什么是垂直对齐：在垂直方式设置元素的位置

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

语法：vertical-align

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

middle【实现垂直居中】/text-top【重要】/text-bottom【文字的最下放】/top【line-height的最上方】

/bottom【line-height的最下方】

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

2.文本溢出：

/* white-space: pre; 保留部分空白区域 换行显示*/

/* white-space: pre-line;保留换行后部分空白区域 换行显示 */

/* white-space: pre-wrap;保留部分空白区域  强制换行 */

/* white-space: nowrap; 强制文本在一行显示 */

/* overflow: auto;文本溢出时显示下拉条 */

/* overflow: hidden; */

/* overflow: scroll;一直显示下拉条 */

/* text-overflow: ellipsis;文本在一行显示时 溢出隐藏部分用省略号显示 */

3.高度塌陷：

万能方法：

.box:after{

    content: ".";

    display: block;

    clear: both;

    height: 0px;

    overflow: hidden;

    visibility: hidden;

}

4.伪对象选择器

<!-- 

    :after 在后面添加内容/

    :befor 在后面添加内容/：：first-line 在第一行添加样式 /：：frist-letter给第一个文本添加样式 只能用在块级元素中

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