摘要：而名作为标签的身份则是唯一的，在页面中只能出现一次。会导致父容器高度塌陷。堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。之后的内联对象会被排列在同一行内。的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。
书写上的差别：class名用“.”号开头来定义，id名用“#”号开头来定义；
优先级不同（权重不同）
调用上的区别：在同一个html网页页面中class是可以被多次调用的（在不同的地方）。而id名作为标签的身份则是唯一的，id在页面中只能出现一次。在js脚本中经常会用到id来修改一个标签的属性
id作为元素的标签，用于区分不同结构和内容，而class作为一个样式，它可以应用到任何结构和内容上。
在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，然后再为它定义样式：而class相反，它先定义好一类样式，然后再页面中根据需要把类样式应用到不同的元素和内容上面。
在实际应用时，class更多的被应用到文字版块以及页面修饰等方面，而id更多地被用来实现宏伟布局和设计包含块，或包含框的样式。
一般原则：类应该应用于概念上相似的元素，这些元素可以出现在同一页面上的多个位置，而ID应该应用于不同的唯一的元素
Normalize.css保护了有价值的默认值，Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
Normalize.css不会让你的调试工具变的杂乱
Normalize.css是模块化的
Normalize.css拥有详细的文档
选择Normalize.css，主要是reset.css为几乎所有的元素施加默认样式，所以需要对所有公共的排版元素重新设置样式，这是一件很麻烦的工作。
浮动出现的最开始出现的意义是用来让文字环绕图片而已。float可以自动包裹元素。float会导致父容器高度塌陷。float为什么会导致高度塌陷：元素含有浮动属性–>破坏inlinebox–>破坏linebox高度–>没有高度–>塌陷。什么时候会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷。浮动会脱离文档流。产生自己的块级格式化上下文。
首先来看在CSS中叠加上下文形成的原因：
负边距:margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素（如无兄弟元素则为父元素的左内侧/上内侧）,margin-right和margin-bottom的参考线为元素本身的border右侧/border下侧。一般可以利用负边距来就行布局，但没有计算好的话就可能造成元素重叠。堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。
position的relative/absolute/fixed定位:当为元素设置position值为relative/absolute/fixed后，元素发生的偏移可能产生重叠，且z-index属性被激活。z-index值可以控制定位元素在垂直于显示屏方向（Z轴）上的堆叠顺序（stackorder），值大的元素发生重叠时会在值小的元素上面。
z-index属性：z-index只能在position属性值为relative或absolute或fixed的元素上有效。基本原理：z-index值可以控制定位元素在垂直于显示屏方向（Z轴）上的堆叠顺序（stackorder），值大的元素发生重叠时会在值小的元素上面。使用相对性：z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）。向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值，决定其堆叠顺序。同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了，请先检查它们之间的dom结点关系，多半是因为其父结点含有激活并设置了z-index值的position定位元素
BFC:块级格式上下文。定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline-blocks,table-cells,和table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。
display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果；但竖直方向的padding-top,
padding-bottom,margin-top,margin-bottom不会产生边距效果。
display:inline-block就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
备注：属性为inline-block元素之间的空格或者换行在浏览器上会是一个空白的间隙。且IE6和7是不支持这个属性的，需要通过display:inline;zoom:1做hack处理。
添加新的元素、应用clear：both
123.clear{clear:both;height:0;line-height:0;font-size:0}优点：简单，代码少，浏览器支持好，不容易出现怪问题缺点：要增加很多无效布局，但这是清除浮动用的比较多的一种方法。
父级div定义overflow：auto或者hidden
//这里添加了一个class123.over-flow{overflow:auto;zoom:1;//zoom:1;是在处理兼容性问题}原理：必须定义width或zoom:1，同时不能定义height，使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果。优点：简单，代码少，浏览器支持好缺点：使用auto时内部宽高超过父级div时，会出现滚动条，使用hidden时会被隐藏
after方法
123.outer{zoom:1;}/==forIE6/7Maxthon2==/.outer:after{clear:both;content:’.’;display:block;width:0;height:0;visibility:hidden;}其中clear:both;指清除所有浮动；content:‘.’;display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。所以总的来说，推荐使用伪类的办法。
解决方案：
主张向前兼容，不考虑向后兼容，
根据产品的用户群中各大浏览器，来考虑需要兼容的浏览器
把浏览器分两类，一类历史遗留浏览器，一类是现代浏览器，然后根据这个分类开发两个版本的网站，然后自己定义哪些浏览器是历史遗留版本，历史遗留版本浏览器，是用历史遗留界面，通过通告栏告知用户使用现代浏览器，功能更全面，提供好的用户体验
直接在用户的浏览器不能兼容的时候，提示用户至少什么版本的IE和火狐谷歌浏览器才能支持（以上方案都失效）
项目开始前就得需要确认兼容支持的最低按本是什么，设计一个对应的兼容方案
display:none文本图片的隐藏：缺陷：搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字，同时不利于搜索引擎。
visibility:hidden：隐藏内容或图片缺陷：隐藏的内容会占据他所应该占据物理空间
Bootstrap中的流式布局；Bootstrap提供了两种布局方式，固定式布局和流式布局（用em表示的叫做弹性布局，用百分比表示的叫做流体布局）方式，Bootstrap的布局实际上是在栅格外加个容器(Container)因此两种布局方式的唯一区别是：固定布局加的是固定宽度(width)的容器，流式布局加的是自适应(或叫可变)宽度的容器。
媒体查询规则是开发者能够在相同的样式中，针对不同的媒介来使用不同的样式规则。在CSS2的时候有mediaType的规则，通过不同的媒介来切换不同的CSS样式。通过媒体查询的技术可以实现响应式布局，适应不同终端的开发。媒体查询的具体知识请见CSS3新属性应用文档。
添加打印样式，为屏幕显示和打印分别准备一个css文件，如下所示：