HTML5新特性   IE9+以上才支持

1. 新增的语义化标签  头部<header>  导航栏<nav>  内容<article>  定义文档某个区域<section>  侧边栏<aside>  尾部<footer>
   1. 这种语义化标签主要针对搜索引擎
   2. 可以使用多次
   3. 在IE中,需要把元素转换成块级元素
   4. 移动端更喜欢使用这些标签    移动端兼容性更好
2. 多媒体标签   谷歌浏览器把音频和视频自动播放禁止了
   1. 音频<audio> <audio src="文件地址" control="control" ></audio>

      controls：显示控件
      autoplay：（谷歌禁用）
      loop=loop 设置循环播放

   2. 视频<video>  <video src="文件地址" control="control" ></video>

      autoplay="autoplay"  设置自动播放
      controls="controls" 显示控件
      width 设置宽度
      height 设置高度
      loop=loop 设置循环播放
      preload="auto/none" 是否预加载
      src=url 视频地址
      poster=url 封面图片
      muted=muted 静音播放

3. 新增input类型   type=”email”  “url”  “date”  “time”  “month”  “week”  “number”  “tel”  “search”  “color”
4. 新增表单属性

input::placeholder { //设置input中placeholder的颜色
    color: pink;        
}

CSS3的新特性  兼容性问题   IE9+才支持   移动端支持优于PC端

新增选择器      类选择器  属性选择器  伪类选择器  权重值为10

1. 属性选择器
   

   语法	作用
   E[att]	选择具有att属性的E元素
   E[att=”val”]	选择具有att属性值=”val”的元素
   E[att^=”val”]	选择具有att属性以val开头的元素
   E[att$=”val”]	选择具有att属性以val结尾的元素
   E[att*=”val”]	选择具有att属性包含val的元素

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	指定类型E第n个

   n可以是数字  关键词   公式(带n的公式,不能含有其他)    nth-child(n)    选择所有孩子   n从0开始

   ul li:first-child  ul里第一个是li的孩子
   ul :first-child    ul的第一个孩子
   li:first-child   li父元素下的第一个li
   section div:nth-child(1)   先选择第一个子元素后再看是否为div
   section div:nth-of-type(n)    先选择div后选择第n个

3. 伪元素选择器  可以利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML    ::before  在元素内部的前面插入内容   ::after 在元素内部的后面插入内容
   before 和after会创建一个元素,属于行内元素  在文档树中找不到   before和after中必须有content属性  为元素选择器和标签选择器一样 权重为1

CSS3盒子模型   border-box

通过 box-sizing来指定盒子模型   content-box  border-box

1. box-sizing: content-box; 盒子大小为 width + padding + border(默认的)
2. box-sizing: border-box;  盒子大小为width                  padding和borer不会撑大盒子(前提 padding 和 border 不会超过width宽度)

CSS3其他属性

CSS3滤镜  filter: 属性;   模糊 颜色偏移   filter: 函数();     filter: blur(5px);   数值越大越模糊

CSS3 calc函数    执行一些计算   width: calc(100% – 30px);   父盒子宽度-30px

CSS3过渡(重点)    经常和:hover  一起使用   口诀:谁做过渡给谁加

transition:  要过渡的属性(如果多个可以写all)  花费时间  运动曲线(ease默认)  何时开始 ;

广义HTML5    =   HTML5本身  +  CSS3   +   Javascript

模块化开发   common.css   版心宽度   清除浮动  页面文字颜色等公共模式

网站favicon图标  引入  <link  rel=”shortuct icon”  href=”ico图标地址”/>

网站TDK三大标签SEO优化              SEO 搜索引擎优化    TDK:  title(网站标题  网站名 – 网站介绍)   description(网站说明)  keyword(关键词)

CSS3 2D转换   位移 旋转 缩放  transform

移动  translate

transform: tanslate(x,y); //或分开书写
transform: tanslateX(n);
transform: tanslateY(n);

重点

1. 2D转换中的移动,沿XY轴移动元素
2. 最大优点,不会影响到其他元素的位置
3. translate 中的百分比是相对于自身元素的
4. 对行内标签没有效果

可以通过translate来实现盒子的垂直居中(配合定位使用) transform: translate(50%,50%);百分比是相对于自身元素的

旋转 ratate        transform: rotate(度数);     rotate可以来实现小三角^

重点

1. rotate里面跟度数,单位是deg 如 rotate(45deg);
2. 角度为正时:顺时针  负时,为逆时针
3. 默认旋转的中心点是元素的中心点

2D旋转中心点  transform-orign: x y;    旋转和缩放的中心点设置

重点

1. 注意后面的参数x和y间空格隔开
2. x y默认转换中心点是元素的中心点(50% 50%)
3. 还可以把x y设置像素或者方位名词(top bottom left right center)

缩放 scale   transform: scale(x,y);

重点

1. 其中x,y用逗号隔开
2. 里面写数字,不跟单位.表示倍数  1为1倍
3. 只写一个,表示等比例缩放  transform: scale(2);
4. scale 不会影响其他盒子,可以设置中心点 默认在元素的中心点

2D转换综合写法:

1. 同时使用多个转换 其格式为 transform: translate() rotate() scale()  等
2. 其顺序会影响转换的效果 (先旋转会改变坐标轴方向)
3. 当我们同时有位移和其他属性时,记得把位移放在最前面

动画 animation   先定义动画(使用keyframes)    再使用(调用)动画  

@keyframes 动画名称{
    0%{                //初始状态
        width:100px;
    }
    100%{            //结束状态
        width:200px;
    }
}

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

动画序列 可以改变动画任意多的样式,任意多的次数 用百分比来规定时间 或用from(0%)  to(100%)

0% 25% 50% 75% 100%

1. 可以做多个状态变化  keyframe关键帧
2. 百分比必须是整数
3. 百分比就是对总的时间来划分

动画简写属性:    animation: 动画名称  持续时间  运动曲线  何时开始  播放次数  是否反方向 动画起始式或结束的状态

1. 动画名称和持续时间必须写
2. 简写中不包含 animation-play-state   暂停动画经常和鼠标经过等其他配合使用

animation-timing-function  默认是ease

1. linear 匀速   
2. ease  低俗开始，后加快，结束前变慢     
3. ease-in  动画以低速开始 
4.  ease-out  动画以低速结束   
5. ease-in-out  动画以低速开始和结束   
6. steps  指定了时间函数中的间隔数量(步长)  分几步完成动画

CSS3 3D转换   近大远小    物体后面遮挡不可见

1. x轴:水平向右  右正 左负
2. y轴:垂直向下  下正  上负
3. z轴:垂直屏幕  往外为正 往里为负

3D移动  translate3d   

1. transform: translateX();
2. transform: translateY();
3. transform: translateZ();  一般用px单位
4. transform: translate(x,y,z); xyz不能省略,没有就写0

透视 perspective   模拟人眼睛到屏幕的视距    透视写在被观察元素的父盒子上

translateZ

3D旋转 rotate3d

3D旋转让元素在三维平面内沿着x,y,z轴或者自定义轴进行旋转

1. transform: rotatex(45deg);
2. transform: rotatey(45deg);
3. transform: rotatez(45deg);
4. transform: ratateed(x,y,z,deg) x,y,z为旋转轴的矢量

左手准则:

1. 左手的手拇指指向对应轴的正方向
2. 其余手指弯曲方向时该元素沿着该轴旋转的方向(正方向)

3D呈现 transform-style

1. 控制子元素是否开启三维立体环境
2. transform-style: flat; 子元素不开启3d立体空间 默认的
3. transform-style: preserve-3d; 子元素开启立体空间
4. 代码写给父级,但是影响的是子盒子

浏览器私有前缀 为了兼容老版本的写法

1. 私有前缀

   -moz: firefox
   -ms: ie
   -webkit: safari chrome
   -0: Opera

2. 提倡写法

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