标签：
今天终于对html中的块级元素和行内元素有了一个较为理性的认识。首先w3c对于block和inline的解释为：
一、block的研究
通过w3c的解释，也就是说block（块级）元素是独占一行显示的。它的兄弟元素必定不会与其在同一行中（除非脱离了文档流）。下面来说说block元素默认宽度的问题。
1、没设置宽度：默认为浏览器可视区同宽（浏览器默认样式被重置后）。
看到的那条黄线实为一个未设置宽高的DIV，边框为1像素黄色实线，可以看出是布满整个屏幕的。
2、自身没设置宽度，但是父元素设置了宽度：
这个例子中，黄线为一个未设置宽度的P，其父元素是一个宽度为200px的DIV，在控制台中输出P的offsetWidth（offsetWidth=border+width+padding）属性为：200。也就是说一定程度上P是继承了DIV的宽度的。但也不完全是，因为打印出的P的宽度是加上了2px的边框宽度的，所以说子元素未设置宽度的话是会100%填充父元素的宽的，但是不会填充高度！
看下面一道例题：
已有HTML代码：<div class="a"><div class="b"></div></div>
如果应用了如下CSS：
.a{ width:200px; height:100px;}
.b{ padding:20%; background-color:red; } 问红色区域的大小为？width？height?
分析一下，因为.b是.a的子元素，而.b未设置宽度，我们通过刚才的研究得知，.b的宽度是完全填充.a的，这个宽度是包括边框（border）、边距（padding）在内的。也就是说我们可看到的.b的宽度仍为200px，不会因为加了padding而撑大！而高度则不然，为200*20%*2=80px。
所以本题的答案就呼之欲出了：width：200px；height：80px。（但未测试ie6下和混杂模式下的情况）
二、inline的研究
inline元素是可以在同一行显示多个的，直到浏览器窗口宽度不足以容纳才进行换行。我们来看看inline元素的宽高问题。
1、一个未设置宽高的span元素，加上1像素蓝色实线的显示效果是酱紫的：
2、给他的父亲加上50px的高度后是酱紫的：
1、2之间没有任何变化。
3、给他加上50px的高度后是酱紫的：
1、2、3显示是完全相同的。。
正常文档流下inline是不支持宽高设置的，所以例子中的span既不会继承父亲的宽高，自己设置的宽高也不能起作用。本身有的高度实为其默认的line-height的高度值。来看看给它加上padding的情况：
这个是加了padding：10的情况，他的父亲我设为了高度为10px的DIV。可以看出span超出了DIV，所以说，内联元素的宽高跟父元素是没关系的。
三、总结inline和block的区别
1、行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3、行内元素与块级元素属性的不同，主要是盒模型属性上。行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上无效。
四、常见的inline元素和block元素
标签：
原文地址：http://www.cnblogs.com/Remix/p/4549396.html
