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

 
 

  
  
块级元素与行内元素
块级元素会扩展到与元素同宽。
行内元素会“收缩包裹” 其内容，并且会尽可能包紧。

（以上这两个总结，来自于《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;才会有这样的效果，其他转换之后并不会默认带来这个效果。


  
  


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