对行内元素与块级元素之间转换的详细教程

2015.1.5日，我去了北京一家互联网创业公司面试，我感受到了那里年轻人在一起拼搏的氛围，招聘栏上，说是希望要有几年web前端工作经验的，我凭着自己的这点小本事，不自量力的去啦。结果，面试官问了，我许多我接触过的问题，但是，不幸的是，我对那些知识点完全是只知道大概，对于这些知识点在实际中的应用，我却知之甚少。面试时，我都不好意思啦，总觉得耽误人家时间啦。

这个问题是当面试官问我盒子模型时，由于需要说上下左右边距，为了更能说明，我举例了行内元素与块级元素，但是，却又被人“行内元素与块级元素之可以通过哪些方式方法转换”问住啦，丢人啊！我只回答出来<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>，于是，我找了有关书籍，看了几个网站的源代码，再来总结一番。

---

• 块级元素与行内元素

• 块级元素会扩展到与元素同宽。

• 行内元素会“收缩包裹” 其内容，并且会尽可能包紧。
  （以上这两个总结，来自于《css设计指南》这本书）

• 其默认css样式

• 块级元素其高度为其内容高度，宽度会扩展到与父元素同宽。所以导致块级元素会独占一行，无法在其后容纳其他块级元素与行内元素。

• 行内元素其高度为其内容高度，宽度会收缩包裹其内容。奇怪的一点：行内元素之间有一定的距离，使用控制台看的时候，并没有把这段距离算作盒子模型。我使用<a href="http://www.php.cn/wiki/931.html" target="_blank">margin</a>:0;padding:0并不会清除这段距离，？？求告知！

• css修饰

• 替换元素：替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。如浏览器会根据<img>src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容;又如由<input>的type属性来决定是显示输入框，还是单选按钮等。引自这里

• 非替换元素：如p a span p这些，即其内容直接表现给用户端（例如浏览器）。
  所以行内元素也就分为行内替换元素img input,与行内非替换元素span a…对于二者css修饰起来是有差别的。

• 行内非替换元素：其宽高设置无效， 对于内外边距，边框，可以设置，但是垂直方向的设置并不会影响文档流布局，所以设置垂直内外边距是没有效果的，垂直边框，我们是看得见，但是垂直边框并不占据文档流 。所以上面的行内元素设置了宽度为10px的边框，并不会导致下面元素的向下移动。

• 行内替换元素，除了具备行内元素同行并列的特点，他可以设置影响文档流布局的内外边距以及宽高。 且设置高度等同于设置行高，会垂直居中

• line-height 行内非替换元素虽然不具备宽高，但是可以利用line-height来设置高度，但是奇葩的是，虽然行高可以影响行内元素的文档流布局，但是，其边框依旧会包裹其内容，忽略行高带来的上下留白。

• margin 行内元素的边距，不会合并（替换非替换）。不同于块级元素，会合并上下，左右边距。

• 块级元素可以对其高度宽度进行设置，同时也可以对边框，内外边距，进行设置，其设置结果影响文档流布局效果。
  注意修改width后，并不会使得其下面的行内元素向上移动。

• 行内元素，行内元素可以对其高度进行设置么？当然不能！这个回答当然太过绝对。
  元素分为替换元素与非替换元素。几乎所有替换元素都是行内元素。

• 行内元素与块级元素的转换

• display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。

• display:block;转换为块级元素。

• display:inline;转换为行内元素。

• display:inline-block;转换为行内块级元素。
  以上四个是我常用的，事实上，还有很多

  通过display:block;与display:inline;可以很容易的实现两类元素变现形式之间的转换。
  但是，有很多时候，我们需要使用display:inline-block；来转换行内元素，或者是块级元素。但是这个元素时css2新增的属性，对于IE7以下的版本不支持这个属性，所以需要一些兼容的办法。这里会即将写一篇

• display
  块级元素默认display:block;行内非替换元素(a,span)默认为display:inline;；行内替换元素(input)默认为display:inline-block;

• <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>
  当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白，

• <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>
  当为行内元素进行定位时，position:absolute，与position:fixed。都会使原先的行内元素变为块级元素。

• 【注意】通过以上的设置，可以实现为行内非替换元素设置宽高及内外边距。但是替换时，还需要注意转换为块级元素只是，float与position的副作用，他们本身的作用还会干扰布局效果。
  之前介绍块级元素时，会说，块级元素的宽度会继承其父元素。但是，只有为行内元素设置display:block;才会有这样的效果，其他转换之后并不会默认带来这个效果。

  建议小伙伴们还是自己在编辑器里敲敲，对比一下，印象才深刻。

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

以上是对行内元素与块级元素之间转换的详细教程的详细内容。更多信息请关注PHP中文网其他相关文章！