css3和H5

在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