第一次讨论——行内与块级、浮动与清除浮动、定位、兼容性处理
第一次讨论
这个主要是我们前端小组第一次讨论的内容，行内与块级、浮动与清除浮动、定位、兼容性处理。其中大多内容都是我从网上收集来的。还是需要有自己的想法。感觉这次讨论还是挺有一定的效果的。至少我把有一些内容更加完整跟清晰化了。
【行内元素和块级元素】
块级元素：div , p , form, ul, li , ol, dl， address, fieldset, hr, menu, table
行内元素：span, strong, em, br, img , input, label, select, textarea, cite
可变元素（根据上下文语境而定）：
button，applet，del，ifram，ins，map，object，script
区别：
1）块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容 而变化
2）块级元素可以设置 width, height属性，行内元素设置width, height无效
【注意：块级元素即使设置了宽度，仍然是独占一行的】
3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的都产生边距效果，但是竖直方向的都不会产生边距效果。（水平方向有效，竖直方向无效）。
将display设为block，可以让行内元素表现像块级元素。
line-block在IE6下有问题。
【浮动和清除浮动（闭合浮动）】
高度塌陷：元素含有浮动元素—破坏inline box—破坏line box—没有高度—塌陷。
当标签里面的元素只要样子没有实际高度时就会塌陷。
①若浮动对象有负边界，浮动对象可能会浮到其所在父对象外边。
②若较宽的子盒子有一个较窄的父盒子中拥有浮动属性，不会影响父盒子宽度，子盒子越到父盒子外，父盒子不会有文本流浮动，而子盒子会覆盖在上。
③父盒子为自动高度或不设，子盒子拥有浮动，并高度超过了父盒子（解决方法：加入clear:both）
清除浮动
IE下：使元素haslayout。
非IE下：通常使用overflow:hidden。
方法：（1）直接添加clear:both（不推荐）；
（2）overflow+zoom：有局限性，margin为负定位或是负的绝对定位。.fix{overflow:hidden;zoom:1;}。
（3）after+zoom：.fix{zoom:1;} .fix:after{display:block;content:".";clear:both;line-height:0;visibility:hidden;}
方法：①让容器也浮动。
②设置容器overflow为auto或hidden（有副作用）。
【定位】
基本方式：static（默认定位方式）、relative、absolute。
relative：相对定位，相对于原来的位置，但是原来的位置仍然保留。
absolute：绝对定位，相对于最近的非标准流定位，原来的位置消失，被最后边的位置所顶替。
fixed：固定定位。
定位机制是由普通流、浮动、绝对定位三种组成。
只要父级元素设置了position并且不是static，那么设定了absolute的子元素，即以此为包含块（最近的）。
绝对定位元素定位的参照物使其包含块，即相对于包含块进行定位，不一定是其父元素。
【兼容性处理】
CSS hack：为了页面统一，针对不同浏览器或不同版本写出可解析的css样式，把这个针对不同浏览器/版本写的css过程叫做css hack。
问题：①DOCTYPE 影响 CSS 处理 ；
②FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width 。FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式
③在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。
浏览器差异：
1、ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：{list-style:none;margin:0px;padding:0px; }
其中margin属性对IE有效，padding属性对FireFox有效。
2、css透明度
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
最好两个都写，并将opacity属性放在下面。
3、css圆角问题
IE：IE6及以下不支持圆角。
FF：支持border-radius。
4、firefox不支持hand，但ie支持pointer ，两者都是手形指示。 最好统一使用pointer。
浏览器bug：
（1）IE的双边距：设置为float的div在IE下设置margin会加倍。
解决方法：在div面加上display:inline;
（2）IE选择器空格bug：在IE中，处理伪类时，如果伪类的名称中带有连字符“-”，伪类名称后面就得跟一个空格，不然定义无效。在FF中无影响。
【其他】
display:none和visiblity:hidden的区别：
display:none，不占位，相当于完全消失。而visiblity:hidden，占位，相当于只是把它给隐藏掉。
