千锋教育-IT职业教育良心品牌。千锋 HTML5 大前端课程颠覆升级：千锋全覆盖企业项目开发前端、中台、后台全流程，真实承接上下游需求，协同协作；项目交叉融合，PC端、移动端、智能终端，各平台功能实现，技能进步看得见；还原企业真实开发场景，从项目立项到部署上线全程参与，不落下每一个开发环节；高验收标准，以真实企业需求要求功能实现，项目无BUG，流畅运行；基础-专业-项目-企业-就业-职后六维全息课程覆盖职场就业与职后发展，助力学员从全栈工程师向架构师进阶，满足不同职业发展需求。

　　为了让大家率的进行工作，本文归纳总结了几个实用的CSS代码技巧，希望对大家能有所帮助。

　　1、重置元素的CSS样式

　　尽管这些年来有了很大的改善，但是不同浏览器对于各种元素的默认样式仍然存在很大的差异。解决这个问题的较佳办法是在CSS开头为所有的元素设置通用的CSS Reset重置代码，这样你是在没有任何默认内外边距的基础上进行布局，于是所产生的效果也就是统一的。

　　网络上已经有成熟的CSS代码库为我们解决浏览器不一致问题，例如normalize.css、minireset和ress，你可以在你的项目中引用它们。如果你不想使用第三方代码库，你可以使用下面的样式来进行一个非常基本的CSS reset：

　　* {

　　margin: 0;

　　padding: 0;

　　box-sizing: border-box;

　　}

　　上面的代码看起来有些霸道，将所有元素的内外边距都设置为0了，而正是没有了这些默认内外边距的影响，使得我们后面的CSS设置会更加的容易。同时box-sizing: border-box也是一个很棒的设置，我们紧接着就会介绍它。

　　2、使用transform属性来创建动画

　　较好使用transform()函数来创建元素的位移或大小动画，尽量不要直接改变元素的width，height以及left/top/bottom/right属性值。

　　下面的例子中，我们给.ball元素添加了一个从左向右的移动动画。推荐使用transform: translateX()函数来代替left属性。

　　.ball {

　　left: 50px;

　　transition: 0.4s ease-out;

　　}

　　/* 不建议 */

　　.ball.slide-out {

　　left: 500px;

　　}

　　/* 建议 */

　　.ball.slide-out {

　　transform: translateX(450px);

　　}

　　transform以及它的所有函数（translate, rotate, scale等）几乎没有浏览器兼容性问题，可以随意使用。