【Web前端第二阶段--CSS高级】Day04

【Web前端第二阶段–CSS高级】Day04

第一章 【Web前端第二阶段–Html】Day01
第二章 【Web前端第二阶段–Html】Day02
第三章 【Web前端第二阶段–CSS】Day03

---

1、属性选择器

其他选择器【属性名】直接找到某元素的特定属性进行选择

div[class]{}

其他选择器[属性名=“属性值”] 找到某个元素特定属性的特定值

input[type="text"]{}

其他选择器[属性名^=“开头字段”] 找到某个元素的特定属性中特定值的开头字段，为筛选依据

a[href^="http"] {color: red;}

其他选择器[属性名$=“结尾字段”]找到某个元素特定属性中特定值的结尾字段，为筛选依据

img[src$=".gif"] {
border: 5px solid red;
}

其他选择器【属性名*=“某些字段”】找到某个元素的特定属性中含有某些字段，为筛选依据

p[lang="zh"]{color:red;}

2、目标伪类选择器

• 需要对象的元素被激活，要用a标签的href属性的“锚点”完成
• div:target{渲染div样式}

3、结构性伪类选择器

结构性伪类，首先是要找到标签的结构关系，知道父子，“兄弟”之间的位置关系，从这个关系进行查
找。

1、伪类属性列表

:first-child 匹配父元素下的第一个子元素

ul li:first-child{color:red;}

:last-child 匹配父元素下的最后一个子元素

ul li:last-child{color:red;}

:nth-child(x) 匹配父元素下的第x个子元素

ul li:nth-child(3){color:red;}

:nth-child(odd) 匹配父元素下奇数的子元素

ul li:nth-child(odd){color:red;}

:nth-child(even) 匹配父元素下偶数的子元素

ul li:nth-child(even){color:red;}

:nth-child(xn)匹配父元素下x倍数的子元素

ul li :nth-child(4n){
	color:red
}

:nth-last-child(x) 匹配父元素下倒数第x的子元素

ul li:nth-last-child(3){color:red;}

2、 反选伪类选择器

:not()伪类，括号内不能被嵌套。在括号的参数中写要剔除的选择器。

li:not(.ok){color: red;}
<ul>
<li>笔记本电脑</li>
<li>电冰箱</li>
<li class="ok">洗衣机</li>
<li>微波炉</li>
<li>抽油烟机</li>
<li>电视</li>
</ul>

4、 flex布局

flex基本概念

flex是一种布局模型，经常被称之为flexbox，使用flex布局之后，它会给子元素提供强大空间分配和对齐能力
常用布局

• 流式布局
• 浮动布局
• 定位布局

flex优缺点
解决了子元素的对齐和分布与响应式等问题
只能依靠自身的布局模式

flexbox的指定

1、display属性

• 给任意元素声明display:flex或者声明display：inline-flex（保持内联特性）都会创建弹性布局
• 如果你使用flex，那么你要先知道布局结构
• 给外层元素定义flex，把外层元素当作“容器元素”，来控制其内部的子项元素"项目"的排列方式

注意事项：

• 依靠容器元素的属性，控制的是项目的排列方式，也就是说控制的不是自身，而是子元素
• 设置为flex布局以后，子元素的float、clear都失效了，换言之子元素不用浮动了，父元素也不用清楚浮动
• 设置了flex的元素，子元素会“块状化”，即：父元素使用了display：flex其子元素都会变成块

主轴的排列方式

1）行模式和列模式

• 行模式就是子元素（项目）在容器中以行（x轴）方向排列的模式
• 列模式就是子元素（项目）在容器中以列（y轴）方向排列的模式

2）主轴和交叉轴
当使用flex布局的时候，首先想到的应该是两个轴，主轴和交叉轴
主轴由flex-direction定义，另一条垂直于它的轴就叫做交叉轴

主轴排序

flex-direction: row;/*默认行模式：左（开始）-右（结束）*/
flex-direction: row-reverse;/*行模式：右（结束）-左（开始）*/
flex-direction: column;/*列模式：上（开始）—下（结束）*/
flex-direction: column-reverse;/*列模式：下（结束）-上（开始）*/

换行模式

flex-wrap属性来控制flex子项（项目）单行显示换行还是不换行，默认情况下不换行，即使容器无法承载所有项目，他们会按照等比例压缩，强制在主轴方向显示。

/* 默认不换行 */
flex-wrap: nowrap;
/* 换行 */
flex-wrap: wrap;

简写属性

flex-flow是将主轴排序和是否换行两个属性组合写在一起，第一个值主轴排序。第二个值是否换行

flex-flow: row nowrap

主轴上的对齐方式

/* 默认起点对齐 */
justify-content: flex-start;
/* 终点对齐 */
justify-content: flex-end;
/* 居中对齐 */
justify-content: center;
/* 两端对齐 */
justify-content: space-between;
/* 周围分布相同空间 */
justify-content: space-around;
/* 均匀空间 */
justify-content: space-evenly;

交叉轴的对齐方式

align-items值得是交叉轴的对齐方式，如果没有指定交叉轴的对齐方式默认是normal项目无高度，默认盛满容器

/* 交叉轴起点*/
align-items: flex-start;
/* 交叉轴终点 */
align-items: flex-end;
/* 交叉轴居中 */
align-items: center;

多轴线对齐

align-content属性设置浏览器沿着弹性布局的横纵，多轴线分布的空间方式。

/* 多轴线对齐 */
/* 多轴线，交叉轴起点 */
align-content: flex-start;
/* 多轴线，交叉轴终点对齐 */
align-content: flex-end;
/* 多轴线，居中 */
align-content: center;
/* 多轴线，两端对齐 */
align-content: space-between;
/* 多轴线，行间距相等 */
align-content: space-around;
/* 多轴线，均分间距 */
align-content: space-evenly;

5、项目属性

项目的排序顺序

order:-1

项目的增长规则

• flex-grow 给某项目，前提容器中主轴方向是有剩余空间的
• 项目本身是有自己的尺寸的，不放大时使用的是自身的长度尺寸。如：宽度，设置了增长规则之后，原本尺寸失效了，使用增长规则的系数
• 剩余空间的比重分配，是所有项目的 flex-grow 系数相加，之后再按照比例分配

flex-grow: 1;
分配比例
.item:nth-child(2){
flex-grow: 1;/*1/7*/
}
.item:nth-child(3){
flex-grow: 6;/*6/7*/
}

项目的收缩规则

flex-shrink 指定了flex项目的收缩规则，默认值1.不允许负值，没有任何单位。

• 收缩前提，容器中无剩余空间，项目才会被压缩
• 设置了收缩比例之后，原尺寸会在压缩时失效，而使用收缩系数
• 收缩数值越大，压缩比例就越大
• 压缩空间的分配比重，缩小的尺寸是所有项目缩小系数之和，再按比例分配
• 强制不缩小 flex-shrink:0

flex-shrink: 1;/*默认*/
flex-shrink: 2;/*缩小系数*/
flex-shrink: 0;/*坚决不缩小*/

项目的初始化尺寸

flex-basis 指定了flex项目元素在主轴方向上的初始化大小（尺寸）。不允许负值，默认 auto 。如果指定了该属性，则原本尺寸，将失效。

flex-basis：200px

项目的flex简写

flex 属性指的是，增长规则，缩小规则，初始化尺寸的集合写法。

• 默认 flex:0 1 auto
• flex:1 指增长规则的系数 ❤
• flex: 0 0 200px 指项目在容器中不放大，也不缩小，初始化尺寸200px

6、过渡

过渡概念

过渡可以为一个元素在“不同状态之间”切换，在切换时定义不同的过渡效果。如果改变状态，使用伪类。
过渡属性, transition 这是一个集合写法，过渡，过渡需要的时间，过渡的方式和过渡延迟的时间。

过渡属性的拆分

过渡简写

1）简写写法

transition:过渡名称 过渡时间 延迟时间 过渡方式;
如
transition: box-shadow 1s 1s linear;

2）最简写法

原本语法：
all 0s[必要] 0s ease
transition:过渡名称 过渡时间 延迟时间 过渡方式;
最简写法：
transition:过渡时间;

3）多组过渡
重要的是，下一组的延迟时间等于之前组的执行时间之和

transition: 1s background-color,1s 1s border-radius,1s 2s box-shadow

7、变化

transform 属性是变换属性，允许元素旋转，位移，扭曲，缩放。变换函数是变换属性的值，在函数的()中写具体的数据，执行顺序，是从左到右执行函数。

• 元素的实际尺寸和“原位置”不会发生改变
• 使用变换属性还会创建层叠上下文，简单说会出现元素堆叠
• 对内联元素，变换属性无效（可替代内容的内联元素除外img）
• 不同顺序会造成不同效果，限于多种变换函数同时使用的时候，有顺序造成不同结果
• 出现锯齿化或虚化，如果是高清屏浏览器就不会出现
• 使用变换属性，变换的元素默认参照的基础点为中心点，而不再是左上角。

位移函数

/* x轴上的位移，正值向右，负值向左 */
transform: translateX(100px);
/* y轴上的位移，正值向下，负值向上 */
transform: translateY(100px);
/* 参数1：x轴方向，参数2：y轴方向 */
transform: translate(200px,60px);

旋转函数

transform: rotate(60deg); z轴顺时针角度
transform: rotate(-60deg);z轴逆时针角度
transform: rotateX(60deg);x轴旋转
transform: rotateY(60deg);y轴旋转

缩放函数

1）放大缩小

/* x轴的缩放 */
transform: scaleX(0.2);
/* y轴的缩放 值同上 */
transform: scaleY(2);
/* 一个值代表两个方向 */
transform: scale(2);
/* 两个值，第一个x轴，第二个y轴 */
transform: scale(0.5,1.5);
/* 0值 缩小到没有*/
transform: scale(0);

2）翻转效果

/* 负号指的翻转，数字管放大缩小 */
transform: scaleX(-2); x轴翻转
transform: scaleY(-1); y轴翻转
transform: scale(-1); xy轴都翻转

扭曲

skew() 函数定义了一个元素在二维平面上的倾斜转换。值为角度，表示在某个方向的倾斜量。

transform: skewX(60deg); x轴扭曲
transform: skewY(-30deg); y轴扭曲
transform: skew(40deg); x轴扭曲

重点★

transform-origin

透视

perspective透视

8、动画

1、animation

关键帧

关键帧 @keyframes 这个规则通过在动画序列中定义关键帧来控制css动画序列的步骤。创建关键帧需要
一个名字，这个名字最好见名知意，不要以数字开头。

3、动画属性拆解

响应式

响应式概念

随着移动终端的兴起，多种规格终端页面需要展示。响应式就是可以让多种终端同时看到相近相同的内
容。响应式也叫“自适应”页面。可以根据浏览器设备的不同，而改变不同的布局，文本，图片效果。

特点是使用同一套html结构，根据设备终端尺寸的不同变化，同时使用 @media 媒体查询规则，将不同
宽度的css加入到不同的媒体查询中，从而随着页面宽度的变化，改变布局。

设置设备宽度

• viewport 视口
• width=device-width 宽度=设备宽度
• initial-scale=1.0 初始化视口不缩放

媒体查询

设计响应式断点

/* 统一原则，以最小宽度为断点边界从小往大写 */
/* 手机竖屏（有点特殊先留着） */
@media (max-width:480px) {
/* ... */
}
/* 手机横置，平板竖置 */
@media (min-width:480px) {
/* ... */
}
/* 平板和小屏电脑 */
@media (min-width:768px) {
/* ... */
}
/* 默认屏幕大小 */
@media (min-width:980px) {
/* ... */
}
/* 大屏显示器 */
@media (min-width:1200px) {
/* ... */
}

5、相对于视口的尺寸
viewport width(vw)视口的宽度，viewport height (vh) 视口的高度。
整个视口尺寸宽度=100vw ，1vw可见视口的宽度的1%
整个视口尺寸高度=100vh ， 1vh可见视口的高度的1%