1. 选择器
1.1 属性选择器
可以根据元素特定属性的来选择元素，这样子不用借助类或者id选择器
- A[name] 选择具有name属性的A元素
- A[name=‘Lin’] 选择具有name且属性值等于Lin的A元素
- A[name^=‘林’] 匹配具有name且属性值以林开头的A元素
- A[name$=‘林’] 匹配具有name且属性值以林结尾的A元素
- A[name*=‘林’] 匹配具有name且属性值中含有林的A元素
- [name~=lin] 匹配name属性包含单词‘lin’的所有元素
- [name|=lin] name属性值为‘lin’或lin-ss
以-连接的独立单词
注意 ：类选择器、属性选择器、伪类选择器权重为10。
1.2 结构伪类选择器
nth-child（n）选择某个父元素的一个或多个特定的子元素
- n可以说数字，关键字和公式
- n如果是数字，就是选择第n个子元素，里面数字从1开始
- n可以是关键字：even偶数，odd奇数
- n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是0个元素或者超出了元素的个数会被忽略）
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5、10、15… |
| n+5 | 从第5个开始（包含第5个开始）到最后 |
| -n+5 | 前5ge（包含第5个）… |
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
| 选择器 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个E元素 |
| E:nth-child | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type | 指定类型E的第n个 |
区别
- nth-child对父元素里面所有还在排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
小结
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
- 关于nth-child（n）我们要指定n是从0开始计算的，要记住常用的公式
- 如果是无序列表，我们肯定用nth-child更多
- 类选择器、属性选择器、伪类选择器，权重为10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li:nth-of-type(odd) {
background-color: #ff7c2d;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
效果图
1.3 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
| 选择符 | 简介 |
|---|---|
| ：：before | 在元素内部的前面插入内容 |
| ：：after | 在元素内部的后面插入内容 |
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档数中是找不到的，我们称为伪元素
- 语法：element：：before{}
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
margin: 20px auto;
width: 200px;
height: 200px;
background-color: plum;
}
div::before {
float: left;
/*转换成行内块就能使用宽高,因为div是属于块元素*/
display: inline-block;
width: 30px;
height: 30px;
/*before和after必须添加content*/
content: "我";
background-color: palevioletred;
}
div::after {
/*转换成行内块就能使用宽高,因为div是属于块元素*/
display: inline-block;
float: right;
width: 60px;
height: 30px;
content: "喜欢你";
background-color: lightpink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.31 配合字体图标使用
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?is94u7');
src: url('fonts/icomoon.eot?is94u7#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?is94u7') format('truetype'),
url('fonts/icomoon.woff?is94u7') format('woff'),
url('fonts/icomoon.svg?is94u7#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
margin: 20px auto;
width: 760px;
height: 45px;
border: 1px solid rgb(70, 98, 217);
border-radius: 25px;
}
div::after {
font-family: 'icomoon';
position: absolute;
float: left;
top: 10px;
left: 720px;
content: '\e986';
/*为的font-size是为设置大小,因为是content内容*/
font-size: 25px;
line-height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.32 仿 overflow案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.demo{
position: relative;
width: 604px;
height: 296px;
/*使用auto会显示到中间来;*/
margin: 30px auto;
}
.demo img {
/*盒子多大里面的图片就多大，直接使用100%解决图片和盒子大小不一致*/
width: 100%;
height: 100%;
}
.demo::before {
content: '';
/*隐藏起来*/
display: none;
/*使用绝对定位压住盒子*/
position: absolute;
/* 如果使用 margin: 30px auto;辣么它会随着demo下移30px，本身demo下移30，
加上这个一共60px就不能重合。会突出一部分。所以必须使用 margin: 0 auto;*/
margin: 0 auto;
/*width: 604px;*/
/*height: 296px; 不建议使用，因为demo本身就给高度了*/
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(css/img/sear.jpg) no-repeat center;
}
/*当鼠标经过这个盒子的时候，隐藏的就显示出来*/
.demo:hover::before {
display: block;
}
</style>
</head>
<body>
<div class="demo">
<img src="css/img/demo.jpg" alt="">
</div>
</body>
</html>
效果
（鼠标经过浏览器效果）
1.33 伪元素清除浮动
- 额外标签法也称隔墙法，是W3C推荐的做法
注意这个新的标签必须是块级元素
- 父级添加overflow
将其属性值设置为hidden、auto、或scroll
（给父级元素添加代码）
优点：代码简洁
缺点：无法显示溢出的部分
3. 父级添加after伪元素
方式是额外标签法的升级版，也是给父元素添加
.clearfix:after{
/*伪元素必须写的属性*/
content:"";
/*插入的元素必须是块级*/
display:block;
/*不要看见这个元素*/
height:0;
/*核心代码清除浮动*/
clear:both;
/*不要看见这个元素*/
visbility:hidden;
}
.clearfix{/*IE6,IE7专有*/
*zoom:1;
}
4. 父级添加双伪元素
也是给父元素添加
.clearfix:before,.clearfix:after{
content:"";
/*转换为块级元素并且一行显示*/
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{/*IE6,IE7专有*/
*zoom:1;
}
2. CSS3盒子模型
以前盒子中的padding和border会撑大盒子
- box-sizing：content-box盒子大小伪width+padding+border
- box-sizing：border-box盒子大小为width
如果盒子模型我们改为了 box-sizing：border-box，那padding和border就不会撑大盒子了（前提padding和border不会width宽度）
3. CSS3滤镜filter
filter属性将模糊或颜色偏移等图形效果应用于元素
filter:blur(15px);blur模糊处理,数值越大越模糊
4. calc函数
with:calc（100%-80px）;
括号里面可以使用±*来进行计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo {
width: 300px;
height: 300px;
background-color: #ff7c2d;
}
.demo .o {
background-color: lightpink;
width: calc(100% - 30px);
height: 45px;
}
</style>
</head>
<body>
<div class="demo">
<div class="o"></div>
</div>
</body>
</html>
5. 过渡
我们可以不使用flash动画或Javascript的情况下，当元素从一种样式变换成另外一种样式时为元素添加效果
过渡动画：是从一个状态渐渐的过渡到另外一个状态
我们现在经常和：hover一起搭配使用
transition: 要过渡的属性 花费时间 运动曲线 何时开始
- 属性：想要变化的CSS属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以
- 花费时间：单位是秒（必须写单位），比如0.5s
- 运动曲线：默认是ease（可以省略）
- 何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s（可以省略）
- linear 匀速
- ease 逐渐慢下来
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速后减速
记住过渡的使用口诀：谁做过渡给谁加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 50px;
background-color: #ff7c2d;
/*transition:width, 0.5s, ease, 0s,height ease 1s;*/
/*如果想要多个属性都变化，属性写all既可以了*/
/*transition : all .5s;*/
/*如果想要写多个属性，利用都要进行分割*/
transition: width, .5s, height, .5s;
}
div:hover {
width: 300px;
height: 60px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
5.1 进度条案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
margin: 30px auto;
width: 450px;
height: 30px;
border: 1px solid #ff7c2d;
border-radius: 20px;
}
.box_bb {
width: 50%;
height: 100%;
border-radius: 20px;
background-color: #ff7c2d;
transition: all 0.9s;
}
.box:hover .box_bb {
width: 100%;
background-color: #ff7c2d;
}
</style>
</head>
<body>
<div class="box">
<div class="box_bb"></div>
</div>
</body>
</html>
效果
5.2 小米logo过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.logo {
position: relative;
margin: 100px auto;
width: 350px;
height: 300px;
line-height: 100px;
background-color: #ff6700;
/*超出部分隐藏，不加这个两边都显示出来*/
overflow: hidden;
}
.logo::before {
content: "";
position: absolute;
width: 350px;
height: 300px;
background: url(css/img/mi.png) no-repeat center;
}
.logo::after {
content: "";
position: absolute;
top: 0;
left: 350px;
width: 350px;
height: 300px;
transition: all 0.9s;
background: url(css/img/mih.png) no-repeat right;
}
.logo:hover::after {
left: 0;
}
.logo:hover::before {
left: -300px;
}
</style>
</head>
<body>
<div class="logo"></div>
</body>
</html>
效果
6.弹性盒子
Flex 是 Flexible Box 的缩写，意为"弹性布局"，可以轻松的控制元素排列、对齐和顺序的控制。
6.1 声明弹性
容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。
声明块级弹性盒子 – display:flex
声明内联级弹性盒子 – display:inline-flex
声明块级弹性盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
footer div {
text-align: center;
margin: 20px auto;
color: black;
font-size: 50px;
line-height: 4em;
width: 200px;
height: 200px;
border: 1px solid plum;
}
footer {
display: flex;
width: 800px;
height: 800px;
margin-bottom: 20px;
border: 1px solid #9933cc;
}
</style>
</head>
<body>
<footer>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</footer>
</body>
</html>
效果图
声明内联级弹性盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.yyds div {
text-align: center;
margin: 20px auto;
color: black;
font-size: 50px;
line-height: 4em;
width: 200px;
height: 200px;
border: 1px solid plum;
}
.yyds{
display:inline-flex;
margin-bottom: 20px;
width: 1200px;
height: 800px;
border: 5px solid #666666;
}
</style>
</head>
<body>
<div class="yyds">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
效果图
6.2 控制弹性盒子排列方向
| 值 | 描述 |
|---|---|
| row | 从左到右水平排列元素（默认值） |
| row-reverse | 从右向左排列元素 |
| column | 从上到下垂直排列元素 |
| column-reverse | 从下到上垂直排列元素 |
拿声明内联级案例来试验
6.3 flex-wrap 控制弹性元素换行处理
该属性flex容器是单行或者多行，同时横轴的方向绝对了新行堆叠的方向
| 选项 | 说明 |
|---|---|
| nowrap | 元素不拆行或不拆列（默认值） |
| warp | 容器在必要的时候拆行或拆列 |
| wrap-reverse | 容器元素在必要的时候拆行，但是以相反的顺序 |
6.4 flex-flow复合属性
是flex-direction 与flex-wrap的简写模式
语法
flex-flow: 写flex-direction 写flex-wrap
6.5 justify-content 主轴上的多种排列方式
小tip ： 如何判断主轴的开始与结束
justify-content 用于控制元素在主轴上的排列方式，主轴的排列方式
| 选项 | 说明 |
|---|---|
| flex-start | 元素紧靠主轴起点 |
| flex-end | 元素紧靠终点 |
| center | 元素从弹性容器中心开始 |
| space-between | 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 |
| space-around | 每一个元素两侧相等。所以，元素之间的间隔比元素与容器的边距的间隔大一倍 |
| space-evenly | 元素间距平均分配 |
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
padding: 10px;
margin: 10px;
}
body {
text-align: center;
color: black;
line-height: 4em;
font-size: 50px;
}
.yyds div {
width: 200px;
height: 200px;
border: 1px solid plum;
}
.yyds {
margin: 0 auto;
display: flex;
box-sizing: border-box;
width: 1400px;
height: 800px;
border: 5px solid #666666;
flex-flow: row wrap;
justify-content: flex-start;
}
</style>
</head>
<body>
<div class="yyds">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
6.6 algin-items交叉轴元素的多种排列元素
用于控制容器元素在交叉轴上的排列方法。（假设x轴是主轴，辣么交叉轴就是y轴，如果y轴是主轴，辣么交叉轴就是x轴）
| 选项 | 说明 |
|---|---|
| stretch | 被拉伸以适应容器（默认值） |
| center | 位于容器的中心 |
| flex-start | 位于交叉轴开头 |
| flex-end | 位于交叉轴结尾 |
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
color: black;
line-height: 4em;
font-size: 50px;
}
.yyds div {
width: 200px;
height: 200px;
border: 1px solid plum;
}
.yyds {
margin: 0 auto;
display: flex;
box-sizing: border-box;
width: 1400px;
height: 1000px;
border: 5px solid #666666;
flex-flow: column wrap;
justify-content: flex-start;
align-items: center;
}
</style>
</head>
<body>
<div class="yyds">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
如果设置了 width | height | min-height | min-width | max-width | max-height ，将影响stretch 的结果，因为 stretch 优先级你于宽高设置。
6.7 algin-content多行元素在交叉轴排列方式
用于多行显示弹性容器，用于控制行或列（而不是元素），在交叉轴上的排列方法。
| 选项 | 说明 |
|---|---|
| stretch | 将空间平均分配给元素 |
| flex-start | 紧靠主轴起点 |
| flex-end | 紧靠主轴终点 |
| center | 元素从弹性容器中心开始 |
| space-betwwen | 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 |
| space-around | 每个元素两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍 |
代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
color: black;
line-height: 4em;
font-size: 50px;
}
.yyds div {
margin:20px 40px;
width: 200px;
border: 1px solid plum;
}
.yyds {
margin: 0 auto;
display: flex;
box-sizing: border-box;
width: 1400px;
height: 800px;
border: 5px solid #666666;
flex-flow: row wrap;
justify-content: center;
align-items: center;
align-content: stretch;
}
</style>
</head>
<body>
<div class="yyds">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
7. 弹性元素
放在容器盒子中的元素即为容器元素
弹性元素的三大要素：
- 不能使用float与clear规则
- 弹性元素均为块元素
- 绝对定位的弹性元素不参与弹性布局
7.1 algin-self控制单个元素在交叉轴的排列方式
algin-items则是控制容器中所有元素的排列
- stretch 将空间平均分给元素
- flex-start 元素紧靠主轴起点
- flex-end 元素紧靠主轴终点
- center 元素从弹性容器中心开始
7.2 algin-grow弹性元素的可用空间
用于弹性盒子的可用空间，分配给弹性元素。可以使用整数或小数声明。但是必需使用在弹性元素身上。
7.3 flex-shrink定义缩小值
在弹性盒子装不下元素时的缩小值。
7.4 flex-basic占据主轴空间
定义了在分配多余空间之前，项目占据的主轴空间。计算主轴是否有多余空间。
属性值可以是百分比，也可以是长度单位。它的优先级高于width。height属性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IdzRXrDe-1652968590782)(https://imgblog.csdnimg.cn/424e5a0fb8a644e2b1ce3288b650aaf5.png)]
7.5 flex复合属性
写法
flex:flex-grow flex-shrink flex-basic
代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
padding: 20px;
position: relative;
width: 500px;
height: 110px;
border: 3px solid blueviolet;
}
.content div {
width: 150px;
height: 100px;
text-align: center;
line-height: 4em;
outline: 4px solid pink;
flex: 1 0 80px;
}
</style>
</head>
<body>
<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
效果图
7.6 order控制弹性元素的位置
默认为order：0，数值越小越在前面，可以负数或整数。
7.7 弹性文本
文本节点也在弹性布局操控范围内
绝对定位
不在弹性布局操控范围内
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
