HTML5+CSS3

五大浏览器

谷歌 Chrome Webkit / Blink -webkit-

苹果 Safari Webkit -webkit-

火狐 Firefox Gecko -moz-

微软 IE Trident(Jscript / TypeScript ) -ms-

欧朋 Opera Presto / Webkit -o-

四大内核：Webkit Gecko Presto Trident

基础选择器的优先级

排序的原则：选择范围越大，优先级越低

浏览器的默认样式 < 通配符（0） < 元素选择器（1） < class选择器（10） < id选择器（100） < 行间式 < !important

外边距的问题

• 外边距塌陷（父子关系塌陷）
  • 现象：给子标签设置上外边距时，会和父盒子的外边距合并，最终会表现为其中较大的那个值
  • 原因：父子盒子共用了一个上外边距区域
• 解决方案：
  • 给父元素设置边框线或者是内边距（增加父元素的高度）
  • 给父元素设置overflow:hidden属性，触发BFC规则,把父元素渲染成一个独立的区域
• 外边距塌陷（兄弟关系塌陷）
  • 现象：上一个盒子的下外边距与下一个盒子的上外边距合并，最终会表现为其中较大的那个值
  • 原因：上下两个兄弟关系的盒子共用了一个外边距区域
• 解决方案：
  • 给每个盒子各套一个父盒子，给父盒子添加overflow:hidden属性；
  • 给其中的某一个盒子设置外边距

基础选择器：通配符选择器 元素选择器 类选择器 id选择器

css三大特性

1. 层叠性

• • 多种css样式的叠加，可以通过多个选择器在同一个元素上添加多个css样式
    • 样式不冲突，属性是叠加，不层叠
    • 样式冲突，遵循【就近原则】

1. 继承性

• • 是指在书写css样式时，子标签会继承父标签的某些样式
    • font-类开头(font-size/ font-style / font-weight / font-family)
    • line-开头（line-height）
    • text-类开头(text-align / text-decoration / text-indent ) color
    • list- 开头
  • 恰当的使用继承，可以降低css的复杂性

1. 优先级

• • 定义css样式时，经常会出现两个或更多样式规则应用在同一个标签上，这时就会出现优先级的问题。一般来说，选择器的权值越大，样式的优先级越高
  • /* 选择器           权值 通配符选择器       0 元素选择器         1 类选择器         10 id选择器         100 行内样式         1000*/
    • 继承样式的权值 0
    • 行内样式优先
    • css定义了一个!important命令，具有最大优先级
    • 权值相同的时候，css遵循【就近原则】
  • 复合选择器的权值计算
    • 基础选择器的权值的和

1. 浮动的问题

• • 当子元素设置了浮动属性之后，会脱离标准流，导致父元素的高度塌陷（高度为0），影响后续布局。

1. 解决浮动的问题

• • 给父元素设置固定高度（不灵活）
  • 给父元素添加overflow:hidden;属性(除了visible值以外，其他的overflow的值都可以实现) (防止内容溢出)
  • 在最后一个浮动标签的后面添加一个【空的】【块级】元素，这个标签本身不浮动，并且添加一个属性clear:both;清除浮动（对固定结构标签不友好，代码会冗余）
  • 推荐的一个方法:给浮动的父元素使用【伪元素】【创建】一个空的【标签】
    • 我们把伪元素创建的标签清除浮动，写成一个公共的类，哪个标签需要，就添加给某个标签

定位的使用技巧

• 定位+margin负间距
  • 必须要知道盒子的宽和高
  • 然后设置盒子绝对位置
  • 距离页面窗口左边设置50%；上边设置50%；
  • 最后通过margin左移和上移使整个盒子居中，左移和上移盒子本身宽度和高度的负一半值

BFC（块级格式上下文 Block Formatting Context）

• 什么是bfc
  • FC（Formatting Context）：指页面中一个渲染区域，并且拥有一套渲染规则，决定其子元素的排列方式以及与其他标签的关系和作用
  • BFC（Block Formatting Context）:块级格式上下文，指一个独立的块级渲染区域，只有Block-level Box参与，该区域有渲染规则来约束块级盒子的布局，且与区域外无关。

• 怎么生成BFC
  • 根目录
  • float的值不为none
  • position的值是absolute或者是fixed
  • display的值为inline-block
  • overflow的属性值不为visible的时候
• BFC的特性
  • 内部的标签会在垂直方向上一个接一个的放置
  • 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的margin会发生重叠
  • 每个标签的左外边距与包含块的左边界相接触(从左到右)，即使浮动也是如此
  • BFC的区域不会与float的标签区域重叠
  • 计算BFC高度时，浮动的子标签也要参与计算
  • BFC就是页面上一个独立的容器，容器里面的子元素不会影响到外面的标签，外面的标签也不会影响到容器里面的标签
• BFC解决的问题
  • 清除浮动:计算BFC高度时，浮动子标签也参与计算
  • 外边距折叠：垂直方向上的距离由margin决定
  • 防止字体环绕
  • 自适应两栏或三栏布局

HTML5新增的特性

• 智能表单
• 绘图画布
• 多媒体
• 地理定位
• 数据存储
• 多线程

CSS3新增了哪些模块

• 选择器
• 框模型 、 背景和边框、文本效果、2D\3D转换、动画、多列布局、用户界面

过渡动画与关键帧动画的区别

1. 触发条件(过渡动画需要触发条件：鼠标悬停，js的事件；关键帧动画不需要触发条件)
2. 动画的播放次数（过渡动画需要触发才能执行一次；关键帧动画可以限定次数或无数次）
3. 复杂的动画可以使用关键帧动画，过渡动画是用来做简单的动画（一步到位）