说说行内元素与块级元素以及之间的转换？

块级元素与行内元素

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

其默认css样式

• 块级元素其高度为其内容高度，宽度会扩展到与父元素同宽。所以导致块级元素会独占一行，无法在其后容纳其他块级元素与行内元素。
• 行内元素其高度为其内容高度，宽度会收缩包裹其内容。奇怪的一点：行内元素之间有一定的距离，使用控制台看的时候，并没有把这段距离算作盒子模型。我使用margin:0;padding:0并不会清除这段距离，？？求告知！

css修饰

• 块级元素可以对其高度宽度进行设置，同时也可以对边框，内外边距，进行设置，其设置结果影响文档流布局效果。
  注意修改width后，并不会使得其下面的行内元素向上移动。
• 行内元素，行内元素可以对其高度进行设置么？当然不能！这个回答当然太过绝对。
  元素分为替换元素与非替换元素。几乎所有替换元素都是行内元素。
  • 替换元素：替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。如浏览器会根据<img>src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容;又如由<input>的type属性来决定是显示输入框，还是单选按钮等。引自这里
  • 非替换元素：如p a span div这些，即其内容直接表现给用户端（例如浏览器）。
    所以行内元素也就分为行内替换元素img input,与行内非替换元素span a…对于二者css修饰起来是有差别的。
  • 行内非替换元素：其宽高设置无效， 对于内外边距，边框，可以设置，但是垂直方向的设置并不会影响文档流布局，所以设置垂直内外边距是没有效果的，垂直边框，我们是看得见，但是垂直边框并不占据文档流 。所以上面的行内元素设置了宽度为10px的边框，并不会导致下面元素的向下移动。
  • 行内替换元素，除了具备行内元素同行并列的特点，他可以设置影响文档流布局的内外边距以及宽高。 且设置高度等同于设置行高，会垂直居中
  • line-height 行内非替换元素虽然不具备宽高，但是可以利用line-height来设置高度，但是奇葩的是，虽然行高可以影响行内元素的文档流布局，但是，其边框依旧会包裹其内容，忽略行高带来的上下留白。
  • margin 行内元素的边距，不会合并（替换非替换）。不同于块级元素，会合并上下，左右边距。

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

• display
  块级元素默认display:block;行内非替换元素(a,span)默认为display:inline;；行内替换元素(input)默认为display:inline-block;
  • display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
  • display:block;转换为块级元素。
  • display:inline;转换为行内元素。
  • display:inline-block;转换为行内块级元素。
    以上四个是我常用的，事实上，还有很多

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

• float
  当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白，
• position
  当为行内元素进行定位时，position:absolute，与position:fixed。都会使原先的行内元素变为块级元素。

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

文／Miss____Du（简书作者）
原文链接：http://www.jianshu.com/p/274614a078f3
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。