2022最新Css3笔记

pc网页

font的复合属性

取值：font:style weight size family
省略要求：只能省略前两个，如果省略了就等于设定为默认值。

文本缩进

属性名：text-indent
取值：数字+px，数字+（2）em

文本水平对齐方式

属性名：text-align
取值：left左，center中，right右

文本修饰

属性名：text-decoration
取值：underline(下划线)，line-through（删除线）

行高

属性名：line-height
取值：数字+px,倍数：当前标签font-size的倍数

复杂选择器

后代选择器:空格

语法：选择器1 选择器2 {css}

子代选择器:>

语法：选择器1>选择器2{css}
只选择子代

交集选择器

语法：选择器1.选择器2{css}

伪类选择器

作用：选中鼠标悬停在元素中的状态，设置样式
语法：选择器:hover{css}

背景相关属性

背景平铺

属性名：background-repeat(bgr)
no-repeat(不平铺),repeat-x(顺着x平铺),repeat-y(顺者y平铺)

背景位置

属性名：background-position(bgp)
属性值:background-position:水平位置垂直
背景色和背景图只显示在盒子里，外面的不显示
水平方向：left,center,right
垂直方向：top,center,bottom

背景相关属性连写

属性名：background(bg)
书写顺序：background:color image repeat positior
背景图位置如果是英文单词可以跌倒顺序，如果都用像素就不可以跌倒顺序

img和背景图片的区别

img是一个标签(插入图)实现重要的图片
background(背景图)

元素的显示模式(<>)

块级

特点:独占一行
宽度默认是父元素宽度,高度默认由内容撑开
可以设置宽高
代表标签:div,p,h系列,ul.li,di.dt,dd,form,header

行内

特点:一行显示多个
宽度个高度默认由内容撑开
不可以设置宽高
代表标签:a,span,b,u,i,s,strong,ins.em,del...

行内块

特点:一行显示多个
可以设置宽高
代表标签:input,textarea,button,select.....

转换

语法：display:block（块级）/display:inline-biock(行内块)/display:inline

html嵌套注意点

块级元素作为大容器，可以嵌套：文本，块级元素，行内块元素
a标签不能嵌套自己，其他标签都可以嵌套

Css特性

继承性

特性：文字控制属性都可以继承（子承父业）
注意：继承性特点就是（子有特性，就显示自己的特性，否则就继承父特性）

层叠性

给同一个标签设置相同的样式，写在最后的样式会生效
给补同的标签设置不同的样式，会共同作用在标签上
当样式冲突时，只有当选择器优先级相同时才能通过对叠加判断结果

优先级

特性：不同选择器具有不同的优先级，优先级高的样式会覆盖优先级低的样式
公式：继承《通配符《标签《类《id《行内《！important
注意：！important写在属性的后面，分号的前面！它不能提高继承的优先级，只要是继承优先级最低！，实际开发中不建议使用!important(谁更精准选到标签，谁的优先级高，谁的范围越广，谁的优先级越低)

权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效。
权重叠加计算公式：（每一级不存在进位）
（0行内样式个数，0id选择器个数，0类选择器个数，0标签选择器个数）
比较规则：先比较第一级，比较出来统统不看，如果最终所有数字都相同，则比较层叠性（谁写在下面，谁说了算！）

盒子模型

概念：页面中的每一个标签都可以看作盒子，通过盒子的视角更方便进行布局
浏览器在渲染网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象的称之为盒子
css中规定每个盒子分别由：内容区域（），内边距区域（），边框区域（），外边距区域（）构成，这就是盒子模型。

宽高

width,heigth

边框（border）-连写形式

属性名：border
属性值：单个取值的连写，取值之间用空格隔开
border 10px soild red;（不分先后顺序）
快捷键：bd+tab
solid 实线，dashed虚线，dotted点线
单方向设置：属性名border-方位名词（中间不能有空格）left,right,top,bottom

内边距

一个padding可以添加四个方向的内边距
padding属性可以当作符合属性使用，表示单独设置某个方向的内边距（给了四个值，顺序顺时针，上，右，下，左）
三个值：padding:10px 40px 80px (第一个值是左边的，第二个值是左右，第三个值是下)
两个值：padding:10px 80px(第一个值是上下，第二个值是左右）)
总结：多值写法，永远都是从上面顺时针转一圈，如果没有就看对面

css盒模型（自动内减）

手动：自己计算多余大小
自动：个盒子设置box-sixing:border-box；即可

外边距

设置方式和padding一样
位置在最外边

外边距折叠现象（1.合并现象）

场景：垂直布局的块级元素上下的margin会合并
结果：最终两者距离为margin的最大值
解决办法：避免就好
只给其中一个盒子设置Margin就可以

外边距折叠现象（2.塌陷现象）

场景：互相嵌套的块级元素，子元素的margon-top会作用在父元素上
结果：导致父元素一起往下移动
解决办法：
1.给父元素设置border-top或者padding-top
2.给夫元素设置overflow:hidden
3.转换成行内块元素
4.设置浮动

 .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 设计稿没有border就不能用 */
            /* border: 1px solid #000; */
            /* 最完美方法 */
            /* overflow: hidden; */ 
        }

行内元素的垂直内外边距

-注意：
1.如果想要通过margin或者padding改变行内标签的垂直位置，无法生效
2.行内标签的margin-top和bottom不生效
3.行内标签的padding-top和bottom不生效

 span {
            /* margin: 100px; */
            /* padding: 100px; */
            line-height: 100px;
        }

清除默认的内外边距

通配符 {margin:0; padding:0}

版心居中

版心：网页的有效内容

去掉列表的小点点

list-style:none

结构伪类选择器

目标：能够使用结构伪类选择器在html中定位
作用与优势：
1. 作用：根据在html中的结构关系查找元素
2. 优势：减少html中类的依赖（保持洁净）
选择器：
1.li:first-child（选中第一个）
2.li:last-child（选中最后一个）
3.li:nth-child(x)（任意一个）
4.li:nth-last-child(x)(倒数第xx个)

 /* 选中第一个 */
        /* li:first-child {
            background-color: green;
        } */
        /* 选中最后一个 */
        
        li:last-child {
            background-color: pink;
        }
        /* 任意一个 */
        
        li:nth-child(4) {
            background-color: blue;
        }
        /* 倒数第xx个 */
        
        li:nth-last-child(1) {
            background-color: red;
        }
        /* 去除列表前的小点点 */
        ul {
            list-style: none;
        }

结果伪类公式

n的注意点
1.n为：0，1，2，3...
2.通过n可以组成常见公式

功能	公式
偶数	2n,even
奇数	2n+1，2n-1,odd
找到前5个	-n+5
找到从第5个往后	n+5

li:nth-child(2n+1) {
            background-color: pink;
            color: rgb(110, 13, 155);
        }
        
        li:nth-child(-n+3) {
            background-color: rgb(52, 23, 179);
            color: rgb(155, 13, 13);
        }
        
        li:nth-child(4n) {
            background-color: rgb(201, 204, 16);
            color: rgb(8, 1, 1);
        }

伪元素

伪元素：一般页面中的非主体内容可以使用伪元素（装饰性的）
区别：
1.元素：html设置的标签
2.伪元素：由css模拟出的标签效果

伪元素	作用
::before	在父元素前添加伪元素
::after	在父元素后添加伪元素

注意：
1.必须设置content才能生效
2.伪元素默认是行内元素
3.伪元素是标签，可以设置颜色，背景等。。。

标准流

标准流又称文档流，是浏览器在渲染显示网页内容是默认采用的一套排版规则，规定了应该以何种方式排列元素。

浮动

作用：网页布局。

特点

1.浮动元素脱离标准流，在标准流中国不占位置
2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素由特殊的显示效果

一行可以显示多个
可以设置宽高
居中和margin:0 auto无效

css书写顺序：浏览器执行效率更高

1.放浮动或者display
2.盒子模型相关的属性：margin,border,padding
3.文字样式

清除浮动

含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素。
案例：父子级标签，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置
规避：父级加标签

清除浮动的方法

父级加高（规避）

额外标注法：(特点：缺点：会在页面中添加额外的标签，会让html结构变复杂)

1.在父级元素内容最后添加一个块级元素
2.给添加的元素设置clear:both

额外标注法

单伪元素清除法

1.用伪元素替代了额外标签

基本写法

	 .clearfix::before {
            content: '';
            /* 伪元素添加的是行内的，我们需要的是块级的 */
            display: block;
            clear: both;
        }

补充写法

	 .clearfix::before {
            content: '';
            /* 伪元素添加的是行内的，我们需要的是块级的 */
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }

双伪元素清除法

	 /* 清除浮动 */
        /* .clearfix::before 用来解决外边距塌陷 */
        
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }
        /* 真正清除浮动的标签 */
        
        .clearfix::after {
            clear: both;
        }

给父元素设置overflow:hidden

给父元素直接设置overflow:hidden

	.top {
            margin: 0 auto;
            width: 1000px;
            height: 300px;
            background-color: pink;
            overflow: hidden;
        }

学成在线项目

css文件需要引用

定位

1.可以让元素自由的钉在网站的任何位置上。

应用场景
1.可以始终让盒子固定在页面中的某个位置
属性名：plsition（只加position位置不会改变）
如果left和right都有,以left为准,top和bottmo都有，以top为准
常见属性值：

定位方式	属性值
静态位置	static
相对位置	relative
绝对定位	absolute
固定定位	fixed

设置偏移值
1.偏移值分为水平和垂直方向
2.选取原则一般是就近原则(离哪边近用哪个)

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

相对定位

介绍：相对于自己之前的位置进行移动
代码：position:relative:
特点：
1.需要配合方位属性实现移动
2.相对于自己原来的位置进行移动
3.在页面中占位置-没有脱标
应用场景
1.配合绝对定位组CP()
2.用于小范围移动

绝对定位（绝对定位的盒子具备行内块的特点）

介绍：绝对定位: 先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位;有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位

固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动
代码：position:fixed
特点:
1.需要配合方位属性实现移动
2.相对于浏览器可视区域进行移动
3.在场景中不占位置->已经脱标
应用场景：
1.让盒子固定在屏幕中的位置。

元素的层级关系

不同布局方式元素层级关系：标准流<浮动<定位
不同定位之间的层级关系：相对，绝对，固定默认层级相同。
此时HTML中写在下面的元素层级更高，会覆盖上面的元素。

css布局方式

浮动，标准流，定位

装饰

文字对齐问题

场景：解决行内(行内块)元素垂直对齐问题
问题：当图片和文字在一行中显示时，其实底部是不对齐的
属性名：vertical-align
属性值：
| 属性值 |效果|
|:-----??:------??
| baseline|默认基线对齐|
| top|顶部对齐 |
|middle|中部对齐 |
| bottom|底部对齐 |
注意：浏览器遇到行内和行内块标签当作文字处理，默认文字是按照基线对齐的。

	.son img {
            width: 300px;
            /* 浏览器吧行内和行内块标签当作文字处理，默认基线对齐 */
            /* vertical-align: middle; */
            display: block
            /*(两种解决办法都可以)*/
        }

光标类型

场景：设置鼠标光标在元素上显示的样式
属性名：cursor
常见属性值：

属性值	效果
default	默认值，通常时箭头
poInter	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

边框圆角

场景：让盒子四个角变得圆润，增加页面细节
属性名：border-radius
常见取值：数字+px，百分比（多个取值中间需要用空格隔开）
赋值规则：从左上角开始赋值，然后顺时针开始赋值，没有赋值的看对角

画正圆

1.盒子必须是正方形
2.设置边框圆角是盒子的一半（最大值50%）

胶囊按钮

1.盒子必须是长方形
2.设置：border-radius:盒子高度的一半

	.two {
            width: 600px;
            height: 300px;
            background-color: skyblue;
            border-radius: 150px; 
        }

overflow溢出部分显示效果

溢出部分：指的是盒子内容部分所超出的盒子范围区域。
场景：控制内容溢出部分的显示效果，如：显示，隐藏，滚动条。。。
属性名：overflow
常见属性值;

属性值	效果
visible	默认溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

元素本身显示隐藏

场景：让元素本身在屏幕中不可见。如鼠标:hover后的元素隐藏
常见属性：
1. visiblity：hidden
2. display：none(重点!)

	
    
    
     .code {
            position: absolute;
            left: 50%;
            top: 41px;
            transform: translate(-50%);
            display: none;
        }
        /* 鼠标悬停显示二维码图片 */
        
        .nav li a:hover img {
            display: block;
        }

拓展-元素整体透明度

场景：让元素包括内容一起变透明
属性名：opaticy
属性值：0~1之间的数字（1表示完全不透明，0表示完全透明）
注意点：opacity会让元素整体透明，包括里面的内容，如：文字。。。

精灵图

使用步骤
1.创建一个盒子，设置盒子的尺寸和小图尺寸相同
2.将精灵图设置为盒子背景
3.修改背景位置：通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

背景图片的大小

作用：设置背景图片的大小
语法：background-size：宽度，高度
取值：

取值	场景
数字+px	简单方便实用
百分比	相对于当前盒子自身的宽高比
contain	包含，将背景图片等比例缩放，知道不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

背景图片的位置

background-position：x y;
background-position: right 0;(适合精灵图左右对称的情况，后面双开门案例会用到)

	.box::after {
            background-position: right 0;
        }

background连写拓展

完整连写：background:color image repeat position：size;
注意点：backgruond-size和background连写同时设置时，需要注意覆盖问题
解决：1 要么单独的样式写连写的下面 2. 要么单独的样式写在连写的里面。

盒子阴影

作用：给盒子添加阴影效果
属性名：box-shadow
取值：

参数	作用
h-shadow	必须，水平位移量，允许负值
v-shadow	必须，垂直位移量，允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

过渡

作用：让元素的样式慢慢变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值：

参数	取值
过渡属性	all:所有能过渡的属性都过渡。具体属性名：width:只有width过渡
过渡时长	数字+s

注意点：
1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果。
2.transition:属性给需要过渡的元素本身加
3.transition:属性设置在不同的状态中，效果不同
1.给默认状态设置，鼠标移入移出都有效果
2.给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

项目前置认知

DOCTYPE文档说明

文档类型声明，告诉浏览器该网页的html版本
网页语言
1.《heml lang=''en""》标识网页使用语言
2.作用：搜索引擎归类+浏览器翻译
3.常见语言：zh-CN简体中文/en英文
字符编码
1.《meta charset="UTF-8"》标识网页使用的字符编码
2.作用：保存和打开的字符编码需要统一设置否则可能会出错
3.常见字符编码：- utf-8：万国码，GB2312:6000+汉字，GBK:20000+汉字

SEO

作用：搜索引擎优化
提升SEO常见的方法
1.上升排名
2.将网页改成html后缀
3.标签语义化

	
    
    
    
    
    
    京东全球版-专业的综合网上购物商城

ico图标设置

场景：显示在标签页标题左侧的小图标
常见代码：

字体图标-iconfont

1.引入样式表
2.引入内容

购物车案例

上传矢量图-svg-上传

1.与设计沟通，得到svg格式矢量图
2.在iconfont网站上传图标，下载使用

平面转换

作用：丰富标签的显示方式，改变盒子在平面内的形态（位移，旋转，缩放）2D转换
平面转换属性：transform

位移

语法：transform:translate(水平移动距离，垂直移动距离)
取值（正负均可）：像素，百分比（参照物为盒子自身尺寸）
注意：x轴正向为右，Y轴正向为下
技巧：如果translate只给出一个值，表示水平方向的移动（单独设置某个方向的移动距离：translateX()，translateY()）

位移，绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

绝对定位的盒子居中（基础写法）:使用left,top后，再用margin-left，margin-top居中，值为宽高的一半。

	.son {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -50px;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

绝对定位的盒子居中（灵活写法）：transform:translate(-50%,-50%)

	.son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -100px;
            margin-top: -50px; */
            transform: translate(-50%, -50%);
            width: 200px;
            height: 100px;
            background-color: pink;
        }

双开门案例

旋转

语法：transform:rotate(角度)
技巧：取值正负均可（单位是deg）(正：顺时针；负：逆时针)

转换原点（属性名空格隔开）

语法：默认是盒子中间；transform-origin：原点水平位置原点垂直位置
取值：方位名词（left,top,right,bottom,center）；像素单位值；百分比（盒子自身计算）
注意：中心点改的是转换的中心点！

多重转换

技巧：transform: translate(600px) rotate(720deg);
注意：rotate不要放前面，旋转可以改变坐标轴向（轮胎案例）

	.box:hover img {
            /* 边走边转 */
            transform: translate(600px) rotate(720deg);
            /* 旋转可以改变坐标轴向 */
            /* transform: rotate(720deg) translate(600px); */
            /* taransform具有层叠性 */
            /* transform: translate(600px);
            transform: rotate(720px); */
        }

缩放

语法：transform:scle(x轴缩放倍数，y轴缩放倍数)；
技巧：一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放；transform:scale(缩放倍数)

播放按钮英雄联盟案例

布局：::after
样式：居中
效果：缩放

绝对定位居中（基础做法）

	.box .pic::after {
            /* 播放按钮居中显示 */
            position: absolute;
            top: 50%;
            left: 50%;
            /* transform: translate(-50%, -50%); */
            margin-left: -29px;
            margin-top: -29px;
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);
            /* 缩放原来的五倍 */
            transform: scale(5);
            transition: all 0.5s;
            opacity: 0;
        }

绝对定位居中（transform属性；注意层叠性）

	.box .pic::after {
            /* 播放按钮居中显示 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(5);注意这里
            /* margin-left: -29px;
            margin-top: -29px; */
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);
            /* 缩放原来的五倍 */
            /* transform: scale(5); */
            transition: all 0.5s;
            opacity: 0;
        }
        
        .box li:hover .pic::after {
            transform: translate(-50%, -50%) scale(1);注意这里
            opacity: 1;
        }

opacity属性

控制组件透明度！取值0~1

	.box li:hover .pic::after {
            transform: scale(1);
            opacity: 1;
        }

渐变背景

渐变式多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

	 background-image: linear-gradient( transparent, rgba(0, 0, 0, .6));
	 (transparent用来指定透明色)

空间转换

目标：使用transform属性实现元素在空间内的位移，缩放，旋转等效果
空间：是从坐标轴定义的。Z轴位置和视线方向相同（+值指向用户，-值指向屏幕里面）
空间转换也叫3D转换
属性：transform
语法：transform:translate3d(x,y,z);

	.box:hover {
            /* transform: translate3d(50px, 100px, 200px); */
            transform: translateX(100px);
            transform: translateY(100px);
            transform: translateZ(100px);
        }

透视

使用perspective属性实现透视效果（产生近大远小）
属性（添加给父级）
1.perspective：值；（也叫视距：人眼睛到屏幕距离）
2.取值：像素单位数值，数值一般在800-1200;


    
    透视效果

	.box {
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

空间旋转

目标：使用rortate实现元素空间旋转效果
语法：transform:rotateZ(值)；transform:rotateX(值)；transform:rotateY(值)

	.box img:hover {
            transform: rotateZ(360deg);
        }

	.box img:hover {
            transform: rotateX(60deg);
            transform: rotateX(-120deg);
        }

	.box img:hover {
            transform: rotateY(60deg);
        }

拓展：rotate3d(x,y,z，角度度数):用来设置自定义旋转轴的位置及旋转的角度（x,y,z,取值为0-1之间的数字）

左手法则

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

立体呈现（立方体盒子）（添加给父级）

实现方法：
1. 添加transform-style:preserve-3d;
2. 使(子元素)处于真正的3d空间
3. 默认值flat，表示子元素处于2D平面内呈现

.cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* background-color: pink; */
            transition: all 2s;
            transform-style: preserve-3d;(呈现3D效果)（要注意这个属性是添加给效果盒子的父级的！)
        }
.cube:hover {
            transform: rotateY(180deg);
        }

案例-3D导航栏

搭建立方体

li标签：添加立体呈现属性transform-style:preserve-3d;添加旋转属性（方便观察）
a标签

空间缩放

目标：使用scale实现空间缩放效果
语法：
1. transform:scaleX(倍数)
2. transform:scaleY(倍数)
3. transform:scaleZ(倍数)
4. transform:scale3d(x,y,z)

	transform: scale3d(0.5, 1.1, 2);

动画

两个状态的改变可以使用过渡效果
多个状态的改变就需要使用animation添加动画效果了，动画过程可控（重复播放，最终画面，是否暂停）
构成动画的最小单元：帧或者动画帧

动画的实现步骤

1.定义动画:

		（第一种）
		@keyframes 动画名称{
			form{}
			to{}
		}
		(第二种)
		@keyframes 动画名称{
			0%{}
			10%{}
			15%{}
			100%{}
		}

	@keyframes change {
            form {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        /* 百分比指的是动画总时长的占比 */

2.使用动画

		anomation: 动画名称 动画花费时长;

	.box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 使用动画 */
            animation: change 1s;
        }

animation:动画名称，动画时长，延迟时间，速度曲线，延迟效果，重复次数，动画方向，执行完毕时的状态；
注意：动画名称和动画时长必须赋值；取值不分先后顺序，如果有两个时间值，第一个时间表示动画时长，第二个表示延迟时间

	 /* animation: change 1s linear; */
	animation: change 1s steps(3) 1s(延迟时间) 3（重复次数）;
	 /* 无限循环 */
     animation: change 1s infinite;
     /* 反复执行状态 */
     /* animation: change 1s infinite alternate(反复执行属性); */
     /* 默认值, 动画停留在最初的状态 */
     /* animation: change 1s backwards（默认值）; */
     /* 动画停留在结束状态 */
     /* animation: change 1s forwards; */

动画属性

目标：使用animation相关属性控制动画的执行过程
background复合属性：color image repeat attachment position;
background-color
background-image
background-repeat
background-attachment
background-position

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwords:最后一帧状态 backwards:第一阵状态
animation-timing-function	速度曲线	steps(数字):逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向
animation-play-state	暂停动画	paused为暂停，通常配合:hover使用

逐帧动画（小人跑步案例）

制作步骤

准备显示区域：设置盒子尺寸是一张小图的尺寸，背景图为精灵图
定义动画：改变背景图的位置（移动的距离是精灵图的宽度）
使用动画：添加速度曲线steps(N),N与精灵图上小图个数相同；添加无限重复效果

多组动画

	 animation: move 1s steps(12) infinite, run 1s forwards;(多个动画效果可以用逗号隔开)

小人案例代码


    
    精灵动画

走马灯案例代码

主轴方向

目标：使用flex-direction改变元素方向
主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性：flex-direction
| 属性值|作用|

	.box li {
            display: flex;
            /* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
            /* 修改主轴方向: 列 */
            flex-direction: column;
            /* 视觉效果: 实现盒子水平居中 */
            align-items: center;
            /* 视觉效果: 垂直居中 */
            justify-content: center;
            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
        }

弹性盒子换行（弹性盒子有“弹性”）

目标：使用flex-wrap实现弹性盒子多行排列效果
属性：flex-wrap:wrap;

	.box {
            display: flex;
            /* 默认值，不换行 */
            /* flex-wrap: nowrap; */
            /* 弹性盒子换行 */
            flex-wrap: wrap;(案例中是加在父级上的)
            height: 500px;
            border: 1px solid #000;
        }

调整行对齐方式：align-content(取值与justify-content基本相同(没有evenly属性))

设置省略号（小兔鲜案例）

	.orders li .goods {
    display: flex;
    flex: 1;
    padding: 17px 0 14px 12px;
    align-items: center;
    margin-right: 120px;
	}
	
	.orders .goods .txt {
    flex: 1;
    /* 溢出的时候显示省略号 */
    /* 弹性盒子的尺寸可以被内容撑开，不换行的文字撑开 */
    width: 0;
}

.orders .goods .txt h5 {
    text-overflow: ellipsis;
    white-space: nowrap;（不换行）
    overflow: hidden;(溢出隐藏)
}

移动适配

rem：目前多数企业在用的解决方案
vw/vh:未来的解决方案

rem

目标：能够使用rem单位实现网页元素的尺寸
效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）

	.box {
            /* width: 10px; */
            width: 5rem;
            height: 5rem;
            background-color: pink;
        }

rem相对单位

相对单位
rem单位是相对与html标签的字号计算结果
1rem=1html字号大小

	/* 1rem = 1html标签字号大小 */
        
        html {
            font-size: 12px;
        }
        
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
            font-size: 12rem;
        }

rem移动适配-媒体查询

目标：能够使用媒体查询设置差异化的css样式

媒体查询能够检测视口的宽度，然后编写差异化的css样式
写法：@meda(媒体特性){ 选择器 {css属性} }

目前rem布局方案中，将网页等分成10份,html标签的字号为视图窗口宽度的1/10

	/* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
        @media (width:320px) {
            html {
                font-size: 32px;
            }
        }

        @media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }
        @media (width:414px) {
            html {
                font-size: 41.4px;
            }

rem适配原理
目标：实现在不同宽度的设备中，网页元素尺寸等比例缩放效果
N X 37.5 = 68/37.5
rem单位尺寸

确定设计稿对应的设备的html字号（查看设计稿宽度，确定参考设备宽度（视图窗口），确定基准根字号（1/10视口宽度））

flexible

目标：使用flexible.js配合rem实现在不同宽度的设备中，网页元素等比例缩放效果

flexible.js是手陶开发出来的一个用来适配移动端的Js框架
核心原理是就是根据不同视图窗口宽度给页面中html根标签根节点设置不同的font-size

Less语法

目标：使用Less运算写法完成px单位到rem单位的转换
Less是一个Css预处理器，Less文件后缀是.less
扩充了Css语言，使Css具备一定的逻辑性，计算能力
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件

	.father {
    color: red;
    width: 1.81333333rem;
}

.father .son {
    background-color: pink;
}

编译插件

目标：使用Less语法快速编译生成CSS代码

Easy Less:

vscode插件
作用：less文件保存生成css文件

注释

单行注释：
语法：//注释内容
快捷键：ctrl+/
块注释：/注释内容/
快捷键：shift+alt+A

	// 单行注释

/* 
    块注释
    第二行
    第三行
*/

运算

加，减，乘直接书写计算表达式
除法需要1添加小括号或.

	.box {
    width: 100 + 10px;
    width: 100 - 20px;
    width: 100 * 2px;

    // 除法
    // 68  > rem
    width: (68 / 37.5rem);
    // height: 29 ./ 37.5rem;

    height: 29 / 37.5rem;

}

嵌套

目标：能够使用Less嵌套写法生成后代选择器
作用：快速生成后代选择器
注意：&不生成后代选择器，表示当前选择器，通常配合伪类或者伪元素使用

	.father {
    width: 100px;
    .son {
        color: pink;
        // & 表示当前选择器
        &:hover {
            color: green;
        }
    }

    &:hover {
        color: orange;
    }
}

// .father:hover {}(方便代码迁移)

	.father {
  width: 100px;
}
.father .son {
  color: pink;
}
.father .son:hover {
  color: green;
}

变量

方法二：把颜色提前存储到一个容器，设置属性值为这个容器名称
变量：存储变量，方便使用和修改
语法：
定义变量：@变量名：值；
使用变量：CSS属性：@变量名

// 1. 定义. 2.使用
@colors:blue;
.box{
    color: @color;
}

.father{
    background-color: @colors;
}

.aa{
    color: @colors;
}

.box {
  color: blue;
}
.father {
  background-color: blue;
}
.aa {
  color: blue;
}

Less导入

目标：能够使用Less导入写法引入其他Less文件
导入：@import"文件路径";

@import './01-体验less.less';（import后面加空格，后面加分号）
@import './02-注释';(如果引入的是less文件，则可以不用写.less后缀)

Less导出css

// out: ./qqq/daqiu.css

// out: ./abc/

.box {
    color: red;
}

vm/vh

目标：可以使用vw单位设置网页元素的尺寸
是相对单位，相对视图的尺寸计算结果

vw:view width

1vm=1/100视口宽度

vh:view height

1vh=1/100视口高度

vw适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比例缩放效果
vw单位尺寸

确定设计稿对应的vw尺寸（1/100视口宽度）
vw单位的尺寸= 单位数值 / (1/100视口宽度)

// out: ./
//68 * 29 --vw
.box {
    width: (68/3.75vw);
    height: (29/3.75vw);
    background-color: pink;
}


.box2{
    //vh
    width: (68/6.67vh);
    height: (27/6.67vh);
    background-color: green;
}

全面屏（iphoneX）影响

// 不允许宽高混用，避免全面屏的影响
.box {
    // 68  vw * 29 vh
    width: (68 / 3.75vw);
    height: (29 / 6.67vh);
    background-color: pink;
}

实战演练

目标：实现在不同宽度的设备中等比例缩放的网页效果
视频布局：
父级左右padding
每个盒子：宽度为50%，左右padding（拉开内容距离)

媒体查询（根据设备宽度的变化，设置差异化样式）

开发常用写法:
1. max-width（大到小）
2. min-width（小到大）
完整写法

@media 关键词 媒体类型 and (媒体属性) { css代码 }

关键词
1.not(非)
2.and
3.only
媒体类型

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上3种类型

媒体属性

特性名称	属性	值
视口的宽高	width,height	数值
视口最大宽或者高	max-width,max-height	数值
视口最小宽或者高	min-width,min-height	数值
屏幕方向	orientation	portrait:竖屏;landscape横屏

媒体查询-书写顺序

注意：css样式具备层叠性！

媒体查询-link写法

外链式css引入
注意：写link标签一定要写小括号！

BootStrap

目标：使用BootStrap框架快速开发响应式网页

使用

引入：BootStrap提供的CSS代码

调用类：使用BootStrap提供的样式
1. container:响应式布局版心类

BootStrap栅格系统

目标：使用Bootstrap栅格系统布局响应式网页
栅格化：是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份

	超小屏幕	小屏幕	中等屏幕	大屏幕
响应断点	<768px	>=768px	>=992px	>=1200px
别名	xs	sm	md	lg
容器宽度	100%	750%	970%	1170%
类前缀	col-xs-	col-sm-	col-md-	col-lg-
列数	12	12	12	12
列间隙	30px	30px	30px	30px

.container是bootstrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
.container-fluid也是bootstrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%
分别使用.row类名和.col类名定义栅格布局的行和列。
注意：

container类自带间距15px
row类自带间距-15px

全局CSS样式

目标：掌握bootstrap手册用法，使用css全局样式美化标签
寻找样式可以在官网首页查看,寻找样式。

组件

目标：使用BootStrap组件快速布局网页
组件：bootStrap提供了常见的功能，包含了heml结构和css样式。
使用方法：

引入样式
使用组件

字体图标

注意：和iconfont使用方法一样

插件

将html+css+js结合为一体，可以实现交互效果
使用步骤：

引入bootstrap样式
引入js文件：jQuery.js+BootStrap.min.js

css3 前端