CSS核心

一. 复杂选择器

1.兄弟选择器

通过兄弟关系，匹配元素。
只能找弟弟，不能找哥哥
1.相邻兄弟选择器 选择器1+选择器2{}
匹配紧紧挨着选择器1后面，并且符合选择2的元素
2.通用兄弟选择器 选择器1~选择器2{}
匹配选择器1后面所有符合选择器2的元素
项目中应用，实现一组元素，除去老大，都执行某个样式

<style>
        li~li {
            background-color: firebrick;
        }
</style>

  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
   </ul>

项目中应用，实现一组元素，除去老大，都执行某个样式

2. 属性选择器(不是为写页面设计的，为js的dom准备)

[attr]{样式声明}  匹配具有attr这个属性的元素
[attr1][attr2]...{} 匹配同时定义这些属性的元素
[attr=value]{} 匹配具有attr属性并且值为value的元素
[attr1=value1][attr2=value2{}] 匹配这些属性并且值为这些value的元素

elem[attr]{}  匹配具有attr属性的elem元素
elem[attr=value]{}  匹配具有attr属性并且值为value的elem元素
elem[attr1=value1][attr2=value2].....{}

后期dom操作，使用自定义属性，查询目标对象
模糊属性值的匹配
[title^="gan"]{color:Red;}  匹配元素title属性值以gan开头
[title$="da"]{color:Red;}   匹配元素title属性值以da结尾
[title*="meng"]{color:Red;} 匹配元素title属性值含有meng
[title~="meng"]{color:Red;}  匹配元素title属性值含有meng这个独立单词(meng前后有空格)

3. 伪类选择器

已经学过的伪类 :link  :visited  :hover  :active  :focus
注意:在2012-2015重新定义了伪类的编写规则
在这个时间点之前，发明的伪类选择器使用单冒号声明
在这个时间的过程中，发明的伪类选择器使用单冒号/双冒号声明
在这个时间点之后，发明的伪类选择器使用双冒号声明

①目标伪类（h5新出的）

匹配元素被锚点激活的状态
selector:target{}

②结构伪类

通过html结构来匹配元素
selector：first-child{}  匹配selector父元素的第一个儿子，同时这个大儿子还必须符合selector
selector：last-child{}  匹配selector父元素的最后一个儿子，同时这个小儿子还必须符合selector
select:nth-child(n){} 匹配selector父元素的第n个儿子，同时这个儿子还必须符合selector，n从1开始

③绝对丁克

:empty{}内部不能有其它元素，不能有文本，空格，回车

④独生子女

:only-child{} 匹配是其父元素唯一的子元素
可以有兄弟空格，回车，文本，就是不能有兄弟元素

⑤否定伪类

:not(selector){}  所有符合selector的元素都不要

4. 伪元素选择器

匹配某个元素的一部分
w3c最新的规定，推荐所有的伪类使用双::编写
但是之前已经出现的伪类，还使用单:

①匹配首字符

:first-letter 或者  ::first-letter

②匹配首行

:first-line  或者  ::first-line
注意，首字符和首行冲突，以首字符为准

③::selection

只能写双::，匹配用户选中的文本
只能定义字体颜色和背景颜色
对首字符无效

5. 内容生成

使用css在元素的内容区域最前端或者最后端，添加一个假的元素
::before 或者 :before
在元素的内容区域最前端添加一个假的行内元素
::after 或者 :after
在元素的内容区域最后端添加一个假的行内元素
行内元素的内容使用content设置，但是只能设置文本和url(img)
我们可以自由的对这个假元素设置各种样式

内容生成可以解决的问题
(css有一些特殊情况，需要添加新的元素来解决，这个时候不用html添加新元素，要使用内容生成来添加新元素)
1.外边距溢出，解决方案----在父级的内部添加一个空的table当做大儿子
#d2::before{
 content:"";
 display: table;
}
2.解决高度坍塌，解决方案----在父级的内部追加一个空的div当做小儿子，这个div设置clear:both
#parent::after{
  content:"";
  display: block;
  clear:both;
}

二. 弹性布局

1. 什么是弹性布局

主要解决某个元素中内部子元素的布局方式，为布局提供的非常大的灵活性和操控性
设置了display：flex的元素本身不是弹性布局
它的儿子们是弹性布局

2. 弹性布局的专业术语

1.弹性容器
当一个元素设置了display:flex
这个元素内部的子元素就按照弹性布局方式排列
这个元素叫做弹性容器
2.弹性项目
当一个元素设置了display:flex
这个元素内部的子元素就按照弹性布局方式排列
这些子元素，叫做弹性项目
3.主轴
项目的排列方向，称为主轴
x轴，主轴起点在左侧，主轴终点在右侧
x轴，主轴起点在右侧，主轴终点在左侧
y轴，主轴起点在顶部，主轴终点在底部
y轴，主轴起点在底部，主轴终点在顶部
4.交叉轴
永远与主轴垂直相交的一根轴
主轴可以设置，交叉轴不能设置，只会自动根据主轴方向改变

3. 语法

display:
 flex       经常用于让块级元素变为弹性容器
 inline-flex; 经常用于让行内元素变为弹性容器
特点：
1.当元素变为弹性容器之后，这个容器的text-align失效，内部项目不会执行水平对齐
2.弹性项目，可以设置宽高
3.项目的浮动，clear：both都失效
总结：之前所有学习过的对齐方式，对于弹性项目都失效
      弹性项目的对齐，取决于主轴、交叉轴

4.样式属性

①容器的样式

所有项目都要用
1.主轴方向（4根主轴）
flex-direction:row;           默认值，主轴为x轴，主轴起点在左侧
             row-reverse    主轴为x，主轴起点在右侧
             column        主轴为y轴，主轴起点在顶部
             column-reverse 主轴为y轴，主轴起点在底部
2.项目换行
flex-wrap:nowrap;默认值，主轴方向空间不够也不换行，项目压缩
          wrap 主轴方向空间不够时，项目自动换行
          wrap-reverse; 交叉轴终点对齐，主轴方向空间不够时，反方向换行
3.上面两个属性的缩写方式
flex-flow:direction wrap;
4.定义项目在主轴上的对齐方式
justify-content: 
flex-start 默认值，主轴起点对齐
center;   主轴的中心对齐
flex-end  主轴的终点对齐
space-around 每个项目的间隙相同
space-between 两端对齐
5.交叉轴上对齐方式 （2根）
align-items
flex-start 默认值。在交叉轴起点对齐
center    交叉轴中间对齐
flex-end  交叉轴终点对齐
baseline  每个项目中的文本，基线要对齐
stretch   项目在交叉轴方向上没有定义尺寸，项目将充满交叉轴
            

②项目的样式

某一个项目使用
1.给某个项目单独设置交叉轴上的对齐方式
align-self
flex-start 默认值。在交叉轴起点对齐
center    交叉轴中间对齐
flex-end  交叉轴终点对齐
baseline  每个项目中的文本，基线要对齐
stretch   项目在交叉轴方向上没有定义尺寸，项目将充满交叉轴
auto     使用容器定义的align-items的值
2.项目在主轴上的排列顺序 order
取值为无单位整数
定义项目的排列顺序，值越小，越靠近主轴起点，默认值为0
3.flex-grow
当主轴有多余的区域，项目是否放大，放大比例是多少
默认值为0，不放大
把多余的区域，按照比例分配，加上原始的尺寸，就是每个项目的实际尺寸
4.flex-shrink
当弹性布局设置主轴不可换行，当主轴空间不够，项目们会自动收缩主轴方向上的尺寸
flex-shrink用来设置项目收缩时的大小
把整个主轴方向压缩的尺寸分为n份，设置每个项目具体被压缩几份
flex-shrink：取值为数字，默认值为1，取值为0是不许压缩

5.flex-basis
设置某个项目在主轴上占据的基本尺寸，通常取值为%
flex-basis优先级大于项目自己定义的尺寸
一般不给图片设置此尺寸
6.flex-grow  flex-shrink  flex-basis的缩写
flex:0  0  20%;

三. CSS hack

由于不同浏览器对于css的解释和认知不同，导致同一份css在不同浏览器会生成不一样的效果
我们要做浏览器的兼容，就叫做写css hack
background:-webkit-linear-gradient();
-webkit-
-o-
-moz-
-ms-

四. 转换

1.什么是转换

改变元素在页面中的大小，位置，角度以及形状
2D转换，只发生在x轴和y轴上的转换
3D转换，添加了z轴上的转换

2. 转换属性

transform:转换函数1 转换函数2 ......;

3. 2D的转换函数

①位移

translate(x)和translatex(x)
在x轴位移
translatey(y)
在y轴的位移
translate(x,y)同时设置x轴和y轴的位移

②缩放

scale(n)
x轴和y轴同时缩放n倍
scale(x,y)
分别设置x轴和y轴的缩放倍数
scalex(x)
单独设置x轴的缩放
scaley(y)
单独设置y轴的缩放
n>1  放大
0<n<1 缩小
-1<n<0  缩小并反转
n<-1 放大并反转

③旋转

rotate(ndeg)
n>0 顺时针
n<0 逆时针
注意：
1.旋转原点会影响旋转效果
transform-origin:x,y;
取值：1.px为单位的数字
      2.%
      3.关键字  x:left/center/right   y:top/center/bottom
2.旋转是连同坐标轴一起旋转的，会影响旋转之后的位移效果

④倾斜

1.skew(ndeg)和skewx(ndeg)
让y轴向着x轴倾斜ndeg，n>0逆时针，n<0顺时针
2.skewy(ndeg)
让x轴向着y轴倾斜ndeg,n>0顺时针，n<0逆时针
3.同时设置x轴y轴的倾斜
skew(xdeg,ydeg)

4. 3D的转换函数

3d都是模拟的
1.透视距离
模拟人的眼睛到3d转换物体之间的距离，距离不同，看到的效果不同
perspective:距离  一定要设置在3d转换元素的父元素上
2.3D旋转
1.transform:rotatex(xdeg)  
以x轴为中心轴，旋转。老式爆米花机，烤羊腿
2.transform:rotatey(ydeg)
以y轴为中心轴，旋转。旋转门，土耳其烤肉，钢管舞
3.transform:rotatez(zdeg)
以z轴为中心轴，旋转。电风扇，摩天轮。
4.让3条轴同时转
transform:rotate3d(x,y,z,ndeg);
x,y,z取值为0，代表不参与旋转。取值为非0，代表该轴旋转的速率

五. 过渡

让css的值，在一段时间从一个状态平缓的变化为另一个状态

1.语法

①设置参与过渡的属性

transition-property：属性1  属性2.......;
取值  all   所有支持过渡的属性，都参与过渡
支持过渡的属性，有哪些
1.颜色属性
2.大多数取值为数值的属性
3.阴影
4.转换

②设置过渡时长

transition-duration
取值  s  ms

③设置时间曲线函数

transition-timing-function:
取值，1.ease 默认值，慢速开始，中间提速，慢速结束
      2.linear 匀速
      3.ease-in 慢速开始，一直加速
      4.ease-out 快速开始，一直减速
      5.ease-in-out 慢速开始，中间大幅度加速，再大幅度减速

④设置过度的延迟时间

transition-delay:

⑤过渡代码的编写位置

过渡代码写在原始样式中，过渡效果有去有回
        写在激活过渡的伪类中，过渡效果，有去无回。

⑥过渡的简写方式

transition:property  duration  timing-fucntion  delay;
最简方式 transition：duration;  属性默认是all

六 动画

1.什么动画

是过渡高级操作，就是一个或者多个过渡效果拼接在一起
过渡和动画的区别

过渡	动画
两个css效果之间的变化	两个或者多个css效果之间的变化
伪类激活	伪类激活或者F5激活

2.控制的动画的关键概念

用关键帧来控制每一个时间点执行的css值
关键帧
1.执行动画的时间点
2.在这个时间点上的样式

3.动画的使用

①使用关键帧定义动画

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

②调用定义好的动画

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

项目中的动画，90%都使用animate.css提供的动画css

4.动画的特有属性

①指定动画的播放次数

animation-iteration-count
取值，具体数值
      infinite无限

②动画的播放顺序

animation-direction: 
normal  0~100%  默认值
reverse; 100%~0   反向
alternate 奇数次normal  偶数次 reverse

③动画的简写方式

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

④动画开始之前和结束之后的填充方式

animation-fill-mode: 
backwards; 在delay的时间内，显示动画的第一帧
forwards   动画结束之后，停留在最后一帧
both

5.动画低版本浏览器兼容性的问题

要在定义动画的时候写内核
@keyframes 动画名称{}
@-webkit-keyframes 动画名称{}
@-o-keyframes 动画名称{}
@-moz-keyframes 动画名称{}
@-ms-keyframes 动画名称{}

七. CSS优化

1.css优化的目的
后台减少服务器端压力
提升用户体验
2.优化的原则
尽量减少http的请求个数（使用精灵图、雪碧图）
页面的顶部，引入css文件
将css和js放到单独的文件中
3.css代码的优化
合并样式(群组，简写方式，尽量减少代码量)
避免出现空的src和href
代码压缩

八. css reset 和 normalize.css

1.什么是样式重置

不同浏览器，对于元素的默认样式解释不同
导致同一css代码，在不同浏览器运行会有不同效果
我们需要css reset 把浏览器默认样式进行统一
*{margin:0;padding:0}

2.css reset

没有规则，没有标准
css reset比较霸道，不允许元素拥有自己的特性，统一清空了
很多元素就失去了语义的特性

3. normalize.css

normalize.css是css reset一种替代方案
是一个非常小的css文件，保留很多标签语义特性，又同时排除了很多浏览器的bug
normalize.css有一个标准代码
没有强制的清除某一些样式，只是让大家进行统一