1. { CSS } 培训
- Part 1&2 -

2. Box Model
盒模型

3. 盒模型（框模型）
• Margin 外边距
• Border 边框
• Padding 内边距
• Content 内容
不可替换的行内元素(?)没有margin-top和margin-bottom

4. 外边距折叠
• Collapsing margins，即外边距折叠，指的
是毗邻的两个或多个外边距 (margin) 会合
并成一个外边距。
• 毗邻，可以归结为以下两点：
– 这两个或多个外边距没有被非空内容、padding、
border 或 clear 分隔开。
– 这些 margin 都处于普通流(?)中。

5. 示例
<style>
#outer{ margin-top: 50px }
#inner{ margin-top: 100px }
</style>
<div id="outer">
<div id="inner"></div>
</div>
两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠

6. 示例
<style>
#inner{
margin-top: 100px;
margin-bottom: 50px;
}
</style>
<div id="outer">
<div id="inner"></div>
</div>
元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

7. HasLayout and Block formatting context
HasLayout与BFC

8. 什么是BFC？
• BFC的全名是Block formatting context，中文叫做块格式化上
下文。
• 块格式化上下文是一个比较抽象的概念。可以把它想象成一个
大箱子，很多元素装在里面，箱子把它们和外面的元素隔开。
• 块格式化上下文是个重要的概念，它对宽高的计算，外边距折
叠，定位等都有一定的影响。

9. 什么是HasLayout？
• “Layout”是Internet Explorer的私有概念，它决定了一个元素如
何显示以及约束其包含的内容、如何与其他元素交互和建立联
系等。
• 一个元素得到“Layout “ ，或者说一个元素”HasLayout”，是指
它的微软专有属性 hasLayout 被设为了 true 。
• ”无Layout元素”是指 hasLayout 未被触发的元素，比如div 和
span元素就是默认没有”Layout”的元素。

10. HasLayout与BFC的触发条件
HasLayout Blocke formatting context
display: inline-block float: (除 none 外任何值)
height: (除 auto 外任何值) overflow: (除 visible 外任何值) √
width: (除 auto 外任何值) display: table-cell | table-caption |
inline-block
float: (left 或 right)
position: (除 relative 和 static 外任何值)
position: absolute
zoom: (除 normal 外任意值) √

11. HasLayout与BFC的特性
• 可以包含浮动元素（清除浮动） Demo
<style>
#outer{ border: 2px solid blue }
#inner{ float: left; background: red }
</style>
<div id="outer">
<div id="inner">Float Box</div>
</div>
在触发hasLayout的元素和创建了Block formatting context的元素中，浮
动元素也参与高度计算。

12. HasLayout与BFC的特性
• 可以防止元素被浮动元素覆盖 Demo
<style>
#float{ float: left; border: 2px solid blue }
#right{ border: 2px solid blue; background: green }
</style>
<div id="bigbox">
<div id="float">Float Box</div>
<div id="right"><p>something…</p></div>
</div>

13. HasLayout与BFC的特性
• 可以阻止外边距折叠 Demo
<style>
#outer{ margin-top: 50px; background: blue }
#inner{ margin: 100px 10px; background: red }
</style>
<div id="outer">
<div id="inner"></div>
</div>
在触发hasLayout的元素和创建了Block formatting context的元素中，不
会和子元素产生margin折叠。

14. 示例
<ul>
<li> a.pic
<a class="pic"> #header
div.content
<img src="avatar.png" />
</a>
<div class="content">
a.pic
<a class="name">{id}</a>
#header
div.content
<p>{something…}</p>
</div>
</li> …
<li>…</li>
<li>…</li> Demo
</ul>

15. Element
元素（分类）

16. 替换元素和不可替换元素
• 替换元素 (replaced element )
– 就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
– 例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来；
又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮
等。
– <img>、<input>、<textarea>、<select>、<object>是替换元素。
• 不可替换元素 (non-replaced element)
– 即其内容直接表现给用户端（即浏览器），大多数元素都是不可替换元
素。
– 例如：<p>段落的内容</p>。
– 段落<p>是一个不可替换元素，文字“段落的内容”全被显示。

17. 块级元素和行内元素
• p, div, h1~h6, blockquote, pre……
display:block 块级元素 （占据整行空间）
• span, code, a, input, img……
display:inline 行内(内联)元素 （可与其他内
联元素并排显示）

18. display: inline-block
将对象呈递为内联对象，但是对象的内容作为块
对象呈递。
#nav div {
display : inline-block;
*display: inline;
*zoom : 1; /*触发hasLayout*/
}
Demo

19. 元素嵌套规则
• 块级元素可以嵌套行内元素和部分块级元
素
• 除A以外的行内元素不能嵌套块级元素
• P，H1~H6不能嵌套块级元素
http://www.cs.tut.fi/~jkorpela/html/strict.html

20. CSS Selector
选择器

21. 属性选择器
E[attr=val]
input[type="text"] {
…
}
input[type="submit"]{
…
}
Demo

22. 属性选择器
E[attr=val] /* 完全匹配 */
E[attr~=val] /* 空格分割的匹配 */
E[attr^=val] /* 开头匹配 */
E[attr$=val] /* 结尾匹配 */
E[attr*=val] /* 部分匹配 */
→_→ IE6均不支持 Demo

23. 伪类选择器
E:link
E:visited
E:hover
E:active
E:focus
E:first-child /* IE6 不支持 */

24. 伪元素选择器
E:first-line /* 匹配E元素的第一行 */
E:first-letter /* 匹配E元素的第一个字 */
E:before /* 在E元素之前插入的元素 */
E:after /* 在E元素之后插入的元素 */
→_→ IE6/IE7均不支持
Demo

25. 选择器的优先级
选择器 STYLE ID CLASS ELEMENT 优先级
* 0 0 0 0 0
p 0 0 0 1 1
p.right 0 0 1 1 11
div p.right 0 0 1 2 12
#entry p.right 0 1 1 1 111
style=“” 1 0 0 0 1000
!important声明高于一切，不推荐使用。

26. 效率(从高到低)
1. ID（#id）
2. Class（.class）
3. 标签（div）
4. 组合选择器（h1+p、 ul>li 、li a）
5. 通配符选择器（*）
6. 属性选择器/伪类（[type=“text”]、:hover）

27. 示例
<style>
.b{color:blue}
.a{color:red}
</style>
<p class="a b">CSS PPT</p>
class的顺序不会影响到的权重

28. 示例
<style>
p{color:blue!important}
span{color:red}
</style>
<p><span>CSS PPT</span></p>
继承是不计分的

29. CSS HACK
样式补丁

30. CSS Hack
div {
color : black;
color : red9; /* all ie */
color : orange0; /* ie8+ */
+color: green; /* ie6/7 */
_color: blue; /* ie6 */
}
Demo

31. Background Position
背景图片定位

32. 示例1
div {
width: 100px;
height: 100px;
background: url(9.png) no-repeat;
}

33. 示例2
div {
width: 100px;
height: 100px;
background: url(9.png) no-repeat;
background-position: 100px 100px;
}

34. 示例3
div {
width: 200px;
height: 200px;
background: url(9.png) no-repeat;
background-position: 0 100%;
}

35. 示例4
div {
width: 300px;
height: 300px;
background: url(9.png) no-repeat;
background-position: -200px;
}

36. 200
100
200 100 0 -100 -200 -300
0
1 2 3
-100
4 5 6
-200
7 8 9
-300
Demo

37. CSS Sprite
CSS精灵

38. CSS图像拼合技术
• 优点
– 减少HTTP请求，降低服务器负担
– 文件体积更小 1+1<2
– 减少等待时间
• 缺点
– 开发/维护成本高

39. 示例

42. Layout
布局

43. 圣杯布局
<div id="header"></div>
#header
<div id="container">
<div id="main"></div> #left #main #right
<div id="left"></div>
<div id="right"></div>
#footer
</div>
Demo
<div id="footer"></div>
使用技术：float、negative margin、relative position

44. 双飞翼布局
<div id="header"></div>
#header
<div id="container">
<div id="main"> #left #main>#content #right
<div id="content"></div>
</div>
#footer
<div id="left"></div>
<div id="right"></div>
Demo
</div>
<div id="footer"></div>
使用技术：float、negative margin

45. IE6 BUG
IE6常见BUG

46. Double Margin Bug
<div id="bigbox">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div>
.box{ float:left; width:100px; height:100px; background:#000 }
.a { margin-left: 20px }
.b { margin-left: 150px }
.c { margin-left: 150px }
Demo

47. Double Margin Bug
如果：一个块级元素向左/右浮动，且其设置的左/右边距大于其至容器的左侧内边界的距离
那么：该元素实际的左边距 = 设置的左边距 * 2 - 左边界至容器的距离，
否则：该元素实际的左边距 = 设置的左边距
.box{ float:left; width:100px; height:100px; background:#000 }
.a { margin-left: 20px }
.b { margin-left: 150px }
.c { margin-left: 150px }

48. 3px Bug
<style>
#bigbox { background:red; width:300px }
.box1 { background:olive; height:50px; float:left }
.box2 { background:yellow; height:50px }
</style>
<div id="bigbox">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
Demo

49. 示例
<style>
li { background:#333; width:200px }
li span { float:left }
.title { background:olive }
.date { background:yellow }
</style>
<ul>
<li>
<span class="title">TITLE</span>
<span class="date">DATE</span>
</li>
<li>…</li>
<li>…</li>
Demo
</ul>

50. 3px Bug
• 出现条件：
– 当浮动元素与hasLayout的非浮动元素相邻时，这
个3像素的Bug就会出现，它会偏移3像素。
• 解决方法：
– 为非浮动元素设置浮动
{ float: right }
– 为浮动元素设置-3px的外边距
{ _margin-left: -3px }

51. Peekaboo Bug
• 出现条件：
– 一个浮动元素后跟着一些非浮动元素，然后是一个清理元素，
所有这些元素都包含在一个设置了背景颜色或图像的你元素
中。如果清理元素砬到了浮动元素，那么中间的非浮动元素
看起来消失了。
Demo

52. #floatholder
Peekaboo Bug #float <something>
• 解决方法： Clearing div
1. 防止Clearing div碰到浮动元素，或者避免在
#floatholder上使用背景。
2. 为#floatholder和#float设置相对定位。
3. 触发#floatholder的hasLayout属性。

53. THANKS!
By 小影@c7sky.com