目录
网站的可视化设计是一门很深的学问，和平面设计不同，它不是那种Pixel Perfect要求非常精确排版的东东，而是使用一门描述性的语言CSS配合HTML来指导浏览器布局整个页面。
作为一个全栈开发人员，了解并掌握CSS基础是无可避免的，现在有类似Bootstrap这样的框架存在，使得即使不精通CSS的程序员也能做出像模像样的页面，但是不要被这个假象所迷惑，要精通CSS还是要花费大量的时候和精力的。
本文介绍几个CSS最基本的特性，比如盒模型，继承，冲突决议和浮动。
盒模型
HTML提供页面的结构（由一系列的标签构成），在其中放置ID，Class，以便CSS选择器能够找到需要应用样式的标签。从浏览器的角度来看，所有标签都是一个盒子（BOX），它有Margin，Padding，Border和Content。而标签主要分为两种，块级（Block）标签（典型代表DIV），和行级（inline）标签（典型代表SPAN）。
继承
CSS一个特点是子标签能够自动继承祖先标签的某些属性，比如字体，颜色什么。这能够帮助你简化你的CSS规则。
冲突决议
冲突决议解决这样一个问题，当有多条CSS规则应用到同一个标签上面的时候，如果规则内的内容有冲突，最后到底应用哪一条规则的问题。总体原则是“特例优先原则”。比如有一个class选择器和id选择器同时应用到一个标签，id选择器的内容会优先被选择。
浮动
默认情况下，所有块级标签都是从上到下排列，所有行级标签都是从左到右排列，浮动通过把标签移动到容器的左边和右边来实现更为复杂的布局，比如多列布局。
Bootstrap
如果说AngularJS把我带入了JavaScript的世界，Bootstrap则把我带入了CSS的世界。Bootstrap提供一个网格结构和标准控件样式，以及多个常用的JavaScript组件，你会发现你一行CSS代码没有写过的情况下，已经能够做出一个看上去像模像样的页面了。初期的惊喜过后，通过阅读Bootstrap的代码，你可以掌握目前最为前沿的CSS技术以及设计模式，我认为每一个想要精通CSS的朋友都应该好好的研究Bootstrap的源代码。
结束语
不知不觉这个系列的文章已经写了四篇了，本来还计划写一些关于Node.js的，现在想来目前自己这方面的功力和经验还不够，这个就作为2014年的功课留到年底再做了。
简而言之，我十分看好Node.js在企业中应用前景，2013已经有沃尔玛和PayPal这样的公司大范围的使用了，让我们期待2014年吧。
网友评论