css 高级选择器

目录

属性选择器

结构性伪类选择器

目标伪类选择器

弹性布局

flex容器的指定：

主轴方向

项目在容器中的换行

主轴对齐方式

交叉轴对齐

 项目排序

项目属性值放大

项目属性缩小比例

高频面试题

项目的主轴尺寸

简写属性

css3动态效果

变换属性

变换属性的顺序

变换的基点

透视

animation动画属性

css文件大小（css代码优化）

删除未使用的css样式

高效使用css动画

css hank

css代码压缩

媒体查询

---

属性选择器

通过元素的属性名和值找到对应元素，作为选择器给与样式

[属性名=“属性值”]

示例：input [type=“password”]{}

[属性名&=“属性值”]{} 以某些属性值字段结尾的；

[属性名*=“属性值”]{}以值中包含部分字段的；

结构性伪类选择器

1. ul li:nth-child(n)，n代表第几个子元素；
2. ul li:nth-child(xn)，x代表几的倍数子元素；
3. ul li:nth-child(odd)，奇数子元素；
4. ul li:nth-child(even)，偶数子元素；
5. ul li:first-child，第一个子元素；
6. ul li:last-child，最后一个子元素；

目标伪类选择器

1. css框架中使用到了这个概念
2. 一定要用到a，a有一个锚点，通过其他元素的id，放到a的href中去关联有这个id的元素；
3. ：target目标元素被激活的时候；

弹性布局

弹性布局，flex布局，flexbox，弹性盒子，一维布局，

flex底层是浮动，把元素横向，竖向的排列方式当作布局格式；

flex容器的指定：

容器：

1. 采用flex布局的元素，称为flex容器；
2. 会控制其内部项目元素排列方式，容器有容器的属性；

项目：

1. 进行实际排列就叫项目；
2. 所有子元素称为容器成员，称为flex项目，简称项目；

主轴方向

主轴根据项目的排列方式分为：

1. flex-direction：row；默认，正向行模式
2. flex-direction：row-reverse；方向行模式
3. flex-direction：column；正向列模式
4. flex-direction：column-reverse；反向列模式

项目在容器中的换行

1. flex-wrap：nowrap；默认不换行，不换行会挤压主轴方向的尺寸
2. flex-wrap；wrap；换行；
3. flex-wrap：wrap-reverse；反向换行；

主轴对齐方式

对齐方式根据主轴方向决定位置

1. justify-content：flex-start；起点对齐
2. justify-content：flex-end；终点对齐
3. justify-content：center；居中对齐
4. justify-content：space-between；两端对齐，在主轴的一行/一列中，第一个元素贴着起点，最后一个元素贴着终点，其他元素的间距自动计算，相等间距；
5. justify-content：space-around；
   1. 均匀排列每个元素，每个元素周围分配相同空间；
   2. 元素的左右两侧间距相等，相邻兄弟元素之间的间距会*2展示
6. justify-content：space-evenly；平均间距

交叉轴对齐

交叉轴必须有富余空间

1. align-items：center；在交叉轴上居中对齐；
2. align-items：flex-start；在交叉轴上起点对齐；
3. align-items：flex-end；在交叉轴上终点对齐；
4. align-item:stretch；项目没有尺寸的时候默认撑满，前提是项目元素没有设置主轴方向的尺寸；

 项目排序

1. order属性是项目属性，实际作用是改变显示的排序；
2. order：0；默认值，都是0按照标签结构走；
3. 可以为整数数值，可以为负数；
4. 值越大排序越靠后，值越小排序靠前；

项目属性值放大

在容器的主轴尺寸，大于项目主轴方向尺寸的时候，项目不放大，也叫放大比例

1. flex-grow：0：不放大
2. 放大比例，负值无效
3. 页面中的元素放大，为1
4. 父级的剩余空间=所有项目的放大比例之和

项目属性缩小比例

1. 项目默认在容器主轴尺寸小于，项目主轴尺寸之和的时候，每个项目默认等比例缩小。
2. flex-shrink：1；默认值；
3. 不缩小值为0；
4. 可以为负数，值越大缩小比例越大；
5. 缩小空间=容器主轴尺寸-（项目主轴尺寸+项目缩小比例之和）

高频面试题

圣杯布局？双飞翼布局？左右两边固定宽度，中间自适应？

项目的主轴尺寸

flex-basis：指项目的主轴尺寸重新设置，优先级高于项目的宽度或高度

简写属性

1. flex：放大比例 缩小比例 主轴尺寸重置
2. flex：1
3. flex：0 1 auto；默认
4. flex：0 0；不放大不缩小

css3动态效果

过渡（贝塞尔曲线）

transition-property：属性 过渡时间 延迟时间 过渡方式;

简写：transition：all 1s 0s ease;       

1. transition-property：all； 需要过渡的属性
2. transition-dration：0s； 所用时间
3. transition-delay：0s； 延迟时间
4. transition-timing-function：ease； 过渡的方式，默认ease，常用值；liner

变换属性

使用变换属性不影响布局，不影响其他兄弟元素，或者父级元素的排版；

当因为元素变换发送元素错位，会出现堆叠，但不脱离文档流，原位置存在；

变换属性中，参照中心点

1. 位移函数
   1. transform：translate（x,y,z）X轴和Y轴单独设置
   2. 正值和负值都可以使用，没有位置使用0
2. 旋转函数
   1. transform：rotate（角度值）0-360deg；
   2. transform：rotateX（-50deg）
   3. transform：rotateX（50deg）
3. 缩放函数
   1. transform：scaleX（数值）；
   2. transform：scaleY（数值）；
   3. transform：scale（x，y）/（倍数），（0）：元素消失（-倍数）：镜像反转；
   4. 函数参数默认1，数值>1（放大），0<数值<1（缩小）；
4. 扭曲函数 
   1. transform：skew（x，y）扭曲度 

变换属性的顺序

可以写多个函数，函数之间空格隔开 

变换的基点

transform-origin：关键词：改变使用变换属性默认的中心点

透视

父级元素为子集元素创建了透视空间

transform-style：preserve-3d；设置3d空间

perspective属性值越大，视距越远，

backface-visibility：当元素背面朝向观察者时是否可见；

动画

关键帧规则

@keyframes，指定css动画脚本序列，关键帧名字不能数字开头

0%动画执行最初状态

100%动画执行完毕

animation动画属性

animation：关键帧名称 执行时间 运动方式 延迟时间 播放次数 动画执行序列 动画结束状态 播放状态

css文件大小（css代码优化）

1. 内部样式
   1. HTML文件中，可以少向服务器发送一次请求
   2. 只能在当前HTML下渲染，不能渲染其他HTML文件
2. 外部样式
   1. 可以同时渲染多个HTML文件
   2. 要向服务器多发送请求

删除未使用的css样式

1. 善用选择器，找共同点，使用一套css样式
2. 减少类选择器，增加关系型选择器的使用，少用类型 

高效使用css动画

css动画渲染，要比js动画逻辑渲染快，移动开发时多考虑css动画 

css hank

在不同的浏览器中，元素自带样式可能不同，根据实际的项目需求，使用css样式重置css reset，保证元素的样式统一性。

css代码压缩

css代码压缩工具， 在项目打包前可能有压缩方式，对服务器下载和用户下载减少压力

响应式

响应式页面根据多种终端规格的需求，按照设备宽度来改变页面布局的方式。

设备宽度

在浏览器中打开页面，使用PC端浏览器模拟移动端手机模式，字体会变小，因为页面宽度大于设备宽度，整体会缩小。

width=device-widt 视口宽度=设备宽度

initial-scale=1.0 初始化视口不缩放

媒体查询

媒体：根据设备的宽度提供不同的尺寸，不同的设备=不同的媒体

查询：css代码提供尺寸，用于页面结构变化

1. @media screen（可省略）（min-width：xxxpx）and（max-width：xxxpx）{}
2. @media screen（可省略）（min-width：xxxpx）{}
3. @media screen（可省略）（max-width：xxxpx）{}

响应式和手机端的区别

 响应式通过媒体查询，识别视口的宽度改变布局样式的方式

手机端，按照手机布局写样式，单位不能使用绝对单位