CSS3总结（核心）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一.复杂选择器

1.兄弟选择器

  兄弟元素：具有同一个父级元素的同级元素称为兄弟元素
  兄弟选择器只能通过哥哥找弟弟

①相邻兄弟选择器

 选择器1+选择器2（样式声明）匹配紧紧挨着选择器1的选择器2的元素

②通用兄弟选择器

 选择器1~选择器2（样式声明）匹配选择器1后面所有满足选择器2的元素
  使用场合：项目中，除了老大，后面所有弟弟都应用的样式，用兄弟选择器
  这中需求，一般通用兄弟选择器的较多

2.属性选择器

[attr]{样式声明} 匹配了所有定义了attr属性的元素
[attr=value] {样式声明}匹配了所有定义了attr属性并且值为value的元素
[attr1] [attr2] {样式声明}匹配所有定义了attr1和attr2属性的元素
[attr1=value] [attr2=value] {样式声明} 匹配所有定义了attr1和attr2的属性，并且值为value1和value2的元素
elem[attr] {样式声明}
elem[attr=value] {样式声明}
对属性值的模糊匹配
[attr *= value] {样式声明}匹配属性值中，包含value的属性
[attr ^= value] {样式声明} 匹配属性值中，以value开头的属性
[attr $= value] {样式声明}匹配属性值中，以value结尾的属性
[attr ~= value] {样式声明}匹配属性值中，包含value这个独立单词的属性

3.伪类选择器

:link :visited :hover :active :focus
伪类选择器，使用:(单冒号)定义，匹配元素某一种状态下的样式
伪元素，使用::(双冒号)定义，修饰元素的某一部分内容的样式

①目标伪类

  当元素被锚点激活时，匹配的样式
  :target{样式}

②结构伪类

  selector:first-child{样式声明}匹配selector父元素的第一个儿子，这个大儿子还必须是selector
  selector:last-child{样式声明}匹配selector父元素的最后一个儿子，这个小儿子还必须是selector
  selector:nth-child(n){样式声明}匹配selector父元素的第n个儿子，这个儿子还必须是selector

③:empty

  匹配内部没有任何元素的标签
  内部不能有标签，不能有文本，不能有回车，不能有空格

④:only-child

  匹配属于其父元素的唯一子元素
  子元素如果有同级文本，也算是唯一子元素，会被正常匹配
  selector:only-child{}

⑤否定伪类

  :not(selector) {样式声明}
  符合selector的元素都不要

⑥伪元素

  匹配某一个元素中某一部分的样式
  :first-letter或者::first-letter匹配元素首字符的样式
  :first-line或者::first-line 匹配元素首行的样式
  由于这两个伪元素出现的比较早，所以单双冒号都可以用
  ::selection匹配元素中，被选中文本的样式
  只能用双冒号，只能设置字体颜色和背景颜色

⑦伪元素– – – 内容生成

  ::before{}使用css在当前元素内容区域内的最前面添加一个假的行内元素
  ::after{}使用css在当前元素内容区域内的最后面添加一个假的行内元素
  content=""设置这个行内元素的内容，这个内容只能设置文本或者url(img)
  解决外边距溢出
  解决高度坍塌

.clearfix::after { 
	display:block; 
	clear:borth; 
	content=""; 
}

二.弹性布局

  弹性布局是一种布局方式
  主要解决某个元素中子元素的布局方式
  给一个元素设置display:flex。这个元素的儿子们会变成弹性布局。不会影响到孙子。

1.弹性布局的4个专用名词

弹性容器：设置display:flex的元素，发生了弹性布局的元素们的父元素。
.clearfix::after { display:block; clear:borth; content=""; } 12345678
弹性项目：设置display:flex的元素的儿子们，真正发生了 弹性布局的元素们
主轴：弹性项目们的排列方向
  主轴是x轴，主轴起点在左侧，主轴终点在右侧
  主轴是x轴，主轴起点在右侧，主轴终点在左侧
  主轴是y轴，主轴起点在顶部，主轴终点在底部
  主轴是y轴，主轴起点在底部，主轴终点在顶部
交叉轴：是永远与主轴垂直的一个方向
  弹性布局十分灵活，就是靠控制项目在主轴上的对齐方式，和项目在交叉轴上的对齐方式。
  来掌控项目的位置
  当元素变为弹性容器时，text-algin失效
  弹性项目的float失效
  给父元素设置 display:flex;

2.容器的css属性

  控制所有的弹性项目

①主轴方向4条

flex-direction: row ; 默认值 → 
flex-direction:row-reverse; ← 
flex-direction:column; ↓ 
flex-direction:column-reverse; ↑

②容器在主轴方向空间不够时，项目是否换行

flex-wrap: wrap; 项目不压缩，换行 
flex-wrap:nowrap; 项目压缩，不换行

③换行和主轴的缩写

flex-flow: row wrap;

④设置项目在主轴上的排列方式

justify-content: flex-start; 默认值 主轴起点对齐 
justify-content: center; 主轴中心对齐 
justify-content: flex-end; 主轴终点对齐 
justify-content: space-around ; 每个项目左右的空间相同 
justify-content: space-between; 两端对齐，每个空白相同

⑤设置项目们在交叉轴上的排列方式

align-items: flex-start; 默认值 
align-items: flex-end; 
align-items: center; 
align-items: baseline; 让项目中的文本基线对齐 
	如果项目们在交叉轴不写尺寸，项目充满交叉轴

3.项目的css属性

  控制某一个弹性项目

①设置单个项目在交叉轴的排列方式

align-self: flex-start; 默认值 
align-self:flex-end; 
align-self: center; 
align-self: baseline; 让项目中的文本基线对齐 
align-self: stretch; 如果项目们在交叉轴不写尺寸，项目充满交叉轴 
align-self: auto; 使用父元素设置的align-items的值

②项目在主轴上的排列顺序

order:无单位的整数 
取值越小，越靠近主轴起点，默认值为0

③flex-grow

  如果主轴方向有剩余空间，把剩余的部分按照各个项目的取值分份。
  按照各个项目取值，把不同分数分配给不同项目。最终把整个主轴占满。
flex-grow:0; 默认值

④flex-shrink

  如果主轴方向空间不足，把不足的部分按照取值分份
  按照各个项目取值，不同的项目减去自己的份数
  flex-shrink:1;默认值

⑤flex-basis

表示项目在主轴方向的基本尺寸
优先级大于宽高
flex-basis: px为单位的数字
                   %

⑥flex-grow flex-shrink flex-basis 的简写

flex: 0 0 20%;

三.CSS Hack

写浏览器兼容，低版本的浏览器不兼容很多css样式
-webkit-
-moz-
-o-
-ms-

四.转换

改变元素在页面中的位置，大小，角度，形状。不要用转换做页面布局
2D转换 只在x轴和y轴上发生转换效果
3D转换 在2D的基础上添加了z轴的转换效果
所有的转换都用了一个同一个属性
transform:转换函数1 转换函数2 转换函数3……;

1.2D转换

①位移

transform: translate(150px); 
translate(v1) x轴位移 + → - ← 
translate(v1,v2) 分别设置x轴和y轴 v1为x轴 v2为y轴 
transform: translatex(150px); 设置x轴位移 
transform: translatey(150px); 设置y轴位移

②旋转

transform: rotate(ndeg); n为正，顺时针 n为负，逆时针 
//旋转注意事项 
1.转换原点，不同的转换原点会产生不同的结果 
transform-origin: x y; 
			取值，以px为单位的数字 
					%
					关键字，x:left/center/right 
						   y:top/center/bottom 
2.旋转是带着坐标轴一起旋转的 
  所以旋转之后再位移，会发生偏移

③缩放

改变元素的大小

scale(v1) 同时设置x轴和y轴的缩放 
scale(v1,v2) 分别设置x轴和y轴的缩放 
scaleX(v1) 单独设置x轴的缩放 
scaleY(v1) 单独设置y轴的缩放 
	取值：无单位的数字，代表放大或缩小的倍数 
		  v1>1 放大 0>v1>1 缩小 
		  v1<-1 放大并翻转 -1<v1<0 缩小并翻转

④倾斜

skew(v1)和skewx(v1)

skewy(v1)

skew(v1,v2) 分别设置x轴和y轴的倾斜

2. 3D转换- - - - - 3D旋转

  页面中所有的3D效果都是模拟的
  透视距离 模拟人的眼睛到3D转换元素之间的距离
  由于距离不同，3D也会不同
  透视距离必须设置在3D转换元素的父元素上
  perspective: 200px;
  transform: rotate3d(1,1,1,ndeg);
  只有x轴旋转- - - - - -例(烤羊腿、爆米花机)
  只有y轴旋转- - - - - - 例(土耳其烤肉、旋转门)
  只有z轴旋转- - - - - - 例(风车、摩天轮、煎饼)

五.过度

  让两个css的值之间的变化过程显示出来，必须使用伪类激活

1.语法

①参与过渡效果的属性

transition-property:属性名1 属性名2….;
                              all 所有支持过度的样式都参与过度
支持过度的样式属性
颜色属性、大多数取值为数字的属性、阴影、转换

②设置过度时长

transition-duration:1s;

③设置延迟时间

transition-delay: 1s;

④设置时间曲线函数

transition-timing-function: ; 
ease 默认值 慢速开始，变快，减速，慢速结束 
linear 匀速运动 
ease-in 慢慢开始，一直加速 
ease-out 快速开始，一直减速 
ease-in-out 慢速开始，猛烈加速，猛烈减速，慢速结束

⑤简写方式

transition:property duration timing-function delay; 
最简方式 transition:duration;

⑥过度代码的编写位置

  过度代码写在原始样式中，过度效果有去有回
  过度代码写在伪类中，过度效果有去无回

六.动画

  动画是过度的升级版
  动画就是把多个过度效果整合到一起

过度	动画
两组css值之间的变化过程	多组css值之间的变化
伪类激活	伪类和刷新页面激活

1.关键帧

  关键帧：这一帧播放的时间 这一帧的样式
  我们使用关键帧来控制一组动画
  在定义动画的时候用关键帧来定义

2.动画的使用

①定义动画

@keyframes jump{ 
	0%{动画样式} 
	...... 
	100%{动画样式} 
}

②使用动画

/* 调用动画名称 */ 
animation-name:bounce; 
/* 动画的持续时间 */ 
animation-duration: 1s; 
/* 动画的时间曲线函数 */ 
animation-timing-function: ease; 
/* 动画的延迟 */ 
animation-delay: 1s;

③动画的特有属性

1.动画播放的次数 
animation-iteration-count: 具体的数字; 
						  infinite 无限次 
2.动画的播放顺序 
animation-direction: normal; 
					默认值 0% ~~ 100% 
					reverse 100% ~~ 0% 
					alternate 交替执行，第一遍0% ~~ 100%，第二遍100% ~~ 0%，第三遍 0% ~~ 100%，.... 3.简写方式 
animation:name duration timing-function delay count direction; 
最简方式 
animation: name duration; 
4.动画的填充方式 
animation-fill-mode: backwards; 延迟时间内，展示动画第一帧 
					 forwards 动画结束后，展示动画最后一帧 
					 both 前后都填充

3.低版本浏览器对动画的兼容

低版本浏览器不支持动画 
需要在定义动画的时候写兼容 
@keyframes name{关键帧} 
@-webkit-keyframes name{关键帧} 
@-moz-keyframes name{关键帧} 
@-o-keyframes name{关键帧} 
@-ms-keyframes name{关键帧}

七.CSS优化

1.优化的目的

  减少服务器端的压力
  提升用户体验

2.css优化的原则

  尽量的减少http请求的个数- - - - -缓存（精灵图/雪碧图的使用）
  在页面的顶部引入css文件
  将css和js写入单独的文件中

3.css代码的优化

  css文件一定要短
  尽量使用简写方式，能重用就重用，选择更短的取值
  避免出现空的src和href