- ， 28 7月 2022
- 作者 847954981@qq.com
- 前端学习, 我的编程之路
CSS3进阶整理
CSS伪类
CSS伪元素–::after/::before
伪元素就是利用css在标签内部的前面或者后面添加一个行内元素，这个行内元素可以理解为span标签。写法如：
/* before */
选择器::before{
/* 使用空白符号占位 */
content: '';
}
/* after */
选择器::after{
/* 使用空白符号占位 */
content: '';
}清除浮动
一般情况下，一个父标签和更具其子标签的高度来自适应调整高度。但当我们给子标签添加浮动float后，由于子标签的浮动状态导致父标签不会进行高度自适应，使其高度不存在。此时，如果我们在此父标签之后再次添加一个标签，这个标签会紧挨着上一个父标签创建(即很有可能被子标签遮挡)。这时我们就需要使用清除浮动来让父标签包住浮动的子元素。记住哪个盒子的子元素有浮动，就在哪个盒子上添加清除浮动 具体方法为：
.clearfix::after{
content: '';
display: block;
clear: both;
}事件伪类
事件伪类就是当进行对应事件时，会更改标签的样式，比较常见的如：
代码语言：javascript复制li:hover{} //鼠标悬停
li:active{} //鼠标点击
input:focus{} //获取到焦点列表伪类
列表伪类的功能更像一个选择器，用来选择某个元素的子元素，并更改其样式。这里有三个比较常见的：
代码语言：javascript复制li:first-child{} //匹配父元素中的第一个子元素
li:last-child{} //匹配父元素中的最后一个子元素最后一个为:nth-child(){}，这个伪类比较复杂，括号内可以添加任意数字和两个特定的单词 odd(奇数)、even(偶数)，从1开始，1代表first-child 如：
li:nth-child(3){
background-color: #3687FC;
color: #FFFFFF;
}阴影
CSS3中阴影分为两个 box-shadow盒子阴影 text-shadow文字阴影：
div{
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11);
}
span{
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11);
}这部分，更多详见： box-shadow text-shadow
单行文本超出省略
正常情况下，文本内容超出所给宽度范围时，文字会自动换行，但我们不希望它换行就需要文本溢出省略操作了。
这里需要完成三步：强制不换行、元素内容溢出处理、文本溢出省略。
1.强制不换行：H5中推荐使用 white-space:nowrap 方法来实现不换行
2.元素内容溢出 overflow
这一步我们的目标是超出部分不显示，使用overflow属性。其存在5个有效值：
值 | 描述 |
|---|---|
visible | 默认值，内容不会被修剪，会呈现在元素框之外 |
hidden | 内容会被修剪，并且超出的内容不可见 |
inherit | 规定从父元素继承overflow属性的值 |
scroll | 内容会被修剪，浏览器会显示滚动条以查看超出内容 |
auto | 浏览器定夺，如果内容被修剪，就会显示滚动条 |
3.文本溢出省略 text-overflow
我们的目的是将超出内容省略，并用省略号表示，这一步就是css专门处理这类问题的方法。
它有两个值： text-overflow:clip | ellipsis
clip：默认值,直接将超出部分切除。 ellipsis：超出部分用省略号表示
多行文本超出省略
如果我们希望多行省略，即如实现，两行后超出省略，WebKit内核浏览器实现起来比较简单：
代码语言：javascript复制/* 隐藏超出部分 */
overflow : hidden;
/* 文本超出就用省略号 */
text-overflow: ellipsis;
/* 把对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* WebKit内核的浏览器的私有属性，设置文本超出2行就用省略号 */
-webkit-line-clamp: 2;
/* WebKit内核的浏览器的私有属性，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;这里我们把强制不换行去掉。而其他内核则需要使用js来完成
