编写现代CSS代码的20个建议

不建议直接改变元素的width与height属性或者left/top/bottom/right这些属性来达到动画效不雅，而应当优先应用transform()属性来供给更腻滑的变换效不雅，并且能使得代码的可读性会更好:

明白何谓Margin Collapse

不合于其他很多属性，盒模型中垂直偏向上的Margin会在相遇时产生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大年夜值会被保存下来，可以大年夜下面这个简单的例子来进修:

.square {    
    width: 80px;    
    height: 80px;    
}    
 
.red {    
    background-color: #F44336;    
    margin-bottom: 40px;    
}    
 
.blue {    
    background-color: #2196F3;    
    margin-top: 30px;    
}

在上述例子中我们会发明，红色和蓝色方块的外边距并没有相加获得70px，而是只有红色的下外边距保存了下来。我们可以应用一些办法来避免这种行动，不过建议来说照样尽量同一应用margin-bottom属性，如许就显得调和多了。

应用Flexbox进行构造

CSS拭魅战之Flex详解以及其在微信中的兼容实现

在传统的构造中我们习惯应用Floats或者inline-blocks，不过它们更合适于格局化文档，而不是全部网站。而Flexbox则是专门的用于进行构造的对象。Flexbox模型许可开辟者应用很多便捷可扩大的属性来进行构造，估计你一旦用上就舍不得了:

.container {    
    display: flex;    
    /* Don't forget to add prefixes for Safari */display: -webkit-flex;    
}

我们已经在Tutorialzine上供给了很多的关于Flexbox的介绍与小技能，譬如5 Flexbox Techniques You Need to Know About。

应用CSS Reset

固然这些年来跟着浏览器的敏捷成长与规范的同一，浏览器特点碎片化的情况有所改良，然则在不合的浏览器之间仍然存在着很多的行动差别。而解决这种问题的最好的办法就是应用某个CSS Reset来为所有的元素设置同一的样式，包管你能在相对同一干净的样式表的基本上开端工作。今朝风行的Reset库有 normalize.css, minireset以及 ress ，它们都可以修改很多已知的浏览器之间的差别性。而如不雅你不计算用某个外在的看维那么建议可以应用如下的根本规矩:

* {    
    margin: 0;    
    padding: 0;    
    box-sizing: border-box;    
}

膳绫擎的规矩看起来没啥用，不过如不雅不合的浏览器在默认情况下为你设置了不合的外边距/内边距的默认值，照样会挺麻烦的。

一切应为Border-box

固然很多初学者并不懂得box-sizing这个属性，然则它确切相当的重要。而最好的懂得它的方法就是看看它的两种取值:

默认值为content-box，即当我们设置某个元素的heght/width属性时，仅仅会感化于其内容尺寸。而所有的内边距与边都是在其之上的累加，譬如某个<div>标签设置为宽100，内边距为10，那么最终元素会占用120(100 + 2*10)的像素。
border-box:内边距与边是包含在了width/height之内，譬如设置了width:100px的<div>无论其内边距或者边长设置为若干，颇┞芳有的大年夜小都是100px。

将元素设置为border-box会很便利你进行样式构造，如许的话你就可以在父元素设置高宽限制而不担心子元素的内边距或者边打破了这种限制。

以背景图方法应用Images

如不雅须要在响应式的情况下展示图片，有个简单的小技能就是应用该图片作为某个<div>的背景图而不是直接应用img标签。基于这种方法合营上background-size与background-position这两个属性，可以很便利地按比例缩放:

img {    
    width: 300px;    
    height: 200px;    	
			 1/4    1 2 3 4 下一页 尾页	
			

　　推荐阅读
　　别说自己懂手机 还玩Root的才是发烧友
            
            如今，你买一部安卓手机，你还会Root吗?如今，你拥有一部可以逃狱的iPhone，你还会逃狱吗?曾几时，当我们拿到新智妙手机之后，都邑第一时光选择Root(逃狱)，然则如今我们可能不会那么做了>>>详细阅读


本文标题：编写现代CSS代码的20个建议
地址：http://www.17bianji.com/lsqh/36968.html
 1/2    1