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

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

　　1、注意外边距折叠

　　与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。例如：

　　HTML

　　CSS.square {

　　width: 80px;

　　height: 80px;

　　}

　　.red {

　　background-color: #F44336;

　　margin-bottom: 40px;

　　}

　　.blue {

　　background-color: #2196F3;

　　margin-top: 30px;

　　}

　　2、使用flex进行布局

　　flex弹性布局的出现是有原因的。浮动和inline-block虽然也能实现很多的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。flex可以很容易的按照我们预期的方式创建布局。

　　flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性，一旦你学会了它们，做任何响应式布局都是小菜一碟。目前各类浏览器的较新版本对flex的支持性也是没有任何问题的，所以你应该多多使用flex布局。

　　.container {

　　display: flex;

　　}

　　3、所有元素设置为Border-box

　　大多数初学者都不知道box-sizing这个属性，但实际上它非常重要。box-sizing属性有两个值：content-box（默认） - 当我们设置一个元素的宽度或高度时，就是设置它的内容的大小。所有的padding和边框值都不包含。例如，一个div的宽度设置为100，padding为10，于是这个元素将占用120像素（100+2*10）。

　　border-box - padding与边框包含在元素的宽度或高度中，一个设置为width: 100px和box-sizing:

　　border-box的div元素，他的总宽度就是100px，无论它的内边距和边框有多少。

　　将所有元素都设置为border-box，可以更轻松的改变元素的大小，而不必担心padding或者border值会将元素撑开变形或者换行显示。