一复杂选择器
兄弟元素：具有同一个父元素的同级元素之间称为兄弟元素
注意：兄弟选择器只能通过哥哥找到弟弟，不能通过弟弟找哥哥
①通用兄弟选择器
写法:选择器1~选择器2{样式声明}
找到符合选择器1的元素后面所有符合选择器2的元素
如p+span{color:red} 找到p标签后的所有span标签匹配样式
②相邻兄弟选择器
写法:选择器1+选择器2{样式声明}
找到符合选择器1的元素后面紧紧挨着的符合选择器2的元素
如p+img{backgroud-size:100%}找到p后的img标签匹配样式
使用场合：相邻兄弟选择器多用于，修饰一组元素的样式，除了第一个元素不匹配，其它元素都匹配
2,属性选择器
attr属性:如:title class id 等等(还有自定义属性)
elem元素:如 p div span b img 等
[attr]{样式声明} 匹配具备attr属性的元素
elem[attr]{样式声明} 匹配具备attr属性的elem元素
[attr1][attr2]{样式声明}匹配同时具备attr1属性和attr2属性的元素
elem[attr1][attr2]{样式声明}匹配同时具备attr1属性和attr2属性的elem元素
[attr=value]{样式声明} 匹配具备attr属性并且值为value的元素
elem [attr=value]{样式声明} 匹配具备attr属性并且值为value的elem元素
关于属性取值的模糊查询
[attr*=value]{样式声明} 匹配具备attr属性，并且值中包含value的元素
[attr^=value]{样式声明}匹配具备attr属性，并且值以value开头的元素
[attr$=value]{样式声明}匹配具备attr属性，并且值以value结尾的元素
[attr~=value]{样式声明} 匹配具备attr属性，并且值中包含value这个独立单词的元素
3.伪类选择器
①目标伪类
在锚点被激活时，匹配的样式
(被激活的元素名如img/p等):target{样式声明} //常见用法先让img等display:none,target激活时display:block,
②结构伪类
通过网页的标签结构，精确的找到元素
selector:first-child{样式声明} 匹配符合selector的元素父元素的第一个儿子
同时，这第一个儿子也得符合selector
selector:last-child{样式声明}匹配符合selector的元素父元素的最后一个儿子
同时，这个儿子也得符合selector
selector:nth-child(n) 匹配其父元素的第n个儿子，n从1开始
selector:nth-type-of(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
关键词:Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1,以此类推)。
公式 (an + b)。表示周期的长度，n 是计数器(从 0 开始)，b 是偏移值。 如:selector:nth-type-of(3n+0) 匹配选择器下下标3的倍数的元素 偏移量为0
其中selector可以是div/img/p/等等....
③:empty (绝对空)
selector:empty{样式申明} ，匹配内部没有任何元素的标签
其中selector可以是div/img/p/等等.... (可用于检测页面中的空标签)
④:only-child
selector:only-child{样式声明} 匹配属于其父元素的唯一子元素
其中selector可以是div/img/p/等等....
⑤否定伪类
selector:not(selector){样式声明} 匹配所有不符合selector的元素
其中selector可以是div:firs-child/img:last-child/p:nth(n)-child/等等....
4.伪元素选择器
选择器两个：和一个：的区别
伪类选择器 一个冒号： 匹配一个元素某种状态下的样式
伪元素选择器 两个冒号：: 匹配一个元素一部分内容的样式
①控制文本的伪元素
selector::first-letter{} 或selector :first-letter{} 匹配文本中首字母样式
selector::first-line{} 或 selector:first-line {} 皮喷文本中首行文本样式
上面两种一个冒号和两冒号效果相同,下面这个只有双冒号才生效
selector::selection{} 选中的文本时的样式
②内容生成
使用css在页面上添加html的内容
selector::before{样式声明} 或者 selector:before{} 在内容区域的最前面添加了一个行内元素
样式声明中 必须加content:""; 其中""为在内容区域添加的内容通过样式可以改变其元素类别为block inline-block等等
selector::after{} 或者selector :after{}在内容区域的最后面添加了一个行内元素
和before一样必须加content:"";
I .内容生成解决可以解决外边距溢出
.clear_overflow::before{
content:"";
display: table;
}
在对应父元素添加该类即可
II .使用内容生成，解决浮动的高度坍塌
.clearfix::after {
display: block;
clear: both;
content: "";
}
二弹性布局
作用:解决一个元素中，所有子元素的布局方式灵活的设置子元素在父元素中水平和垂直对齐问题
1.弹性布局的相关概念(不能使用上下左右描述弹性布局)
①弹性容器
设置了display:flex的元素
弹性容器本身不是弹性布局
子元素们才遵循弹性布局的规则显示
②弹性项目
设置了display:flex的元素的子元素们
弹性项目遵循弹性布局的规则显示
③主轴
项目们的排列方向称为主轴
默认，主轴为x轴，主轴起点在左侧
主轴为x轴，主轴起点在右侧
主轴为y轴，主轴起点在顶端
主轴为y轴，主轴起点在底端
④交叉轴
永远与主轴垂直的方向
2,语法
给弹性容器编写
display:flex; 让块级元素变成容器
display: inline-flex; 让行内元素变成容器
注意：弹性布局的目的，就是灵活的控制项目们水平/垂直对齐方式
所以，当元素变成容器后，容器和项目所有改变水平/垂直对齐方式的属性都失效
弹性容器：text-align:; 失效
弹性项目：float 失效
元素一旦成为弹性项目，就可以设置宽高
3,容器属性
①主轴方向，4个方向
flex-direction: row; 默认值 主轴方向左到右 →
flex-direction:row-reverse 主轴方向右到左←
flex-direction:column 主轴方向上到下↓
flex-direction:column-reverse 主轴方向下到上↑
②设置项目的换行
flex-wrap: nowrap; 默认值，主轴空间不够，项目自动压缩，不换行
flex-wrap:wrap 主轴空间不够，项目不压缩，换行显示
③上面两个属性的简写方式
flex-flow: direction wrap; 如:flex-flow:row wrap
④设置项目们在主轴上的排列方式
justify-content: flex-start; 默认值 主轴起点对齐
justify-content:flex-end 主轴终点对齐
justify-content:center 主轴中心对齐
justify-content:space-between 两端对齐
justify-content:space-around 每个项目左右距离相同
⑤设置项目们在交叉轴上的排列方式,交叉轴永远垂直于主轴
align-items: flex-start; 默认值，交叉轴起点对齐
align-items: flex-end 交叉轴终点对齐
align-items: center 交叉轴中心
align-items: baseline 让项目内部文本的基线对齐
设置不同高度和内边距后
align-items: stretch 项目在交叉轴方向若不设置尺寸项目会充满交叉轴
4.项目属性 (写在某个项目中，只控制1个项目，不影响其它项目)
①单独控制一个项目交叉轴的对齐方式
| 语法 | 作用 |
| align-self:flex-start | 默认值，交叉轴起点对齐 |
| align-self:flex-end | 交叉轴终点对齐 |
| align-self:center | 交叉轴中心对齐 |
| align-self:baseline | 让项目内部文本的基线对齐 |
| align-self:stretch | 项目在交叉轴不设置尺寸,项目会充满交叉轴 |
| align-self:auto | 使用父元素设置的对齐方式 |
②调整项目在主轴上的排列顺序
order: 不带单位的数字 默认值在-1~~0之间
根据主轴方向和主轴排列方式，数值越小的，越优先显示
③flex-shrink
控制项目如何缩水,如果主轴方向空间不足，控制每个项目如何变小
父元素缩水的尺寸，项目们按照取值的占比，自动分别各自的缩水尺寸
flex-shrink:1； 默认值
flex-shrink 0 不缩水
④flex-grow与flex-shrink相反
控制项目如何增长,如果主轴方向空间盈余，控制每个项目如何变大
父元素盈余的尺寸，项目们按照取值的占比，自动分别各自的增长尺寸
flex-grow：0 默认值
⑤flex-basis
设置项目在主轴方向上的尺寸
flex-basis：px为单位的数字
flex-basis: % 取父元素的百分比
当尺寸width或height和flex-basis冲突，以flex-basis为主
⑥总结
1.不要把img直接当做项目，通常图片会拉伸会失真,使用前最好套个div
2.flex-grow, flex-shrink和flex-basis简写方式
flex:0 0 50%; //分别表示grow 不增长 shrink不缩水 basis在主轴占比
5.关于主轴和交叉轴的总结
主轴有4个方向
交叉轴只有两个方向
| 主轴 | ← | → | ↑ | ↓ |
| 交叉轴 | ↓ | ↓ | ← | ← |
三,转换
作用:改变元素在页面中的位置，大小，角度以及形状
注意：转换只用于页面特效，不可用作页面布局
1,转换的属性
transform:转换函数1 转换函数2......;
2. 2D转换,只在x轴和y轴上发生转换效果
①位移
| 语法 | 效果 |
| transform:translate(100px) | x轴向右移动100px |
| transform:translate (100px,123px) | x轴向右移动100px y轴向下移动123px |
| transform: translateX(150px) | x轴向右移动150px |
| transform:translateY(150px) | Y轴向下移动150px |
②缩放
| 语法 | 效果 |
| transform:scale(n) | 同时设置x,y的缩放 n>1放大 0<n<1缩小 -1<n<0缩小 反转 n<-1 放大,反转 |
| transform:scale(-1.5,0.5) | 分别设置x放大y轴缩小 |
| transform:scalex(-0.5) | 单独设置x轴 语法中的x大小写都支持 |
| transform:scaley(-0.5) | 单独设置y轴 语法中的y大小写都可 |
③旋转
transform:rotate(n deg); deg:角度 n>0顺时针装 n<0逆时针转
注意:
1.转换原点会改变旋转效果
设置转换的原点 transform-origin:x y; 以px为单位的数字，%，
或者transform-origin:关键字(left/center/right,top/center/bottom)
2.旋转会带着坐标轴一起旋转，所以旋转之后的位移方向会受到影响
④倾斜
skew()等同于skewx()
skewy()
3.3D转换 相比2D添加的z轴
①透视距离
模拟人的眼睛到3D转换的物体之间的距离
透视距离只能定义在3D转换元素的父元素上
perspective: 200px;
②3D旋转
| 语法 | 作用 |
| rotateX(45deg) | 围着x轴旋转 |
| rotateY(45deg) | 围着y轴旋转 |
| rotateZ(45deg) | 围着z轴旋转 |
| rotate3d(x,y,z,ndeg) | x=1表示参与旋转x=0表示不参与旋转其余两轴一样 n表示参与旋转的轴旋转的度数 |
四,过渡:让css某个属性的值，在一段时间平缓的变化
1,语法
①设置参与过渡的属性
transition-property: background border-radius;
transition-property:all;
all所有支持过渡的属性都参与过渡包含有.颜色相关;.具体数值;阴影;转换
②设置过渡持续时间
transition-duration: 3s;
③设置时间曲线函数
transition-timing-function: ease;
ease 默认值，慢速开始，加速，减速结束
linear 匀速
ease-in 缓慢开始，一直加速
ease-out 快速开始，减速结束
ease-in-out 慢速开始，急加速，急减速结束
④设置过渡的延迟(多少秒后开始过渡)
transition-delay:2s ;
⑤简写
transition: property duration timing-function delay;
注意：duration和delay的顺序不能改变(会改变持续时间和延迟时间)
最简方式 transition: duration
2,过渡代码的编写位置
写在元素的选择器中，过渡效果有去有回(效果会倒放)
写在伪类中，过渡效果有去无回(直接回到初始状态)
3.过渡的总结
过渡是2套css之间的变化
过渡效果靠伪类选择器激活
五,动画
动画就是过渡的升级版
动画是2套css或者多套css之间的变化
动画可以用伪类激活，也可以通过刷新页面激活
1.关键帧
在对应时间点，在这个时间点显示的css
0%可以写为from
100%可以写为to
2.定义动画
@keyframes name{ //name自定义
0%{border-radius: 0;} //可以写多种css样式 如2d的rotate,translate ,等等
25%{border-radius: 50%;}
50%{border-radius: 0;}
75%{border-radius: 50%;}
100%{border-radius: 0;}
}
3.调用动画
| 作用 | 语法 |
| 设置调用动画的名称 | animation-name:zidingyiname |
| 设置动画的持续时长 | animation-duration:33s |
| 设置动画的时间曲线函数 | animation-timing-function:ease |
| 设置动画的延迟 | animation-delay: 1s; |
4.动画的高级属性
①动画的播放次数
animation-iteration-count: infinite; 无限 //写数字字为次数
②动画的简写方式
animation:name duration delay timing-function count; //(分别表示动画名字,持续时间,延迟时间,时间曲线,动画执行次数)
duration 在delay之前，就可以,其他顺序可以改变
最简方式animation:name duration；
③动画的播放顺序
animation-direction: normal;动画执行顺序 0%~~100%
animation-direction: reverse; 100%~~0%
animation-direction:alternate ; 动画执行顺序 第一遍 0%~~100% 第二遍 100%~~0% 第三遍 0%~~100%以此类推
5.动画的兼容性
低版本浏览器，不能执行动画
低版本浏览器的兼容，需要在定义动画时，添加前缀
@-ms-keyframes 动画名称{} //微软..
@-o-keyframes 动画名称{} //欧朋
@-moz-keyframes 动画名称{} //火狐
@-webkit-keyframes 动画名称{} //谷歌..
6.动画在项目中的使用方式
引用动画工具包
方法①<link rel="stylesheet" href="animate.css"/> //需要下载对应的css文件
方法②
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
直接引用网址
在样式调用动画名称
<h1 class="animate__animated animate__bounce">element</h1> //第一个class参数必须有
表示动画持续时间,第二个调用的为动画名称
也可以通过animation:name duration；调用
六css优化
1.目的
减少服务器端的压力
提升用户体验
2.css优化原则
减少http请求个数 (精灵图 sprites 雪碧图)只需要向服务器请求一次图片剩余的图片通过调位置获取
页面的顶部引入js和css
3.css代码优化
css代码尽量短(能重用就重用，能简写就简写)
代码压缩(可以大幅度减少占用的内存)
七.关于样式重置
1.CSS reset
由于不同浏览器，不同内核对于css的认知不同
导致同一篇css，在不同浏览器上可能有不同效果
而且不同浏览器，默认提供给元素的默认样式
所以，我们在开发之前，要把元素默认样式进行统一
这个行为就叫做css reset,专门指，多数清空，少数统一
*{margin:0;padding:0}
注意：css reset，没有规则，只要符合网页需求，怎么写都对
但是，css reset会让元素失去本身的语言意义------简单粗暴，霸道
2.normalize.css
是一个非常小的css文件，写好的，我们直接引用
处理了不同浏览器的bug问题，统一了不同浏览器的样式取值，
保留了语义-----------细腻，温婉
bootstrap使用normalize.css
完--------另一篇博客将为各位介绍Boot strap
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
