工作总结

作为一个前端人员，有点感慨要发表。

以下均为个人见地，有错误欢迎指出

1、首先要说一下html，body，要给app页面总体添加背景图的话，一般不加给这两个元素，而是在body体内新建一个wrap，根据页面的高度设置其高度，这个元素的宽度一般为100%，对于background属性，一般可以定义background：#f00 url(img/img1.jpg) no-repeat 0 0;background-size:100% 100%;

1.1、说道这里不得不说background-size的用法，background-size：contain；contain表示缩小图片以适应父容器的大小；background-size：cover；表示拉伸图片以适应父容器的大小，background-size：100px 100px；表示重新定义背景图的大小；而background-size：100% 100%；表示按照百分比重定义背景图

2、说一下box-sizing属性：

这个属性，个人觉得是很有用的，我个人用的最多的就是box-sizing：border-box属性；

首先要知道这个属性有三个属性值：content-box（默认值）、border-box,padding-box;

content-box值，这个元素有个这个属性后，他的border和padding都不计入元素宽度值，会在元素原有宽度高度的基础上外加上border值，padding值；

padding-box属性，这个属性没怎么用过，表示只有padding才会计入元素宽度和高度范围之内

border-box属性，表示border和padding都会计入元素宽度和高度范围之内，也就是元素的宽度和高度是固定不变的，只是缩小其内部的宽、高度

其次，这个box-sizing属性也有兼容问题：一般写的时候要写上：

-moz-box-sizing:border-box;

-ms-box-sizing:border-box;

-o-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box; 

其实现在大多数移动设备的内核都是webkit，一般写上box-sizing：border-box；-webkit-box-sizing:border-box;就行了，但是免不了其他奇葩内核的手机，就会出现问题，还是加上比较好，我就遇见过，哈哈

3、说一下display：flex；

flex是个非常好用的属性，有时真的可以完全代替float和position属性。

display：flex；是把容器变成弹性盒模式，他的兼容写法：

.box{

　　display:-webkit-box;/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

　　display:-moz-box;/* 老版本语法 ：Firefox */

　　display:-ms-flexbox;/* 混合版本语法：ie10 */

　　display:-webkit-flex;/* 新版本语法： Chrome 21+*/

　　display:flex;/*新版本语法： O怦然12.1，Firefox 22+*/

}

以下是真实的个人经历：

哈哈、、、，写页面的时候不要想太多，能够快速、高效的时候把页面给做出来就好了，最后补充一句，图片最好都要进行压缩哦。这样你的用户体验性才会更好