1. 伪元素：清除浮动
- 给需要清除浮动的元素添加类名
clearfix即可
.clearfix::after {
content: '';
display: block;
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
2. 伪元素：实心小三角
.box::after {
content: '';
display: block;
0;
height: 0;
border: 6px solid transparent;
border-left: 6px solid red;
position: absolute;
bottom: -20px;
right: -20px;
}
3. 伪元素：三角边框
- 两侧三角叠加
.square {
100px;
height: 100px;
background-color: #FFF;
position: relative;
border: 2px #000000 solid;
}
.square::before {
content: "";
0px;
height: 0px;
display: block;
position: absolute;
z-index: 2;
top: 25%;
right: -28px;
border: 15px solid #FFF;
border-color: transparent transparent transparent #FFF;
}
.square::after {
content: "";
0px;
height: 0px;
display: block;
position: absolute;
z-index: 1;
top: 25%;
right: -30px;
border: 15px solid #FFF;
border-color: transparent transparent transparent #000;
}
4. 伪元素：标点符号
<style>
span::after {
content: ','
}
</style>
<body>
<span>张新</span>
</body>
5. 伪元素：鼠标悬浮，有间隙的元素显示
-
场景：
-
两元素 A、B 之间有间隙
-
鼠标 hover 元素 A 时，元素 B 显示；在鼠标移动到元素 B 上，元素 B 一直显示
-
-
CSS 实现：
-
方式一：兄弟元素，添加伪元素
-
方式二：兄弟元素，给父元素 添加 hover
-
6. 伪元素：hover 时，显示提示 不同的信息（替换 title）
-
CSS 实现：
-
方式一：标签全局属性
title属性 -
方式二：自定义属性
span { position: relative; } span:hover::before { content: attr(data-title); position: absolute; top: 200px; left: 0; display: block; 200px; background: yellow; }<span data-title="张新是帅哥">张新</span> -
7. 伪类：CSS 计数
<style>
.box {
counter-reset: aaa;
}
input:checked {
counter-increment: aaa;
}
span::after {
content: counter(aaa)
}
</style>
<body>
<div class="box">
1
<input type="checkbox" name="" id=""> 2
<input type="checkbox" name="" id=""> 3
<input type="checkbox" name="" id="">
</div>
<span></span>
</body>
8. 伪类：not child 伪类结合，简化 CSS 选择器
// 最后一个li标签除外的li标签
li:not(:last-child){
100px;
background-color: red;
}
9. 伪类：聚焦 input 文本标签，相邻元素颜色改变
- CCSS 实现：
- 方式一：伪元素
:focus
- 方式一：伪元素
10. 伪类：自定义 radio / checkbox 元素样式
- CSS 实现：
- 方式一：label 标签 + radio / checkbox 元素的 :check 伪元素
11. CSS 清除浮动
-
方式1： 父元素设置
overflow: hidden; -
方式2： 浮动元素后面添加
<div style="clear：both"></div> -
方式3： 使用伪元素清除浮动: 直接给要清除浮动的元素添加类名
clearfix，代码如下// 伪元素清除浮动： .clearfix:after { content: ''; height: 0; line-height: 0; display: block; clear: both; visibility: hidden; } .clearfix { zoom: 1; }
12. CSS 解决垂直外边距塌陷
-
原因分析：
-
情况1： 两个垂直方向的元素（第一个设置
margin-bottom; 第二个设置margin-top）-
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
-
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
-
两个外边距一正一负时，折叠结果是两者的相加的和
-
-
情况2： 父子元素嵌套（子元素设置
margin-top, 父元素一起下来了）
-
-
解决方案：
-
尽量使用
padding / margin-bottom -
父元素设置
overflow: hidden; -
父元素设置边框
border: 1px solid transparent;
-
13. 网站添加logo
-
a 标签 添加背景图片；设置
href属性；a 标签中写：logo的中文名 -
代码如下：
a.logo { display: block; 200px; height: 200px; background: url('../img.jpg') no-repeat; text-indent: -999px; } // text-indent 设置文本缩进
14. 文字环绕图片
-
实现1：img 标签设置属性
align="left" / align="right" -
实现2：图片设置
float脱离标准流; 文字盒子不脱标 （经典）,代码如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2</title> <style> img { float: left; } </style> </head> <body> <img src="./assets/img1.png" width="40"> <span class="text"> 腾讯大王卡，月费：19元，定向流量（国内）：腾讯系列APP客户端免费流量 </span> </body> </html>
15. 超出部分省略号显示
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
`text-overflow: ellipsis` 显示省略符号来代表被修剪的文本
`white-space: nowrap` 文本不会换行，文本会在在同一行上继续，直到遇到 <br>
16. 设置文本 字间距 / 缩进
-
设置文本 字间距
letter-spacing: 0.5px; -
设置文本 缩进
text-indent: 20px;
17. 多列布局，行高 与 最大行高一致
- CSS 实现：
- 方式一：父元素
display: table; 子元素diaplay: table-cell
- 方式一：父元素