HTML中块级元素和行内元素

HTML中块级元素和行内元素

在HTML中，元素按照在用户代理(一般常指浏览器)的显示形式划分为块级元素(block element)和行内元素(in-line element)，那么它们有什么区别呢?

1.块级元素会生成一个元素框，它会默认的填充父元素的内容区，旁边不能有其他元素。

首先，对于块级元素而言，它必定有一个父级元素来承载它，这也就是我们所说的HTML结构，块级元素的总宽度(包含width,padding,border,margin)总是等于父元素的width，这是默认的，也就是用户代理在渲染页面的时候，总有这样一个公式：

父元素的内容宽度=子元素的内容宽度+左右padding+左右border+左右margin

如果用户设置的总宽度达不到，总是由用户代理修改margin来自动填充(用户代理不会修改内容宽度，padding和border)

并且在修改margin时，只要是文字语言的顺序是从左往右读的(例如英语，汉语，日语等语言)，都会优先修改margin-right。

说了这么多，估计有人会比较迷糊，我们还是举例说明：

例1.

----------

在这个例子中，父元素和子元素都是块级元素，父级元素的内容宽度为500px，子元素的内容宽度为100px，padding默认设置为0，border默认设置为0，margin默认设置也为0，那么：

500px != 100+0+0+0+0+0+0,此时，因为我们汉语(浏览器本地默认语言)的语序是从左往右，则用户代理优先修改margin-right使上面的等式成立，则最后的显示效果为margin-right=400px;如下图：

例2.

----------

在这个例子中，父元素和子元素都是块级元素，父级元素的内容宽度为500px，子元素的内容宽度为100px，padding默认设置为0，border默认设置为0，margin的值已经设置，上下margin为0px，左右margin为auto(用户代理均分margin-left和margin-right)，那么：

500px = 100+0+0+0+0+auto+auto，解方程的，auto=200px，这也就是为什么margin:0px auto会使块级元素居中显示的原因。

这里有个小问题，如果这里的父元素的宽度不指定，是否也会居中呢?

答案是肯定的，因为对于这里的父元素，它也有个父元素，那就是body，body是块级元素，默认宽度是浏览器窗口的宽度，也就是不设置这里的父元素的宽度，这里的子元素会相对浏览器水平居中。

2.行内元素在一个文本行内生成元素框，而不会打断这行文本。

首先，对于行内元素，它和块级元素的明显不同就是，行内元素没有上下margin，但是左右却是有的，并且行内元素不能设置宽度和高度，它的元素框宽度和高度完全是由内容决定的，并且行内元素不具有块级元素的宽度关系等式(不继承父级元素的宽度)，那么很显然，你无法通过使用

margin: 0px auto使一个行内元素在块级元素中水平居中。

其次，关于HTML结构中元素的嵌套，明确一点：

块级元素中可以嵌套块级元素或者行内元素，但是行内元素中只能嵌套行内元素，如果HTML中元素结构嵌套不符合这个规则，可能出现未可知的现象，由此也可以反推出：body是块级元素，因为它里面什么都可以写。

总结：明白块级元素和行内元素的基本特性是进行复杂布局的一个前提，因为复杂的布局也是由简单的块级元素和行内元素构成的，或许很多人说这个很简单，自己都会用，都明白，但是，在你说这句话的时候，浮躁尽显无疑，这显然不是一个好的状态，对于任何事情，希望大家能够知其然也知其所以然，不要会用，因为这决定了你只是一个代码搬运工的事实，其实事情并不难，难的是你无法熟悉基础，就好比一个初中生多位数乘除不好，并不是他笨，究其原因，原来是他小学一年级乘法口诀表不行，难道多位数的乘除运算不是在反复的使用乘法口诀表?