css3 Core(核心)

一、复杂选择器

1.兄弟选择器

兄弟元素--->具备相同父级元素的平级元素之间，称为兄弟元素
所有的兄弟选择器，只往后找，不能往前找（只能找弟弟，不能找哥哥）
1.相邻兄弟选择器
选择器1+选择器2{}
确认一个哥哥，找到一个紧紧挨着符合条件弟弟
要求匹配选择器2紧紧挨着选择器1，修改选择器2的样式
2.通用兄弟选择器
获取某个选择器后面，所有满足条件的兄弟元素
一个哥哥，找到所有符合条件的弟弟
选择器1~选择器2{}

使用场合
经常用于，一组元素，第一个元素不要，后面元素都匹配的样式编写

2.属性选择器(不是为样式服务的,为dom服务)

[attr]{}   匹配页面中，具有attr属性的元素
elem[attr]{ }   匹配页面中，具有attr属性的elem元素
[attr=value]{}  匹配页面中，具有attr属性并且属性值为value的元素
elem[attr=value]{}
[attr1][attr2]....{}  同时具备attr1，attr2...属性的元素
elem[attr1][attr2]....{}  同时具备attr1，attr2...属性的elem元素
elem[attr1=value1][attr2=value2]....{}
如何为dom服务（需要自定义属性）
使用属性选择器进行模糊查询
[attr^=value]{}  匹配attr的值，以value开头的元素
[attr$=value]{}  匹配attr的值，以value结尾的元素
[attr*=value]{}  匹配attr的值，含有value的元素
[attr~=value]{}  匹配attr的值，含有value这个单独单词的元素

3.伪类选择器(目标 结构 否定伪类 空元素 唯一子元素)

:link  :visited  :hover  :active  :focus
es6规定，伪类选择器要是用::开头。但是es6之前就定义好的伪类，还是用单:
①目标伪类
匹配被激活的锚点，要应用的样式
:target{}
②结构伪类
通过结构关系，匹配元素
1.：first-child{}
　　　两个条件
	 找p元素父级的第一个儿子----p元素的大哥
	 这个大哥，还得是个p
2. :last-child{}  
     找到当前元素父元素的最后一个儿子
3. ：nth-child(n){}  找到其父元素的第n个儿子，n从1开始
③否定伪类
符合条件的元素都不匹配
:not(selector){}
④空元素
:empty{} 匹配内部没有元素的标签
没有元素：不能有后代元素，也不能有任何文本(空格和回车都不能有)
⑤独生子女
属于其父元素的唯一子元素
:only-child{}

4.伪元素选择器(匹配第一个字符 第一行文本 用户选中文本)

①匹配第一个字符
:first-letter  或者  ::first-letter{}
②匹配第一行文本
:first-line  或  ::first-line
当第一行和首字符冲突时，以首字符为准
③匹配用户选中文本
::selection 只有双冒号
对首字符无效
只能设置背景色和文本颜色

5.内容生成(content)

使用css命令，添加html元素，叫做内容生成
使用:after或者：：after给元素添加一个小儿子
              这个小儿子默认是行内元素
              使用content添加内容（文本或者url(img)）
使用:before或者：：before给元素添加一个大儿子
             这个大儿子默认是行内元素
             使用content添加内容（文本或者url(img)） 

6.内容生成解决的问题(外边距溢出 高度坍塌)

①外边距溢出
#parent::before{
  content: "";
  display: table;
}
②高度坍塌
#parent::after{
 content: "";
 display: block;
 clear: both;
}

二.弹性布局(******)

1.什么是弹性布局

主要解决某个元素中，子元素的布局方式
为布局提供非常大的灵活性

2.弹性布局的相关概念(容器 项目 主轴 交叉轴)

①容器
要发生弹性布局的子元素的爹
也就是设置了display：flex的元素
②项目
要发生弹性布局的子元素们
也就是设置了display:flex元素的儿子们
③主轴(4条)
项目们的排列方向，称之为主轴
项目们在主轴上的排列顺序，称为主轴的起点和终点
④交叉轴(2条)
永远与主轴垂直的方向
项目们在交叉轴上的排列，称为交叉轴的起点和终点

3.语法(设置弹性容器)

①设置弹性容器
display：flex;  把块级变为弹性容器
         inline-flex 将行内元素变为弹性容器
注意：
1.当一个元素设置为容器之后，这个容器的text-align，vertical-align失效
2.当元素变为弹性项目时，这个项目float，clear失效

4.容器的样式属性(设置主轴方向 项目换行 简写方式 定义项目在主轴上 交叉轴 的对齐方式)

①设置主轴的方向
flex-direction: 
row  默认值，主轴为x，主轴起点在左侧
row-reverse 主轴为x，主轴起点在右
column 主轴为y，主轴起点在顶部
column-reverse  主轴为y，主轴起点在底部
②设置项目换行
当容器在主轴方向，空间不够时，项目是否换行
flex-wrap: 
no-wrap  默认值，不换行
wrap     换行
wrap-reverse; 反转换行
③上面两个属性的简写方式
flex-flow: 主轴方向  换行;
④定义项目在主轴上对齐方式
justify-content:
 flex-start  默认值，主轴起点对齐
 center     主轴的中间对齐
 flex-end   主轴终点对齐
 space-around 每个项目左右外边距相同 (两端有空间)
space-between 每个项目之间间距相同，两端对齐(两端没有空间)
⑤交叉轴对齐方式
align-items: 
flex-start  交叉轴起点
center    中间
flex-end  交叉轴终点
baseline  每个项目的文本基线，永远对齐
stretch   前提，是项目在交叉轴方向不写尺寸，项目充满交叉轴

5.项目的样式属性

只能设置在一个项目上,不影响其他项目

①单独设置一个项目交叉轴对齐方式

align-self：
flex-start  交叉轴起点
center    中间
flex-end  交叉轴终点
baseline  每个项目的文本基线，永远对齐
stretch   前提，是项目在交叉轴方向不写尺寸，项目充满交叉轴
auto  使用容器align-items定义的值

②设置项目上主轴的排列顺序

order：取值为无单位数字，默认值为0
       值越小，离主轴起点越近！

③项目缩小

当主轴空间不够时，项目是否缩小，怎么缩小
flex-shrink:取值为不带单位的数字
默认值：1；
取值规则，不够的空间，按照取值，分配给各个项目做减法

④项目放大

当主轴空间过大，项目是否放大，怎么放大
flex-grow:取值为不带单位的数字
默认值：0；
取值规则，多出的空间，按照取值，分配给各个项目进行相加

⑤flex-basis

单独设置每个项目在主轴上的占据空间（不管主轴是x,还是y）
flex-basis: 
取值，% 容器主轴方向尺寸的百分比
      px固定数字
注意，定义了flex-basis，优先级高于项目本身宽高

⑥简写方式

是flex-grow  flex-shrink  flex-basis 的简写
flex:0  1  25%;

三.css hack

由于不同的浏览器对css的解析不同，会导致同一份css在不同浏览器生成不同的效果
开发人员需要针对不同浏览器写不同的css
这个行为，就叫做写css hack
-webkit-
-o-
-ms-
-moz-

四转换(****)

1.什么是转换

改变元素在页面中的位置，大小，角度，以及形状
2D转换，只在x轴和y轴上发生转换效果
3D转换，增加了z轴的效果。但是3D都是模拟的！

2.转换属性

transform：转换函数

3. 2D转换

①位移(改变元素在页面中的位置)

transform: translate（）
转换函数  1.translate(x)和translateX(x) 设置元素在x轴上位移的距离              +  → ， -  ←
          2.translateY(y) 设置元素在y轴上位移的距离
              + ↓ ,  - ↑
          3.translate(x,y) 同时设置x和y轴位移距离

②缩放(改变元素的大小)

transform：scale()
取值 1.参数为一个值  scale(v1)  同时设置x轴和y轴的缩放倍数
       v1>1  x轴和y轴都放大倍数
       0<v1<1  x轴和y轴都缩小
       -1<v1<0  x轴和y轴都缩小,并反转
       v1<-1    x轴和y轴都放大,并反转
     2.参数为两个值，分别设置x轴和y轴的缩放  
     3.单独设置x轴缩放  scalex()
     4.单独设置y轴缩放  scaley()

③旋转(改变元素的角度)

transform:rotate(ndeg);
  n：+  顺时针，  -  逆时针
注意：1.旋转原点会影响旋转效果
        transform-origin:x y

④倾斜

1.skewX(ndeg)和skew()
让y轴向着x轴倾斜n度
n:+ 逆时针    - 顺时针
2.skewY(ndeg)
让x轴向着y轴倾斜n度
n:+ 顺时针，  - 逆时针
3.同时设置x轴和y轴的倾斜

4. 3D转换(3D旋转)

页面中所有的3D转换都是模拟的

①透视距离

模拟人眼到3d转换元素之间的距离，
距离不同，效果不同
perspective:透视距离，此属性要加载到3D转换元素的父元素上

②3D转换

transform:
取值：1.rotateX(xdeg) 
        以x轴为中心轴，旋转元素角度（烤羊腿，老式爆米花机）
      2.rotateY(ydeg)
         以y轴为中心轴，旋转元素角度(旋转门，旋转木马，钢管舞，土耳其烤肉)
      3.rotateZ(zdeg)
         以z轴为中心轴，旋转元素角度(风扇，大风车，摩天轮)
      4.3D旋转  rotate3D(x,y,z,ndeg)
                   x,y,z 取值为不带单位的数字    0 代表不参与  其他数字代表角度的倍数
                                                负数代表反方向转

五.过渡(*****)

1.什么是过渡

让css的值，在一段时间平缓变化的效果

2.语法

①指定参与过渡的属性

transition-property:
取值，1.一个或多个css属性，多个属性间用空格分开
      2.all  所有支持过渡的属性
支持过渡的属性
1.颜色属性
2.大多数取值为具体数字的属性
3.阴影
4.转换

②设置过渡持续时长

transition-duration:  s/ms

③过渡时间曲线函数

transition-timing-function:
取值：1.贝塞尔曲线(自学) cubic-bezier(0,0,1,1)
      2.ease  默认值，慢速开始，加速，减速，慢速结束
      3.linear  匀速
      4.ease-in 慢速开始，一直加速
      5.ease-out  快速开始，减速结束
      6.ease-in-out  慢速开始，先剧烈加速，再剧烈减速，慢速结束

④过渡前的延迟时间

transition-delay:  s/ms

⑤过渡代码的编写位置

过渡写在原始样式中，过渡效果，有去有回
过渡写在hover中，过渡效果，有去无回

⑥过渡的简写方式

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

3.过渡和动画的使用区分

过渡	动画
两个css值之间的变化	至少两个或者两个以上css值之间的变化
必须使用伪类激活	可以使用刷新页面激活,也可以使用伪类

六.动画(******)

1.什么是动画

使元素从一种样式逐渐变为另外一种样式
就是过渡的升级，将多个过渡效果放到一起

2.使用关键帧来控制动画每一个状态

关键帧
1.这一帧执行的时间点
2.这一帧的样式

3.动画的使用步骤

①使用关键帧,来定义动画

@keyframes 动画名称{
  0%/from{样式}
  .....
  100%/to{样式}
}

②调用定义好的动画(动画名称 播放时长 时间曲线函数 动画的延迟)

```bash
1.指定调用动画的名称
animation-name:动画名称
2.指定动画播放时长
animation-duration:  s/ms
3.设置动画的时间曲线函数
animation-timing-function:
ease  默认值，慢速开始，加速，减速，慢速结束
linear  匀速
ease-in 慢速开始，一直加速
ease-out  快速开始，减速结束
ease-in-out  慢速开始，先剧烈加速，再剧烈减速，慢速结束贝塞尔曲线
4.设置动画的延迟
animation-delay: s/ms

4.动画的其他属性

①设置动画的播放次数

```css
animation-iteration-count:
取值：具体的数字
      infinite 无限

②定义关键帧的播放顺序

animation-direction: 
normal   0%--->100%
reverse   100%-->0%
alternate  轮流播放，奇数次正向，偶数次逆向

③动画的简写

animation:name duration  timing-function  delay  count  direction;
最简方式  animation:name  duration

④动画的填充状态

animation-fill-mode
none  默认值，不填充
backwards 动画的延迟时间内，填充第一帧
forwards  动画结束后，填充最后一帧
both      前后都填充

⑤设置动画的播放状态

animation-play-state:
paused   暂停
running  播放

5.动画的兼容性

如果低版本浏览器兼容动画效果，需要在声明动画的时候，添加前缀
@keyframes 动画名称{}
@-webkit-keyframes 动画名称{}
@-o-keyframes 动画名称{}
@-moz-keyframes 动画名称{}
@-ms-keyframes 动画名称{}

6.动画的第三方包使用

nimate.css的使用
https://daneden.github.io/animate.css/  下载animate.css文件
在页面中使用link引入这个css
在样式中直接调用动画名称

七.css优化

1.css优化的目的
减少服务器端压力
提升用户体验
2.css优化的原则
尽量减少http的请求个数（缓存，精灵图）
页面的顶部引入css文件
将css和js文件，放在独立的文件中
3.css代码优化
合并样式(能简写，就不单独写)
减少样式重写(能重用就重用)
避免出现空的href和src
代码压缩

八.css reset 和 normalize.css

1.什么是css reset
由于不同浏览器，给元素定义的默认样式不同，导致一份css有可能产生不同的效果
为了统一，在开发之前，我们把所有有差异的默认样式，清除或统一
css reset没有标准，项目中使用哪个版本，听领导安排
注意：css reset存在的问题
css reset 比较霸道，不管是不是违背语义，都要把样式清除和统一
2.normalize.css
他是css reset一种替代方案，比较温和
他在默认的html元素的样式上，提供跨浏览器的高度一致性，还修改了不同浏览器的bug