盒模型 块级元素内联元素

1、 文档流概念

是浏览器解析网页的一个重要概念。对于一个xhtml网页，body元素下的任意元素，根据其先后顺序，组成了一个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它们在网页中的位置。文档流是浏览器的默认显示规则。

2、 块级元素与行内元素

得出区别的方法：

1. 写两个div，两个span

2. 分别对div 与span 设置背景看效果

3. 分别设置宽度看效果

4. 加margin看效果

1）、区别

页面中元素一般分为两种：块级元素，行内元素（内联元素），既然分为两种元素，那么他们之间必然有区别：

A. 块级元素总是独自占一行，前面和后面就好像有个换行符，内联元素总是和其它的内联兄弟占一行

B. 块级元素可以设置宽和高度值，内联元素就不行了，他们的宽和高总是随着自身的内容自动扩大和缩小

C. 块级元素的margin和padding都正常，内联元素左右maring和左右padding正常，上下不正常不识别，也就是说不能通过margin-top和padding-top来改变行高

D. 网页布局时，块级元素可包含内联元素和其它块级元素；而内联元素只可包含内联元素和文本等，不可包含块级元素。我们可以理解为内容标记和结构标记。

2）、常用的块级元素和行内元素有：

块级元素：h1至h6,div p ul dl dt dd form table等

行内元素：strong em span b I a img input等

3）、相互转化

想让自己独占一行就用块级元素(div,dl,dt,dd,ul,li...)，想让元素和其它元素在一行就用行内元素(span,a,img)。

他们之间可以通过样式来转换

1. disply:block;
   
2. display:inline;

复制代码

补充：

display:inline-block;

将对象呈递为内联元素，与其它的元素同处一行，但是内部又呈现出块级元素，也就是可以设置宽度和高度，打破了块级元素和内联元素的区别，此属性，IE8，FF3， 其它的标准浏览器都识别，IE6，IE7，FF2不识别此属性

display:list-item;

display：none