文章目录

一、新语义标签
二、多媒体标签
- 1. video标签
- 2. audio标签
三、新表单元素及属性
- 1.新的输入类型
- 2.新的表单元素
- 3.新的表单属性
四、画布（canvas）
- 1 绘图基本方法
五、Web存储
- 1.localStorage
- 2.sessionStorage
六、背景
- 1.background-origin
- 2.background-clip
- 3.background-size
七、边框
- 1.box-shadow
- 2 border-radius
- 3 border-image
八、文本
九、选择器
- 1.属性选择器：
- 2.伪类选择器：
- 3.结构伪元素选择器：
十、颜色渐变
- 1.线性渐变：
- 2.径向渐变：
十一、过度
十二、动画
十三、变形
- 1. 2D转换
- 2. 3D转换
十四、弹性布局（flex）
- 1. 容器属性
- 2. flex-direction
- 3. flex-wrap
- 4. justify-content
- 5. align-items
- 6. flex-flow
十五、怪异盒子
- 1.box-sizing
十六、媒体查询
- 1.使用媒体查询
- 2. 媒体特性

一、新语义标签

语义标签可以清楚地向浏览器和开发者描述其意义。

<body>
<!-- hgroup叫标题组 --><hgroup><h1>我是h1</h1><h2>我和h1都是块元素</h2></hgroup><!-- em语义:语调加重  行内元素strong：加粗 语义：强调  重要内容q：短引用blockquote：长引用 -->
<header></header>     // 页眉<nav></nav>           // 导航<section></section>   // 文档的节<article></article>   // 文章<aside></aside>       // 侧边栏<main></main>         // 主要内容<footer></footer>     // 页脚</body>....

二、多媒体标签

1. video标签

HTML5 规定了一种通过 video 元素来包含视频的标准方法。
标签属性有：

src：视频URL
width：宽
height：高
autoplay：是否自动播放
controls：是否展示控件
loop：是否循环播放
preload：是否在页面加载后载入视频
- auto：当页面加载后载入整个视频
- meta：当页面加载后只载入元数据
- none：当页面加载后不载入视频

<video controls><source src="./source/video.mp4"><source src="./source/video.webm"></video><!-- 引用其他网站的视频 --><iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=y003057wcgc" allowFullScreen="true" width="300px" height="200px"></iframe>

2. audio标签

audio提供了播放音频的标准。

src：音频URL
autoplay：是否自动播放
loop：是否循环播放
preload：是否在页面加载后载入音频。
- auto：当页面加载后载入整个音频
- meta：当页面加载后只载入元数据
- none：当页面加载后不载入音频

<!-- audio 标签用来向页面中引用一个外部的音频文件音视频文件引用时，默认情况下不允许用户自己控制播放停止属于替换元素，属性：controls 是否允许用户控制播放autoplay 音频文件是否自动播放- 如果设置了autoplay 则音乐在打开页面时会自动播放但是目前大部分浏览器都不会自动对音乐进行播放loop 音乐是否循环播放         --><!-- <audio src="./source/拾忆合成.mp3" controls autoplay></audio> --><!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件地址 --><audio controls><!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ --><source src="./source/拾忆合成.mp3"><!-- 主要的两种音频文件MP3，ogg --><source src="./source/拾忆合成.ogg"><!-- 兼容ie8 --><embed src="./source/拾忆合成.mp3" type="audio/mp3" width="300px"></audio>

三、新表单元素及属性

1.新的输入类型

input标签通过type可以对输入类型进行限制，增加了type类型：

email: 输入合法的邮箱地址
url：输入合法的网址
number：只能输入数字
range：滑块
color：拾色器
tel: 输入固定格式的电话号码
date：显示日期
month：显示月份
week ：显示第几周
time：显示时间

 <input type="text">  <input type="password"><input type="radio"><input type="checkbox"><input type="button" value="按钮"><input type="file"><!--选择文件--><input type="image" src="../课堂练习H5+CSS3/img/top_logo.png"><input type="submit" value="提交按钮"><!-- 当你浏览器不支持时会以普通文本框输出 --><!-- 1.新增输入类型之color 其value值 代表选择的颜色可以通过onchange事件来监听其颜色的变化 从而达到自由换色效果--><div id="box">abc</div><input type="color" value="#87ceeb" onchange="box.style.backgroundColor=this.value"><!-- 2.datetime-local   时间 --><input type="datetime-local" onchange="console.log(this.value)"><!-- 3.date 其格式是：年-月-日  月份不足10前边自动0 日同样如此--><input type="date" onchange="alert('您当前选中的时间是'+this.value)"><!-- 4.time 其格式为：小时：分钟--><input type="time" onchange="alert('您当前选中的时间是'+this.value)"><!-- 5.week  显示周数 格式：年份-W周数 --><input type="week" onchange="console.log(this.value)"><!-- 6.month  其格式为年份-月份(01-12) --><input type="month" onchange="console.log(this.value)"><!-- 7.number max规定number的最大值，min规定其最小值 --><input type="number" max="100" min="0" value="50"><!-- 8.range  -->0 <input type="range" value="0" max="100" min="0" id="rg">100<!-- 9.email 自带校验格式 如果格式错误会自动提示--><form><input type="email" name="em" id="em"><input type="submit" name="sub" id="sub"></form><!-- 10.search 移动端遍历搜索 和输入法弹出 --><input type="search"><!-- 11.tel 输入固定格式的电话号码 但未实装--><input type="tel"><!-- 12.url 网址路径 自带校验 输入正确的网络格式--><form><input type="url" name="myurl" id="" value=""><input type="submit"></form>

2.新的表单元素

HTML5 拥有若干涉及表单的元素和属性。

datalist
- datalist h5新增下拉列表
  必须使用list和id进行关联使用
  自带样式和间距
  需要点击才能下拉，支持智能化检索和模糊匹配

<select><option value="">腊肠</option><option value="">鸡蛋</option><option value="">鸡块</option><option value="">方便面</option></select><!-- 1.datalist h5新增下拉列表必须使用list和id进行关联使用自带样式和间距需要点击才能下拉，支持智能化检索和模糊匹配--><input list="browser"><datalist id="browser"><option value="ie">IE</option><option value="guge">谷歌</option><option value="huohu">火狐</option><option value="openg">欧朋</option><option value="ie10">IE10</option></datalist>

3.新的表单属性

新的form属性：

autocomplete：on｜off 自动完成输入
novalidate： true｜false 是否关闭校验，目前支持程度非常低。

新的input属性：

autofocus：自动获取焦点
multiple：实现多选效果
required：必填项
placeholder：输入框内的提示
pattern: 进行验证，正则表达式。
form：规定所属的表单，引用所属表单的id。
list：属性规定输入域的 datalist。

<!-- h5新增表单属性 --><!-- 1.autofocus    自动聚焦:元素会自动获得焦点 且 一般情况下自动只能使用一个 --><input type="text"><input type="text" autofocus="autofocus"><input type="text"><!-- 2.required 必填 自带校验 --><form action=""><input type="password" name="psw" required="required" /><input type="submit" value="提交数据" /></form><!-- 3.placeholder 输入框内的提示内容 当开始输入内容时提示内容会消失 --><input type="url" placeholder="请输入个人主页"><!-- 4.autocomplete  自动完成 --><form autocomplete="off">用户名: <input type="text" name="user"><input type="submit" name="ss" id="sub" value="提交表单"></form><!-- 5.multiple 多项选择 也可以设置选取多个值 -->请选择你要上传的身份证正反面: <input type="file" multiple="multiple"><select multiple="multiple"><option value="">DNF</option><option value="">fff</option><option value="">LOL</option><option value="">QQ飞车</option><option value="">王者荣耀</option></select><!-- 6.max最大值  min最小值 step步长 点击后的改变量--><input type="number" max="100" min="0" step="5" value="50"><!-- 7.list属性 --><input list="FobidFoods"><datalist id="FobidFoods"><option value="薯片"></option><option value="糖果"></option><option value="早餐"></option><option value="柚子"></option></datalist><!-- 8.pattern属性  为输入框内容添加正则判断 --><form novalidate="novalidate">请输入城市代号:<input type="text" name="citynum" pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"><input type="submit" id="ss" value="提交"></form><!-- 9.novalidate属性  设置元素或者表单不再进行任何验证 -->

四、画布（canvas）

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像，canvas本身是没有绘图能力的，所有的绘制工作必须在JS内部完成

1 绘图基本方法

方法：

ctx.moveTo(x,y)：落笔
ctx.lineTo(x,y)：连线
ctx.stroke()：描边
ctx.beginPath()：开启新的图层
ctx.closePath()：闭合路径
ctx.fill()：填充
属性：
strokeStyle：描边颜色
lineWidth：线宽
lineJoin：线连接方式 round | bevel | miter (默认)
lineCap：线帽（线两端结束的样式）butt(默认值) | round | square
fillStyle：填充颜色

<body><canvas id="myCanvas" width="500" height="500"style="border: 1px solid gray;"></canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");// 绘制空心矩形 strokeRect (左上角x的位置，左上角y的位置，矩形的长，矩形的宽)ctx.strokeStyle="green"; //描边样式ctx.strokeRect(20,20,100,200) //在坐标为20 20的位置上画一个长100宽200的矩形ctx.stroke();// 2.绘制实心矩形fillRect (左上角x的位置，左上角y的位置，矩形的长，矩形的宽)ctx.fillStyle="yellow"; //设置填充颜色为黄色ctx.fillRect(150,20,200,100); //在坐标为150 20的位置上绘制长200  宽100的矩形// 3.绘制空心圆形 .arc(圆心x轴的位置，圆心y轴的位置，半径的长度，起始弧度，结束弧度，绘制方向，默认false为顺时针方向)配合.stroke()使用ctx.beginPath(); //开启路径ctx.arc(250,250,100,0,Math.PI*2,false)ctx.stroke();ctx.closePath(); //关闭路径// 4.绘制实心圆形.arc(圆心x轴的位置，圆心y轴的位置，半径的长度，起始弧度，结束弧度，绘制方向，默认false为顺时针方向)配合fill()使用ctx.fillStyle="deeppink"; //设置填充颜色ctx.beginPath(); //开启路径ctx.arc(120,380,50,0,Math.PI*2,false)ctx.fill();ctx.closePath(); //关闭路径</script>
</body>

五、Web存储

HTML提供了两种在客户端存储数据的新方法：

localStorage --没有时间限制的数据存储
sessionStorage --有时间限制的数据存储

1.localStorage

永久有效
多窗口共享
一般用来保存长久数据。

方法：

localStorage.setItem(key, value)：存储值
localStorage.getItem(key)：获取值
localStorage.removeItem(“key”)：删除指定键
localStorage.clear()：清空数据

2.sessionStorage

生命周期为关闭当前浏览器窗口
可以在同一个窗口下访问
一般用于一次性登录敏感数据的存储。

方法：

sessionStorage.setItem(“key”, “value”)：存储
sessionStorage.getItem(“key”)：读取
sessionStorage.removeItem(“key”)：删除指定键
sessionStorage.clear()：清空数据

应用：

<script>if(typeof(Storage)!=="undefined"){// 1.修改或者新增 存储项目localStorage.setItem("项目名称"，存储内容);alert("您的浏览器支持webStorage");localStorage.setItem("name","张永华");localStorage.setItem("password","88888888");// js escape 将内容进行转译成 URI编码var txt=escape("小关今天又被虐了");localStorage.setItem("2020-11-6",txt);localStorage.setItem("password","123456");// 创建变量 存储 当前班级的总人数//setItem() 如果没有此项目则创建 如果有此项目则修改为最新localStorage.setItem("TotalNum",44);// 如果当天有人请假localStorage.setItem("TotalNum",41);// 2.获取项目内容 localStorage.getItem("键名称");var riji=localStorage.getItem("2020-11-6");//获取项目内容var trueriji=unescape(riji);alert(trueriji);var num=localStorage.TotalNum;alert("移动一班今日出勤总人数："+num);// 3.删除某个具体的项目操作localStorage.removeItem("password");// 4.clear 清空 所有存储数据（谨慎使用）// localStorage.clear();// 5.根据索引位置 来获取localStorage的 键名称 key()alert(localStorage.key(1));console.log(localStorage);for(var i in localStorage){console.log(i);}}else{alert("您的浏览器该升级了");}</script>

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{border: 1px dashed gray;width: 150px;padding: 10px;margin: 0 auto;text-align: center;}</style>
</head>
<body><div id="box"><div>页面浏览的总次数<span id="visitCount">0</span></div><div>按钮的点击总次数<span id="clickCount">0</span></div><button type="button" id="btn">点击</button></div><script>var clickCount=0; //页面点击次数初始化为0if(typeof(Storage)!=="undefined"){if(localStorage.pageCount1!=null){localStorage.pageCount1= Number(localStorage.pageCount1)+1; }else{// 如果没有就自动创建localStorage.setItem("pageCount1",1);}document.getElementById("visitCount").innerHTML=localStorage.pageCount1;document.getElementById("btn").onclick=function(){clickCount++;sessionStorage.clickCount=clickCount;document.getElementById("clickCount").innerHTML=sessionStorage.clickCount;}// 1.Storage--H5存储 两种方式  方式一localStorage本地永久存储浏览器关闭数据仍存在//                             方式二sessionStorage本地临时存储 浏览器关闭后被自动销毁}else{alert("您的浏览器版本过低需要升级");}</script>
</body>
</html>

六、背景

1.background-origin

background-origin用来规定背景图片的定位区域。
☞ padding-box：背景图像相对内边距定位（默认值）
☞ border-box：背景图像相对边框定位【以边框左上角为参照进行位置设置】
☞ content-box：背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置

2.background-clip

background-clip规定背景的绘制区域。

border-box：背景被裁切到边框盒子位置【将背景图片在整个容器中显示】
padding-box：背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】
content-box：背景被裁切到内容区域【将背景图片在内容区域显示】（默认值）

3.background-size

background-size规定背景图片的尺寸。

cover：宽高最小方向填满可能存在大的方向溢出容器
contain：宽高最大方向填满可能存在短方向未填满
auto 默认图片本身大小
自定义宽高注意尽量遵循等比例原则否则图像失真

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景设置</title><style>div[class^="box"]{width: 200px;height: 150px;background-image: url(./img/dog.jpg);background-repeat: no-repeat;border: 1px solid gray;float: left;margin: 10px;}.box2{background-size: contain;}.box3{background-size: cover;}.box4{background-size: auto;}.box5{background-size: 100%;}/* background-size:1.contain 宽高最大方向填满 可能存在短方向未填满2.cover 宽高最小方向填满  可能存在大的方向溢出容器3.auto 默认 图片本身大小4.自定义宽高 注意 尽量遵循等比例原则否则图像失真*/</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div>
</body>
</html>

七、边框

1.box-shadow

box-shadow: x y blur spread color inset

向方框添加一个或多个阴影。

x：必需。水平阴影的位置。为正则靠右，为负则靠左
y：必需。垂直阴影的位置。允许负值。 y轴垂直位置为正则靠下，为负则靠上
blur：可选。模糊距离。越大越模糊越小越清晰
spread：可选。阴影的尺寸。
color：可选。阴影的颜色。
inset：可选。将外部阴影 (outset) 改为内部阴影。

2 border-radius

border-radius：设置所有四个border-*-radius属性的简写属性,边框添加圆角。
单位
- px
- %

3 border-image

border-image向边框添加图片。
border-image 属性是一个简写属性，用于设置以下属性：
border-image-source：图片路径
border-image-slice：图片边框向内偏移。
border-image-width：图片边框宽度
border-image-outset：边框图像区域超出边框的量。
border-image-repeat：图像边框是否应平铺
- stretch 默认值拉伸图像来填充区域
- repeat 平铺（repeated）图像来填充区域
- round 类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域
- space 类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 800px;height: 600px;margin: 100px auto;border: 250px solid transparent;border-image-source: url(./img/tutu.jpg);/* 四个方位的切割大小 如果是像素一定要要省略px 也可以是百分比 */border-image-slice: 250;/*铺满*/border-image-repeat: round; /* 拉伸铺满 *//* border-image-repeat: stretch; */}</style>
</head>
<body><div class="box"></div>
</body>
</html>

八、文本

text-shadow：x,y,blur,color 设置文本阴影
word-wrap：允许长单词或 URL 地址换行到下一行。。normal|break-word
normal：只在允许的断字点换行（浏览器保持默认处理）。
break-word：在长单词或 URL 地址内部进行换行。
text-overflow：规定当文本溢出包含元素时发生的事情。clip|ellipsis|string
- clip：修剪文本
- ellipsis：显示省略符号来代表被修剪的文本
- string：使用给定的字符串来代表被修剪的文本
@font-face {font-family，src: url()}

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.textshadow{font-size: 60px;text-shadow: 2px 2px 1px blue;color: rgb(228, 228, 228);/* text-shadow: 第一个参数 为正靠右为负靠左 不可省略第二个参数 为正靠下为负靠上 不可省略第三个参数 模糊距离越大越模糊 越小越清晰可以省略第四个参数 颜色 */}div::selection{color: rgb(0, 148, 0);}.over{width: 200px;border: 1px solid gray;text-overflow: ellipsis;/*文本溢出时以省略号形式显示*/white-space: nowrap;/*文本内容不换行*/overflow: hidden;/*超出部分隐藏掉*/}/* 导入自定义字体 */@font-face {font-family: myfont; /*自定义字体的名称*/src: url(./source/STCAIYUN.TTF);}.webfont{/* font-family: "myfont"; */font-family: myfont;font-size: 60px;}</style>
</head>
<body><div class="textshadow">关瑞扬睡觉打呼噜</div><div class="over">dhfjkdhkjlfsdlhlsdahdlsghsadhgklhjldsahgkldasjhlgkdhklda</div><div class="webfont">三好学生</div></body>
</html>

九、选择器

1.属性选择器：

[属性名] {}：带有这个属性名的所有元素
[属性名=值] {}：[target=_blank]，选择 target="_blank" 的所有元素。
[属性名^=值] {}：以值开头
[属性名$=值] {}：以值结束
[属性名*=值] {}：包含
例如：为 target="_blank" 的元素设置样式：

a[target=_blank]
{
background-color:yellow;
}

2.伪类选择器：

:first-child {}：选中的元素为父元素第一个子元素
:last-child {}：选中的元素为父元素中最后一个子元素
:nth-child(n) {}：选中的元素为父元素中正数第n个子元素
:nth-last-child(n) {}：选中的元素为父元素中倒数第n个子元素
- n取值为自然数
- 2n-1或 odd 奇数列
- 2n或 even 偶数列
:only-child 用于选取元素为其父级元素的唯一元素
:only-of-type 在父元素内只允许同一类型出现1次才能被选取到
:enable 选取可用元素
:disable选取被禁用元素
:valid当内容通过验证时设置的样式
:invalid当内容不通过验证时设置的样式
:in-range在xx范围之内的
:out-of-range在xx范围之外的
:checked 被选中的
:empty 选取内容为空的元素如果元素有空的文本节点或者回车文本节点亦不能判定为empty
:required 选取页面元素的必填项目
:not(s) 括号内是一个选择器可以是类id标签还可以是组合标签
:target：选择器可用于选取当前活动的目标元素。突出显示活动的 HTML 锚

3.结构伪元素选择器：

::first-line：选中第一行
::first-letter：选中第一个字符
::before：在元素的内容前面插入新内容
::after：在元素的内容后面插入新内容
::selection：当被鼠标选中的时候的样式
::placeholder：匹配占位符的文本，只有元素设置placeholder属性是，该伪元素才能生效

十、颜色渐变

1.线性渐变：

渐变是图片通过background-image来设置
线性渐变。颜色沿着一条直线发生变化
linear-gradient（）
linear-gradient（red，yellow）红色在开头、黄色在结尾、中间是过度区域
-线性渐变的开头、我们可以指定一个渐变方向
to left
to right
to bottom
to top
deg表示度数
turn 表示圈
);
repeating-linear-gradient() 可以平铺的线性渐变
渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况
background-image: repeating-linear-gradient(to right ,red, yellow 50px);

2.径向渐变：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>径向渐变</title><style>.box1{width: 300px;height: 300px;/* radial-gradient()   径向渐变（放射性效果）正方形-->圆形长方形-->椭圆形语法：--radial-gradient(大小 at 位置，颜色 位置，颜色 位置，颜色 位置)--我们也可以手动指定圆心大小circle 正圆ellipse  椭圆closest-side 近边closest-corner 近角farthest-side  远边farthest-corner 远角--也可以指定渐变的位置：top right left center bottom*/background-image: radial-gradient(100px 100px at 0 0, red,#bfa);}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

十一、过度

设置哪些属性要参与到过渡动画效果中：transition-property: all;
设置过渡执行时间：transition-duration: 1s;
设置过渡的速度类型：transition-timing-function:
- linear：以相同速度开始至结束的过渡效果
- ease：慢速开始，然后变快，然后慢速结束
- ease-in：以慢速开始
- ease-out：以慢速结束
- ease-in-out：以慢速开始和结束
- cubic-bezier() 来指定时序函数
- steps(n,x) 分步执行过渡效果
  - n 自然数必填
  - end ，在时间结束时执行过渡(默认值)
  - start ，在时间开始时执行过渡
设置过渡延时执行时间：transition-delay: 1s;

注意：transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;}.box1{width: 800px;height: 800px;background-color: silver;overflow: hidden;}.box1 div{width: 100px;height: 100px;margin-bottom: 100px;margin-left: 0;}.box2{background-color: #bfa;/* margin-left: auto; *//* transition:all 2s; *//* 过渡（transition）- 通过过渡可以指定一个属性发生变化时的切换方式- 通过过渡可以创建一些非常好的效果，提升用户的体验*//* transition-property: 指定要执行过渡的属性  多个属性间使用,隔开 如果所有属性都需要过渡，则使用all关键字大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡*//* transition-property: height , width; *//* transition-property: all; *//*transition-duration: 指定过渡效果的持续时间时间单位：s 和 ms  1s = 1000ms*//* transition-duration: 100ms, 2s; *//* transition-duration: 2s; *//* transition-timing-function: 过渡的时序函数指定过渡的执行的方式  可选值：ease 默认值，慢速开始，先加速，再减速linear 匀速运动ease-in 加速运动ease-out 减速运动ease-in-out 先加速 后减速cubic-bezier() 来指定时序函数https://cubic-bezier.comsteps() 分步执行过渡效果可以设置一个第二个值：end ， 在时间结束时执行过渡(默认值)start ， 在时间开始时执行过渡*//* transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); *//* transition-timing-function: steps(2, start); *//* transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡  *//* transition-delay: 2s; *//* transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 */transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);}.box3{background-color: orange;transition-property: all;transition-duration: 2s;}.box1:hover div{/* width: 200px;height: 200px; *//* background-color: orange; */margin-left: 700px;}</style></head>
<body><div class="box1"><div class="box2"></div><div class="box3"></div></div></body>
</html>

十二、动画

animation-name: 调用动画集名称
animation-duration：完成一个周期所花费的时间
animation-timing-function：动画执行的速度类型，linear|ease|ease-in|ease-out|ease-in-out
animation-delay：动画延时
animation-iteration-count：动画被播放的次数，infinite无限执行
animation-direction：是否应该轮流反向播放动画
- normal 默认值从 from 向 to运行每次都是这样
- reverse 从 to 向 from 运行每次都是这样
- alternate 从 from 向 to运行重复执行动画时反向执行
- alternate-reverse 从 to 向 from运行重复执行动画时反向执行
animation-fill-mode：设置动画填充模式，规定动画在播放之前或之后，其动画效果是否可见
- none：默认值动画执行完毕元素回到原来位置
- forwards：动画执行完毕元素会停止在动画结束的位置
- backwards：动画延时等待时，元素就会处于开始位置
- both：结合了forwards 和 backwards
animation-play-state：设置动画的执行状态
- running 默认值动画执行
- paused 动画暂停

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;}.box1{width: 800px;height: 800px;background-color: silver;overflow: hidden;}.box1 div{width: 100px;height: 100px;margin-bottom: 100px;margin-left: 10px;}.box2{background-color: #bfa;/* 设置box2的动画 *//* animation-name: 要对当前元素生效的关键帧的名字 *//* animation-name: test; *//* animation-duration: 动画的执行时间 *//* animation-duration: 4s; *//* 动画的延时 *//* animation-delay: 2s; *//* animation-timing-function: ease-in-out; *//* animation-iteration-count 动画执行的次数 可选值：次数infinite 无限执行*//* animation-iteration-count: 1; *//*animation-direction指定动画运行的方向可选值：normal 默认值  从 from 向 to运行 每次都是这样 reverse 从 to 向 from 运行 每次都是这样 alternate 从 from 向 to运行 重复执行动画时反向执行alternate-reverse 从 to 向 from运行 重复执行动画时反向执行*//* animation-direction: alternate-reverse; *//* animation-play-state: 设置动画的执行状态 可选值：running 默认值 动画执行paused 动画暂停*//* animation-play-state: paused; *//* animation-fill-mode: 动画的填充模式可选值：none 默认值 动画执行完毕元素回到原来位置forwards 动画执行完毕元素会停止在动画结束的位置backwards 动画延时等待时，元素就会处于开始位置both 结合了forwards 和 backwards*//* animation-fill-mode: both; */animation: test 2s 2 1s alternate;}.box1:hover div{animation-play-state: paused;}/* 动画动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发动态效果设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤*/@keyframes test {/* from表示动画的开始位置 也可以使用 0% */from{margin-left: 0;background-color: orange;} /* to动画的结束位置 也可以使用100%*/to{background-color: red;margin-left: 700px;}}</style></head>
<body><div class="box1"><div class="box2"></div><!-- <div class="box3"></div> --></div></body>
</html>

十三、变形

变形就是指通过CSS来改变元素的形状或位置变形不会影响到页面的布局,不会脱离文档流
transform 用来设置元素的变形效果
新的转换属性transform：向元素应用 2D 或 3D 转换

1. 2D转换

transform: rotate(xxdeg); 旋转单位是deg 如果是正值则顺时针旋转如果是负值则逆时针旋转
transform: scale(倍数);如果小于1则缩小如果大于1则放大如果设置两个值则表示x轴方向方向分别进行缩放
transform: skew(斜切角度) 单位deg 如果为1个值表示水平斜切第二个值自动补0，如果为两个值分别代表x轴和y轴方向的斜切
transform: translate(移动距离); 第一个值是水平方向平移位置为正则靠右为负则靠左。第二个值是垂直方向平移的位置为正则靠下

位移：

translate(x, y)：沿着 X 和 Y 轴移动元素。
translateX(n)：沿着 X 轴移动元素。
translateY(n)：沿着 Y 轴移动元素。
div {
transform: translate(50px,100px);
}

旋转：rotate(angle)

div {
transform: rotate(60deg); // 备注：取值为角度
}

缩放：

scale(x,y)：宽、高缩放
scaleX(n)
scaleY(n)
备注：取值为倍数关系，缩小大于0小于1，放大设置大于1

倾斜：

skew(x-angle,y-angle): 沿X、Y轴倾斜方向
skewX(angle)
skewY(angle)

2. 3D转换

perspective: 800px; 透视距离
transform-style: preserve-3d;：将平面图形转换为立体图形
位移：

tranform: translate3d(x,y,z);
transform: translateX() translateY() translateZ();

旋转：

transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);

缩放：

tranform: scale3d(x,y,z);
transform: scaleX(0.5) scaleY(1) scaleZ(1);

旋转立方体案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画之旋转立方体</title><style>*{margin: 0;padding: 0;}body{perspective: 2000px;}.box{width: 100px;height: 100px;margin: 50px auto;position: relative;transform-style: preserve-3d;animation: rotate 10s infinite linear;}.box>div{width: 100px;height: 100px;position: absolute;text-align: center;line-height: 100px;background-color: rgba(102, 102, 102, 0.2);font-weight: bold;font-size: 40px;color: rgb(76, 80, 82);}div.front{transform: translateZ(50px);color: red;}.back{transform: rotateY(180deg) translateZ(50px);}.left{transform: rotateY(90deg) translateZ(50px);}.right{transform: rotateY(-90deg) translateZ(50px);}.top{transform: rotateX(90deg) translateZ(50px);}.bottom{transform: rotateX(-90deg) translateZ(50px);}@keyframes rotate{0%{transform: rotateX(0) rotateZ(0);}100%{transform: rotateX(360deg) rotateZ(360deg) translateZ(150px);}}</style>
</head>
<body><div class="box"><div class="front">1</div><div class="back">2</div><div class="left">3</div><div class="right">4</div><div class="top">5</div><div class="bottom">6</div></div>
</body>
</html>

十四、弹性布局（flex）

传统的布局方式对于特殊的布局非常不方便，比如垂直居中。Flex是2009年W3C提出的新方案–Flex布局，可以简便、完整、响应式地实现各种页面布局。

1. 容器属性

☞ 设置父元素为伸缩盒子【直接父元素】

display: flex;

注：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
用于容器上的属性：

flex-direction
flex-wrap
justify-content
align-items
align-content
flex-flow

2. flex-direction

☞ 设置伸缩盒子主轴方向

flex-direction: row; // 默认值，主轴为水平方向，起点在左侧
flex-direction: row-reverse; // 主轴为水平方向，起点在右侧
flex-direction: column; // 主轴为垂直方向，起点在上沿
flex-direction: column-reverse; // 主轴为垂直方向，起点在下沿

3. flex-wrap

☞ 设置元素是否换行显示

在伸缩盒子中所有的元素默认都会在一条线上显示
可选值：

nowrap：默认，不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

4. justify-content

☞ 设置元素在主轴的对齐方式

justify-content: flex-start; // 左对齐
justify-content: flex-end; // 右对齐
justify-content: center; // 居中
justify-content: space-between; // 两端对齐，项目之间的间隔相等
justify-content: space-around; // 每个项目两侧之间的间隔相等

5. align-items

☞ 设置元素在侧轴的对齐方式

align-items: flex-start; // 交叉轴的起点对齐。
align-items: flex-end; // 交叉轴的终点对齐。
align-items: center; // 交叉轴的中点对齐。
align-items: stretch; //（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。
align-items: baseline; // 项目的第一行文字的基线对齐。

6. flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: row wrap;

十五、怪异盒子

默认情况下，盒子可见框大小由内容区，内边距和边框共同决定的

1.box-sizing

box-sizing 用来设置盒子尺寸的计算方式（设置width 和height的作用）
- content-box 默认值，宽度和高度用来设置内容区大小
- border-box 宽度和高度用来设置整个盒子可见框大小,设置盒子为怪异盒子模型 padding不会撑开容器
  - width和height 指的是内容区、内边距和边框的总大小

十六、媒体查询

1.使用媒体查询

        语法： @media 查询规则{}媒体类型：all 所有设备print 打印设备screen 带屏幕的设备speech 屏幕阅读器- 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系可以在媒体类型前添加一个only，表示只有。only的使用主要是为了兼容一些老版本浏览器

2. 媒体特性

width 视口的宽度
height 视口的高度
min-width 视口的最小宽度（视口大于指定宽度时生效）
max-width 视口的最大宽度（视口小于指定宽度时生效）
样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化
一般比较常用的断点

     小于768 超小屏幕 max-width=768px大于768 小屏幕   min-width=768px大于992 中型屏幕 min-width=992px大于1200 大屏幕  min-width=1200px

HTML5+CSS3超全笔记，收藏起来方便随时查看相关推荐

腾讯、阿里、百度高工都点头称赞的“Redis 实战超全笔记”，不看你就亏大发了
写在开头如何系统,全面,的学习redis呢? 我的一个程序员朋友,在之前有面试 Java 开发工程师岗位时,居然大部分的面试问题都是关于 Redis 的,他都差点都忘记了自己应聘的是 Java 工程 ...
20个HTML5/CSS3超酷应用
http://www.gbtags.com/gb/share/2818.htm?utm_source=tuicool 20个HTML5/CSS3超酷应用 #文章 CSS3 HTML5 jQuery 申 ...
HTML5+CSS3 非常全的笔记
文章目录 HTML5 vsco的使用常用标签图像标签超链接标签锚点链接特殊字符表格标签列表标签表单标签实战(注册页面) CSS3 书写规范 css选择器基础选择器标签选择器类选 ...
CSS超全笔记（适合新手入门）
CSS CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等 ...
h5(html5),css3入门学习笔记
萌新入门,做听课笔记,学的是黑马程序员pink老师的视频,可以去b站搜目录 HTML 一.语法规范二.基本结构标签(骨架标签) 三.vscode工具生成骨架标签新增代码(一定要写): 四.常用标签 ...
20个HTML5/CSS3超酷应用(附免积分下载地址)
免积分下载地址:http://download.csdn.net/detail/yangwei19680827/6956667 1.HTML5视频破碎重组特效强大视觉冲击 HTML5视频播放器很多, ...
html 一条线两种颜色,HTML5/CSS3超酷进度条不同进度多种颜色
本文作者html5tricks,转载请注明出处这是一款线条状的下面我们来看看实现这款进度条的过程和源码,代码主要由HTML.CSS以及jQuery组成,实现过程也相对比较简单. HTML代码: 0 ...
3天怒肝5万字！阿里P7大佬手写MySQL超全笔记，还担心学不会吗？
下面对于MySQL进行相关介绍,文档的内容较为基础,针对刚开始学习的同学,仅仅涉及操作,少量原理,大佬请绕道哦.因字数太多,会分为两篇发放. 一.MySQL架构介绍 1-MySQL简介概述 MySQ ...
正则表达式超全笔记！！这一篇就够了！！
欢迎各位大神批评指点!!!! 正则表达式 1. 什么是正则表达式(规则表达式) 1.1 正则是一种规则 1.2 正则是一种字符串 1.3 校验.检索.替换等那些符合某个模式(规则)的文本设想: 想要 ...

HTML5+CSS3超全笔记，收藏起来方便随时查看