提高CSS技术技巧

前言

在今天的文章中，我将要聊聊我在一年半的实践中，总结出来的css经验。

首先让我提醒你，css是极其简单的一门语言，简单到可以用三个词概括：选择器，属性以及属性的值。这也是一些人不喜欢css的原因：他们觉得写css像孩子玩乐高玩具一样简单。

是这样的。。如果你给一个9岁的孩子介绍css的基本原理，他就会搭建一个网站。不过这个网站不会很复杂，也就是一些包含头部，链接，内容图片的页面而已。

事实上，css是一门简单的语言，并不意味着每个人的水平一样。有些人写起css来就跟个大猩猩在玩棍子，有些人可以掌握css,而有些人可以使用魔法般的使用css。

不管怎样，我还是要给你分享一些我这几个月来理解的东西，这并不是一些代码片段或者是css小技巧，而更像是一些通用的规则或者是最佳实践之类的东西。

你想说什么呢？你准备好了？那我们继续往下吧。

1.不要让你的代码脱离你的掌控，尽量简洁

别让你的代码脱离你的掌控

这是编程的一种通用建议，不仅仅适合css. 当你开始写代码的时候，先思考，思考以下几个问题：

我怎样实现？

有其他方法实现么？

怎样优化（简洁，可维护，等等）？

急于编码会浪费时间，你有可能花了一个小时也没实现，不得不从头再来，这不应该发生。

如果你花了好几个小时写一个css幻灯片，最终没办法用了个js幻灯片插件或者别的，这是很蛋疼的，并不是说你没成功，而是无谓的浪费了很多时间。如果项目有deadline的话，你就要悲剧了。

保持他的简单性

Css很简单，但如果你想，同样可以变得很复杂。在很多场景里，最简单的即是最好的。当你要实现什么效果的时候，问问自己：还有更简单的方法实现么？ 答案经常是肯定的。

举个例子，简单水平导航栏，你可以有多种方法实现：

列表元素浮动；

改变列表元素display属性为inline；

改变列表元素display属性为inline-block。

最简单的-设置display:inline，不需要清除浮动，不需要清除inline-block造成的空白，只需要一些padding即可，结束。

2. 掌握基础，学习CSS技巧

不仅是掌握css,掌握任何东西都要从基础做起。一个对最基本的东西都理解不透彻的人是不可能成为大师的。

CSS基础

什么是css基础呢？你可能会听到不同的声音，这也是一种无法用言语表达的东西。但我认为，css的基础是以下两部分：

盒模型：每个元素在css中都是一个盒子模型(块级或者内联)，包含宽高及各种padding margin border.这是最重要的,详细可以阅读这里。

权重:了解哪个属性权重最高，在调试css中非常重要。更多相关信息可以阅读Assigning property values, Cascading, and Inheritance一文。

CSS技巧

当你了解了以上原理，才算踏上了康庄大道。那么现在你可能会处理一些特殊情况，下面展示了一些：

忘了在父元素设置position