标签：
对我来说，CSS算得上是一个很难的东西。因为它不像JavaScript那么有趣，对记忆的要求太高，而我对浏览器兼容性、各种CSS Hack真的一点都不感冒。琐碎的、非理论化的知识，真的很烦人呐~
鉴于国产CSS书籍基本都是辣鸡的现状，我在半年前动用某工作室的购书资金采购了一些技术书籍，这本广受好评的《精通CSS》也在其中。但是在阅读过后我深深的感觉到，如果说CSS本来已经是一种很琐碎的布局知识集合的话，那这本书只能说是更加琐碎了，因为这只是一本纯纯的经验分享。而且随着前端技术的快速发展，明显能感觉到，这本书里的很多内容已经过时了。所以，虽然我写了笔记，但是仍然强烈不推荐把这本书当作是CSS圣经，而应该作为一本床头读物（不过我相信你不会的，因为它太无聊了）。
看完以后我最大的感慨是——果然还是MDN靠谱
至于我为什么克服了拖延症来写写读书笔记，因为我退出了工作室，要还书了【doge】
此篇笔记根据《精通CSS：高级Web标准解决方案》1~3章内容整理。
——————————————————————————————————
1、命名id和class时，一定要名称与表现方式无关。尽可能与功能或内容相关（语义化思想）
2、id和class名区分大小写
3、div是有语义的，代表部分（division），所以并不需要任何结构都是用div，例如：
1 <div class="nav"> 2 <ul> 3 <li><<a href="/home">home</a></li> 4 <li><<a href="/about">about</a></li> 5 <li><<a href="/contact">contact</a></li> 6 <li></li> 7 </ul> 8 </div>
完全可以写成：
1 <ul class="nav"> 2 <li><<a href="/home">home</a></li> 3 <li><<a href="/about">about</a></li> 4 <li><<a href="/contact">contact</a></li> 5 <li></li> 6 </ul>
4、后代选择器选择一个元素所有后代，子选择器（>）只选择元素的直接后代
5、相邻同胞选择器（+）用于定位同一个父元素下某元素之后的元素
6、导入样式表
@import url("/css/layout.css")
速度慢于链接样式表
<link href="/css/layout.css" rel="stylesheet" type="text/css" />
7、浏览器同时只能从一个域下载有限数量的文件，老式浏览器2个，现代浏览器4-8个（所以这正是我们使用CDN的原因之一）。所以结构良好的单一CSS文件可以显著提高下载速度。
8、改进型的注释。
/* @group news styles
-------------------------------------------------------*/
方便你找到它。
9、盒模型分为两种。W3C标准盒模型和IE奇葩型。
两者的主要区别在于，IE盒模型中的padding是在height和width所划定的区域内的，而W3C标准盒模型中padding是在height和width之外的。
另：background可以影响的部分包括height和width区域，也包括padding
10、盒模型外边距叠加原则：
①外边距高度为两者中较大者
②元素的顶外边距和其父元素顶外边距也会叠加
③无内容的盒子，外边距也会叠加，形成一个矩形
④外边距叠加只发生在普通文档流的块级元素的垂直外边距上，行内元素、浮动元素、绝对定位元素不存在外边距叠加
11、块级元素有p、h1、div、ul等，其余为行内元素
12、行内元素可以由水平padding、border、margin调整水平间距，然而垂直padding、border、margin不影响行内元素高度。行内元素高度总是足以容纳它包含的所有行内元素。修改行内元素高度的唯一方法是修改行高（line-height）
另：单行文字时，可以使用line-height进行垂直居中
13、当display属性为inline-block时，元素会像行内元素一样水平依次排列，然而仍然使用块级元素的盒模型
14、相对定位（元素仍位于普通文档流）
1 #news{ 2 position:relative; 3 left:20px; //远离左边20px 4 top:20px; //远离上方20px 5 }
元素仍会占据原来的空间，移动后可能会对其他元素产生覆盖。相对移动的起始位置为原位置。
15、绝对定位（元素与普通文档流无关）
1 #news{ 2 position:absolute; 3 left:20px; 4 top:20px; 5 z-index:2; 6 }
因为绝对定位与普通文档流无关，所以不占据空间。普通文档流中的其他元素布局就像绝对定位元素不存在一样。
绝对定位起始位置由距离它最近的已定位的父元素决定。
z-index值越大，元素在栈中位置越高
16、固定定位
position:fixed;
是绝对定位的一种，差异在于其参照物不是文档中的元素，而是viewport
17、浮动
浮动元素不在普通文档流中，所以普通文档流中的其他元素布局就像浮动元素不存在一样。
普通文档流中的文字内容会受浮动元素影响，产生文字围绕浮动元素效果。
18、浮动元素的清理方法
①clear:left/right/both;
②浮动所有元素
③overflow:auto/hidden; 但是某些情况下会产生滚动条或截断。
④使用:after伪类（p52）
1 .clear:after{ 2 content:"."; 3 height:0; 4 visibility:hidden; 5 display:block; 6 clear:both; 7 }
将类名clear添加到要清楚的元素类名中去
标签：
原文地址：http://www.cnblogs.com/taoshen/p/4975496.html
