不正经

这个屌丝很懒，什么也没留下！

热门标签

html css笔记_css根据父元素大小调整字体大小

作者：不正经 | 2024-03-31 20:56:31

踩

css根据父元素大小调整字体大小

笔记

前言

前端：①前端是软件系统中直接和用户交互的部分

目前国内的前端总体而言是完成基于浏览器用户界面设计和开发，主要工作有PC网站开发，移动端网站开发，WebApp开发，在线游戏开发，本地软件开发

HTML—网页骨架

CSS—美化网页（层叠样式表）

JavaScript+NodeJS—实现动作。NodeJS后端

Vue，React—结构框架（提高工作效率）

Webpack—打包优化

算法+设计模式—最后学

html是超文本标记语言

掘金，CSDN，博客园——网站

MDN，W3school，https://www.runoob.com/html/html-tutorial.html（菜鸟）文档网站

准备工作

快捷键：

Ctrl+Z 撤销

Ctrl+X 剪切

Ctrl+C 复制

Ctrl+V 粘贴

Ctrl+S 保存

Ctrl+Y 反撤销

Ctrl+F 查找

F5/Ctrl+R 刷新

电脑系统设置——显示——缩放与布局——100%

（不是100%，测量工具测量——数值会不准）

QQ截图快捷键 Ctrl+Alt+A

①可以查看宽高的像素值

②拖动鼠标点的位置，可以查看RGB（颜色）的数值RGB（21，21，21）

—按Ctrl可以无缝切换十六进制&RGB色号的数值

③截图—钉在桌面上

④画图，标记都有

PxCook

https://www.fancynode.com.cn/pxcook（修图工具PxCook）

可以一次性把需要的数值给标注出来

1.创建项目选择Web——添加图片

2.距离标注

3.图片真实距离标注

4.显示颜色具体色号

VS Code

VS Code 网页编辑器

主题颜色，深色看着舒服

需要下载的插件

1.Chinese ——中文插件

2.CSS Peek ——标签出错显示

3.Auto Rename Tag ——自动重命名插件

4.open in browser ——浏览器打开网页

5.Live Server ——服务器打开网页

为静态和动态页面启动具有活动重新加载功能的开发本地服务器

shirt+alt+f 标签自动换行

1.HTML标签骨架

<--
《!DOCTYPE html》
1
2

文档声明代表是html5的文档类型

html是根标签 lang是语言 en这是一个英文网站 zh-CN这是一个中文网站

<head>
    <meat charset="UTF-8">
    <meta name="keywords" content="第一个网页 初学者 IT民工">
    <meta name="description" content="萌新学习">
<title>网页标题</title>
1
2
3
4
5

meat：元数据
keywords：关键词
desciption：网站描述信息
content：内容

body:网页内容写在这里 ——存放内容

《/html》

控制台查看标签块元素还是行内元素 F12 选择标签。—Computed—display—inline（行内元素）

F12 选择标签。—Computed—display—back（块元素）

HTML特殊转义符

https://tool.oschina.net/commons?type=2

2.HTML标题标签

一级标签

二级标签

三级标签

四级标签

五级标签

六级标签

    <p>我是一段文字我是一段文字</p>
    <!--2.段落标签，块级标签 -->

    <hr>
    <!--3.水平线标签，块级标签-->

    <br>
    <!--4.换行标签(最好不用) -->

    <div>Cherry</div>
    <!--5.div标签，块级标签 -->

    <span>文字</span>
    <!--6.span标签，行内标签 -->

    <blockquote>长引用</blockquote>
    <q>短引用</q>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

加粗 加粗并通知浏览器，强调重要 斜体 斜体并通知浏览器，代表反义 ~~删除线~~ ~~删除线并通知浏览器文档中已删除的文字~~

《ul type=“square”>

无序列表
可以相互嵌套
标签组合使用
</ul》

《ol type=“A”>
有
序
列
表

</ol》

《dl>

水果

香蕉

芒果

</dl》

li{

list-style：none；

}

这样列表样式就全部没有了，要是单独需要，那就写在多个选择器中

3.CSS三种样式

1.行内样式，作业不能使用

问题结构样式不分离

后期代码维护困难

权重过大

《h1 style=“color:red;”>点击有惊喜

2.内部样式

在head标签加入style标签代码复用性不强

3.外部样式：大型项目用这个

①创建CSS文件，直接写属性

p{ color:pink； }

②添加link rel=“stylesheet” herf=“”

命名格式&命名规范

class 谁都可以取，可以重复符号 “.”

id 只能是唯一，统一页面只能出现一次符号“#”

标签名字：

①见名知意

②必须是小写字母

③不能用中文

④特殊符号只能用“-”

三大基础选择器

①class选择器=类选择器

.box{ color:red; }

②id选择器：#

#{ color:red; }

③标签选择器：标签名

div{ color:red; }

CSS常用选择器

①交集选择器—连着写

前面必须是标签，后面是类选择器

缺点：权重小的，会被覆盖样式

pppp

②并集选择器 — ，

可以添加多个标签，同时实现样式效果

缺点，多个标签会产生标签空格

可以继承样式

.container,

div{

border:10px solid #ccc

}

或者

p.container,（一个整体）

div{

border:10px solid #ccc

}

③后代选择器— 空格添加

符合标签的，全部会改变样式

可以解析空格，没有样式会继承样式

.gran p{ color:red; }

<div class="gran">
    <p>一级的P</p>
    <p>一级的P</p>
    <p>一级的P</p>
    <p>
        一级的P
        <p>二级的p</p>
    </p>
</div>
1
2
3
4
5
6
7
8
9

④子代选择器— >

缺点必须是谁的子代，兄弟不行

精准改变同代样式，别个默认样式会被继承就近父代样式

可以解析空格

.gram>p{

color:red;

}

⑤相邻元素选择器-- +

以自己是参照物，找邻居，往下找一位来改变样式

.lis+li{

color=“red”

}

li+li{

color=”red“

}

0001
0002
0003

⑥兄弟选择器— ~

兄不变，弟弟全部改变样式

.lis~li{

color：red；

}

三种文字颜色设置样式

rgba比rgb 有个优点父代标签透明度不会继承

transparent—透明色（白色会在背景色显形，透明色不会）

①color：red；文字的英文单词

②rgb（0-255,0-255,0-255）

r=255=红色 g=255=绿色 b=255=蓝色 (0,0,0)为黑色

h1{ color:rgb(0,0,0); }

③十六进制：0-9 a-f

h1{ color：#000000； }

前两个值为红色、中间两个值为绿色、后两个值为蓝色

000000是黑色。fffffff是白色

文字大小

①px：像素

font-size：85px;

②em 父代标签文字大小的倍数，协同变化文字大小可以使用

1.5em 2em 文字的像素的1.5倍，2倍

font-size: 2em;

背景颜色

background-color:pink;

标签里宽高过小，会导致里面的内容多出背景颜色

可以辅助我们查看页面布局，用完删掉就好

宽高

锁定了宽度（高度），多余的字会换行显示

width=“200px” 宽度 height=“200px” 高度

要是某项盒子高度或者宽度一直，可以设置100%，这样可以随之父代变化

span这类行内标签，不生效（水平位置会生效）

只对块级元素有效果

样式优先级权重规则

!important 无限大

行内样式 1000

ID选择器 100

类名选择器，属性选择器，伪类选择器 10

标签选择器，伪元素选择器，单个权重 1

通配符选择器，关系选择器（+，>,~,"")，否定伪类 0

！！！样式权重相加再大，也不能越级

只能同级比较，不能越级比较！！！

.gran>p{

color:red !important;

}

无限大的范本，可以添加多个！important

边框（border）

① border:10px solid red;

边框宽度，边框样式，边框颜色

solid：直线边框

dashed：虚线边框

dotted：点线边框

double：双实线边框

②border-top:10px solid red;

可以单独的设定某一个边的样式

border-top 上边框

border-right 右边框

border-bottom 下边框

border-left 左边框

③边框宽度:分别设置四个边框宽度

border-width:10px 20px 30px 40px;

④边框样式:分别设置四个边框样式

border-style：solid dashed dotted double；

⑤边框颜色：分别设置四个边框颜色

border-color:red blue green yellow;

一个值：四个方向

两个值：上下左右

三个值：上左右下

四个值：上右下左（依次）

外边距水平位置（margin）

是标签距离其他元素（标签）的距离px

①水平位置

margin-left:200px (左移200px右移)

margin-right:200px (右移200px左移)

有些标签（h1）本身是带有字体加粗，大小，间距离

而div没有任何属性。

span这类行内标签，不生效（水平位置会生效）

②垂直位置

margin-top:100px （上移100px下移）

margin-bottom:100px (下移100px上移)

外内边距的简写规则

margin：100px auto 20px；

100px 上下垂直距离

auto 自适应的水平居中

20px 左右水平距离

！！！当负值时会跟相邻方向的盒子覆盖折叠！！！

margin：10px 上右下左四个外边距都是10px

margin：10px 20px 上下是10px，左右是20px

margin：10px 20px 30px 上是10px 左右是20px 下是30px

margin：10px 20px 30px 40px 上10px 右20px 下30px 左40px

内边距跟水平居中（padding）

是元素内容区跟边框的距离px，隔开边框跟内容，使内容更加的突出明显

默认情况内边距继承内容，也可以但是设置，设置跟外边距一样

！！！外边距有负数，直接全部失效！！！

padding：10px 上右下左四个外边距都是10px

padding：10px 20px 上下是10px，左右是20px

padding：10px 20px 30px 上是10px 左右是20px 下是30px

padding：10px 20px 30px 40px 上10px 右20px 下30px 左40px

！！！但是显示效果是反的！！！

标准块级元素盒模型

border边框

margin外边距

padding内边距

添加边框边距，都会让盒模型向外扩展，宽高增加。

content内容区

块级元素居中margin：auto

块级标签必须设置下宽高，要不然只有居中没有用

4.CSS行内盒模型及文字样式

怪异盒模型

边框+内边距+content=怪异盒模型

怪异盒模型会向内扩展，只有margin不会

box-sizing: content-box;(内容开始，不要用)

box-sizing: padding-box;（内边距开始）

box-sizing: border-box;（边框开始）

box-sizing: border;

padding;100px;

border；50px solid

通配符，所有标签都会设置，不准用。缺点会让浏览器变慢

通配页面中出现或未出现的所有块级元素

}

标准写法：

div, p, ul, li, h1, h2,{ margin:0; padding:0; }

父子元素外边距

当盒子模型中嵌套了一个儿子盒模型，设置儿子盒模型外边距。

会让父代盒模型跟着子代盒模型一同实现效果，但是我们的要求的效果是父代盒模型不变，子代盒模型改变效果。

解决方案1：加堵墙—透明色（当你需要边框可以用）

border-top: 1px solid transparent;

解决方案2：父代盒模型推子代盒模型

padding-top：100px

兄弟外边距合并

平级盒模型

兄盒模型bottom50px

弟盒模型top50px

没变化，外边距会合并，距离以最大值为实现。

两个方向都是负值（-100，-150），取最大值-150

两个方向一正一副，取是相加值—最后的值

opacity: 0.3;____透明度设置

行内盒模型

上下两行文字内容区之间的间距，

当盒模型的高度跟行高高度一直，文字自动居中显示，

如果不一致，文字自动垂直显示，不会居中。

line-height; 200px: 控制最小行框高度（不设置默认是字体大小）

行高是指每一行的高度

单位px或者是字体大小的倍数em 1.5 ，2 ，2.5

字体大小=font-size

行内文字特性

①字会居中同一行

②文本基线以小写字母x的脚脚为准

③字体过大，行高过小。下面会覆盖上段文字

④只有英语长单词是一个整体，当显示不足，会自动换行

行间距=行框大小-字体大小（line-height - font-size）

font-size：16px；

line-height:26px;

}

font-weight: 100; 字体粗细设置

只有具体几个数值/100/200/300/400/500/600/700/800/900

bold跟bolder是加粗，lighter是变细

font-family 字体样式

Serif(有衬线) 多用于网页的文字内容区域

微软雅黑————看起来板板正正冷淡

Sans Serif（无衬线）多用于文章标题，文字醒目的地方

宋体———— 有笔锋走势，有脚脚

2ex代表文字基线的高度

不用记，百度去查就行。要啥找啥

个人电脑C盘—Windows—Fonts（会有所有的字体）

加双引号"宋体"

font-size：20px；

font-family: Tahoma,Helvetica,Arial，sans-serif；

}

所有文字标签都要加，要不然就只生效一个标签

Tahoma 大河马字体

Helvetica 赫维提卡体

Arial Arial字体

sans-serif 非衬线字体

根据优先级，浏览器会选择操作系统中有字体的显示

行内文档注意事项

只能放在块级标签生效

文本不能同时设置一边左，一边右

行内盒模型文本基线

图片的底线会跟文字基线平行，当图片过大，所以文字也会跟着图片底线平行（文字掉下来了）

文本基线位置是由改字体中x的小写字母底线而决定

单行文字大小不同，以最大的基线为主

单行文字高度不同，以最大的行内盒模型为主

css中1ex=该文字中小写x的高度（文本基线的高度，是参考不能设置）

em（就是px）是父元素文字大小的倍数

垂直对齐不影响块内元素内容的对齐

vertical-align：也可以添加像素值可以为负数

baselin: 使元素基线与文本基线对齐(默认)

middle：使元素的中部与父元素的中线对齐

top：使元素及其后代元素的顶部与整行的顶部对齐

bottom: 使元素及其后代元素的底部与整行的底部对齐

文本缩进样式和行内对齐

text-indent：1em；文本首行缩进一个字符

text-indent：20px；文字首行缩进20px

text-align:left; 左对齐

text-align：center；居中对齐（块级元素生效）

元素内部对齐，行内样式只是一个羊圈，就这么大地方没有居中。

块级元素是草场，可以居中

text-align:right; 右对齐

text-align:justify; 两端对齐

当文字跟字母在一起的段落，会产生段落空格，需要加两端对齐

text-decoration:underline; 下划线

text-decoration:overline; 上划线

text-decoration:line-through; 贯穿线

5.默认显示类型与显示类型转换

block——块级模型

inline——行内盒模型

inline-block——行内块盒模型

浏览器内核——兼容处理_格式如下

-webkit-font-size:18px;

块级元素特性——block

1.独占一行

2.高度由里面的元素撑开

3.宽度默认100%（继承父元素宽度）

4.可以设置外边距/内边距

5.可以包裹其他任意元素

6.p标签只能存放行内元素

行内元素特性——inline

1.和其他行内元素处于同一行

2.不支持宽高

3.上下边距无效，auto无效

4.内边距只对内联元素产生影响，无视块元素

5.标签之间的空格解析

6.a标签能包裹块级元素（特殊、区域链接）

行内块元素特性——inline-block（input）

1.本质上是行内元素，具有行内元素的性质

2.支持宽高

3.上下外边距有效，auto无效

4.内边距只对内联元素产生影响，无视块元素

5.标签之间的空格解析

6.img标签不是行内块元素（是行内元素，但是可以设置宽高）

行内空白符问题

1.给行内块的父级字体大小为零，单独设置标签字体大小

2.从根本性解决，不要使用行内块元素

显示类型转换

display：inline；转换成行内元素

display: inline-block 转换成行内块元素

display:block 转换成块元素

显示和隐藏

display: none; 标签内容隐藏了

.box01:hover~.box02 { display:block; } .box02 { background-color: lightblue; display: none; }


box01

box02

box03

1
2
3
4
5
6
7

隐藏box02 同时空间位置也会被占领。当鼠标移到box01的范围内，会显示box02

新一代样式重置规则

优化CSS文件，提高兼容性，美化规范

http://nicolasgallagher.com/about-normalize-css/

行内块文本对齐

当盒模型有图片跟文字同行显示，

最后一行的文字会对齐图片的底部，显示会参差不齐

6.背景样式

背景层级

内容层》border边框层》背景图片层》背景颜色层

背景图不会跟内容区冲突

背景颜色层覆盖范围= 内容区+内边距区+边框区

背景颜色

background-color:pink;

标签里宽高过小，会导致里面的内容多出背景颜色

可以辅助我们查看页面布局，用完删掉就好

transparent—透明色（白色会在背景色显形，透明色不会）

①color：red；文字的英文单词

②rgb（0-255,0-255,0-255）

r=255=红色 g=255=绿色 b=255=蓝色 (0,0,0)为黑色

h1{ color:rgb(0,0,0); }

③十六进制：0-9 a-f

h1{ color：#000000； }

前两个值为红色、中间两个值为绿色、后两个值为蓝色

000000是黑色。fffffff是白色

背景透明度（rgba）

opacity———设置透明度(取值范围0-1) 可以强制覆盖图片显示

background-color:rgba(123,123,123,0.2) 不可以强制覆盖图片显示透明并且无效化颜色

背景图片（image）

background-image:初始值为none

background-image:url(图片地址); 写在style里面

常用的背景图片格式：

jpg 不支持动画，不支持透明，渐进显示，颜色丰富，有损

png 不支持动画，支持透明度，颜色更丰富，无损

gif 支持动画，256种颜色，2种透明度，渐进显示

webp 支持动画，高压缩率，高加载速率（网页图片格式）

背景图平铺跟拉伸（repeat）

背景图太小会平铺复制整个页面

background-repeat: no-repeat;(不重复显示)

background-repeat：repeat;（默认重复显示）

X轴水平横向，Y轴水平横向

background-repeat: repeat-y;

如果采取默认的背景图片平铺，则背景图片则会延伸到边框之下，如果不重复，则图片不会延伸至边框之下

背景图片的起点是左上角开始

背景图设置大小（size）

可以px

可以百分比，auto代表等比例缩放

cover覆盖整个区域，contain平铺一侧边框后停止

background-size：宽px 高px；

或者200px auto（auto代表等比例缩放）

background-size:20px auto(宽20px 高等比例缩放)

单个背景图平铺（repaet）

背景图过小，默认平铺整个区域，变成很多个

只能在background-repaet:no-repeat;显示单张图片时才能使用

1.background-size: contain;

图片等比例缩放，直到有一条边触碰到边框，就停止。没触碰到的一边就空着。

2.background-size:cover;

图片等比例缩放直到刚好覆盖整个背景区域，超出的部分不显示

背景图显示基点（origin）

显示器默认背景图片显示基点是 padding

background-origin:padding-box; 系统默认就是从内边去开始

background-origin: content-box; 基点从内容区左上角开始

background-orihin: border-box; 基点从边框区左上角开始

感觉好垃圾的效果，另一侧的边框跟内边区都会显示

裁剪显示（clip）

background-clip: padding-box;

background-clip:content;

background-clip:border;

裁切content，padding，border

从基点设置图片显示，跟裁剪需要配合好。要不然组合使用，图片效果有大有小

网页滚动栏样式（overfiow）

overfiow:auto; 比较智能的，多出的部分会产生滚动条，没超出就不会出现滚动条

overfiow:visible; 网页自动显示，超出的内容正常显示

overflow:hihden; 超出内容隐藏

overflow:scroll; 一直显示滚动条，内容不超也会显示

①overflow-x:scroll; 滚动条X轴有滚动条（横向）

②overflow-y:scroll; 滚动条Y轴有滚动条（竖向）

当是长单词或者全部数字，浏览器会认为这是一个整体。就会产生滚动条

背景图片关联依附（attachment）

决定背景是在视口中固定显示，还是随包含它的区块滚动的

fixed——表示背景图相对于视口固定，即使一个元素拥有滚动机制，背景图也不会随着元素的内容滚动（图片显示在初始标签的位置，移到标签到别的区域，将不会显示）

local——表示背景图固定在内容上，滚动内容会被带走

scroll——表示背景图相对于元素标签本身，会一直显示，不受影响

background-attachment:csrll;

背景图片位置定位（position）

background-position:20px 100px; 常规写法

top ——顶点位置 top left ——左上角

bottom ——底点位置 top right——右上角

left ——左边位置 bottom left——左下角

right ——右边位置 bottom right——右下角

background-position: center; 背景图居中

0px 0px就是图片起始位置

20px 高不设置就是自动居中

background复合写法

背景：颜色路径是否平铺关联依附（不用可以不写）位置/尺寸

background: url() no-repeat attachment position/size

尺寸设置一个值，另一个加auto=等比例缩放

省略部分会被默认值替代

position和size之间要用/分割

样式顺序不能错

1.当多个背景图片一起显示，颜色需要写在最后一个，多重需要用“，”分隔

2.当两个图片位置相同，设置的第一张图会覆盖后面的（前覆盖后）

3.多个背景图片，中背景颜色一定要写在最后，red

background:（写多个）

url() no-repeat scroll 20px 20px/30px 30px（auto等比例缩放）,

url() no-repeat scroll 20px 20px/30px 30px red;

background:（写一个）

red url() no-repeat scroll 20px 20px/30px 30px；

精灵图雪碧图

当一个网站需要很多相同的小图标，加载速度会变慢，用一张精灵图当做背景图，利用位置定位显示背景图的各种小图标。

——各种各样不同的线，图标等。。

左上角 X轴负数→

图片起点

↓Y轴负数

7.圆角样式与渐变色

圆角样式（radius）

border-radius: 200px;（50%百分比也行）

长方形尺寸的一半设置圆角样式就会变成椭圆

正方形尺寸的一半（50%）设置圆角样式就变成一个正圆

border-radius:20px 100px;

左上右下右上左下

border-radius:50px 30px 50px;

左上右上/左下右下

border-radius:50px 60px 30px 150px;

左上右上右下左下

数值不能为负数，数值过大

外部区域会被隐藏，内容会显示在外面（视口固定）

边角尺寸不要大于盒子尺寸，否则样式多样化

只能对角可以最大值设置——叶子形状

正方形尺寸的一半（50%）设置圆角样式就变成一个正圆

圆角半径</=元素宽度

单例型写法

border-top-left-radius:50px; 左上角半径

border-top-right-radius:60px; 右上角半径

border-bottom-right-radius:80px; 右下角半径

border-bottom-left-radius:100px; 左下角半径

椭圆设计

椭圆型切角（真难看）

border-radius的属性值可以分为两段，由一个反斜杠隔开 /

反斜杠前面值为横轴值，反斜杠后的为纵轴值，前后皆为独立，语法和简写都一样 ——也能接受百分比，不支持负数

border-radius：50px/50px；单个写法

border-radius:20px 20px / 100px 100px;

左上右下右上左下

border-radius:50px 20px / 100px 30px 50px;

左上右上/左下右下

border-radius:50px 60px 20px 50px / 100px 30px 150px 50px;

左上右上右下左下

太极图（三个盒子利用边框）

1.一个大盒子添加圆角样式变成圆

2.border 直线黑色尺寸变成圆的一半（黑白圆）

3.套娃，添加两个小盒子，圆角样式

4.小盒子尺寸跟border尺寸一样，更改位置到圆心中点

5.把小盒边框变成黑色，内容是白色设置数值就成了

    <meta charset="UTF-8">
1

Document

    <style>
1

body {

background-color: aquamarine;

}

.box01 {

width: 600px;

height: 600px;

margin: 100px auto;

box-sizing: border-box;

border-left: 300px solid #000;

background-color:#fff;

border-radius: 50%;

}

.box01>div {

width: 300px;

height: 300px;

border-radius: 50%;

margin-left: -150px;

}

.box02 {

box-sizing: border-box;

background-color: #fff;

border: 90px solid #000;

}

.box03 {

box-sizing: border-box;

background-color: #000;

border: 90px solid #fff;

}

    <div class="box01">

        <div class="box02"></div>

        <div class="box03"></div>
1
2
3
4
5

渐变色（gradient）

1.线性渐变（横条渐变）

2.径向渐变（圆圈渐变）

3.角向渐变（应用不广，前途很多）

给两种以上的颜色浏览器给渐变色，如果颜色相同就不会有效果，可以作画

方向值——to

background: linear-gradient(to bottom right, #ahcdef，#b078b4);

可以加很多颜色

从左上到右下——左上紫右下蓝(可以有八个方位)

background-image: linear-gradient(to bottom,pink 0%,pink 50%,red 50%,red 100%); ——两侧对称不渐变，粉色跟红色

数值可以是px也可以是%

background-image:linear-gradient(0deg,purple 50%,blue 50%);

角度值方向——下紫上篮

角度=deg

中心点是0deg，一圈是360度

径向渐变

background-image:radial-gradient（at top left,pink 50%,lightblue 50%）;

径向渐变（左上角，粉色50%，蓝色50%）

方向值——at

渐变色用于背景时，是以背景图片的形式展现的！！！

所以可以使用背景图片的所有样式特性，大小，位置，基点，剪切等

多重背景渐变（前覆盖后）

太阳，蓝天，草地图

background：

radial-gradient（orangered，yellow，transparent70%） no-repeat top left/100px 100px， ——太阳（径向渐变，中间是橙色，外面是太阳光）

linear-gradient（lightblue,lightgreen）——线性渐变（上边是蓝色，下边是绿色）

太极图（背景渐变2）

一个盒子即可成型

1.圆角样式 50%变成一个圆

2.线性渐变从左到右50% 黑白半圆

3.径向渐变中心黑，外边白，盒子大小位置都与大盒子的一半

4.复制第三步，颜色掉换下

重复渐变色和渐变色重复(repeating)

background:repeating-linear-gradient()

background:repeating-radial-gradient()

原理跟前两者类似，色标是无线循环重复，填满整个背景

默认线性是从上到下，deg角度，

径向是画写轮眼

（45deg，#000 20px，#fff 50px）

彩虹

<meta charset="UTF-8">
1

Document

<style>
1

div {

width: 800px;

height: 600px;

margin: 100px auto;

border: 1px solid red;

background:

radial-gradient(at bottom, transparent 30%, red 30%, red 35%, orange 35%, orange 40%, yellow 40%, yellow 45%, green 45%, green 50%, cyan 50%, cyan 60%, blue 60%, blue 65%, purple 65%, purple 70%, transparent 70%, transparent 100%);

}

<div></div>
1

8.浮动样式（float）

float：left——左浮动从左到右的排列方式

float: right——右浮动从右到左的排列方式

文本会跟图片环绕显示，块级区域横向布局

当块级盒子浮空，会有另外一套规则。（下面的盒子会占用浮动的盒子的位置。环绕显示或者是被覆盖）

优点，没有解析空格，文本基线对齐浮动元素之间不会覆盖彼此

行内元素浮动

图片在文字之间，图片浮动后，文字会靠拢

图片浮动会在图片前的文字最后一行对齐，其他文字会接着靠拢，文字环绕图片

设置了浮动的行内元素顶端不会超出所在行行框顶部

缺点，图片环绕，会根据间距来排列，文字会在图片底部另起一行，有点坑

父元素高度塌陷

当盒子内所有内容全部浮动，会让盒子设置的元素全部失效

第一类解决办法： 算是隐藏，或多或少都会有一些冲突

1.父元素高度写死（缺点自适应不好）

2.父元素 BFC化虚拟的框包裹性 overflow:hidden ; “高度”自适应（溢出隐藏）

3.父元素也浮动 float：left；高度跟宽度自适应

4.display:inline-block; 不建议使用

5.position：absolute；定位

…等的

第二类解决方案：利用幽灵元素来清除浮动，手动撑开父元素的高度

1.在body新建一个空的块元素,幽灵元素会破坏原本结构（列表）

div {

clear:both; 清除浮动

}

2.伪元素生产一个幽灵元素

ul::after { 在ul标签最后添加伪元素

content: ’ ’ ; 启动项

display:block; 伪元素默认是inline

clear：both；清除浮动

}

清除样式（clear）

clear：left; 左浮动清除盒子会感知左侧的高度（下方盒子会在左侧下方显示）

clear：right; 右浮动清除盒子会感知右侧的高度（下方盒子会在右侧下方显示）

clear: both; 两侧都会浮动感知两侧浮动盒子的高度（下方盒子会在高度最高的地方显示）

9.定位样式

定位——常用于固定导航栏跟特殊布局

只针对块级模块进行定位

绝对定位（position：absolute）

position属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

块级绝对定位

1.设置了绝对定位的元素会原地上飘（显示效果是后来居上）

2.脱离标准文档流，下方标签会排版上去，并且绝对定位的元素会覆盖下方标签

3.绝对定位只是元素位置的固定，没有浮动的文字环绕效果

4.浮动是左右排版互不干扰，绝对定位是固定位置，因为是飘起来会覆盖固定位置上的元素

样式继承（必考）

自己搜

position：absolute；——绝对定位**，相对于 static 定位以外的第一个父元素进行定位。**

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

（找父代定位的标签开始定位，如果没有就会默认页面左上为坐标轴）

position：fixed； ——固定定位，相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

position：relative； ——相对定位——相对于其正常位置进行定位。

因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

position：static； ——默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

position：inherit； ——规定应该从父元素继承 position 属性的值。

top：30px；直接在position下方写定位就行

行内绝对定位

视频28分开始

1.设置了绝对定位的元素会原地上飘

2.脱离标准文档流，下方文字会排版，飘起来的元素或者是图片会覆盖（之前图片后面的文字）

——定位元素的顶部与行框顶部对齐

3.要是给了位置，就会相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

相对定位（position：relative）

视频32分开始

position：relative； ——生成相对定位的元素，相对于其本身的位置进行定位。

因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

父相子绝

视频38分开始

父代元素相对路径，子代元素绝对路径

两个元素互不影响，大家都好好工作

固定定位（position：fixed）

视频46分开始

position：fixed； ——固定定位，相对于浏览器窗口进行定位。

元素垂直水平居中（必考）

视频48分开始

第一种方法:

position:absolute;

left:50%;

top:50%;

margin-left:-100px;

margin-top:-200px;

}

*兼容性好;缺点:必须知道元素的宽高

第二种方法：

div.box{

weight:200px;

height:400px;

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

*这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器

第三种方法

div.box{

width:200px;

height:400px;

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

}

*兼容性较好，缺点:不支持IE7以下的浏览器

第四种方法

场景：一个块状元素A内有若干个块状元素B，要达到的效果是，所有块状元素B 在元素A 内水平居中显示。

首先，我们要设置元素A的大小为500px，设置背景色为green方便查看

我们要做的就是，先把所有元素B设置为行内块元素,让他们都排成一行， display:inline-block；

最后就是让所有的元素B居中了，到这里，相信很多人就猜到下一步要做什么了，我锦上添花，解释一下。

先想一想，如果是行内元素，我们一般让它怎么居中呢？答：当然是给它的父容器加一个text-align:center的样式。

这里我们已经把所有的元素B变成了行内块，也就有了行内元素的特性，所以，我们下一步要做的就是给元素A加text-align:center

兼容性较好，父元素和子元素的宽度都要已知

绝对元素的层级关系

视频57分开始

默认层级关系是 后来居上

这给绝对元素加层级关系的，不能单独使用

z-index 正值

设置了绝对定位元素或者是z-index：0

浮动层

普通流内容层（起点）

border

background

background-color

z-index：负值

z-index：1；可以改变层级关系。数字谁大谁在上面，其他就是默认层级 只能在定位样式中使用

z-index：-2；负值越大越后面

伪类样式

视频1h21分开始

伪类更改样式

A标签开始是蓝色。点击后是紫色。一直点中是红色

鼠标悬浮（hover）

视频1h25分开始

a:hover {

background-color：pink；

}

鼠标移动（悬浮）到标签（A标签），修改样式

二级菜单（隐藏跟显示）

视频1h27分开始

鼠标移到到某处，将隐藏的标签显示

display: none; 显示效果：隐藏了

.box01:hover~.box02 {
display:block;
}
.box02 {
background-color: lightblue;
display: none;
}

这样只能看到，脱离元素。隐藏的标签也会隐藏。因此把隐藏的标签放到，触发条件的标签中。当儿子

更改鼠标样式（cursor）

视频1h41分开始

cursor：pointer；（显示是小手，注意A标签自带小手样式）

cursor：url（网络地址自定义光标样式）

百度搜cursor可以搜各种样式

快捷书写

视频1h49分开始

·alt+鼠标点击的标签 就可以多处全选进行修改

Emmet语法

视频1h53分开始

百度搜索会更多

快捷写法比如 **！**快速生产文档结构

p.ppp 会变成 p classs=“ppp”

，sd （#sd）会变成 div的 class=“sd”（#sd）

li*n 会变成 n个li

li{内容}*3 会变成 li 内容li 三个相同

li{0000$}*3 会变成 li 0001li $会变成数字进行排序

li 0002li

li 0003li

div#content>div.box01+div.box02>ul>li{$$$}*5

div#content>(div.box01+div.box02>ul>li{$$$}*5)X2

(ul>(li>img+span)*6)*4

Emmet特殊字符的意义

#代表ID

.代表class

*代表n个重复

{}代表里面的内容可以被重复多个

$代表数字排序

》代表子代

+代表相邻或兄弟元素

^代表上级

（）代表里面的内容可以被重复多个

10.表单元素

作业详解

1.alt+鼠标多选

注意选中所有光标的位置跟复制的位置，以免出现错误

2.100%的样式

注意是继承父级元素的属性

3.background-color：rgba（0， 0， 0， .2）；

注意空格，以免标签相互连接就会失效——或许不加也行待定吧

4.》——子代必须特别精确。少一个类都不行

扒图

视频25分开始

控制台最上面一栏点 > 找》Application（应用）》Frames（框架）》Images

Console 控制台可以当计算器用

控制台最上面一栏点 > 找》Sources（应用）》XXXX（框架）》Images

列表清除（li）

视频32分开始

li{

list-style：none；

}

这样列表样式就全部没有了，要是单独需要，那就写在多个选择器中

表单（form）

视频50分开始

表单元素大部分是行内块

输入的文本框，单选，多选，密码栏，问卷调查等——表单

form标签——浏览器专门在网页上专门划分一片区域存放表单

form是块元素

form标签的action属性内部是一个连接，指向的是提交表单时 向那个服务器地址发送表单数据

form标签的method属性内部储存着，该表单向目标服务器传输数据时采用那种方式

如果只要表单样式就不要加form

《form action=“https：//www。baidu。com”></form》

input元素

视频56分开始

在form 元素中使用，用来展示用户可以输入的数据元素

input标签最终的表现形式和传输至服务器的数据类型，取决于type属性

input 是行内块元素

input标签的 type属性内部储存着该input元素输入信息的类别

（文字，单选，邮箱，电话号码，多选框等）

form标签的name属性内部存储着该input元素的名称，此次的名称与class不同

1.文本框

type=tetx 文本框输入（变成一个输入框，用户输入的信息会显示出来）

type 决定的它的类型

placeholder 占位提示符（在用户尚未输入信息时，在输入框中显示提示信息，该信息在用户点击输入框输入任意信息后会自动消失）

value 用户输入的信息，可以被用户修改。特定场景用

注意在其他表单元素（选择按钮）里面是代表用户输入的内容

《form>

姓名：<input type=“text” placeholder="请输入姓名” value=“123”>

</form》

2.密码框

视频1h15分开始

自动加密用户输入的信息

密码：《input type=“password” name=“password”》

3.提交数据的方式跟提交按钮（method、submit）

视频1h18分开始

method=“GET” ——会暴露所有信息到地址栏（百度这类搜素用的多）

method=“POST” ——不会暴露信息，安全点（黑客可不是跟你闹着玩的）

如果没有服务器传输，用户填写的表单元素里所有内容会在网页地址栏显示

实际开发项目中，两种请求会有特定要求。需求错了，数据传输不对

《input type=“submit” value=“提交”》

4.input提交信息（name）

视频1h20分开始

所有input收集的元素都需要加name属性

name值一定要见名知意，name值是给服务器及后端人员看的

姓名：《 input type=“text” placeholder=“请输入姓名” value=“提前输入的信息可以被修改” name=“username”》

密码：《input type=“password” placeholer=“请输入密码” name=“password”》

《input type=“submit” value=“提交”》

name就等于用户填写的信息所在那个类型问题的答案，name意思=所问问题

5.数字输入框（number）

视频1h28分开始

number 数字输入框

max 输入最大值

min 输入最小值

value 预设值可以被修改

step 数字选择栏可以调整数值

name 传输到后端匹配的数据类型名

购买数量：《input type=“number” max=“99” min=“0" value=“0” step=“10” name=“number” 》

文字输入不进去，只能输入数字。有个数字选择栏

6.数字滑块

range 数字滑块

《input type=“range” max=“99” min=“0" value=“0” step=“10” name=“number” 》

很少用，了解就行

7.日期输入

视频1h36分开始

《input type=“date” name=“date”》年/月/日

《input type=“time”》时/分

《input type=“month”》年/月

《input type=“week”》年/周

《input type=“datetime-local”》年/月/日/时/分/秒

很少用，了解就行

8.颜色输入

color 颜色输入

《input type=“color” name=“color” id=“”》

9.文件输入

视频1h45分开始

file 单文件输入

《input type=“file” name=“file” id=“”》

multiple属性可以让文件多选上传

《input type=“file” multiple name=“”》

10.模拟按钮，提交按钮

视频1h47分开始

模拟按钮让它显示成一个按钮，后期可以跟JS交互。

《input type=“button” value=“点我呀~”》

提交按钮提交表单元素里面所有的内容

《input type=“submit” value=“提交” name=“submit”》

11.单选按钮

视频1h50分开始

radio

比如说水果选一个，所以name属性值都是一致为一组。

《input type=“radio” name=“fruit” value=“cheery”》樱桃

《input type=“radio” name=“fruit” value=“grape”》葡萄

《iput type=“radio” name=“fruit” value=“apple”》苹果

12.复选按钮

视频1h55分开始

checkbox

《input type=“checkbox” name=“color” value=“red”》红

《input type=“checkbox” name=“color” value=“pink‘》粉

《input type=“checkbox” name=“color” value=“green”》绿

11.表单元素下

规定字符数量

视频8分开始

属性可以规定名称text，密码password的字符数

minlength=“3” 最小输入字符3个

maxlength=“6” 最大输入字符6个

扩大选区

视频14分开始

label 元素 扩大选择范围，可以做一个简单的轮播图

for 属性 绑定扩大的具体范围（for的使用需要跟那条表单元素捆绑，就把属性值改成绑定的id名为一致性）

《inpur type=“radio” name=“fruit” id=“cherry”》

《label for=“cherry”》樱桃《/label》

伪轮播图

视频23分开始

1.划分一块区域

2.轮播图片父相子绝

3.单选按钮跟label绑定

4.单选按钮隐藏样式，图片隐藏样式

5.label设置样式跟绝对定位位置

6.单选按钮跟图片绑定

我特喵的不会

选中（checked）

视频47分开始

checked 属性点击后就是选中，唯一性

可以在某一组使用，添加上就等于打开网页默认显示加的某一组

checked 属性规定在页面加载时应该被预先选定的 input 元素。

按钮（button）

视频1h15分开始

标签button 不确定因素，一定要 input 里当属性

下拉选项（select）

视频1h18分开始

select 下拉按钮

option 下拉选项

selected 打开默认值

《select name=“fruit” id=“”》

《option value=“cherry”》樱桃《/option》

《option value=“apple”》苹果《/option》

《option value=“banana”》香蕉《/option》

《option value=“aaa” selectde》请选择喜欢的《/option》

《/select》

下拉选项组（select）

视频1h23分开始

select 选择组

label 规定选项的类型名

《select name=“bf” id=""》

《optgroup label=“明星”》

《option value=“wyb”》王一博《/option》

《option value=“xz”》肖战《/option》

《/optgroup》

《optgroup label=“二次元”》

《option value=“sl”》索隆《/option》

《option value=“jd”》基德《/option》

《/optgroup》

《/select》

文本域

视频1h27分开始

textarea 文本域

cols 每行多少字

rows 多少列

自带的样式可以调试，需要关闭 resize：none；

《style》

textarea {

resize：none；

}

《textarea name=“” id=“” cols=“30” rows=“10”》内容《/textarea》

表单分组（fiedset）

视频1h31分开始

fiedset 表单分组（边框的颜色跟样式可以在CSS设置）

legend 表单标题（标题位置可以在CSS设置）

《fiedset》

《legend》标题《/legend》

姓名：《input type=“text”》

性别：《input type=“radio”》

《/fiedsrt》

表单样式（边框特效设置）

视频1h43分开始

表单是行内块，可以加宽高、但是标签属性还是不变。

outline：none；选中的边框效果（跟边框类似，但是是特效）

outline-color：red； 效果颜色可以改

outline-witdh：20px； 效果边框大小可以改

outline-style：dashed； 效果边框样式可以改

12.表格（table）

文档表格，上边是工具栏，内容是工作布

宏晶科技网站表格网站的代表

表格元素先有行，再有列

视频6分开始

table 表格表格

tr 行多少行

td 列多少列，就等比例分了行

th 表头自动加粗居中（位置跟着结构的位置而更改）

border=“1”属性快要被淘汰了，红色不要用

表格标题（caption）

视频16分开始

《caption》表格标题《/caption》 位置一直会在上方

caption-side：bottom； 修改表格标题位置

《style》

caption {

caption-side：bottom；

}

《/style》

表格区域划分

视频24分开始

把表单划分成，头部，身体，脚部三部分，网页布局解析从上到下排版

《thead》《/thead》头部区域

《tbody》《/tbody》身体区域

《tfoot》《/tfoot》脚部区域

合并单元格横向合并（colspan）

视频30分开始

先有行，行内是列。所以合并行其实是合并列

colspan=“n” 横向合并，合并几个填几个

注意当合并行数不够分。前面的生效，后面的不生效。

《tr》

《td colspan=“3”》2-1《/td》

《/tr》

合并单元格竖向合并（rowspan）

视频34分开始

合并单元格是往下合并，并且会扰乱布局

rowspan=“3” 竖向合并

《tr》

《td rowspan=“3”》2-2《/td》

《/tr》

表格尺寸计算

视频37分开始

一列的宽度由该列最宽的单元格内容决定

一行的高度由该列最高的单元格内容决定

可以在CSS修改样式，但是修改的数值会根据，表格划分的区域进行原始比例等比例扩大或者是缩小

《style》

table {

width：600px；

}

宽度放不下，行元素自动撑高

行元素撑高，整个table一起撑高

表格边框样式

视频1h开始

border-collapse：collapse；边框线合并(本身把两个框线合并在一起了)

border-spacing：100px；表格内容之间的距离设置

《style》

table {

border-collapse：collapse；

border-spacing：100px；

}

《/style》

有些数值在body里属性值可以不用写单位（xp）写数值就好

表格元素层级

视频1h16分开始

单元格

行

行组

列

列组

↑ 表 ↑

表格可以随着设置改动。

表格排版布局有优势

13.高级选择器和伪元素

高级选择器的种类

选择的结构，伪类选择器

平级选择，子代可能会继承

伪类选择器——状态类

伪类选择器——结构类

伪类选择器——属性类

css伪类是一个冒号（：）作为前缀，被添加到一个选择器末尾的关键字。当你希望样式在特定状态下才会呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类

伪类选择器——状态类

视频5分开始

状态——代表鼠标选中的状态，一瞬间的事。修改 变化时 的样式

：checked 表单元素被一直选中的状态（只能用于单选按钮跟复选按钮）

：active 表单元素跟连接元素被激活的状态，此处被激活的状态有些特殊（鼠标左键按下未抬起的时候）

：hover 鼠标悬停的状态

A标签状态总结

视频14分开始

A属性结构是有顺序的，给自己买lv 哈哈哈（ha）

：link 未访问链接

：visited 已访问链接

：hover 鼠标悬停

：active 激活链接

触发焦点，持续输入（focus）

视频25分开始

：focus 当用户点击，触摸（手机平板用户）或者是Tab选到它，出发焦点

表单元素，链接时会被触发，就好比文本输入框持续输入文字

选中时外边框特效

视频29分开始

注意这个不算选择器的元素，算是属性，写在CSS里

outline：none；选中的边框效果（跟边框类似，但是是特效）

outline-color：red； 效果颜色可以改

outline-witdh：20px； 效果边框大小可以改

outline-style：dashed； 效果边框样式可以改

伪类选择器——结构类

视频32分开始

DOM树——HTML元素结构树

伪类选择器可以跟基础选择器混合使用，但是伪类必须放在后面

：nth-child（规律选择）

li：nth-child（5） {

修改样式

}

某项选中 n

双数选中 2n

单数选中 2n+1 2n必须在前面

注意

当同级标签都会生效，但是另外一个结构也会从头开始计算，不会连续计算。但是同级其他标签也会计算数

子代不会生效，会继承个别样式属性

：nth-last-child（5）这是倒序，对比nth-child（5）

：nth-of-type（规律选择加强版）

视频50分开始

只会计算选中的标签，计算数，结构别的标签不计算在内

无视其他结构标签

：nth-last-of-type（）这是倒序，对比：nth-of-type（）

ul：nth-of-type {

修改样式

}

：first-child（头尾选择）

选择在父元素中第一个子代

：last-child

选择父元素中最后一个子代

li：first-child {

修改样式

}

：first-of-child

等同于先是子代选择器选择了第一个生效，然后是后代选择器。第一个子代后代全部生效

：last-of-child

等同于先是子代选择器选择了最后一个生效，然后是后代选择器。最后一个的子代后代全部生效

li：first-of-child {

修改样式

}

伪类选择器——属性类

视频1h10分开始

两次筛选，第一次是标签，第二次是属性

用的是方括号[]

ul[class]{

color：red

}

1.筛选所有标签（ul） 2. 筛选所有属性

ul带class的全部生效

attr=val（准确属性值筛选）

视频1h15分开始

1.筛选所有标签（ul） 2. 筛选所有属性=属性值

input[name=“text”] {

backround：lightblue；

}

attr~=val（包含属性值筛选）

val=当前属性值中，标签中只要有，就会选择。（包含等于很多，不精准）

class 名字可以写很多个 class=“gegg texet rex”

ui[class~=“ufjg”] {

font-size：30px；

}

attr^=val（属性值开头筛选）

视频1h20分开始

属性值开头筛选

input[name^=“t”] {

样式修改

}

属性值结尾筛选（name$=“t”）

input[name$=“t”] {

样式修改

}

属性值包含筛选（name*=“t”）

属性中间的字符选几个字符也行，范围广，包含就行

input[name*=“t”] {

样式修改

}

伪元素

视频1h31分开始

不是真正的元素

伪元素有两个冒号：：

添加了伪元素，但是会成为一个整体

目的是多增加一些显示内容

没有启动项（content），伪元素即失效

幽灵元素

.box：：after { 幽灵元素位置在最后面

content：“”；启动项

displat：block；默认是行内得改成块

}

.box：：before { 幽灵元素位置在最前面

content：“”；启动项

displat：block；默认是行内得改成块

}

content

视频1h40分开始

幽灵元素启动项

content=“none” 不会产生伪元素

content=“normal” 不会产生伪元素

文本内容展示字符内容

url 外部资源路径

伪元素不会影响结构选择器（伪元素不会被选择器选中）

伪元素不会被搜素引擎收录，不会影响网页SEO

first-line

first-line 只用于文字，首行修改样式

p：：first-line {

background：pink;

}

first-letter 只用于文字，首段第一个字符修改样式

p：：first-letter {

font-size：20px；

}

selection

视频1h46分开始

文字选中效果美图网站是粉色，其他大部分是蓝色

p：：selection {

color：transparent；

}

透明色就看不见字了

marker

修改li 小圆点的样式

li：：marker {

color：pink；

}

14.动画

会动的图片，每一秒有多少帧图片。

传统动画一秒24张图片一秒8张

触发式动画

视频12分开始

根据需要触发条件。

鼠标悬浮：hover

选项选中：checked

输入框点击：active

定义第一帧到最后一帧的动画时间，浏览器自动根据该时间生成对应的中间帧

动画过渡时间

transition-duration：3s；放在CSS标签里，给元素本身

过渡动画延迟

视频23分开始

transition-delay：2s 动画执行的2秒后开始执行

动画执行速率（动画时间函数）

定义动画从第一帧到最后一帧的变化过程速率变化

https://cubic-bezier.com/#.17,.67,.83,.67

贝塞尔曲线——时间函数网站

当控制台用来单独设计样式，复制粘贴就好

样式很夸张，图形会回弹（数值为负）或者夸张

transition-timing-function：linear 匀速 ❤❤❤

transition-timing-function：ease 慢速到快 ❤

transition-timing-function：ease-in 慢速到加快

transition-timing-function：out 结束是慢速

transition-timing-function：ease-in-out 开始跟结束都是慢速 ❤

transition-timing-function:cubic-bezier( , , , ,) 单独设计样式

单独选择某项属性动画，其他属性瞬变

视频36分开始

定义元素是以某个属性作为动画的变化效果，其他属性瞬变

可以规定多个，用逗号隔开，

要消失跟显示效果，需要用透明度 opacity

数值形式的属性才能变化，不是说所有属性都可以进行动画效果

（颜色因为自带数值#256256256或者16进制字符转换）

transition-property：all；默认

transition-property：width，height；

复合动画写法

过渡动画综合属性：属性名称过渡时间过渡动画时间函数动画延迟时间

transition：all 2s ease 2s；

ease 是默认大多情况写两种就行 transition：all 2s；

伪轮播图

视频46分开始

图片渐变效果

主动式动画

视频1h5分开始

可以控制每一帧的动画效果无需任何的动作，打开网页就开始动画

from——to 开始——结束只有两种变化才能使用

@keyframes jump（动画名字）主动式动画启动设置

animation-name：动画名字；关联主动式动画变化样式

animation-duration：3s；主动动画过渡时间

这三个必须有

当标签都加上了动画效果，都会关联行动。不是唯一的，可以共享

网页默认打开后，动画效果直接播放。播放后会根据CSS样式里标签的位置决定在哪（动画过程感觉特别像广告弹出窗会动）

div {

width：300px；

height：300px；

animation-name：identifier （动画名字关联）；

animation-duration：3s；

}

@keyframes identifier { （动画名字跟标签产生关联）

0% { (from)

top：0；

left：0；

background-color：pink；

}

50% {

top：200px；

left：220px；

background-color：lightblue；

}

100%{ (to)

top:600px;

left:600px;

background-color:lightgreen;

}

这样没有初始值。动画做完了，就隐藏了

注意，需要回到动画初始位置跟样式，复制粘贴主动式动画开始或者是结束的样式

div { 实例

width:300px;

height:300px;

position：fixed；

top：0；

left：0；

background-color：pink；

animation-name：动画名字；

animation-duration：3s；

}

主动动画过渡时间

animation-duration：3s；

主动式时间函数

视频1h16分开始

animation-timing-function 参考贝塞尔曲线

animation-timing-function：linear 匀速 ❤❤❤

animation-timing-function：ease 慢速到快 ❤

animation-timing-function：ease-in 慢速到加快

animation-timing-function：out 结束是慢速

animation-timing-function：ease-in-out 开始跟结束都是慢速 ❤

animation-timing-function:cubic-bezier( , , , ,) 单独设计样式

主动式延迟

animation-delay：2s；

动画播放次数（animation-iteration-count）

视频1h18分开始

animation-iteration-count:6; 循环6次（默认是1）

animation-iteration-count:infinite; 无限循环

动画播放方向（animation-direction）

animation-direction

animation-direction：normal 正向播放（默认值）

animation-direction：alternate 奇数正向播放（1.3.5）偶数反向播放（2.4.6）

animation-direction：reverse 反向播放

animation-direction：alternate-reverse 反向播放-轮换播放（当主动效果写反了，用这个负负得正嘛）

动画播放完的状态

视频1h24分开始

注意特定情况——不以主动式设置的轨迹判断。

根据动画的播放方向计算，所以显示会有偏差

animation-fill-mode：backwards; 还原第一帧状态

animation-fill-mode：forwards；还原最后一帧状态

动画运行状态

视频1h28分开始

规定动画是否正在运行或暂停

写在触发条件里

animation-play-state：running；这是默认运行

animation-play-state：paused；暂停

div：hover {

animation-play-state：paused；

}

主动式动画复合写法

主动动画综合属性：1.属性名称 2.过渡时间 3.过渡动画时间函数 4.动画延迟时间 5.播放次数 6.播放方向 7.播放完成的状态

animation： name duration timing-function delay iteration-count direction fill-mode；

图片放大效果

视频1h35分开始

不能使用复合写法

1.背景面积大小设置

2.背景图片大小设置

3.图片位置设置

4.背景图片不能平铺

5.背景图片定位位置

6.悬浮或者是触发效果设置背景图片大小变大，背景定位位置改变

心

视频1h38分开始

注意

边框样式设置上面 width：0；会变成下三角

边框样式设置下面 width：300px；会变成上三角

定位样式，需要加宽高要不然找不到居中的

定位居中，盒子没有宽高，就参照盒子内容撑起的宽高

15.transform

变化样式

写在触发样式中，变化标签需要加动画元素与之关联

只是更改了视觉效果，元素本身没有变化

rotate（旋转）

默认点为元素中心点， rotate（45deg）——45°正方形会变成菱形

角度值正——顺时针转角度值负——逆时针转

div {

transition：transform 3s；触发式跟主动式都行

}

div：hover {

transform：rotate（60deg）；

}

translate（位移）

视频9分开始

复合写法，运行轨迹是斜着走

transform：translateX（100px）； X轴移动

transform：translateY（200px）； Y轴移动

transform：translate（200px，200px）；复合写法

scale（缩放）

视频13分开始

一个参数是 XY轴缩小值相同，分开写就是 X轴先 Y轴后

可以单独一个边缩放

transform：scaleX（0.5，0.6）；

放大跟缩小元素也会跟着，但是只是视觉效果

-负号=倒置

倍数0-1之间元素缩小

倍数》1 元素放大

倍数《0 元素倒置（-1–0，倒置缩小小于-1 倒置放大）

transform：scale（2）；

字体如何更小（考试）

字体大小最小是14px，需要视觉效果更小，可以用scale缩放变得更小

transform：scale（0.2）

skew（倾斜）

视频23分开始

原理：手机垂直看着，像长方形。往后倾斜一定角度，在视觉上就会看成平行四边形

需要用平行四边形视觉效果可以使用

transform：skew（45deg， 100deg）；

也可能X Y轴单独使用

变化原点

视频30分开始

transform-origin 更改变化原点

可以用英文值，也可以用%（0%. 0%）

当为负值或者百分比100%以上原点在元素外面

上下左右，中心（默认），左上，左下，右上，右下

原点变化，变化样式的变化的位置也随之改变

transform-origin：bottom right；

transform-origin：50% 50%；

变化样式复合写法（transform）

视频44分开始

transform：scale（） translate（） skew（） rotate（）；

属性顺序不固定

变化样式内多个样式值顺序不同会导致结果不同

变化样式进行时，坐标轴会变化，位置也会变化，结果也会不同

注意先后顺序

transform：none 动画效果取消

transform：rotate（45deg） translateX（300px） translateY（300px）；

旋转45°（坐标轴发生变化）→横向移动300px→纵向移动300px

动画性能优化（底层逻辑）

视频47分开始

动态粒子特效 ——css画布

前端动画实现的方法

1.利用JavaScript在canvas画布进行动画绘制

2.利用JavaScript或css来控制元素的位置属性值变化来实现动画效果

change（JavaScrip或CSS改变元素的位置属性）

↓

RecalculateStyle（重新计算样式）

↓

Layout（布局）

↓

Paint（绘制）

↓

Composite（渲染层合并）

change(通过JavaScript或CSS改变某个元素的位置属性值)
Style(计算样式)∶浏览器确定每个DOM元素最终应用哪些CSS规则
Layout(布局)︰浏览器计算每个DOM元素在最终屏幕上显示的大小和位置。并且整个页面上所有的元素位置都是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫reflow(重排）
Paint(绘制)︰在多个层上绘制DOM元素的的文字、颜色、图像、边框和阴影等。最典型就是background和绝对定位中不同Z-index值的元素
Composite（渲染层合并)∶按照合理的顺序合并图层然后显示到屏幕上。比如将元素的内容层放在background层之上，同一坐标系下的不同Z-index值的元素

浏览器性能消耗查询

视频51分开始

控制台——performance模块（点第一个实心原点）——call tree选项

控制台——Network模块——Slow 3G（测试网速很慢） NO是默认（别忘了改回去）

作业

视频1h15分开始

动画效果会在元素初始位置上进行效果

用动画位移的地方只是视觉效果上的，并不是真的在哪里

名字命名- 跟_都行

窗口等分

视频1h35分开始

浏览器窗口分成100分

width：100vw；把宽分成100vw

heighe：100vh；把高分成100vh

花瓣特效

用了定位，确定了居中时（left：50% margin-left：-200px）会占用纵向的排版，会把网页布局撑大

定位的问题

块级元素没有宽高尺寸。旋转特效（X轴）会撑开网页出现滚动条

坐标轴倾斜了，块元素的位置都会改变，块级模块排版会斜着摆放

变化原点跟旋转角度可以变化更多图形效果花瓣，花轮，血轮眼

16.3D动画和盒阴影及滤镜上

盾牌

1.大盒子包裹img 定位居中

2.解析空格 body加背景颜色

3.大盒子宽高加出来。img自动组成盾牌

4.动画样式每个img的位置旋转倾斜改变

5.img 添加触发式动画样式

6.添加大盒子悬浮样式。动画效果：取消

摩天轮

视频19分开始

物理学相对静止状态

大盒子正转，里面的小盒子也会倒着转

小盒子反着转，跟大盒子旋转方向相反，就会产生视觉特效，相对静止状态

1.背景图片居中拉伸

2.摩天轮尺寸，相对定位

3.乘客轮绝对路径

4.乘客轮位置高级选择器

5.摩天轮跟乘客轮动画效果

6.摩天轮跟乘客轮添加主动式动画属性

7.悬浮大盒子，悬浮大盒子》小盒子

3D动画

视频35分开始

3D物体在三维空间中的运动，基础是创造一个三维坐标系（X轴，Y轴，Z轴）

近大远小

Z轴——等用于眼睛看到物体的距离=坐标轴

在2D空间看正方形就是正方形，但是给了正方形一个旋转的角度，就类似于3D视觉正方形变成平行四边形，只是视觉的变化

Z轴设置（perspective）

视频43分开始

景深——等于物体到屏幕之间的距离（视距）

perspective：1000px；——添加Z轴物体距离屏幕1000px

正值越大，脱离父级，视觉效果越来越大

负值越大，视觉效果越来越小，并且因为透过了其他元素，自身的颜色也会被改变（类似透明度会变色）

Z轴原点（perspective-origin）

视频54分开始

Z轴原点——Z轴移动的坐标轴在哪

perspective-origin：50% 50%；——默认值

perspective-origin：0% 0/5； ——左上角

perspective-origin：100% 100%；——右下角

辅助查看3D视图（transform-style：preserve-3d）

视频1h7分开始

transform-style：preserve-3d;

立方体

视频1h10分开始

注意颜色都要加数值（动画需要数值，体量更小的运算跟精确）

这个三个坐标轴太绕了建议直接画图先定出来，在慢慢修改

先旋转还是先移动 X Y Z

3D 加了景深视觉效果会变形

3D坐标轴或者辅助3D视图加一个，不加没有立体感

盒阴影（box-shadow）

视频1h37分开始

box-shadow: h-shadow v-shadow blur spread color outset/inset;

h-shadow:水平阴影偏移量——必须项

v-shadow：垂直阴影偏移量——必须项

blur：模糊距离

spread：阴影尺寸

color：阴影颜色

outset/inset：外阴影（默认值）/内阴影

box-shadow：3px 3px 6px 10px #ccc inset；

文字阴影（text-shadow）

视频1h48分开始

text-shadow：h-shadow v-shadow blur color；

h-shadow:水平阴影偏移量——必须项

v-shadow：垂直阴影偏移量——必须项

blur：模糊距离

color：阴影颜色

text-shadow：2px 3px 10px #ccc， -1px -1px 2px #000；

可以写两个，前面是右下边阴影。后面为左上方阴影

左上白右下黑 ——文字凸起

左上黑右下白——文字凹起

17.3D动画和盒阴影及滤镜下

margin会影响所有布局跟元素

position不会，因为是在另外一个平面上飘着的

外部盒子跟内部盒子的尺寸不同，不设置变化原点位置（或者盒子尺寸都相同），动画效果各玩各的

3D导航栏

视频15分开始

Y轴——从左到右旋转

X轴——从下到上旋转

Z轴——

1.两个盒子宽高定位

2.直角相邻的两个——展示面

3.角度先谁后谁，坐标系都会改变

4.动画效果，浮动展示

文字翻转

视频36分开始

伪元素自定义属性（data-txt）

视频40分钟

data-txt=“文本内容” data自定义属性

还需要在CSS添加 content：attr（data-txt）

1.固定字体位置

2.添加两个伪元素（自定义属性）

3.伪元素设置平面显示权重

4.旋转改变第一个字的位置

5.缩放变大一点点

6.旋转+倾斜有翻书效果

3D相册

视频1h5分开始

1.大盒子的宽高跟图片一致

2.四个小盒子，宽设置四等份，高100%

3.背景图片，3D辅助查看

4.图片定位

5.旋转效果

6.动画效果加延迟

7.修改样式跟显示隐藏

凹凸文字

视频1h35分开始

p:nth-of-type(1) {

color: #ccc;

text-shadow: 3px 4px 1px #000, -1px -1px 1px #fff;

}

p:nth-of-type(2) {

color: rgb(112, 108, 108);

text-shadow: -1px -1px 1px #000, 4px 5px 6px #fff;

}

可以写两个，前面是右下边阴影。后面为左上方阴影

左上白右下黑 ——文字凸起

左上黑右下白——文字凹起

滤镜样式（filter）

视频1h42分开始

ps图片 filter写在CSS 滤镜属性\

滤镜的使用顺序决定结果

filter：blur（0px）；——高斯模糊。值越大越模糊

filter：brightness（100%）；——亮度。0会全黑，大于100会越来越亮

filter：contrast（100%）；——对比度。0会全灰，大于100会越来越强，对比色彩

filter：drop-shadow（3px 3px 5px）；——图片阴影跟盒阴影类似

h-shadow v-shadow blur spread color 五个值

filter：grayscale（0%）；——灰度黑白照片 0度默认。100黑白灰

filter：hue-rotate（0deg）；——色相旋转，0deg默认类似于底片，色环旋转掉换颜色

filter：invert（0%）；——反转输入图像 0deg默认，100deg类似相机胶卷

filter：opacity（100%）；——透明度优点浏览器会通过硬件加速

filter：saturate（100%）；——颜色饱和度 0不饱和 100以上超饱和（三基色越来越正）

filter：sepia（0%）；——深褐色跟灰度很像黑白灰岁月老照片的感觉

18.弹性盒模型（display：flex）

一种更为简单，有效的方式来对一个元素块中的子元素进行排列，对齐和分配空余空间——弹性盒模型

除了弹性盒子的宽高，里面的容器是没有固定数据的，都是按照规矩调节弹性分配

display：flex；

默认块级也会同行显示从左到右（主轴的顺序）

弹性盒子内部不会换行，所有内容会等比例同行显示

宽度是o 根据内容撑开，必须有内容的容身之处

高度是父代100%

主轴方向（flex-direction）

视频28分开始

弹性父盒子主轴位置排列方式设置

flex-direction：row；从左到右（默认）

flex-dirction：row-reverse；从右到左

flex-direction：column；从上到下

flex-direction：column-reverse；从下到上

不设置其他样式，每个子盒子会独占一行

没有空白子盒子会挨着

子元素换行（flex-wrap）

默认子元素不会换行，并且重新定义父代宽度

弹性子盒子换行设置

flex-wrap：wrap；

换行处，空间不够会换行，会留白

换行的高度会等分父代高度

元素主轴方向排布（justify-content）

基于弹性盒子主轴方向设置，在进一步设置子盒子的位置，注意主轴方向，以免冲突

设置主轴线所有行的子盒子位置

设置子盒子所有宽度总和不超过父代，会自动弹性均分

justify-content：flex-start 左对齐

justify-content：flex-end 右对齐

justify-content：center 居中

justify-content：space-between 两端对齐

justify-content：space-around 每个子元素间隔等分，两端留白

元素交叉轴方向排布（align-items）

视频43分开始

弹性 父盒子 交叉轴位置排列设置（上下直接在那个位置的同行显示）

align-items：strech 默认值没有高度会填满整个容器高度

align-items：flex-start 交叉轴的起点对齐（上面）

align-items：flex-end 交叉轴的终点对齐（底边）

align-items：center 交叉轴的中点对齐（子项中线中间）

align-items：baseline 第一行文字的基线对齐（很少用太丑）

多排元素排布（align-content）

视频1h2分开始

弹性子项目居中还是分散的样式

必须有多行属性才能生效

留白就最后两个跟默认值

align-content——弹性盒模型的子元素设置了换行样式，多行的子元素可以单独设分布

align-conten：stretch；默认值。高度会分成几等分（子盒子数量）

align-content：center；所有子盒子会居中对齐

align-content：flex-start；元素位于容器的开头

align-content：flex-end；元素位于容器的结尾

align-content：space-between；各行在弹性盒容器 平均分布

align-content：space-around；各行在弹性盒容器平均分布，两端保留子元素与子元素之间间距大小的一半

主轴方向跟换行的复合写法（flex-flow）

百度吧我说不上来 - -.

注意

条件	属性（是否有效果）
子项——flex容器	align-items align-content
单——不指定高度	是否
行——固定高度	是否（但是有设置换行时，有效果）
多——不指定高度	是否
行——固定高度	是是

结论：从上表可知，对于align-items和align-content的区别，我们只需要记住以下两点，

1.align-items属性是针对单独的每一个flex子项起作用，它的基本单位是每一个子项，在所有情况下都有效果（当然要看具体的属性值）。
2.align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行，只在两种情况下有效果：①子项多行且flex容器高度固定 ②子项单行，flex容器高度固定且设置了flex-wrap:wrap;
这里有个flex布局的小教程，感兴趣的同学可以玩玩：http://flexboxfroggy.com/

注：这里的高度固定的意思实际上是让flex容器在交叉轴上有多余的空间。

子元素的大小属性

视频1h11分开始

弹性增长因子（flex-grow）

flex-grow：2；扩大分成两份

分配的是弹性容器具有剩余空间（宽度）是如何分配给子盒子

把剩余的空间均分成几份，再分配到几份的子盒子

弹性缩小因子（flex-shrink）

flex-shrink：2；缩小成2份

（子盒子的宽总和—父盒子的宽）除以多少份——数值就是缩小的一份数值

弹性大小因子复合写法（flex-basis）

flex： 1 1 auto

flex： 0 0 auto

推荐这个，加快浏览器网页速度

增大-缩小

子元素的排布顺序（order）

视频1h28分开始

设置子盒子的排列顺序按照坐标系的方向，数值越大越靠近

横向，纵向都能设置，看坐标系的方向

order：1；

有个小技术，两个子盒子互换位置，悬停加上这两个属性不就很轻松，不用设置平移距离定位

单个子元素在纵轴的顺序（align-self）

align-self属性:

auto: 如果align-self的值为auto，则其计算值为元素的父元素的align-items值，如果其没有父元素，则计算值为stretch。

flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界——左上角留白

flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界——左下角留白

center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)——中间

baseline :如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐——右上角留白

stretch: 如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制——右侧整列

19.阿里图标，iframe，语义化标签

图片是像素格显现

文字或图标是矢量显现，用点连成线，成像。显示效果最好，内存最小

阿里图标（iconfont）

视频20分开始

https://www.iconfont.cn/ 阿里官网

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/346070