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
- 方式一:父元素