HTML5和CSS3总结
知识点罗列
1.HTML5新标签
2.HTML5兼容性
3.CSS3过渡
4.CSS3的2D转换
5.CSS3的3D转换
6.CSS3弹性flex
7.CSS3多列布局
8.CSS3动画
9.CSS3多媒体查询
10.CSS3选择器
总结
1.HTML5的新标签
（1）新元素
标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
（2）新多媒体元素
定义音频内容
定义视频（video 或者 movie）
和
定义嵌入的内容，比如插件。
为诸如 元素之类的媒介规定外部文本轨道。
（3）新表单元素
定义选项列表。
定义不同类型的输出，比如脚本的输出。
（4）新的语义和结构元素
定义页面独立的内容区域。类似于div
定义页面的侧边栏内容。类似于div
允许您设置一段文本，使其脱离其父元素的文本方向设置。
行级，类似于span
定义对话框，比如提示框
定义 section 或 document 的页脚。类似于div
定义带有记号的文本。默认是黄色
定义导航链接的部分。
定义任何类型的任务的进度。
定义 ruby 注释（中文注音或字符）。
定义字符（中文注音或字符）的解释或发音。
在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
定义文档中的节（section、区段）。类似于div。
定义日期或时间。
（5）dl,dt,dd,自定义列表
书写格式
- 信息
- 内容1
- 内容2
- 内容3
或者：
- 信息
- 内容1
- 内容2
- 内容3
结果运行显示：
- 信息
- 内容1
- 内容2
- 内容3
2.HTML5兼容性
（1）利用兼容性语法：
-- 强制兼容处理--
"X-UA-Compatible" content="IE=edge,chrome=1">
（2）浏览器中属性识别
background-color: #2bf156; /*所有识别*/
+ background-color : red; /*IE6、7识别*/
_background-color: #1e0bd1; /*IE6识别*/
background-color: pink \9; /*6,7,8,9识别*/
（3）
css3 样式在ie9 以下不兼容 用css3pipe 来处理兼容性
behavior: url(pie文件地址)： 处理css3 在 IE8 或者 IE7上的兼容性。
3.CSS3过渡
属性：
transition 简写属性，复写四个属性。
transition-property 过渡的 CSS 属性的名称。
transition-duration 过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果方式。默认是 “ease”。
属性值：ease-in 、 ease-in-out 、 ease-out、 linear、 ease
transition-delay 过渡延迟。默认是 0。
注：
在默认样式中写过渡样式。写过渡样式，一定要有过渡样式的默认样式。默认样式：border-radius:0;
4.CSS中的2D转换
（1）2D样式：
①translate(平移)：
默认为x轴。
transform:
translatex(20px);沿x轴平移。
translatey(20px);沿y轴平移。
translatez(20px);沿z轴平移。
②rotate(旋转)：
默认z轴。
transform:
rotatex(20deg);沿x轴旋转20度。
rotatey(20deg);沿y轴旋转20度。
rotatez(20deg);沿z轴旋转20度。
③scale(伸缩)：
两个值分别为宽和高。
transform:scale(1,2);即宽不变，高变为原来2倍高度。
transform:scale( );一个值时宽高伸缩一样比例。
④skew(变形)：
两个值，分别为x水平倾斜和y水平倾斜。
transform:skew(45deg,0deg),即x水平倾斜45度。
⑤matrix（6个值复写属性）
tansform: matrix(0.866,1,1,0.866,0,0);
后两个是平移，第二个第三个 scale，第一个第四个 skew ，cos 角度
（2）transform-orgin属性
旋转中心点
transform-orgin：0% 0%；左上角
transform-orgin：100% 100%；右下角
transform-orgin：50% ；正中心
（3）transform复合写
transform：translatex(20px) rotatey(20deg) scale(0.5 );
**注：**旋转和平移的前后顺序影响最终结果。
5.CSS中的3D转换
构建3维空间：
transform-style: preserve-3d;
设置透视点：
perspective:100px;
6.CSS3弹性flex
（1）flex-direction 属性
①flex-direction 属性指定了弹性子元素在父容器中的位置。
②语法：
flex-direction: row | row-reverse | column | column-reverse
③属性值：
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
④使用：
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}
其余属性值类似。
（2）justify-content 属性
①justify-content 属性：
内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
②justify-content 语法：
justify-content: flex-start | flex-end | center | space-between | space-around
③属性值：
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
结果显示：
④使用：
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}
其余属性值类似。
（3）align-self属性
①align-self 属性：
用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
②语法：
align-self: auto | flex-start | flex-end | center | baseline | stretch
③属性值：
auto：
如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
④使用：
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self: baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
}
7.CSS3多列布局
（1）属性
①column-count ：
指定元素应该被分割的列数。
②column-fill：
指定如何填充列
③column-gap：
指定列与列之间的间隙
④column-rule：
所有 column-rule-* 属性的简写
⑤column-rule-color：
指定两列间边框的颜色
⑥column-rule-style：
指定两列间边框的样式
⑦column-rule-width：
指定两列间边框的厚度
⑧column-span：
指定元素要跨越多少列
⑨column-width：
指定列的宽度
⑩columns：
设置 column-width 和 column-count 的简写
（2）用法：
column-count用法：
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
其余属性类似。
column-span和column-width
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
8.CSS3动画
（1）概念
①动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
②使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
如：改变背景移动位置
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
（2）属性
①@keyframes:
规定动画。
②animation :
所有动画属性的简写属性，除了 animation-play-state 属性。
③animation-name:
规定 @keyframes 动画的名称。
④animation-duration:
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
⑤animation-timing-function:
规定动画的速度曲线。默认是 “ease”。
⑥animation-fill-mode:
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
⑦animation-delay:
规定动画何时开始。默认是 0。
⑧animation-iteration-count:
规定动画被播放的次数。默认是 1。
⑨animation-direction:
规定动画是否在下一周期逆向地播放。默认是 “normal”。
⑩animation-play-state:
规定动画是否正在运行或暂停。默认是 “running”。
（3）使用：
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari 与 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
9.CSS3多媒体查询
（1）CSS3多媒体查询：做屏幕响应式，PC或移动端均可以。
（2）使用：
@media all{ }
all所有设备
screen 屏幕设备 电脑 ipaid 手机
print 打印设备
not print 不包含打印设备
注：
不加限制条件 所有的屏幕 共有的样式
@media screen and (min-width: 320px) {
.box{
width: 310px;
}
}
注：
写min-width： 从小到大写
写max-width ： 从大到小写
10.CSS3选择器
（1）element1~element2
p~ul
即：选择p元素之后的每一个ul元素
（2）[attribute^=value]
a[src^=“https”]
即：选择每一个src属性的值以"https"开头的元素
（3）[attribute$=value]
a[src$=".pdf"]
即：选择每一个src属性的值以".pdf"结尾的元素
（4）[attribute*=value]
a[src*=“runoob”]
即：选择每一个src属性的值包含子字符串"runoob"的元素
（5）:first-of-type
p:first-of-type
即：选择每个p元素是其父级的第一个p元素
（6）:last-of-type p:last-of-type
即：选择每个p元素是其父级的最后一个p元素
（7）:only-of-type
p:only-of-type
即：选择每个p元素是其父级的唯一p元素
（8）:only-child
p:only-child
即：选择每个p元素是其父级的唯一子元素
（9）:nth-child(n)
p:nth-child(2)
即：选择每个p元素是其父级的第二个子元素
（10）:nth-last-child(n)
p:nth-last-child(2)
即：选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
（11）:nth-of-type(n)
p:nth-of-type(2)
即：选择每个p元素是其父级的第二个p元素
（12）:nth-last-of-type(n)
p:nth-last-of-type(2)
即：选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
（13）:last-child
p:last-child
即:选择每个p元素是其父级的最后一个子级。
（14）:root
即：选择文档的根元素
（15）:empty
p:empty
即：选择每个没有任何子级的p元素（包括文本节点）
（16）:target
#news:target
即：选择当前活动的#news元素（包含该锚名称的点击的URL）
（17）:checked
input:checked
即：选择每个选中的输入元素
（18）:not(selector)
:not§
即：选择每个并非p元素的元素
（19）::selection
即：匹配元素中被用户选中或处于高亮状态的部分
（20）:valid
即：用于匹配输入值为合法的元素
（21）:invalid
即：用于匹配输入值为非法的元素