今天終於對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。
[ 為什么用高度是用：寬度*padding百分比*2得出的呢？
根據w3c 對padding使用% 的定義知：子元素在的寬高都是根據父元素的寬度*百分比得出的。因為padding包括了上下左右四邊，所以200*20%是上邊距的值，再*2才是總的padding高度。]
所以本題的答案就呼之欲出了：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元素
- 塊級元素
- 行內元素
- 可變元素
