我的CSS最佳实践✨ Best practice 01)

我觉得前端最令人沮丧的部分😅就是CSS了，同一个Presentation,背后的实现方式可能完全不一样。到底使用哪种方法实现有时候真的很难抉择，所以有必要自己总结出一些Best Practice然后去遵守就行了。当然需要理解这个最佳实践背后的原理，如果照搬别人并不会让你走的很远，我最近学了一些关于Margin Collapse，Responsive Web Design的一些知识，暂时总结出以下的Best Practice:

1. 不要使用margin隔开与父元素的距离，这不是margin的用武之地，这种情况应该使用padding，而且是对父元素设置padding，margin主要用于隔开与兄弟元素间的距离。当然水平方向可以用，margin: 0 auto设置水平还是很方便的，因为水平方向不会发生Margin Collapse
2. 兄弟元素之间只设置一侧的margin,不要让两者的margin进行叠加。
3. 考虑使用max-width，而不是width, max-width可以自己调整宽度，而width不能。

针对以上的三个原则，我设计了一个Demo,正好可以将以上的三个Best Practice都囊括进来。

Demo

当你写完后对窗口进行缩放你就能看到width和max-width的差异了，我在自己电脑上跑了大概是这个样子的👇

这篇好文章是转载于：学新通技术网