CSS/块级元素与内联元素的深入理解

今天终于对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元素

• 块级元素

• 行内元素

• 可变元素