第一次讨论——关于块级元素与行内元素的区别，浮动与清除浮动，定位，兼容性问题

这是我的第一篇博客，很激动啊哈哈哈。这里就写一些最近一次与同学讨论的前段的知识和心得吧。

一、块级元素和行内元素的区别

　　1.什么是块级元素？什么是行内元素？

　　块级元素是垂直分布在代码上。比如最常见的<div>、<li>、<h1>等。

　　行内元素是分布在同一行代码上。如<a><img src=""></a>中<a>、<img>都属于行内元素。

　　2.行内元素与块级元素直观上的区别

　　行内元素会在一条直线上排列，都是同一行的，水平方向排列

　　块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

　　3.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

　　4.行内元素与块级元素属性的不同，主要是盒模型属性上行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

　　5.行内元素转换为块级元素：display:block;

　　块级元素转换为行内元素：display:inline;（display:inline比较经典的用法是用在 <ul> 下的 <li> 中 内联 block一般一个块占一行，

　　除非float inline是自动排为一行，就象段内的文字一样，可成为多行。）

　　PS：这里行块之间的转换只是改变了他们的显示方法。

二、清除浮动的方法

　　1.浮动是什么？

　　控制元素在一行内的显示位置

　　2.清楚浮动的部分方法

　　① haslayout 这是IE浏览器下的属性，清楚浮动时使元素haslayout

　　② .overflow:hidden;这个方法很实用，推荐使用。

　　.after：：.fix{zoom:1;} .fix:after{display:block;content:".";clear:both;line-height:0;visibility:hidden;}

　　其中zoom是为了content能够在IE浏览器下使用。（推荐使用，因为兼容性强）

　　三、定位

　　1.基本定位方式

　　static：默认定位方式。元素框正常生成。

　　reletive: 相对定位方式。元素框偏移某个距离，元素任保持其未定位的形状，它原本所占的空间仍保留。

　　absolute：绝对定位方式。元素框从文档流完全删除。其相对于其包含块定位。

　　fixed：固定定位。元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

　　四、兼容性

　　兼容性问题所需的讨论时间很多，所以上次讨论并未得出很多结论。

　　1.样式重置：这种方法并不是起到浏览器间的兼容性问题，但它能让后面的代码有实现依据，整张网页

　　规范好看。（html，body{margin：0；padding：0；}）

　　2.过滤器的使用（方法太多）