20个CSS 代码建议

在这篇文章中，我想跟你分享 20 条由CSS社区推荐的约定和最佳实践。 有些建议可能比较适合新手，而有些则更高级一些，但我希望每个人都可以在本篇文章中收获自己不知道的知识。

1. 谨慎使用外边距属性

与其它的属性不同，垂直方向上的外边距相遇时将会发生折叠。这意味着如果一个元素的下边距遇到了另一个元素的上边距，那么二者中较大的一个将被留下。下面是一个简单的例子。

.square {

width: 80px;

height: 80px;

}

.red {

background-color: #F44336; margin-bottom: 40px;

}

.blue {

background-color: #2196F3; margin-top: 30px;

}

其实上述两个元素在垂直方向上的距离并不是 70px， 而是 40px， 蓝色正方形的margin没有被计算在内。 有很多的方法消除这种默认的行为，但最好的方法是只使用一个方向上的margin属性，比如说margin-bottom。

2. 利用盒子模型布局

盒子模型自然有其存在的理由。float和inline-block当然也可以工作，但它们都是样式化文档的基础工具，而不是整个网站。从某种意义来说，Flexbox是为更容易更精确创建我们想要的布局而设计的。

Flexbox模型提供的一系列属性给了开发者更大的灵活性，而且你一旦熟悉了它们，那创建任何响应式布局都是轻而易举的事。浏览器对Flexbox的支持也已经接近完美，所以已经没有什么理由能够阻止你使用Flexbox了。

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

}

3. 执行 CSS 重置

尽管这些年来情形已经有所好转，但是各浏览器的默认行为还是存在很多分歧。解决这个问题最好的办法就是使用一个CSS重置文件为所有元素重新设置默认样式。这可以让你在一个纯净的样式环境下工作，并且在所有浏览器中产生相同的结果。

有很多的库做这个工作做的非常不错，比如 normalize.css, minireset, 和 ress， 纠正了浏览器间的不一致。如果你不想使用库，你也可以自己制作一个简单的CSS重置，像下面这样。

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

}

这可能看上去比较苛刻，但是消除了默认的margin和padding我们将更容易的摆放我们的元素，而不用担心它会占用额外的空间。box-sizing: border-box是一个很受用的属性，我们将在下面介绍这个属性。

4. 为所有元素使用 Border-box

许多初学者不知道box-sizing属性，但它的确很重要。了解它的最好办法就是看看它的两个可选值。

content-box(default) - 当我们为元素设置了宽度和高度，但那只是内容的尺寸。所有的padding和border都在不包含在内容当中，也就是在内容的外部。举例来说，如果我们有一个div它的宽度为 100px，padding为 10px, 那么它的实际宽度为 120px。

border-box-padding和border被包含在 宽度和高度当中。 如果一个div的宽度为100px，而被设置了box-sizing: border-box， 那么它的宽度将始终是100px， 无论你添加多少padding和border。

为所有元素设置border-box将有利于样式化，而且你在也不用做乏味的数学运算了。

5. 图像作为背景

当你为自己的站点添加图片时，尤其是你想做响应式设计的时候，利用一个div标签并为其设置background属性，而不是使用元素。

似乎额外的工作并没有起到任何作用，但实际上这更利于你对图片设置样式，保持它们原有的尺寸或者根据比例变化，这需要借助background-size，background-size还有一些其它的属性。

Img element

标签：工具