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

谁践踏了优雅 2022-06-07 06:12 101阅读 0赞

一、行内元素与块级元素的区别  
      块级元素的特点：  
（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>  
![行内元素与块级元素的总结][175048qpjgq0p5giskjp0s.png]  
  
              额，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>  
它的盒子模型：  
![行内元素与块级元素的总结][175140j22z2caoc0m6czrm.png]  
注：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

转载自：www.qdfuns.com/notes/23028/b66cea2cefa3633c96a39094bf0bd21d.html

[175048qpjgq0p5giskjp0s.png]: http://cdn.attach.qdfuns.com/notes/pics/201604/27/175048qpjgq0p5giskjp0s.png
[175140j22z2caoc0m6czrm.png]: http://cdn.attach.qdfuns.com/notes/pics/201604/27/175140j22z2caoc0m6czrm.png