块级元素与内联元素

看的这样的标题你可能会在心里不禁的问：不是还有行内块元素吗？不是还有 inline-block 吗？

很遗憾，在 W3C 规范中，元素的种类只有两种，一种是块级元素 block-level element，另一种是内联元素 inline-level element，为什么呢？下面来讲解。

块级元素 

 说到块级元素，大家肯定不会陌生，常见的块级元素有：div、li、table等等。需要注意的是，所谓的块级元素和 display:block；不是一个概念！！！ 为什么这么说呢？就如上面提到的 li 和 table ，他们都是块级元素，但是他们的 display 属性并不是 block，而是 list-item 和 table 。所以，一直以来认为块级元素就是 display:block；的认知是不正确的。

块级元素有两个基本的特征：独占一行、可以设置宽高。

但是，有些元素还有一些比较特殊的特征，比如 li 还有默认的项目符号。

哎？元素不就是分为块级元素和内联元素吗？那为什么作为块级元素的 li 跟其他的块级元素有所不同呢？ 

 或者这么说，为什么 list-item 元素会出现项目符号呢？这似乎是一个很简单的问题，但是它的背后却有一套体系支撑着，然而，这一切还得从 CSS 的盒子模型说起。

附加盒子

从上面了解到，元素只有两种，一种是块级远古三，另一种是内联元素。那么相应的，在最初的时候，盒子模型也就只有两种，一种是块级盒子，另一种是内联盒子。块级盒子负责结构，内联盒子负责内容。原本以为，块级盒子一套就够用了，也就是说，所有的块级元素用的都是同一个盒子模型，但是，随着需求的改变以及这门语言的发展，派生出一些附加盒子。

所有的块级元素都有一个主块级盒子，但是，list-item 除此以外还有一个附加盒子，具体的学名为 marker box，专门用来存放圆点、数字这些项目符号。

需要注意的是，IE 的伪元素不支持 list-item。

将焦点回到最初的问题上，为什么只有块级元素和内联元素？那么我们一直使用的行内块元素 inline-block 到底是怎么回事？

外在盒子与内在盒子

都知道行内块元素的特性就是介乎于块级元素与内联元素之间，元素可以设置宽高，元素在同一行排列。然而，每个元素都由两个盒子组成，一个是外在盒子，另一个是内在盒子（容器盒子）。外在盒子负责元素是否独占一行，容器盒子负责宽高和内容。

有了上面的这套理论，dipslay:block 的元素实际上就是由一个外在的块级盒子和一个内在的块级盒子组成的。

类似的，display:inline-block 就是由一个外在的内联盒子和内在的块级盒子组成的，所以，它具备了内容不会独占一行，元素可以设置宽高的特性。

然而，display:inline 元素则是由两个内联盒子组成的。 

最后

以上就是平常草丛为你收集整理的块级元素与内联元素的全部内容，希望文章能够帮你解决块级元素与内联元素所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。