行内元素、块级元素和可变元素的特点及之间的转换

块级元素

---

例如：div, p, h1-6, form, ul, li, ol, pre, hr, menu, table

特点

1. 块级元素会独占一行，其宽度自动填满其父元素宽度。

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

2. 可以设置width和height属性。（即使设置了宽度，也是独占一行的，除非用float属性等特殊情况）

3. 可以设置margin和padding。

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

行内元素

---

行内元素、内联元素、内嵌元素、直进式元素都是指 "inline element"。

例如：span, strong, em, br, img, input, label, select, textarea, a, sub
特别的： img 属于内联块状元素，可以设置宽高。

特点

1. 行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化（其宽度由内容撑开）。即行内元素会“收缩包裹” 其内容，并且会尽可能包紧。

   注意：行内元素其高度为其内容高度，宽度会收缩包裹其内容。奇怪的一点：行内元素之间有一定的距离，使用控制台看的时候，并没有把这段距离算作盒子模型。可以参考这篇文章：去除inline-block元素间间距

2. 设置width和height属性无效(可以设置line-height)。

   解释：这个回答当然太过绝对。元素分为替换元素与非替换元素。几乎所有替换元素都是行内元素。（难点）

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

   • 非替换元素：如p a span div这些，即其内容直接表现给客户端（例如浏览器）。

     所以行内元素也就分为行内替换元素img input,与行内非替换元素span a对于二者css修饰起来是有差别的。

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

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

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

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

3. 水平方向上的padding-left,padding-right,margin-left,margin-right产生边距效果，但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生效果。

可变元素

---

需要根据上下文关系确定该元素是块级元素还是行内元素。属于上述两种元素类别，一旦上下文关系确定了他的类别，他就遵循块级元素或行内元素的规则限制。

例如：button, map, object, applet
注意：块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

行内元素与块级元素之间的转换

---

• display

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

  行内替换元素(input)默认为display:inline-block;

• display:none;

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

• display:block;

  转换为块级元素。

• display:inline;

  转换为行内元素。

• display:inline-block;

  转换为行内块级元素。（可以设置设置width及height属性等。）

  以上四个是最常用的

通过display:block;与display:inline;可以很容易的实现两类元素变现形式之间的转换。

有很多时候，我们需要使用display:inline-block；来转换行内元素，或者是块级元素。但是这个元素是css2新增的属性，对于IE7以下的版本不支持这个属性，所以需要一些兼容的办法。

• float

  当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。

• position

  当为行内元素进行定位时，position:absolute，与position:fixed。都会使原先的行内元素变为块级元素。

  注意：通过以上的设置，可以实现为行内非替换元素设置宽高及内外边距。但是替换时，还需要注意转换为块级元素只是float与position的副作用，他们本身的作用还会干扰布局效果。

  之前介绍块级元素时说过，块级元素的宽度会继承其父元素。但是，只有为行内元素设置display:block;才会有这样的效果，其他转换之后并不会默认带来这个效果。

总结

行内元素转换为块级元素三种方法：

1. display:block

2. float：left

3. position（absolute和fixed）

最后：可以通过chrome审查元素查看是否成功转换为块级元素。