这部分是html细节知识的学习。
边框、填充、对齐和浮动
这部分将主要介绍使用CSS控制整个Web页面的各个方面，通常来说，会使用margin（外部）和padding（内部性增加元素周围的空间，使用align和float设置元素的相对位置。对于margin来说，可以使用margin-top/right/bottom/left设置，记住顺序为顺时针，同时注意在设置百分比边距时，一定记住是相对的百分比，比如外部容器为页面的25%，那么内部的margin:25%其实是这25%的25%。此外，如果有两个带边框的元素彼此堆叠在一起，但他们之间没有边距，那么它们接触的位置似乎有双边框，可以同时将这两个边框减半，达到美观的效果。
常见的对齐包括text-align水平对齐，vertical-align垂直对齐，前者可以设置为left,right,center,justify两端对齐，后者可以设置为top元素的顶部与当前行对齐，middle元素中部与父元素中部对齐,bottom,text-top将元素的顶部与其父元素的顶部对齐,baseline,text-bottom。对于float来说，一定要注意窗口的大小，当宽度不足时，会造成块元素的换行，对原有样式产生较大影响。此外，不要注意当需要去除浮动的影响时，可以使用clear属性，包括left,right,both,none和inherit，指定clear:left确保左边不允许出现其他的浮动元素。
方框模型和定位
HTML中的每个元素被视为一个方框，在考虑元素的真正高度和宽度时，就必须把方框模型的所有元素都考虑在内，通过下图对方框模型有个形象的了解。
因此元素的总高度实际上是width + padding-left + padding-right + border-left + border-right + margin-left + margin-right，在实际项目中，一定不要忘了设置默认的边距属性，因为不同浏览器会有差异。
相对定位是HTML使用的默认定位类型position:relative，可以把其当做跳棋的布置，从左到右排列，达到边缘就移到下一行，而另外一种是绝对定位position:absolute，允许设置HTML内容在页面上的精准位置（仍然会相对于父元素，绝对与子元素之间），此外，可以使用Z-index来管理元素的层叠位置,值大的位于值小的上面。
接下来讨论元素周围的内容流，首先得一个概念是当前行，其表示一个用于在页面上放置元素的不可见的行，这一行涉及页面上的元素留，当在页面的水平和垂直方向上一个接一个的排列元素时，它就可以派上用场。通常可以通过float，clear,overflow在控制文本流，overflow用于当元素太小时，控制文本的溢出，当元素的长宽设置过小时，可以通过设置visible自动扩大元素，hidden允许溢出的文本隐藏，scroll可以给元素增加滚动条。
Tip:验证样式表，http://jigsaw.w3.org/css-validator/
固定布局和流式布局
一个非常有名的博客平台WordPress(wordpress.org/themes),有空的时候非常推荐看看，对于nodejs来说,ghost是一个不错的开源应用。对于大部分的web站点来说，一般会使用固定布局、流动布局或响应式布局，尤其针对现在的多终端环境来说，合理的折中是固定/流动混合布局，或者响应式的布局。在设置时，可以使用min-width（不包括填充、边框和边距）来保证流动式布局至少可以达到最基本的显示效果。在2010年，设计师Ethan Marcotte创造了术语响应式web设计，主要涉及一个媒体查询的概念，一个简单的示例如下。
<link rel="stylesheet" type="text/css" media="screen and (max-device-480px)" href="xxx.css">
Tip:em(字母m的宽度)的使用，用于弹性布局，不过该方式构建web页面将非常麻烦，此外在页面中，经常可以使用-1000em等方式，隐藏元素。
CSS列表处理：在列表中，可以通过list-style-position来设置指示符的位置，inside表示指示符位于<li>标签中，outside（默认值）则相反，而将list-style设置为none可以保证列表项前不会上放置任何图标。
CSS设计导航系统：不同于简单的项目符号或编号列表，导航元素一般会需要如下特性：用户鼠标光标会改变，以指示元素是可单击的；当鼠标悬停在元素上时，元素周围的区域会改变外观；内容区域在视觉上显得与普通文本不同。比如相对于页面中的链接元素，nav中的链接元素可以使用text-decoration:none属性来去除蓝色下划线，为了表示出样式的不同，可以使用伪类选择器nav li a:link, nav li a:visited和nav li a:hover, nav li a:active两组。此外，如果需要实现水平导航，可以将ul和li的display属性设置为inline，还可以设置line-height的高度。
使用鼠标修改文本显示：这部分首先介绍一个工具提示的例子，如下所示，同时可以使用类似方式利用CSS显示额外的翻转文本，而通常更为常见的通过不同的事件触发显示不同样式的例子这儿就不一一介绍了。
1 <head> 2 <meta charset="utf-8"> 3 <title>实现hit, tooltip效果</title> 4 <style type="text/css"> 5 a{ 6 text-decoration: none; 7 font-weight: bold; 8 } 9 a.tip{ 10 position: relative; 11 z-index: 24; 12 } 13 a.tip:hover{ 14 z-index: 25; 15 } 16 a.tip span{ 17 display: none; 18 } 19 a.tip:hover span{ 20 font-weight: normal; 21 font-style: italic; 22 display: block; 23 position: absolute; 24 top: 20px; 25 left: 25px; 26 width: 150px; 27 padding-left: 3px; 28 border:1px solid #000; 29 background-color: #ddd; 30 color: #000; 31 } 32 </style> 33 </head> 34 <body> 35 <a href="http://www.ctrip.com" class="tip">Ctrip<span>一个不错的公司</span></a> 36 </body>
在介绍CSS3变形transformation,渐变transition和动画animation之前，需要了解浏览器的差异，比如chrome和safari使用-webkit，firefox使用-moz，微软使用-ms,Opera使用-o前缀，这是基于不同浏览器内核决定的。对于2D图形，可以使用transform:translate(x,y)平移元素，使用rotate(45deg)旋转元素，使用scale(.5)缩放元素，skewX(45deg)扭曲元素。
对于3D图像来说，需要在2D图形的基础上增加Z轴深度，通常通过透视图perspective来绘制图形，提供从特定点(vanishing point没影点)查看它们彼此之间的高度、宽度和深度。使用方式为perspective:500px, transform-style:preserve-3d,rotate(180deg), translateZ(75px)。CSS的渐变可以通过transition:transform 5s ease-in 1s;
而对于动画来说，有一个关键的概念，即关键帧，@keyframes spin{ from {} to {}}, animation:spin 5s infinite linear，看到这不经想到还是jQuery方便。
该部分内容比较复杂，在之后使用到时再回顾学习。
参考资料：
-
梅洛尼. HTML与CSS入门经典(第9版) [M]. 北京:人民邮电出版社, 2014.