Html5+CSS3复习

HTML5新特性

1、布局标签

、

、

、

、

、

语义化标签主要是针对搜索引擎的；

IE9中，需要把这些元素转换为块级元素

2、多媒体标签

（1）

• 属性：autoplay、controls
• 兼容解决：

（2）

• 属性：autoplay、muted(静音)、controls(播放控件)、loop(循环)、preload(预加载)、poster(加载等待的画面图片)

• 兼容解决：

谷歌把音视频的自动播放给禁用了

3、新增表单

（1）新增类型

email、url、date、time、month、week、number、tel、search、color

（2）新增属性

required、placeholder、autofocus、autocomplete(默认开启输入历史)、multiple

（3）修改placeholder里面的字体颜色

input::placeholder {
  color: #ccc;
}

CSS3新特性

1、新增选择器

（1）属性选择器

E[att]	选择具有att属性的E元素
E[att=val]	选择具有att属性且属性值等于val的E元素
E[att^=val]	匹配具有att属性且值以val开头的E元素
E[att$=val]	匹配具有att属性且值以val结尾的E元素
E[att*=val]	匹配具有att属性且值中含有val的E元素

（2）结构伪类选择器

E:first-child	匹配父元素的第一个字元素E
E:last-child	匹配父元素的最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E(多种元素类型)
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

E:nth-child(n)

• n可以是数字，关键字，公式
• n如果是数字，就是选择第n个元素，n从1开始
• n可以是关键字：even偶数，odd奇数
• n可以是公式：只能是n(如果n是公式的话，则从0开始计算，第0个或者超出元素个数的会被忽略，即选中所有符合条件的标签)
• 常用公式：2n、2n+1、5n、n+5(从第5个开始)、-n+5(前5个，包含第5个)

（3）伪元素选择器（利用CSS创建新标签元素，不需要HTML标签）

E::before	在元素E内部的前面插入内容
E::after	在元素E内部的后面插入内容

• 会创建元素，但是文档树中找不到；必须具有content属性；权重为1

• 使用场景：

  配合字体图标做表单的下拉三角

  视频播放的遮罩层

  清除浮动

  /* 1.额外标签法（在浮动元素的最后添加一个块级盒子，添加clear:both;）*/
  /* 2.父级添加overflow属性 */
  /* 3.父级添加after伪元素 */
  .clearfix:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
  }
  /* 4.父级添加双伪元素 */
  .clearfix:after,
  .clearfix:before {
      content: "";
      display: table; /* 在一行显示 */
  }
  .clearfix:after {
      clear: both;
  }
  

2、盒子模型

box-sizing: border-box(padding和border不会撑大盒子)|content-box(默认);

3、图片变模糊——CSS滤镜

filter: blur(5px)    /* blur越大，图片越模糊 */

4、calc()函数

width: calc(100% - 30px)    /* 比父盒子小30像素 */

5、过渡

{
transition: 过渡的属性 花费时间 运动曲线 何时开始;  /* 后面2个可省略 */
/* 改变多个属性用,分割 */
transition: 属性1 时间1, 属性2 时间2;
/* 每个属性都过渡 */
transition: all 事件;
}

谁做过渡给谁加

6、2D转换(坐标：x朝右，y朝下)

• translate(移动)：不会影响其它盒子；百分比是相对于自身的；对行内标签没有效果

{
transform: translate(x, y)
transform: translateX(x)
transform: translateY(y)
}

• rotate(旋转)：顺时针或逆时针

{
/* transform: rotate(度数) */
transform: rotate(45deg)  /* 顺时针旋转45度 */
}

• transform-origin：设置元素转换的中心点

{
/* x y默认转换的中心点是元素的中心点（50% 50%） */
transform-origin: x y;

/* 还可以给x y设置像素或者方位名词（top bottom left right center） */
transform-origin: left bottom; /* 左下角 */
transform-origin: 50px 50px;
}

• scale(缩放)：transform: scale(x, y)

{
transform: scale(1, 1) /* 宽高都放大1倍，没有放大 */
transform: scale(2, 2) /* 宽高都放大了2倍 */
transform: scale(2) /* x:2——y:2 */
transform: scale(0.5, 0.5) /* 缩小 */
/* scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其它盒子 */
}

• 综合写法

{
/*
transform: translate() rotate() scale()...
顺序会影响转换的效果（先旋转会改变坐标方向）  
同时有位移和其它属性时，位移放在最前面
*/
}

7、CSS3动画（先定义再使用）

（1）先用@keyframes定义动画（类似定义类选择器）

/* 0%/100%即动画序列，设置时可以使用百分比，也可以使用from/to，等同于百分比 */
@keyframes 动画名称 {
  0% {
    /* 初始样式 */
  }
  ……
  100% {
    /* 完结样式 */
  }
}

（2）再在要使用的元素的样式中进行调用

{
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间
}

（3）CSS3动画的常见属性

{
/* 规定动画 */
@keyframes
/* 动画名称 */
animation-name
/* 动画总时长 */
animation-duration
/* 规定动画运动曲线（默认-ease 匀速-linear） */
animation-timing-function
/* 延时 */
animation-delay
/* 重复次数 infinite 无限次 */
animation-iteration-count
/* 是否逆向播放（默认-normal  反向-alternate） */
animation-direction
/* 规定动画是否正在运行或暂停（默认-running  暂停-paused） */
animation-play-state
/* 结束返回起始状态（默认返回-backwards  停止结束状态-forwards） */
animation-fill-mode
/* 简写（前两个属性必填） */
animation: 动画名称 持续时间 运动曲线 开始时间 播放次数 是否反方向 起始结束状态;
}

（4）animation-timing-function速度曲线

{
linear          匀速
ease            低速开始，加快，结束前变慢
ease-in         动画以低速开始
ease-out        动画以低速结束
ease-in-out     动画以低速开始和结束
steps(n)        制定了时间函数中的间隔数量（步长）
}

8、3D转换（x-向右 y-向下 z-向外）

（1）3D移动：translate3d（3d中的x，y，z都不能省略）

{
transform: translateX(x)
transform: translateY(y)
transform: translateZ(z)  /* z一般用px单位 */
trsnaform: translate3d(x, y, z)
}

（2）perspective透视/视距（单位是像素）

透视写在被观察元素的父元素上 perspective: 100px;

（3）3D旋转：rotate3d——左手准则（x, y, y表示的是矢量）

{
transform: rotateX(deg)
transform: rotateY(deg)
transform: rotateZ(deg)
trsnaform: rotate3d(x, y, z, deg)
}

（4）3D呈现：transform-style

{
/* (默认)父元素设置控制字子元素是否开启3d空间 */
transform-style: flat;
/* 父元素设置子元素开启3d空间 */
transform-style: preserve-3d;
}

9、旋转木马案例（先旋转后移动）

（1）先将面前的一个在z轴上移动

（2）找到右边第二个盒子，旋转60度，向前移动

（3）依次设置位置，开启3d

（4）设置动画旋转

10、浏览器私有前缀（兼容老版本写法）

（1）私有前缀

• -moz-：代表firefox浏览器私有属性

• -ms-：代表ie浏览器私有属性

• -webkit-：代表safari、chrome私有属性

• -o-：代表Opera私有属性

（2）案例：

{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}