HTML+css学习 学习笔记，由浅入深

​ 猿猿的前端之路就此开始，下面小白白们跟着猿猿一起学习前端基础h5+css叭！
​ 以下是猿猿的学习笔记，内容包含h5+css菜鸟教程几乎所有知识和pink老师知识，外加个人理解简化

HTML5知识点总结

截图工具 Snipaste，是一款强大的贴图软件，猿猿们可以自行下载哦

alt取色，shift切换取色模式

文章目录

• HTML5知识点总结
• • 一、网页（网站、网页）
  • • • **什么是HTML:** 是一种用来描述网页的一种语言
  • 二、浏览器
  • 三、Web标准（使代码更规范更简介更通用）
  • • **HTML语法规范**：
    • **结构标签的总结：**
    • **lang语言：**"en"定义语言为英文，"zh-CN"定义语言为中文
    • 路径
    • • • • 1目录文件夹和根目录
          • 2相对路径和绝对路径
    • 特殊字符（空格  +; 小于号<+; 大于号>+;）
  • **常用标签**：
  • • • **1.语义标签**：标题标签、段落和换行、不换行标签
      • 2.文本格式化标签（粗体倾斜、删除线、下划线）
      • 4.图像标签
      • • • 图像标签的属性：
          • alt：图片显示不出来时用 alt文字替换的方法
          • title：鼠标放在图片上能显示文字
          • width，heigth 设置图片的宽高，只设置一个时另一个会等比例自己缩放
      • 复制图片地址导入自己的网页：
      • 5.超链接标签（重点）
      • • 1 语法格式
        • 2 链接分类
        • • 1.外部链接 ：
          • 2.内部链接：
          • 3.空链接：
          • 4.下载链接：
          • 5.网页元素超链接：
          • 6.锚点链接： 两部曲
      • 6.注释标签：
      • 7.表格标签
      • • 1.表格的基本语法：
        • 2.表头单元格标签：（用th表示，table hand的缩写） ，效果居中加粗显示
        • 3.表格的属性：
        • • align对齐方式；border边框，1有边框，默认为” “ 无边框；cellpadding像素距离边框的距离；cellspacing单元格和单元格之间的空隙，默认2像素；width表格的宽度大小。
        • 4.表格结构标签：更加清晰简洁
        • image-20210111112039375
        • 5.合并单元格（rowspan 跨行；colspan跨列）：
        • • 合并单元格三部曲：
    • 8.列表标签（占一行）
    • • • 1.无序列表：（ul li）（重点）
        • 2.有序列表：（ol li理解）
        • 3.自定义列表：（dl dt dd重点）
        • 4.列表总结：
      • 9.表单标签
      • • 1.表单的组成：表单控制、表单域、提示信息
        • 2.表单域：（了解）
        • 3.表单控件（表单元素input、select、texarea）
        • • 1.imput表单元素：
          • 2.select下拉表单元素：
          • 3.textarea文本域表格元素：（可以输入很多文本区域）
        • 4.type属性：
        • • 1.radio多选一，checkbox复选框多选（他们名字必须都相同）。
          • 2.添加value后，文本框中直接出现添加的value值；
          • 3.给他们设置checked后，打开后默认已经被勾选；
          • 4.maxlength="6" 规定只能输入六个字符；
          • 5.submit提交 加**value修改自定义字体内容**，点了之后可以把表单域中的表单元素送给后台服务器。
          • 6.reset重置 加**value修改自定义字体内容**，点了之后表单域中所有的东西恢复原状
          • 7.button普通按钮 后期搭配js使用
          • 8.file文件域 需要上传文件时添加此功能
          • 9.placeholder：用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖
      • 10.lable标签
• css知识点总结
• • css单位详讲
  • • 1.1 相对长度 单位
    • • 1.1.1 字体的 相对长度
      • 1.1.3 百分比 单位 (%)
      • 1.2 绝对长度单位
    • 时间单位 (s , ms)
    • • 时间单位
  • 目录：
  • • 
    • 1.为什么要用css：
    • 2.css语法规范：
    • 3.css代码风格：样式格式书写、样式大小写风格、样式空格风格
    • • • 1.样式格式书写：（提倡用第二种）
        • 2.样式大小写书写：
        • 3.样式空格风格：
    • 4.css基础选择器
    • • 1.作用：
      • 2.选择器的分类：
      • • 1.标签选择器：
        • 2.类选择器：
        • • 语法：
          • 多类名：
        • 3.id选择器：
        • • 语法：
          • 
          • id选择器和类选择器的区别：
        • 4.通配符选择器：
        • • 语法：
        • 5.基础选择器的总结：
    • 5.CSS字体属性：
    • • • 1.字体系列：
        • 2.字体大小：
        • 3.字体粗细：
        • 4.文字样式：
        • 5.字体符合属性：
    • **简写方式：**（倾斜方式、字体粗细、字体大小/字体行距、字体类型）
    • • • 6.字体属性总结：
    • 6.css文本属性：
    • • • 1.文本颜色：
        • 
        • 2.文本对齐：(test-align:)
        • 3.装饰文本：（test-decoration ）
        • 4.文本缩进：（test-indent，常用于段落的首行缩进）单位px，em
        • 5.行间距、段落行间距：（line-height:）单位像素：px
        • 6.文本属性总结：
    • 6.css引入方式：
    • • 1.css样式表
      • • 1.内部样式表：
        • 2.行内样式表：（结构简单的时候使用，适用比较少）
        • 3.外部样式表：（用到比较多）
        • 4.引入方式总结：
        • 5.综合案例：（https://www.bilibili.com/video/BV14J4114768?p=90）
        • 6.调试工具：鼠标右键打开检查或F12
    • 7.Emmt语法：
    • • 1.快速生成HIML结构语法：
      • 2.快速生成css样式语法：
      • 3.快速格式化规范代码：
    • 8.复合选择器：（后代选择器、子选择器、并集选择器、伪类选择器）
    • • 1.后代选择器：（重要）
      • • 语法：
      • 2.子选择器：（亲儿子选择器）
      • • 语法：如：
      • 3.并集选择器：（重要）
      • • 语法：
      • 4.伪类选择器：
      • • 1.链接伪类的基本属性
        • 2.focus伪类选择器：
        • • 语法：
      • 5.复合选择器总结：
    • 9.元素显示模式：
    • • 1.块元素：
      • • • 常见的块元素：
      • 2.行内元素：
      • 3.行内块元素：
      • • • 特点：具有行内元素的特点（不会分段），块级元素特点（宽高内外边距行高可控）
      • 4.元素显示模式总结
      • 5.元素显示模式转换
      • • 行内元素转换为块级元素：display： block
        • 块级元素转换为行内元素：display： inline
        • 转换为行内块元素：display： inline-block
    • 10.css背景：
    • • • background：
      • 1.背景颜色 background-color：颜色值；
    • 11.flex布局：
    • • • 转换为flex布局： display： flex；
        • • 注意：
        • 布局原理：
        • 常见的父项属性：
        • • flex-direction：设置主轴方向
          • justify-content：设置主轴上的子元素排列方式
          • flex-wrap：设置子元素是否换行
          • align-content：设置侧轴上的子元素排列方式（多行）
          • align-items：设置侧轴上的子元素排列方式（单行）
          • flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
      • 六大属性：
    • 11.grid布局：
    • • • 开启布局：给外层元素添加：
      • 设置每列的宽度：
      • • • 固定宽度：
          • grid-template-colomn：100px 100px 100px
          • 浮动宽度：
          • grid-template-colomn：1fr 2fr 1fr fr代表着每行的比例，如1fr=1/总数
      • 设置间距：
      • • • column-gap：列间距
          • row-gap：行间距
          • gap：行间距和列间距
      • 排列元素：template（模板）
      • 对齐：
      • • 垂直方向对齐子元素：（居中、靠下）
        • • align-items：center，end
        • 水平方向对齐子元素：（居中、靠右、两端）
        • • justify-items：center、end、space-between
        • 当行轨道和列轨道尺寸小于grid容器时：
        • 垂直方向上：align-content（居中、靠下）
        • • align-content：center、end
        • 水平方向上：justify-content（居中、靠右、两端）
        • • justify-content：center、end、space-between
    • 12.position的属性：
    • • • • 不用转换为块状：
        • 固定定位：
        • • 语法：
    • 13.动画（-）（transform）
    • • • （1）过度（执行这个动作的时间）：（transtation）
        • （2）元素的转换点：
        • • 语法：（原点） （起源）
          • 注意：
      • 1.移动（treanslate）
      • • 1.语法：
        • 2.注意：
      • 2.旋转：
      • • • 1.语法：
          • 2.注意：
          • 3.旋转案例
      • 3.缩放：
      • • • 1.语法：transform：scale（x，y）；
          • 2.div：hover
          • 3.优点：
        • 4.连写：
    • 13.动画（二）：
    • • 1.步骤：
      • • 1.用@keyframes定义动画（类似于定义类选择器）：
        • • 语法：
        • 2.使用动画：
        • • 语法：
          • 
        • 3.动画属性
        • • ease种类：
          • 简写：
          • 不包括：
    • 13.动画（三）：3D转换
    • • 知识点：
      • • 1.3D移动：transform：translate3d（x，y，z）
        • 2.3D旋转：transform：rotate3d（x，y，z，deg）沿着自定义轴旋转deg角度
        • • 旋转方向：（左手法则）
        • 3.透视：perspective
        • • 定义：
          • 注意：写在父级元素中
        • 4.3D呈现：transform-style
    • 13.动画（四）：轮播图
    • • **1.z - index ：**
      • • • 代码：
    • 14.网页布局：
    • • 1.盒子定位
    • image-20210121104552836
    • • 2.显示与隐藏
      • • 1.display属性：
        • • display：none；
          • display：block；
        • 2.visibility属性：
        • 3.overflow属性：
      • 4.nth-child( ) 与 nth-of-type( )的定义与用法
      • 5.实现文本居中
      • 6.box-sizing
      • 7.margin和paddding
    • 15.常用标签
• 考核重点：
• • • 一、点位：四种
    • 二、css单位的种类和区别 em字节 px像素
    • 三、颜色的表示方法
    • 四、浮动float(none、left、right)
    • • 清除浮动的方法：
  • CSS3的filter(滤镜)属性详解

一、网页（网站、网页）

网页构成的基本元素：图片、链接、文字、声音、视频，通常是**.htm和.html**为后缀命名的文件，因此称为HTML文件

什么是HTML: 是一种用来描述网页的一种语言

二、浏览器

作用就是读取html或htm文件（即HTML文档），并以网页的形式读取他们。

三、Web标准（使代码更规范更简介更通用）

三大构成：结构、表现、行为，结构更重要

HTML语法规范：

1.1尖括号、双标签、单标签（特殊,

​ 包含和并列关系代码 ： 结构标签代码

​

**结构标签：**html,head、/head，body

结构标签的总结：

根标签、头部、身体三大部分

写代码是一件快乐的事

lang语言："en"定义语言为英文，"zh-CN"定义语言为中文

声名标签，不属于html里面的标签

字符集，代表了各种字符，防止乱码

路径

1目录文件夹和根目录

2相对路径和绝对路径

相对路径：

绝对路径：文件所在电脑的具体位置

特殊字符（空格  +; 小于号<+; 大于号>+;）

常用标签：

1.语义标签：标题标签、段落和换行、不换行标签

标题标签：

不能像正常一样，按空格就能分段换行，需要用段落标签来操作。

段落标签：

强制换行：

强制不换行：

2.文本格式化标签（粗体倾斜、删除线、下划线）

3.独占一行

div没有语义的标签，span是一个小盒子，是一个大盒子，用来装东西。可装图片或文字

4.图像标签

图像标签的属性：

图片需要与网页文件放在同一个文件夹中

alt：图片显示不出来时用 alt文字替换的方法

title：鼠标放在图片上能显示文字

width，heigth 设置图片的宽高，只设置一个时另一个会等比例自己缩放

复制图片地址导入自己的网页：

也可以复制网页中的图片地址，直接导入自己的网页中

图像标签注意事项：

5.超链接标签（重点）

1 语法格式

herf必须要写的属性（写在a后面）；两个a中间可加图片或文本

target（元素被链接到的目标元素）以什么方式打开：_self（默认值）当前的窗口打开，_blank新窗口中打开

**:target{display:block;} 😗*target 是“伪类”后边的是样式设置

2 链接分类

1.外部链接 ：

2.内部链接：

3.空链接：

javascript:void(0) javascript: ；

4.下载链接：

5.网页元素超链接：

6.锚点链接： 两部曲

6.注释标签：

7.表格标签

表格的主要作用：清楚的展示数据

1.表格的基本语法：

2.表头单元格标签：（用th表示，table hand的缩写） ，效果居中加粗显示

三行三列：

3.表格的属性：

align对齐方式；border边框，1有边框，默认为” “ 无边框；cellpadding像素距离边框的距离；cellspacing单元格和单元格之间的空隙，默认2像素；width表格的宽度大小。

border-radius：（百分号或数字）圆角边框

border:10px solid #a1a1a1; 边框粗细和颜色

padding盒子内边距，会影响盒子实际大小，但不存在撑开盒子的情况

padding：7px 13px 0px；内边距上7，左右13，下0

4.表格结构标签：更加清晰简洁

5.合并单元格（rowspan 跨行；colspan跨列）：

目标单元格：代码写在需要合并的第一个单元格括号内

合并单元格三部曲：

​

8.列表标签（占一行）

1.无序列表：（ul li）（重点）

ul里面有li子，嵌套关系 。ul只能放li，li里面可以放很多东西

2.有序列表：（ol li理解）

ol里面有li子，嵌套关系 。ul只能放li，li里面可以放很多东西

3.自定义列表：（dl dt dd重点）

dl里面有dt和dd（dt和dd并列关系，dt大哥在上面）。

4.列表总结：

9.表单标签

1.表单的组成：表单控制、表单域、提示信息

2.表单域：（了解）

表单域就是form：

3.表单控件（表单元素input、select、texarea）

分为：

1.imput表单元素：

2.select下拉表单元素：

3.textarea文本域表格元素：（可以输入很多文本区域）

clls每行最多的字数，rows显示的行数

4.type属性：

1.radio多选一，checkbox复选框多选（他们名字必须都相同）。

2.添加value后，文本框中直接出现添加的value值；

3.给他们设置checked后，打开后默认已经被勾选；

4.maxlength=“6” 规定只能输入六个字符；

5.submit提交 加value修改自定义字体内容，点了之后可以把表单域中的表单元素送给后台服务器。

6.reset重置 加value修改自定义字体内容，点了之后表单域中所有的东西恢复原状

7.button普通按钮 后期搭配js使用

8.file文件域 需要上传文件时添加此功能

9.placeholder：用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖

 
用户名： 
密码： 
性别：男  女 人妖 
爱好：吃饭   睡觉 打豆豆        
上传文件：

10.lable标签

作用：点击名称也能填写内容空白块

css知识点总结

css单位详讲

(1条消息) 【CSS 单位 (详细介绍)】_Hey_Coder-CSDN博客_css单位

1.1 相对长度 单位

1.1.1 字体的 相对长度

⑴ em : (相对于 当前元素本身的 )字体大小 font-size 的倍数
⑵ rem : (根元素 html 标签的) 字体大小 font-size 的倍数
⑶ ex : x 的高度 (随 font-family , font-size 改变)
⑷ ch : 数字 0 的宽度 (随 font-family , font-size 改变)
1.1.2 视窗的 相对长度
⑴ vh : 视窗高度 的 1% (百分之一)
⑵ vw :视窗宽度 的 1%(百分之一)
⑶ vmin : vw 和 vh 中的 较小值 (宽/高较小值的 百分之一)
⑶ vmax : vw 和 vh 中的 较大值 (宽/高较大值的 百分之一)

♣ 视窗单位的 计算方法

1.1.3 百分比 单位 (%)

⑴ 定位 中的百分比
⑵ 盒模型 中的百分比
⑶ 文本 中的百分比
⑷ 边框 和 圆角 中的百分比
⑸ 背景 属性中的百分比
⑹ 变换 中的百分比
♣ 百分比值的 继承

1.2 绝对长度单位

⑴ px : 像素
⑵ cm : 厘米 ( 1/2.54 in , 38px)
⑶ mm : 毫米 (1/25.4 in, 3.8px)
⑷ in : 英寸 ( 1in = 96px ,2.54cm)
⑸ pc : 派卡 ( 1/6 in ,12pt, 16px)
⑹ pt : 点 (显示器上 一个个的点,1/72 in,1.3px)
♣ CSS 绝对单位的 换算关系

• 1in = 96px
• 1in = 2.54cm
• 1in = 25.4mm
• 1in = 72pt
• 1in = 6pc
  • 1pc = 12pt

♣ 长度单位的 浏览器支持

• 长度单位的 浏览器支持
• 

2. 时间单位 (s , ms)

   1. 时间单位

      CSS 中 两个常见的 时间单位
      ① 秒（s）
      ② 毫秒（ms）
      换算: 1s = 1000ms。
      搭配属性: 常用于 CSS 中 transition-duration、transition-delay、animation-duration 和 animation-delay 属性中。

   2.频率单位 (Hz , kHz)

   1. 频率值的 使用位置: 在 听（或说）级联样式表中 使用.
   2. 频率的 两个单位值
   • ① 赫兹（Hz）
   • ② 千赫（kHz）
   • 频率的作用
   • 可以被用来 改变一个 语音阅读文本的 音调。
     • 低频率是 低音
     • 高频率是 高音

3. 角度单位 (deg,rad,grads,turn)

   1. ⑴ 角度: deg
      角度最常用的 用法
      ① 设置 旋转角度:
      在CSS 中 给 旋转元素 设置一个旋转角度（度数），依赖于 CSS 的 transform 属性中的rotate()，skew() 函数等
      ② 渐变中的角度: linear-gradient(260deg,red,blue)
      0deg = to top
      角度缺省的默认值: to bottom = 180deg
      ⑵ 百分度（grads）：
      一个分度，百分度 相对于 1/400 个整圆
      跟角度单位一样，支持负值
      负值表示逆时针方向，100grad = 90deg
      ⑶ 弧度（rad）：

      在 Canvas中 用到弧度
      1rad = 180/π °（大约为 57.3deg）
      1.570796326794897rad = 100grad = 90deg
      rad = (π / 180) * deg
      deg = (rad * 180) / π
      ⑷ 圈数（turn）：1turn = 360deg

目录：

1.为什么要用css：

HTML（结构）样式简单，只能写出元素，调试样式美化界面比较复杂。这时候就可以用css（样式）来美化网页，让布局更简单，更漂亮。

总结HTML和css：

2.css语法规范：

​

3.css代码风格：样式格式书写、样式大小写风格、样式空格风格

1.样式格式书写：（提倡用第二种）

2.样式大小写书写：

3.样式空格风格：

4.css基础选择器

1.作用：

2.选择器的分类：

1.标签选择器：

2.类选择器：

差异化选择类标签，单独选择一个或几个标签。样式点定义，结构类调用，一个或多个，开发最常用

命名时遵循类的命名规范，可多次使用。

语法：

多类名：

多类名的使用方法和好处：用空格把两个类名隔开；可以统一修改多个盒子

多类名的使用场景：

3.id选择器：

样式#定义，结构id调用，只能调用一次，别人切勿使用 .选择所有id内容

语法：

id选择器和类选择器的区别：

4.通配符选择器：

用*定义，表示网页中所有的元素。

语法：

开头选择器：pulse1 pulse2 pulse3 pulse4

5.基础选择器的总结：

5.CSS字体属性：

1.字体系列：

2.字体大小：

​

3.字体粗细：

4.文字样式：

5.字体符合属性：

正常字体粗细400，字体加粗用纯数字，字体大小尺寸加px。

简写方式：（倾斜方式、字体粗细、字体大小/字体行距、字体类型）

不能更换顺序，size和family不能省略

6.字体属性总结：

6.css文本属性：

1.文本颜色：

2.文本对齐：(test-align:)

水平：text-aline： 垂直：text-height

3.装饰文本：（test-decoration ）

4.文本缩进：（test-indent，常用于段落的首行缩进）单位px，em

px：缩进单位 em：缩进相对单位，2em表示缩进两个字的大小

5.行间距、段落行间距：（line-height:）单位像素：px

6.文本属性总结：

6.css引入方式：

1.css样式表

1.内部样式表：

css放到html内部，单独写到style内部 。 div

2.行内样式表：（结构简单的时候使用，适用比较少）

style属性开头=” ； “，内容写到引号中间，不同内容用分号隔开。

3.外部样式表：（用到比较多）

1.新建一个.css文件;

2.在html中用link引用.css文件：

rel href

4.引入方式总结：

切换自动换行：alt+z

5.综合案例：（https://www.bilibili.com/video/BV14J4114768?p=90）

字体大小/字体行距、字体类型；标题不加粗，标题居中；hr画横线。

6.调试工具：鼠标右键打开检查或F12

7.Emmt语法：

1.快速生成HIML结构语法：

点击tab出来

从demo1到demo5

带文本的多行输出；div{$}*5,文本内容从1到5；

2.快速生成css样式语法：

单词的首字母，快捷键

3.快速格式化规范代码：

右键：格式化文档或shift+alt+f 或安装插件

8.复合选择器：（后代选择器、子选择器、并集选择器、伪类选择器）

1.后代选择器：（重要）

语法：

注意：

2.子选择器：（亲儿子选择器）

只能选择作为某元素的最近一级子元素，只能选择儿子不能选择孙子

语法：如：

3.并集选择器：（重要）

可以选择多组标签，同时为他们定义相同的样式，实现集体声明。

语法：

并集选择器中间用逗号隔开，逗号是”和“的意思

4.伪类选择器：

用于给某些特殊的选择器中添加特殊效果，特点：用冒号”：“表示

1.链接伪类的基本属性

按顺序书写

a:link 未访问过的链接 ,a:link 把没有点击的（访问过的）链接选出来

a:visited 选择点击过的访问链接

a:hover 选择鼠标经过的

a:active 鼠标按下去没有松开时的属性

注意事项：顺序 love hate（你个伪君子，先喜欢在讨厌）

2.focus伪类选择器：

：focus 用于选取获得焦点（鼠标光标）的表单元素

主要针对表单来说，一般是 imput表单才能获取，注意没有空格

语法：

5.复合选择器总结：

9.元素显示模式：

1.块元素：

只占一行的，是个容器，宽高都可以设置

常见的块元素：

2.行内元素：

不会分段，无法设置宽高，行内只能容纳纯文本或其他行内元素。

特殊：链接里不能放链接；a里面可以放块级元素但给a转换成块级模式最安全。

3.行内块元素：

img、input、td，同时具有块元素和行内元素的特点

特点：具有行内元素的特点（不会分段），块级元素特点（宽高内外边距行高可控）

4.元素显示模式总结

5.元素显示模式转换

行内元素转换为块级元素：display： block

块级元素转换为行内元素：display： inline

转换为行内块元素：display： inline-block

10.css背景：

background：

1.背景颜色 background-color：颜色值；

默认值：transparnt（透明）

11.flex布局：

一行代码使布局平均分配，任何一种元素都可以改成flex布局

转换为flex布局： display： flex；

注意：

布局原理：

常见的父项属性：

flex-direction：设置主轴方向

justify-content：设置主轴上的子元素排列方式

注意：使用前先确定主轴方向是哪个。

flex-wrap：设置子元素是否换行

align-content：设置侧轴上的子元素排列方式（多行）

**注意：**适用于子项出现换行（flex-wrap：wrap）情况（多行，在单行是没有效果的）

align-items：设置侧轴上的子元素排列方式（单行）

flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

六大属性：

①order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

② flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

③ flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

④ flex-basis定义项目占据的主轴空间。(如果主轴为水平，则设置这个属性，相当于设置项目的宽度。 原width将会失效。)

⑤ flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

⑥ align-self:定义单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性。

属性值：与align-items相同，默认值为auto，表示继承父容器的align-items属性值。

11.grid布局：

开启布局：给外层元素添加：

设置每列的宽度：

固定宽度：

grid-template-colomn：100px 100px 100px

浮动宽度：

grid-template-colomn：1fr 2fr 1fr fr代表着每行的比例，如1fr=1/总数

设置间距：

列间距：

column-gap：列间距

row-gap：行间距

gap：行间距和列间距

排列元素：template（模板）

grid-template-areas

对齐：

垂直方向对齐子元素：（居中、靠下）

align-items：center，end

水平方向对齐子元素：（居中、靠右、两端）

justify-items：center、end、space-between

当行轨道和列轨道尺寸小于grid容器时：

垂直方向上：align-content（居中、靠下）

align-content：center、end

水平方向上：justify-content（居中、靠右、两端）

justify-content：center、end、space-between

12.position的属性：

position有以下属性：static、inherit、fixed、absolute、relative
前三个好理解好区分：
static：是默认状态，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
nherit：从父元素继承 position 属性的值。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。（即滚动浏览器的时候，元素永远固定显示在窗口可视区的某个位置）。

比较常用而且会引起初学者迷惑的是absolute和relative，它俩有什么分别呢？

一、先来看看W3C给的概念（定位是不占位置的）子绝父相

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

relative：生成相对定位的元素，相对于其正常位置进行定位。

两者最核心的区别在于：absolute不受父元素里的其他元素影响，而relative会受到父元素里的其他元素影响。

绝对定位：position: absolute

绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。

绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。

相对定位：position: relative

相对定位：相对位置的坐标参考系是以自己上一次的位置（x，y）作为原点（0，0）。

注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

不用转换为块状：

加入绝对定位、相对定位浮动的行内元素

固定定位：

语法：

13.动画（-）（transform）

（1）过度（执行这个动作的时间）：（transtation）

过度写到本身上，谁做动画给谁加 transform：all 0.3s；

（2）元素的转换点：

语法：（原点） （起源）

默认中间：50% 50% 如设置左下角：

注意：

1.移动（treanslate）

移动盒子位置三种方法：定位、盒子外边距、2d转换

水平移动100px，垂直移动100px

1.语法：

2.注意：

参数可以用百分号，如50% 移动自身宽度的一半

水平居中垂直居中绝对定位 ：

top：50% left50%

transform：translate（-50%，-50%）/margin-top：-盒子的一半像素 ；margin-left：-盒子的一半像素

2.旋转：

1.语法：

2.注意：

3.旋转案例

3.缩放：

1.语法：transform：scale（x，y）；

不跟单位，数字就是倍的意思，x=2就是宽变为两倍

等比例缩放 语法：transform：scale（z）；括号里面只有一个数字

2.div：hover

3.优点：

不会影响其他盒子，可以设置中心点

4.连写：

注意：treanslate位移写在最前面

13.动画（二）：

1.步骤：

先定义动画，在使用（调用动画）

1.用@keyframes定义动画（类似于定义类选择器）：

语法：

0% 和 100% 可替换为 from 和to

百分比*时间=每个状态所用的时间

2.使用动画：

语法：

animation：卡通片绘制 duration：持续时间

3.动画属性

ease种类：

简写：

不包括：

linear（匀速），前两个要写上

动画的速度曲线：

opacity（透明度）

animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1)（透视轮播图）

cubic-bezier即为贝兹bai曲线中du的绘制方法。

图上有四zhi点，P0-3，其中P0、P3是默认的dao点，对应了zhuan[0,0], [1,1]。而剩下的P1、P2两点则是shu我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。
预留的几个特效：
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

13.动画（三）：3D转换

透视写在父级中

知识点：

1.3D移动：transform：translate3d（x，y，z）

2.3D旋转：transform：rotate3d（x，y，z，deg）沿着自定义轴旋转deg角度

旋转方向：（左手法则）

左手法则：大拇指为x、y、z正方向，四指指的方向为正直（y轴正方向朝下）

xyz值要么是0，要么是1

3.透视：perspective

实现近大远小特点：改变perspective或z的大小（两者同时存在）

定义：

就是视距，透视越小，盒子越大,产生3d效果，在二维平面产生近大远小的特点

注意：写在父级元素中

4.3D呈现：transform-style

13.动画（四）：轮播图

1.z - index ：

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

*： z - index *（位置：绝对、位置：相对 或位置：固定]

代码：

自动




渐变轮播图
如何实现渐变效果动画: 主要就是改变图片的透明度来实现.代码如下
.container ul li {
position: absolute;
opacity: 0; /* 如果不改变默认透明度,那么后续的执行动画需要从最后一张开始,采用倒序 */
​
/* 动画设置 */
animation-name: fade;
animation-duration: 20s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-iteration-count: infinite;
}@keyframes fade {
0% {
opacity: 0;
z-index: 0;
}
25% {
opacity: 1;
z-index: 1;
}
50% {
opacity: 0;
z-index: 0;
}
}
​
.container ul li:nth-child(1) {
animation-delay: 0s;
}
.container ul li:nth-child(2) {
animation-delay: 5s;
}
.container ul li:nth-child(3) {
animation-delay: 10s;
}
.container ul li:nth-child(4) {
animation-delay: 15s;
}

14.网页布局：

阴影：box-shadow

box-shadow: -20px 10px 10px 100px #888888;

1.盒子定位

2.显示与隐藏

display（显示隐藏）、visibillity（显示隐藏）、overflow（溢出显示隐藏）

1.display属性：

display：none；

隐藏对象，不在占有位置

display：block；

转换为块状元素或显示元素

2.visibility属性：

visibility：visible； 元素可见

visibility：hidden； 元素隐藏，继续占着位置

3.overflow属性：

overflow：visible（默认）溢出的部分直接显示出来

overflow：hidden； 溢出部分隐藏（定位的盒子慎用）

overflow：scroll； 溢出时显示滚动条，不溢出时也显示滚动条

overflow：auto； 只有溢出时才显示滚动条

溢出部分显示省略号：

实例：

4.nth-child( ) 与 nth-of-type( )的定义与用法

1.nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式，比如：nth-child(odd) 奇数 ,nth-child(even) 偶数。

2.nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素，后者是查找同类型元素中某个绝对位置的元素。

5.实现文本居中

利用Flex布局实现、利用属性 line-height和text-align、利用position 定位来实现、利用 vertical-align 来实现

6.box-sizing

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

译者注: border-box不包含margin

7.margin和paddding

adding(margin):10px 20px 30px; 10px是上内（外）边距；20px是左右内（外）边距；30px是下内（外）边距；
padding(margin):10px 20px 30px 40px; 10px是上内（外）边距；20px是右内（外）边距；30px是下内（外）边距；40px是左内边距；

https://blz.nosdn.127.net/1/tm/overwatch/events/2021KanezakaChallenge/KanezakaChallenge-HomeBanner-Desktop.jpeg

15.常用标签

定义文档类型

定义超文本链接
定义一个点击按钮

定义文档中的节 定义了HTML文档的表单

to

定义 HTML 标题 定义斜体字 定义图像 定义输入控件

• 定义列表的项目 定义文档与外部资源的关系 定义关于 HTML 文档的元信息。
  1. 定义有序列表。

     定义段落。 标签为媒介元素（比如 和 ）定义媒介资源。 定义文档中的节。

考核重点：

一、点位：四种

普通定位top bottom left right 相对定位relative 绝对定位absolute

静态定位static

固定定位 fixed

粘性定位sticky

二、css单位的种类和区别 em字节 px像素

三、颜色的表示方法

1.RGB（RGBA）

2.直接用英文

3.十六进制

4.hsl（色相，饱和度，亮度）

5.直接设置透明度 transparent

四、浮动float(none、left、right)

清除浮动的方法：

1.在父元素结尾处添加空的div标签，clear:both。
优点：简单，代码少，浏览器支持好，不容易出问题；

缺点：不少初学者不知道其原理，如果页面浮动布局多，就要增加很多空div，让人感觉很不爽;这种方法不推荐使用，这是以前的一种使用方式。

2.给父元素添加before，after为元素。
优点：浏览器支持好，在ie8以上的ie浏览器以及其他非ie浏览器都支持
缺点：代码多

3.给父元素添加overflow:hidden属性。

必须定义width或者zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
优点：代码少，简单，浏览器支持。
缺点：不能配合position使用，因为超出部分被隐藏

4.父元素一起浮动，所有代码浮动变成一个整体，但是会产生新的问题，只做了解不推荐使用。

5.父级div定义display:table ，只做了解不推荐使用。

1. 在浮动层下，设置空DIV，代码如下：

复制代码

说明：
clear: both;可以让元素不受到浮动层影响，排到浮动层的底下，
而父级可以包住最底下这个空DIV，这样看起来，它似乎也就包住那个浮动层了，
其实是障眼法哈～

缺点：IE6下会多出1像素来，并且设置了无语义的空DIV；

---

2. 在父级设置：overflow: hidden;

复制代码

说明：overflow: hidden; 用它是为了提高父级的层级，层级提高了，自然能包住子级浮动元素了。

缺点：要是父级里面有什么元素居然飘到父级以外的地方，那就悲剧了，例如很多JS的提示层效果，

就不能用 overflow: hidden;

---

3. 在父级设置：float

复制代码

说明：父级包不住浮动层，因为层级不够，那父级也设置float好喽

缺点：父级如果也有父级，也要设置浮动，那用这种方法，一路浮动到body那儿才算完事儿～～呃。。此方法本身就很滑稽

---

4. 在父级设置：display: inline-block;

复制代码

说明：inline-block; 是一个不兼容的属性，但用在这里只是为了提高父级层级，
如此一来，可以完全忽略它的不兼容性哈～

缺点：设置不了元素居中：margin-left: auto; margin-right: auto;
你可以在不需要居中的元素上使用这方法哈～

---

5. 父级如果是绝对定位：position: absolute;

复制代码

说明：要说层级，那绝对定位必定是老大，在绝对定位眼中，小小的浮动也居然敢称层级？？

缺点：position: absolute;会影响布局，它是相对父级的块元素为参照物进行定位，
完全不按文档流的方式走，呵呵，所以如果你要是在绝对定位的元素里设置浮动，那就尽情设置吧，

不必理会任何浮动神马的，因为在绝对定位下，浮动啥的，真的是浮云了～

---

6. 给浮动层下设置：
   

复制代码

说明：短小精炼的一行代码，很有效哈，对此代码不了解？
看看这里吧：
http://www.blueidea.com/tech/web/2007/4576.asp

---

7. 给父级加上这行吧：
   .clear:after { content: ‘\20’; clear: both; display: block; }

复制代码

说明：:after 是一个很好用的属性，有了它，可以往任何元素里插入字符串、空格啦，’.'之类的，
但可惜，IE6，IE7不认识:after，不过，又有什么关系呢？
反正IE6\IE7的父级能包住浮动层，所以不必管它们喽～
忘了解释了，先给浮动层底下插入一个空格（content: ‘\20’;），再把这个空格转成块元素，并且清除浮动层的影响，让父级包住这个空格，也是障眼法哈～

五、锚点链接targe在何处打开链接

文档流、定位连用

相对定位：相对位置的坐标参考系是以自己上一次的位置（x，y）作为原点（0，0）。

绝对定位， 即完全脱离文档流， 相对于position属性非static值的最近父级元素进行偏移。

固定定位， 即完全脱离文档流， 相对于视区进行偏移。

CSS3的filter(滤镜)属性详解

参考链接：

https://blog.csdn.net/fantasy_geek/article/details/104936483?ops_request_misc=&request_id=&biz_id=102&utm_term=css%E7%9A%84brightness&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-1-104936483.pc_search_result_no_baidu_js

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！