一复杂选择器

兄弟元素：具有同一个父元素的同级元素之间称为兄弟元素

注意：兄弟选择器只能通过哥哥找到弟弟，不能通过弟弟找哥哥

①通用兄弟选择器

写法:选择器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可以是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个项目，不影响其它项目）

①单独控制一个项目交叉轴的对齐方式

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

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: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旋转

四,过渡:让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.调用动画

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

css核心