表格table

• 涉及到的标签：table、tr、td、th、caption、thead、tbody、tfoot、col、colgroup

• table 表示声明一个表格

  • table里有两个属性很好用:cellpadding和cellspacing,用来做表格内文字布局的一些效果(css也可以实现,但是非常麻烦! )

• tr 表格中的一行

• td 一行中的单元格

• tbody ： 表格的身体， 也就是具体表格中的内容的部分。 可以放在table 中的任何位置（不可以放在 tfoot 、 thead 标签内部 ）

  系统会默认生成一个tbody在table和tr中间,也就是table>tbody>tr>

• thead : 表格的头部信息 可以放在table 中的任何位置（不可以放在 tfoot 、 tbody 标签内部 ）

• th ： 表头的单元格，经常的格式是：thead > tr > th

• tfoot ： 表格的底部内容 ， 可以放在table 中的任何位置（不可以放在 thead 、 tbody 标签内部 ）

• caption ： 表示表格的标题 ，在页面中的整个表格之上的一个位置

• col ( 了解 )： 定义表格中的列，并用于定义所有公共单元格上的公共语义； 放在 colgroup 标签内部 【比较鸡肋】

  • 有且仅有一个属性没有被废弃：span ： 表示 选中了几个单元格
  • col 中的样式的指定 仅可以是：
    • border : 仅当表格元素上的 'border-collapse' 设置为 'collapse' 时，各种边框属性才适用于列。
    • background : 背景属性为列中的单元格设置背景，但前提是单元格和行都具有透明背景
    • width : 给出了列的最小宽度
    • visibility : 如果列的“可见性”设置为“折叠”，则不会呈现列中的任何单元格，并且会剪切跨越到其他列的单元格

• td、th 的重要属性 ：跨越单元格(合并单元格)

  • colspan ： 跨列

  • rowspan ： 跨行

    合并了几个格子后面就要去掉几个格子( 不然会被挤出去 )

列表

• 具体的标签为：ul、ol、li

• 列表分为：有序列表（order List）、无序列表（unorder List）

• 针对于 ul、ol 中的type 属性，其中 ol 可以使用type 属性；而ul不建议使用，可以通过 CSS#list-style-type 这个样式来进行修改

• ol 中的属性（没有type 属性）

  • reversed ： 表示反转，默认是不添加的；ol中的顺序默认是升序，添加该属性之后，则变为降序
  • start : 表示从哪里开始

• dl、dt、dd : 也被成为自定义列表，但是使用的程度没有 ul、ol 高。

  • dd就是普通的列表,跟li没啥区别

  • dt可以理解为列表的头部,跟ul类似

• 具体的样式， 在CSS 中进行描述

表单 : form

用来收集信息

涉及到的标签有：form、input、select、option、button、textarea、label

label

用于提升用户友好度(比如绑定了label的checkbox可以点击字就选上,而不是非要点击checkbox才能选上)

需要在label的for属性里面填需要关联的id才能把二者关联上。

form

用来声明一个表单 ，其中存在属性

• action : 表示需要将 表单中收集的数据，提交到哪里去（Servlet、RequestMapping、其他的内容【PHP、ASP、Python】）

• autocomplete ： 规定表单是否应该启用自动填充功能。自动填充允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项

• enctype ： 可选的属性值：

  • application/x-www-form-urlencoded ： 默认的类型 ， 一般不考虑上传的内容是字节或字符。
  • multipart/form-data ： 在上传 字节 内容的时候 采用。（一般来说，指代的是上传文件）
  • text/plain ： 纯文本，没有任何格式，一般不会采用

• method : 表单提交的方式

  • 在HTML 中， 仅给出了两种 ： Get 、Post
  • 在 HTTP 协议中， 存在 8 种 提交数据的方式 ： Get、Post、Put、Delete、Head、Option、Trace、CONNECT
  • 有关于 HTTP 协议的相关内容，具体参看 《计算机网络》
  • 表单默认采用的提交方式是 get
  • 如果 enctype 的取值为 multipart/form-data ， 则 method 必须采用 post 方式提交 。

• name 表单的名称，基本不用

• novalidate 属性规定当提交表单时不对表单数据（输入）进行验证。有且仅有一个值；标志属性 ； 如果加上了这个属性，那么建议通过 JavaScript 来进行验证

• target ： 与 a 标签中的属性 target 的取值、效果 一致

input标签

用于收集信息。值有：

• autofocus : 自动获取光标 ， 使用场景是仅有一个输入框的时候，直接使用。

• disable ： 禁用

• readonly ： 只读

  从效果上看:disable , readonly 效果一致；disable 修饰的内容，不会被提交到服务器

• height 、width ： 指定input 标签的宽和 高 (只针对type="image")

• min : 规定 元素的最小值。

• max :规定 元素的最大值。min 与 max 经常用于 type=number 的 input 框

• maxLength : 规定 元素中允许的最大字符数。

• multiple : 可以选择多个输入；适用于image、file；更加适用于 文件的选择

• pattern ： 用于验证 元素的值的正则表达式。 比较适用于：text、search、url、tel、email 和 password。

• placeholder ： 提示信息 , 节省空间

• required ： 依旧是一个标志属性 , 表示必须填写，如果不填写该字段，则表单不允许提交

• size : 以字符数计的 元素的可见宽度( 字符是英文字符)

• src ： 显示为提交按钮的图像的 URL ， 只针对于 image 有效。

• step ： 元素的合法数字间隔； 经常用于number 中， 表示每次增加或减少 多少（step的值）

• value ： 表示 input 中输入的值

• type ： input 框的 具体类型 ; 取值不一样，导致在页面上效果不一样 ； 以下具体的取值很有可能不被识别

  • text : 文本框， 其中输入的内容会原封不动的放在input 框内部

  • password ： 密码框， 其中输入内容，会被加密

  • placeholder : 显示文字提示，可以当占位符

  • radio ： 单选按钮

    注意：多个单选按钮需要有相同的name 属性，从而保证互斥的效果

  • checkbox : 复选框 ， 可以选择多个，每一个选项都互不影响。

    • type为checked时，可以给input加一个checked属性，表示默认为选中状态

  • submit : 提交按钮， 会提交表单到表单中的 action属性中的 URL 。

  • reset ：重置按钮 ， 是将标签中的内容恢复到初始状态。

  • button ： 普通按钮，仅仅是一个按钮，没有任何效果；如果想要出现指定的效果，则需要JavaScript 的配合。

  • email ： 是一个文本框，只不过是加上了邮箱格式的验证

  • file : 进行文件选择，注意：此时的表单中的method 属性必须是 post ；enctype 属性的取值必须是 multipart/form-data

  • hidden : 隐藏表单；通常是用来偷偷摸摸的传递一些数据

  • color ：可以进行选择颜色；如果浏览器不支持的话，就会变成文本框

  • date ： 选择日期，注意没有时间；如果浏览器不支持的话，就会变成文本框

  • time : 选择时间，没有日期；如果浏览器不支持的话，就会变成文本框

  • datetime-local : 根据具体的本地区域来进行选择的；如果浏览器不支持的话，就会变成文本框

  • week : 选择 周数 ；如果浏览器不支持的话，就会变成文本框

  • month ： 选择月份； 如果浏览器不支持的话，就会变成文本框

  • number ： 选择指定的数字，如果浏览器不支持就会变成文本框（移动端用的多）

    • 例如在手机输入验证码的时候，手机会自动调取数字键盘

  • search : 搜索框，效果不明显；如果浏览器不支持的话，就会变成文本框

  • tel ： 只能放电话号码 ；如果浏览器不支持的话，就会变成文本框

  • url ： 只能放URL ；如果浏览器不支持的话，就会变成文本框

  • range ： 精确值, 不重要的输入数字的一个滑块控件 ; 可以通过选择来选择一个数值 ； 通常结合 min 与 max 一起使用； 如果浏览器不支持的话，就会变成文本框

  • image ： 作用是负责提交表单 ， 通常与 src、width、height 一起使用；如果浏览器不支持的话，就会变成文本框

    • 说明 ： src 图片的URL、width 表示图片的宽度、height 表示图片的高度

input在HTML 5里里的新增属性，例如：

• step：跳步,step="5"表示每隔5个数增加/减少。

• placeholder：占位，提示信息

• required：必填项

• autofocus：自动获取光标，自动聚焦到一个地方

• multiple：是一个布尔属性，规定允许用户输入到元素的多个值。用于提交多个文件(摁住ctrl加鼠标单击即可选择多个文件进行提交)

• autocomplete：自动补全；规定输入字段是否应该启用自动完成功能。

  • 允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。(其实就是记录了输入历史)

  • 适用于下面的 类型：text、search、url、tel、email、password、datepickers、range 和 color。

  • 值：autocomplete="on/off"

  • 如果把这个属性放到form标签里面，那么这个form里面的所有input都可以有这个属性的效果。

  • 使用这个值时，input标签需要有name属性。

• preload：预加载，如果有autoplay则忽略这个属性。

select下拉框

可以在CSS里面用appearance:none来去除select默认的右侧下拉小三角图标

• 涉及的标签： select、option

• select 标签用于声明一个下拉框，其中填充的内容是 option

• select 会默认会显示第一个option

• select 中的属性：

  • multiple 多选
  • size：可以看见几个选项
  • form: 把form与select关联

• checked ： 表示默认选中，经常用在 单选按钮 或 复选框中

• selected ：表示默认选中，经常用在 下拉框中的option 中

textarea 文本域

可以在其中书写大量的文本内容

datalist

元素可能的选项列表

button按钮

• 属性 type ； 取值如下：

  • submit ： 提交表单 ;与的效果一致

  • reset ： 重置表单;与 的效果一致

• button ： 普通按钮;与 的效果一致

音频与视频

• 音频：audio ；存在属性：

  • src : 要播放的音乐的url
  • controls ： 显示 控制组件 （播放按钮、声音等内容）
  • autoplay : 页面加载完成之后，自动播放 ; 一般不会使用，有些浏览器会自动阻止。
  • loop ： 循环
  • muted ： 加上该属性，则表示静音 ； 一般使用较少 （HTML 5新增）
  • preload ： 可以被 autoplay 属性所忽略；较少使用，采用默认即可。

• 视频：video ; 存在属性

  • src ： 要播放的 视频路径
  • controls ： 控制组件
  • autoplay ： 自动播放
  • loop 循环
  • muted 加上该属性，则表示静音 ； 一般使用较少
  • preload ： 可以被 autoplay 属性所忽略；较少使用，采用默认即可。
  • poster ： 点击播放按钮之前，视频显示的图片（HTML 5新增）
  • width、height ： 视频所在的区域的宽和高

• source : 作为 audio、video或picture 三个标签的补充内容，是一个空元素(使用较少)

  • 如果audio 与 video 中的src 属性所存在的视频如果不支持，那么就采用这里的内容进行播放

    • 带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件（如果都支持则任选一个）

  • 写法：

    注意 : 在页面上 存放 音频、视频、图片都会消耗大量的资源 ；

转义字符

• 空格 ： 

• & : &

• < : <

• >:>

• ? ： ©

• 剩下的，自行查找。

HTML布局方式

HTML 的默认布局方式 是 流内容布局方式，也就是从上到下，从左到右的方式 。（不能使用CSS进行布局的处理）

• 解决布局的方案: 更加关注语义信息

  • header 标签

  • footer 底部标签

  • nav 导航栏

  • main 主内容

  • aside 侧边栏

CSS

参考：

• w3 ： https://www.w3school.com.cn/cssref/index.asp

• 菜鸟教程：https://www.runoob.com/cssref/css-reference.html

• MDN ： https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

• 概念：CSS 指层叠样式表 (Cascading Style Sheets) ； 主要作用是：定义HTML元素的样式；样式通常存在于样式表中，而样式表有不同的表现形式；外部样式表（不在同一个文件中的样式表）通常存储在.css 文件中。

语法：

• 选择器 { 样式的声明1:具体的样式值1 ; 样式的声明2:具体的样式值2 ;....}

• 存在特殊情况 ： 没有选择器，样式的声明直接在 style 属性中声明

• 注释 ： CSS 中存在注释 ；/* 这里是CSS 注释内容 */ ； 在不用的开发工具中（IDE），存在注释的快捷键 。

  注释一定不要注释错注释符号!!!!!不然代码不报错但是运行结果不对!!!!!!

引用CSS 的方式

1. 内联（行内） ： 在 元素内部使用 style 属性 决定其样式

2. 外链 ： 在 head 元素 中，使用标签 link 进行链接

   外链方式引入css时, link标签里面一定要有rel="stylesheet" !!!!!

   (表示link标签引入的是css)

3. 导入 ： 在 style 元素 中，使用 @import url("地址") 来进行导入

4. 嵌入 ： 在 style 元素中，使用 选择器 进行 选择元素，并 添加样式

注意: 样式显示的优先级为"就近原则",谁距离代码近谁的样式就先显示(行内>嵌入>外链)

为什么线上项目都使用外链式而不使用导入式?( 根本原因)

外链式: 页面打开,css就开始加载

导入式: 页面运行完毕之后css才开始加载

单位

px：像素

em：相对的值，相对于父级元素

• 浏览器默认1em=16px

• 计算方式：n em 乘 16px = 最终的px

• 如果父级没设置font-size，那么就一直找，找到body为止

rem：基准值，基准于浏览器默认值（16px）

• 注意：可以通过在body样式里面设置font-size来设置基准值

vh：屏幕的百分比高

vw：屏幕的百分比宽

• 如果出现一个很小的横向滚动条，那么可能是因为内容变多出现竖向滚动条

• 滚动条也是占位置的！！所以会出现一个很小的横向滚动条！！！

• 可以选择给一个98vw或者99vw这种来避免这种情况

fr：份数

CSS函数

calc()函数：进行简单的加减运算。

例子：两个div，宽都是100vw，第一个div高200px，第二个div需要和第一个div一起组成一个满屏效果。

如果直接把第二个div的高设置为100vh，那么此时会出现一个横向滚动条，因为电脑以为你想让第二个div的高跟屏幕一样高，所以组合起来无法实现效果。

那么解决办法：给第二个div的高设置为calc(100vh(-)200px);

此时，不会出现横向滚动条！

minman(最小值，最大值)

可以用在grid布局里面的计算

满屏效果

注意：如果单位不统一，那么一定会出现需要计算的情况。计算vh、vw的时候需要考虑，因为你没有办法计算每个用户的屏幕占比，所以需要用到计算函数calc()!!!!

选择器

id选择器

使用 元素中的 id 属性进行选择 ；

使用规则是：#具体的id

• 注意：在一个HTML 页面中，id 唯一 ；

为了让js可以更好的工作，id必须是唯一的。因为id相当于在内存到cpu的过程开了一条捷径，如果id重复，那么cpu就不知道这条指令实际要给哪个对象。

• 如果在 外部的CSS 文件中使用了 id 选择器，请保证整个项目中的id 唯一。
• id 选择器一般使用在 当前页面中， 通常以内嵌的方式使用。

class 选择器

使用规则是 : .className

注意class命名不能是数字开头也不能是全数字

标签选择器

例如 : p{...} div{...}

前面三个都是CSS 2的选择器，下面是CSS 3选择器

层次选择器

• 后代选择器 : 中间用空格隔开；选择在某个元素后面的所有..元素

  例如：body p{...}为 选中在body后的所有p标签

• 子选择器：中间用>隔开；在某个元素后面的第一代元素

  例如：body>p{...}为 选中在body后的第一代p标签

• 相邻兄弟选择器：中间用+连接；当前选中元素的向下相邻的一个元素

  例如：.active+p{...}为 选中在active类向下周围的第一个p标签

• 通配用兄弟选择器：中间用~连接；当前选中元素的向下的所有同级元素

  例如：.active~p{...}为 选中在active类向下周围的所有p标签

属性选择器

根据是否含有该属性来选择，大项目用的多，小项目用的少（太麻烦了没必要）

• 例1：[type]{...}选中所有 有 type属性 的元素。

• 例2：input[type="password"]选中所有input中属性为password的元素

• 例3：a[class *= "link"]选中a中class包含“link”的元素

  • *=：包含……

  • $=：以……开头

  • ^=：以……结尾，用来选整个网页的图片很方便。[.jpg]

  • ==：绝对等于……

  • ~=value：表示带有以……命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

  • |=value：表示带有以……命名的属性的元素，属性值为“value”或是以“value-”为前缀

结构伪类选择器

可与层次选择器叠加使用

: ... -child

• 例1：p:first-child指定只有当p元素是其父级的第一个子级的样式。

• 例2：p:last-child选择每个p元素是其父级的最后一个子级。

• 例3：p:only-child选择每个p元素是其父级的唯一子级

  : nth- ... -child

• 例4：p:nth-child(1) {...}选择每个p元素是其父级的第1个子元素

• 例5：p:nth-last-child(1) {...}选择每个p元素的是其父级的最后1个子元素，从最后一个子项计数

• 例6：p:nth-of-type(1) {...}选中属于p父元素的第N个子元素p，这里是选第一个。（按类型选择）

  • 选择元素是父级的第n个元素

    N可以是：数字(选择第几个)、关键字(奇数odd/偶数even)、

    公式(n从0开始计算，常见公式2n、2n+1、5n【5的倍数开始要】、n+5【从第五个开始往后全部都要】、-n+5【只要前五个】)

    注意： 第0个元素和被超出的元素都是忽略不被计算的

• 例7：p:nth-last-of-type(1) {...}选中属于p父元素的倒数第N个子元素p，这里是选倒数第一个。（按类型选择）

  • 选择元素是父级的倒数第n个元素

  按类型选中每个

• 例8：p:first-of-type {...}选择每个p元素是其父级的第一个p元素。

• 例9：p:last-of-type {...}选择每个p元素是其父级的最后一个p元素。

• 例10：p:only-of-type {...}选择每个p元素是其父级的唯一p元素。

• target

  enable

  disable

• selection

  更多详见CSS Dinner、CSS 选择器 | 菜鸟教程

状态伪类选择器

根据不同状态确定不同样式

• :link：默认状态，未被访问过且没有悬停。

• :visited：已被访问过；点击后变成……样式

• :hover：鼠标悬停在其上时，样式变为……

• :active：正在点击时；按下（还没松开）后，样式变为……

• :focus：输入框输入时，样式变为……

• :checked：是否点击

注意： 有书写顺序，顺序为link->visited->hover->active

W3C规范使得浏览器无视:link和:visited样式规则，以此来保护用户隐私

• 多标签选择器（选择器组）：用逗号隔开即可

伪元素选择器

::before：在……元素之前

::after：在……元素之后

如果用::before显示icon的时候需要旋转，直接写transform没有用，需要给::before设置成inline-block才可以让transform生效。

小技巧：清除浮动

常用：在小组合作时，清除浮动 (用::after做出来一个透明的不占位置的块来清除浮动)

.box::after{
    content: "";/*对于FF/Chrome/opera/IE8不能缺少，content可以为空*/
    display: block;/*对于FF/Chrome/opera/IE8不能缺少*/
    height: 0;/*写不写都行，如果想要两行之间有间距，可以调height*/
    width: 0;/*写不写都行*/
    clear: both; /*清除所有浮动*/
    visibility: hidden;/*允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动*/
    /* visibility写不写都行*/
}

如果父级元素有固定宽高，那么就不需要这个方法。但flex布局没有固定的宽高，所以需要

选择器的优先级(权重)

id选择器>类选择器>标签选择器>...

注意: 选择器的优先级可以相加 !!!

例如:body>#p1的权重大于#p1, 即 子选择器权重+id选择器权重 > id选择器权重

CSS的样式权重

CSS 中的 !important 规则用于增加样式的权重。!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

背景background

background

背景可以通过 background 这个属性进行简写所有的 background-* 的属性 ；具体为：

• background ：bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
• 一般的策略是：当复合属性超过3个的时候， 建议拆开写！

background-color背景色

可以使用颜色的英文名称（但是要注意是否支持)、可以使用rgb/rgba计算方式、可以使用 #+6位十六进制的数值作为颜色值。

background-image背景图片

注意: 背景图片无法撑起元素大小 (也就是说如果装在一个空div里面而没有指定这个div的大小, 那么图片不会显示 ! ! ! )

默认的情况：背景图片会 水平方向垂直方向一直平铺 。取值有

• url ：声明一个图片的具体的url；url可以是相对路径；也可以是网络上的资源（http://）
• linear-gradient() : 创建一个表示两种或多种颜色线性渐变的图片; 这种内容一般比较少见。
• radial-gradient() ： 函数用径向渐变创建 "图像"。
• repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);函数用于创建重复的线性渐变 "图像"。
• repeating-radial-gradient()函数用于创建重复的径向渐变 "图像"。

background-repeat背景平铺

背景图像如何重复(平铺)

取值如下：

• repeat ： 这个值是默认值
• no-repeat : 不重复；水平方向与垂直方向都不重复
• repeat-x ： 水平方向重复
• repeat-y : 垂直方向重复

background-position背景图像的起始位置

取值可以是：

• 关键字：center、top、bottom、left、right 的组合；两个为一组，例如：left center、right bottom

注意: 中间没有逗号 ! ! ! ! 是用空格隔开的 ! ! ! !

• 可以设置 x% , y% ; 一般不用
• 可以设置 xpos ypos; pos 表示单位的意思（可以是像素或其他单位）；如果仅仅指定了一个值，那么另一个值就是50%；
  • 默认图片的位置是在(0,0) ，表示 从左上角开始。

注意: 因为网页的右下角坐标无法确定(网页可以无限拉长, 所以只能把零点固定在左上角)

可以使用position属性来处理精灵图。

需要注意的是，图像移动了多少位置不管在什么情况下都是相对于(0,0)点移动的 !

background-attachment背景图片滚动方式

设置背景图像是否固定或者随着页面的其余部分滚动。

取值有：

• scroll ： 滚动的 ： 背景图片不会随着页面的滚动而滚动。
• fixed ： 固定的 ； 背景图片不会随着页面的滚动而滚动。
• local ： 背景图片会随着元素内容的滚动而滚动。

background-clip背景绘制区域

背景裁剪(绘制)区域 , 配合no-repeat使用

取值：

• border-box 默认值；看到的效果：从边框开始进行覆盖 （背景绘制在边框方框内）
• padding-box ：背景绘制在衬距方框内（剪切成衬距方框）。从 padding 开始进行覆盖背景色。
• content-box ： 背景绘制在内容方框内（剪切成内容方框） ; 背景色 仅仅覆盖内容。
• initial : 初始值
• inherit : 继承

实用效果:按文本裁切

在css里加一行-webkit-background-clip:text; 可以按文本来裁切。

必须要给文字属性, 且文本颜色必须为透明transparent

在div内随便写文字,即可看到效果。实例如下

    
    
    



?

background-size背景图片的大小

css 3新增属性。

取值有：

• length ： 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
• percentage : 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
• cover : 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
• contain : 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
• 建议：如果涉及到 大小的内容，建议直接使用 不同的单位进行设置，不要使用CSS样式中提供值。

background-origin背景图片起始位置

设置图片的起始位置(必须配合no-repeat)

• padding-box 背景图像填充框的相对位置
• border-box 背景图像边界框的相对位置
• content-box 背景图像的相对位置的内容框

CSS 3背景 新增属性

可以添加多个背景图片，更改属性时只需要继续写、中间用逗号隔开即可。

注意背景图片不能重复！（background-repeat为no-repeat）

css所有效果都走GPU，js走CPU。现在尽量多使用css来减少cpu负担。

1. CSS 3里面的background-image属性里面可以添加多个url（即多个背景图片）

2. CSS 3里面的background-position属性可以一行控制多个背景图片的位置。

   • background-position:left top,right bottom;控制了两个图片的位置，中间使用逗号隔开。

   可以用这个方法做出例如“相册”的效果。

   原先在一个大的div里面做出4个排布位置不同的图片需要在里面写4个div，现在只需要一次添加多个图片再更改位置即可。

linear-gradient渐变属性

语法：linear-gradient:(方向[可选]，开始颜色，中间颜色、可以有多个，结尾颜色);

• 如果加了方向，那就需要兼容（加前缀，如-webkit-）

• 方向可以上下左右自由组合，默认为top

• 方向可以写角度30 deg，角度默认为0deg，但是大部分浏览器默认起始角度为-90deg。旋转角度是逆时针。

  注意：可以写一遍background，为了兼容不支持渐变或更低版本的浏览器

还可以写带百分比的渐变: 从0~100逐步递增，百分比代表所占的位置，百分数写在颜色后面

radial-gradient径向渐变

语法：radial-gradient:(开始位置，形状，颜色、可以有多个);

跟上面的liner-gradient类似。

transition过渡

一个属性变换到另一个属性的缓慢的过程，是一个综合属性

除了下面介绍的还有很多属性，可以自己参阅手册

语法：transition: 过渡的属性 , 过渡的样式 , 过渡的时间 ;

• 过渡的属性，除了能写属性名，还能写all

可以做出 鼠标移动到图片上图片缓慢放大 的效果

下面这个例子就是鼠标移动到div上，div颜色从红变绿，从小变大的过程。

div::hover{
    background:green;
    width:400px;
    height:400px;
}

div{
    transition: all 5s;
    background:red;
    width:200px;
    height:200px;
}

也可以拿来做照片之间的虚幻切换效果。

transform变换

CSS 3中颠覆性的特征之一,可以实现元素位移/旋转/缩放等效果

同时使用多个转换，其格式为transform:translateX(),rotate(),scale(),...

当同时有位移和其他属性的时候，位移要放在最前面！！

可选值有:

• rotate旋转

• translate移动

• scale缩放

• skew扭曲（不常用）

transform是一个二维坐标系,好处:

• 沿着x轴和y轴移动

• 不会影响到其他元素(不脱离文档流)

移动变换

transform:translate属性

• transform的百分比是相对于自身元素的宽高

• 对行元素无效!

• 可以拿来解决设置一个div垂直水平居中

• 有translateX()，translateY()，translateZ()

• 如果写多个值，空格隔开

  • transform:translateX(50%) transform:translateY(50%);

旋转变换

transform:rotate属性

语法:transform:rotate(30 deg);

旋转里面填角度deg,角度为正: 顺时针旋转 ; 角度为负: 逆时针旋转，角度填多少都行

• 默认旋转的起始点是元素的中心点

• 旋转中心点可以用transform-origin:x y;属性设置

  • x/y可以是上下左右关键字，也可以是百分比、像素

如果这个元素本身的transform属性里面还有其他的移动,记得也要加入到新的transform属性里面

缩放变换

transform:scale属性

语法:transform:scale(X,Y)

注意：x和y之间用逗号隔开

放大倍数计算方式：放大后元素宽=放大前元素宽 × X；放大后元素高同理。

• 如果直接一个值，相当于写了两个一样的值。

• 如果XY为小数，那么就是缩小，计算方式一样。

要注意：放大或缩小会导致遮挡元素！

跟padding把元素撑大的区别在于：

• padding撑大的基准点在左上角，往其他方向扩大。

• scale的放大基准点在元素的正中心，往四周扩大。

也可以用transform-origin来设置缩放中心点

中心点设置

transform-origin属性用来设置中心点

语法：transform-origin:x y;，xy为关键字。

变换风格transform-style

• preserve-3d：让子元素保持3d立体状态

• flat：默认值

3d变换

transform:translate3d属性

默认情况下，浏览器不会打开3d模式。最好可以加一下浏览器兼容

开启模式：在被观察者元素的父级盒子内写属性perspective(例如body)

• perspective距离一般为500px~1000px

  • perspective-origin属性调整：视觉到浏览器角度的设置，调整观感点。

    • 默认值为perspective-origin:50% 50%;

    • 写在舞台元素里面

    • 第一个值是水平轴，第二个值是垂直轴

实际上是在2D平面上产生近大远小的视觉效果，只是二维的。

特点：

• 近大远小

• 物体后面遮挡看不见

注意： xyz不可以被省略，如果没有就写0

语法：transform:translate3d(x,y,z) rotate3d(x,y,z,30deg);

• translate3d有x、y、z三个轴的状态；rotate也有

• rotate3d是综合属性，目前了解就行

3d旋转实例

html

css

/*设置舞台*/
#stage{
    width:400px;/* 设置舞台宽度，跟图片宽度一致*/
    heigth:600px;/* 图片高度*/
    margin:50px auto;/* 上下50px，左右实现水平居中*/ 
    perspective:800px;/* 设置舞台元素*/
    perspective-origin:50% 50%;
/* 舞台就是舞台，3d效果跟他没关系！*/
}

#rotate{
    width:100%;/*因为旋转只在舞台内出现，所以宽高100%就行*/
    height:100%;
    position:relative;
    left:0px;
    top:0px;/* 用relative定位时最好设置一下从哪里定位,即使不动*/
    transform-style:preserve-3d;
    transition:all 2s;/* 过渡*/
/* 让子元素保持3d状态，如果不加的画，子元素还在平面上，不在舞台上，没效果！*/
    /*因为子元素在rotate里面，所以最后两行写在这里最合适*/
}

#rotate div{
    position:absolute;
    left:0px;
    top:0px;/* 设置两张图片重叠*/
}

#rotate .front{
    transform:translateZ(1px);
}

#rotate .back{
    transform:rotateY(180deg);
/* 如果不加这个效果，那么图像在:hover之后会被镜像*/
/* 如果直接把:hover里面的旋转角度改成360，那就相当于没转！*/
/* 所以在看不见的地方再转180就可以把图片镜像回来*/
}

#rotate:hover{
    transform:rotateY(180deg);
}

可以自己试试更改perspective和perspective-origin属性的值，查看变化！

动画animation

是一个综合属性。必要属性：动画名称 动画时间

animation: 动画名称 动画时间 动画样式 动画延迟时间 动画运行次数 动画播放方向;

@keyframes 规则

@keyframe关键帧,可以加任意多个关键帧。from表示0，to表示100%。

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

下面的例子将 "example" 动画绑定到

/* 动画代码 */
@keyframes example { 
 from {
    background-color: red;
    }
 to {
    background-color: yellow;
    } 
}

/* 向此元素应用动画效果 */
div { 
 width: 100px;
 height: 100px;
 background-color: red;
/*绑定*/
 animation-name: example;
 animation-duration: 4s; 
}

@font-face{
    font-family:"字体名";
    src: url("字体文件的地址") format(字体格式);
}

cursor: url(one.svg), url(two.svg) 5 5, progress;

padding-top : 设置 上padding

padding-right ;

padding-bottom ;

padding-left ;

border-top-color
border-top-style
border-top-width

border-bottom-color
border-bottom-style
border-bottom-width

border-left-color
border-left-style
border-left-width

border-right-color
border-right-style
border-right-width

margin-top : 设置 上padding

margin-right ;

margin-bottom ;

margin-left ;

div.sticky { 
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50; 
}

@media (max-width:500px){
    body{}
    h1{}
    ...    
}