在css中盒模型被分为两种，一种是w3c标准模型，另一种是IE传统模型。它们的相同之处就是对元素计算尺寸的模型。它们的不同之处就是计算方法不一样。
CSS3中box-sizing属性
content-box
默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
border-box
重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。
CSS中的动画
Animation:name duration timing-function delay iteration-count direction
Animetion-play-state:paused（动画停止）
Animation-fill-mode:forwards;（动画完成停留末尾，不返回原来的位置）
语法：@-webkit-keyframes 动画名 {0{}100%{}}
背景的透明度
Opacity:0-1;
标准浏览器的写法，内容字体跟着一起有透明度。
Background:rgba(255,2,2,.3) 标准浏览器拥有的，但是元素内容不跟着一起透明。
在ie8一下 透明度的写法 filter:alpha(opacity=30);
CSS3动画性能的问题
在做CSS3动画的时候，如果使用 gpu 渲染图形，可以减少 cpu 的消耗，提高程序的性能。
当我们使用动画改变图片的left值时候，通常会使用margin-left的属性，但是margin-left属性的时候会触发页面的重 绘和重排。当我们使用css3新属性transform 来代替传统的 margin-left 来改变元素位置的时候，不会触发任何的重绘。而且会触发 gpu 来帮助页面的排版。
移动布局
1.移动设备 手机 和ipad
安卓系统 ios系统
安卓系统 内置浏览器是谷歌 ios内置 safari浏览器 他们的内核都是webkit，不考虑兼容性，需要考虑的是安卓和ios的区别。
2.布局
设备宽度 设备的实际大小 设备的分辨率 厂家给的
页面的大小 设计稿上的大小
浏览器的视口 浏览器自带的用document.documentElement.clientWidth查看，在移动设备上如果不做视口处理一般默认是980
弹性布局
1.分两部分 弹性父级 弹性子元素
2.给父级设置display:flex或inline-flex
Flex-direction 指定弹性盒子中子元素的排列方式
Display属性 flex 指定父元素为弹性盒模型 display:flex;
内部元素按行排列，变成了行级块元素
Flex属性 设置弹性盒的子元素如何分配空间 属性值是数字
flex:1;
Flex-direction 指定弹性盒中的子元素的排列方式
流失布局
百分百布局
Rem布局
Rem是单位，由根节点的字体大小来决定。Html就是根节点
1rem=html中font-size的大小
响应式布局
在不同的设备上，页面的布局是不一样的，这种布局方式就是响应式布局由媒体查询实现的。@media
@media 可以定义视口 可以定义宽高 可以定义dpr 可以定义设备朝向
语法 @media mediatype(设备类型) and (property属性) {
Css样式
}
设备类型 scroll 屏幕设备 all 代表所有
Property：width device-pixel-ratio
