行内元素与块级元素的总结

一、行内元素与块级元素的区别
      块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
      内联元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）内联元素只能容纳文本或则其他内联元素。
例子：给内联元素设置背景与内边距时。。。
<style>
.module-upload-commit a{display: block;margin: 0 auto;background: #fe5842;color: #fff;text-align: center;width: 100px;height: 35px;border-radius: 4px;}
.box{text-align:center;}
.box span{background:blue;padding:20px;}
</style>
                <div class="module-upload-commit">
                    <a href="#">提交</a>
                </div>
                <div style="box">
                    <span>box</span>
                </div>


              额，box块盖住了提交按钮。。。。
当有设置背景色和内边距时，背景可以向元素上下延伸，但是行高没有改变，因此视觉效果就是与前面的行重叠。
Q:是什么撑开了盒子？容我好好想想。
常见的块级元素有：div、p、form、ul、ol、li，h1,table等。
常见的内联元素有：a,span,em,strong,input,img等。
那么问题来了，竟然input,img属于行内元素，那为什么我给img，input设置高宽确有效呢？
二、替换元素与非替换元素
由此我去查了下，发现就元素本身而言也可以分为替换元素和非替换元素
非替换元素如p,div等。他们将内容直接告诉给游览器然后显示出来。而替换元素如img，input等。游览器会根据元素的标签类型和属性来显示这些元素。
一般替换元素都属于行内元素，对于这些特殊的替换元素，游览器解释他们时有点类似于inline-block元素，所以他们遵循标准的盒子模型。
如下例：
<style>
.p-new-box{line-height:40px;}
.p-new-input{width: 320px;padding-left:20px;margin:0 20px 0 0;height: 40px;border: 1px solid #d8d8d8;}
</style>
<div class="p-new-box>
    <input type="text" name="password" class="p-new-input" value="请输入新支付密码">
</div>
它的盒子模型：

注：input的任性，以上例子input并没有继承父元素的line-height属性，且设置line-height在chrome以及firefox下可以撑开内容，但在ie下无效。必须设置高度。
三、行内元素与块级元素间的相互转换。
    行内元素和块级元素都不是绝对的，可以相互转换,，通常有这些方式可以转换。
   （1）display:inline-block,将行内非替换元素设置为行内块元素
    (  2）float:left/right,float就是隐形的把内联元素转换为块级元素。但是他不会占据一行，相当于display：inline-block;
    （3）position,当对行内元素进行定位时，都会将行内元素转换为块级元素。
    注意：只有通过display:block设置的行内元素才能继承父元素的宽度。
    延伸：BFC(block formatting contexts)
              margin外边距折叠：浮动元素和绝对定位元素不与其他盒子产生外边距折叠
              inline-block元素与其兄弟、子、父元素的外边距都不会折叠，because inline-block不符合w3c规范所说元素必须是块级盒子的条件，因为规范中说块级盒子的display属性必须是”block","list-item",'table".
            闭合浮动的元素的border-top会紧贴着相应的浮动元素的margin-bottom  
关于BFC，可以参考看看这篇文章http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

标签：