《精通CSS：高级Web标准解决方案》学习笔记（上）

　　鉴于国产CSS书籍基本都是辣鸡的现状，我在半年前动用某工作室的购书资金采购了一些技术书籍，这本广受好评的《精通CSS》也在其中。但是在阅读过后我深深的感觉到，如果说CSS本来已经是一种很琐碎的布局知识集合的话，那这本书只能说是更加琐碎了，因为这只是一本纯纯的经验分享。而且随着前端技术的快速发展，明显能感觉到，这本书里的很多内容已经过时了。所以，虽然我写了笔记，但是仍然强烈不推荐把这本书当作是CSS圣经，而应该作为一本床头读物（不过我相信你不会的，因为它太无聊了）。

　　看完以后我最大的感慨是——果然还是MDN靠谱

　　至于我为什么克服了拖延症来写写读书笔记，因为我退出了工作室，要还书了【doge】

　　此篇笔记根据《精通CSS：高级Web标准解决方案》1~3章内容整理。

——————————————————————————————————

1、命名id和class时，一定要名称与表现方式无关。尽可能与功能或内容相关（语义化思想）

2、id和class名区分大小写

3、div是有语义的，代表部分（division），所以并不需要任何结构都是用div，例如：

<div class="nav">
<ul>
<li><a href="/home">home</a></li>
<li><a href="/about">about</a></li>
<li><a href="/contact">contact</a></li>
<li></li>
</ul>
</div>

　　完全可以写成：

<ul class="nav">
<li><a href="/home">home</a></li>
<li><a href="/about">about</a></li>
<li><a href="/contact">contact</a></li>
<li></li>
</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、相对定位（元素仍位于普通文档流）

#news{
position:relative;
left:20px;    //远离左边20px
top:20px;     //远离上方20px
}

元素仍会占据原来的空间，移动后可能会对其他元素产生覆盖。相对移动的起始位置为原位置。

15、绝对定位（元素与普通文档流无关）

#news{
position:absolute;
left:20px;
top:20px;
z-index:2;
}

因为绝对定位与普通文档流无关，所以不占据空间。普通文档流中的其他元素布局就像绝对定位元素不存在一样。

绝对定位起始位置由距离它最近的已定位的父元素决定。

z-index值越大，元素在栈中位置越高

16、固定定位

position:fixed;

是绝对定位的一种，差异在于其参照物不是document，而是screen

17、浮动

浮动元素不在普通文档流中，所以普通文档流中的其他元素布局就像浮动元素不存在一样。

普通文档流中的文字内容会受浮动元素影响，产生文字围绕浮动元素效果。

18、浮动元素的清理方法

　　①clear:left/right/both;

　　②浮动所有元素

　　③overflow:auto/hidden; 但是某些情况下会产生滚动条或截断。

　　④使用:after伪类（p52）

.clear:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

　　将类名clear添加到要清楚的元素类名中去