CSS3进阶整理

• ， 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;
}

事件伪类

事件伪类就是当进行对应事件时，会更改标签的样式，比较常见的如：

li:hover{} //鼠标悬停
li:active{} //鼠标点击
input:focus{} //获取到焦点

列表伪类

列表伪类的功能更像一个选择器，用来选择某个元素的子元素，并更改其样式。这里有三个比较常见的：

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内核浏览器实现起来比较简单：

/* 隐藏超出部分 */
overflow : hidden;
/* 文本超出就用省略号 */
text-overflow: ellipsis;
/* 把对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* WebKit内核的浏览器的私有属性，设置文本超出2行就用省略号 */
-webkit-line-clamp: 2;
/* WebKit内核的浏览器的私有属性，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

这里我们把强制不换行去掉。而其他内核则需要使用js来完成