<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
/*(Eric Meyer’s CSS 清零代码)清零代码*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
<!--
CSS 盒子模型负责处理以下事情:
一个 blcok （区块）级对象占据多大的空间
该对象的边界，留白 //margin; padding
盒子的尺寸 //width; height; border
盒子与页面其它元素的相对位置 //float; position; inline
-->
<!--
CSS 盒子模型有以下准则:
Block （区块）对象都是矩形 （事实上所有对象都如此）
其尺寸由 width, height, padding, borders, 以及 margins 决定
如果不设置高度，该盒子的高度将自动适应其包含的内容，加上留白等（除非使用了 float）;
如果不设置宽度，一个非 float 型盒子水平上将充满其父容器（扣除父容器的留白）
-->
<div style="float:left;background:#666">
111
//进行float的元素的宽度收缩了
</div>
<div style="float:left;background:#333;100%;">
222
//就把这个元素的width设置100%
</div>
<div style="float:left;background:#333;100%;margin:10px;">
3333
//元素的width设置100%,又去设置margin或者padding的话，会破其父容器出现滚动条哦
</div>
<div style="clear:both">clear</div>
<div>
222
</div>
<div style="margin-bottom:100px;">
mb_100px;
</div>
<div style="margin-top:100px;">
出现了margin合并
mt_100px;
</div>
<div>
block: 1:下个元素会折行；2:宽度为100%
<br>
inline: 1:跟随上一个元素； 2:不存在宽和高; 3:受到排版的影响；可以用verticalalign进行居中；
4：增加float属性就会变成block元素了; 5: white-space, font-size, letter-spacing
</div>
<div>
以下是使用 float 和 clear 属性的一些重要准则:
一个 float 对象，将从其置身的 block 级非 float 内容流中跳出，换句话说，如果你要将一个 box 向左边 float，它后面的 block 级非 float 对象会显示到下方，inline 级内容会在旁边包围
要让一段内容从一侧包围一个 float 对象，这段内容必须要么是 inline 级的，要么也设置为相同方向的 float
一个 float 对象，如果没有设置宽度，则会自动缩成其包含的内容的宽度，因此最好为 float 对象明确设置宽度
如果一个 block 对象包含 float 子对象，会出现本文中阐述的问题。
一个设置了 clear 属性的对象，将不会包围其前面的 float 对象
一个既设置了 clear 又设置了 float 属性的对象，只有 clear:left 属性生效，clear:right 不起作用
</div>
<div>
IE 浏览器最常见的问题:<br>
IE6 中不可滥用 float，否则会带来内容消失以及文字重复等稀奇古怪的问题<br>
IE6 中，float 对象，在 float 方向的那边，会出现双倍 margin，将 display 设置为 inline 会解决这个问题<br>
IE6/7 中，一个没有直接或间接设置 hasLayout 的对象，会发生各种稀奇古怪的问题 （译者注：对这类问题，zoom 这个 css 属性可以帮很大的忙，将 zoom 设置为除了 normal 之外的其它值，可以迫使一个对象 hasLayout 同时不影响这个对象的任何视觉外观）<br>
IE6 不支持 min-width, max-width, min-height, max-height 一类的属性<br>
IE6 不支持固定位置背景图<br>
IE6/7 不支持很多 display 属性值（如 inline-table, table-cell, table-row）<br>
IE6 中，只有 a 这个对象才可以使用 :hover 这个伪类<br>
IE 的某些版本对某些 CSS 选择器支持很少（如属性选择器，子对象选择器）<br>
IE6~8 对 CSS3 的支持很有限 (不过有一些变通方法)<br>
IE6--7中的padding是包含在宽里面，不符合W3C标准
</div>
//50个值得收藏的实用CSS代码片段
//http://www.open-open.com/news/view/b6f3e5
</body>
</html>