传智播客博学谷
-
get最新最全的IT技能
免费领取各种视频资料
在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。
1、注意外边距折叠与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。例如：
HTML
divclass="squarered"/divdivclass="squareblue"/div
CSS
.square{width:80px;height:80px;}.red{background-color:#F;margin-bottom:40px;}.blue{background-color:#F3;margin-top:30px;}
红色方块与蓝色方块的上下间距是40px，而不是70px。解决外边距折叠的方法有很多种，对于初学者来说最简单的就是所有元素只使用一个方向上的margin，比如上下的外边距我们统统使用margin-bottom。
2、使用flex进行布局flex弹性布局的出现是有原因的。浮动和inline-block虽然也能实现很多的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。flex可以很容易的按照我们预期的方式创建布局。
flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性，一旦你学会了它们，做任何响应式布局都是小菜一碟。目前各类浏览器的最新版本对flex的支持性也是没有任何问题的，所以你应该多多使用flex布局。
.container{display:flex;}3、重置元素的CSS样式
尽管这些年来有了很大的改善，但是不同浏览器对于各种元素的默认样式仍然存在很大的差异。解决这个问题的最佳办法是在CSS开头为所有的元素设置通用的CSSReset重置代码，这样你是在没有任何默认内外边距的基础上进行布局，于是所产生的效果也就是统一的。
网络上已经有成熟的CSS代码库为我们解决浏览器不一致问题，例如normalize.css、minireset和ress，你可以在你的项目中引用它们。如果你不想使用第三方代码库，你可以使用下面的样式来进行一个非常基本的CSSreset：
*{margin:0;padding:0;box-sizing:border-box;}
上面的代码看起来有些霸道，将所有元素的内外边距都设置为0了，而正是没有了这些默认内外边距的影响，使得我们后面的CSS设置会更加的容易。同时box-sizing:border-box也是一个很棒的设置，我们紧接着就会介绍它。
4、所有元素设置为Border-box大多数初学者都不知道box-sizing这个属性，但实际上它非常重要。box-sizing属性有两个值：
content-box（默认）-当我们设置一个元素的宽度或高度时，就是设置它的内容的大小。所有的padding和边框值都不包含。例如，一个div的宽度设置为，padding为10，于是这个元素将占用像素（+2*10）。
border-box-padding与边框包含在元素的宽度或高度中，一个设置为width:px和box-sizing:border-box的div元素，他的总宽度就是px，无论它的内边距和边框有多少。
将所有元素都设置为border-box，可以更轻松的改变元素的大小，而不必担心padding或者border值会将元素撑开变形或者换行显示。
5、将图片作为背景当给页面添加图片时，尤其需要图片是响应式的时候，最好使用background属性来引入图片，而不是img标签。
这看起来使用图片会更复杂，但实际上它会使设置图片的样式变得更加容易。有了background-size,background-position和其它的属性，保持或改变图片原始尺寸和宽高比会更方便。
举个例子：HTML
sectionpImgelement/pimgsrc="