block，inline和inline-block概念和区别（转）

Posted Caersi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了block，inline和inline-block概念和区别（转）相关的知识，希望对你有一定的参考价值。

总体概念
  1. 根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
  2. 行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。
    块级元素写完后会自动换行，有宽高可以修改。
    还有一种特殊的元素叫做行内块元素。
    大致分类是：
    行内元素有：title  span  br  a   style  em  b  i   strong pcdata tt big small dfn code samp kbd var cite abbr acronym object script map q sub bdo
    块级元素有：body  form  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  center  div pre noscript blockquote fieldset address
    行内块元素常见的有： img  input  td select textarea label
block, inline, inline-block细节对比
display：block
  1.  block元素可以包含block元素和inline元素，块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如<form>只能包含块级元素；p 元素，只能包含inline元素，而不能包含block元素，也有一些块级元素既可以包含块级，也可以包含行级元素。
  2. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
  3. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。当只设置了height属性时，则width默认是其父类元素的宽度。
  4. block元素可以设置margin和padding属性。
display：inline
  1. inline元素只能包含inline元素。
  2. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  3. inline元素设置width,height属性无效，如果你要改变内联元素的行高即类似文本的行间距，那么你只能使用这三个属性：line-height，font-size，vertical-align。若想给inline元素设置宽高属性，则可使用以下两种方法（下面的方法是我个人收集的，如有不对，希望大家可以指出）
  • 将inline元素转换为块级元素后就都可设置了，即添加CSS样式时，加上”display:block;“这句话。
  • 将该inline元素的position设置为absolute或fixed，这样子它就具有块级元素的属性了。
  1. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果，注意元素范围是增大了，但是对元素周围的内容是没影响的。
[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <style type="text/css">  
  7.             *{  
  8.                 margin:0;  
  9.                 padding:0;  
  10.                 list-style:none;  
  11.                 border:0;  
  12.             }  
  13.             .a1{  
  14.                 background:pink;  
  15.                 margin-top:30px;  
  16.                 margin-bottom: 30px;  
  17.                 padding-top: 20px;  
  18.                 padding-bottom: 20px;  
  19.             }  
  20.             .div1{  
  21.                 width: 100px;  
  22.                 height:100px;  
  23.                 background:green;  
  24.             }  
  25.         </style>  
  26.     </head>  
  27.     <body>  
  28.         <a class="a1">CSDN</a>  
  29.         <div class="div1"></div>  
  30.     </body>  
  31. </html>  
运行结果如下左图所示：
查看元素时，可看到右图的效果，在右图中，紫色部分为内边距，紫色下面的黄色部分是外边距，但它们两者并不起作用，块级元素div仍紧挨着元素a的底部，所以这就是元素范围是增大了，但是对元素周围的内容是没影响的。
display：inline-block
  1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
  2. 可以设置margin和padding属性。
文中很多内容都是参考前辈的，添加了一点点自己写的内容。因为自己还是菜鸟，所以写不出像前辈们那么优秀的文章，而且要是仅仅依靠我个人的经验去写，我怕写出来的文章会误导大家，不过我会继续努力的！

参考网址：https://www.cnblogs.com/KeithWang/p/3139517.html

以上是关于block，inline和inline-block概念和区别（转）的主要内容，如果未能解决你的问题，请参考以下文章

在网站制作过程中发现的block和inline-block不同。

block inline 和 inline-block

inline-block,真的懂吗

display：block;inline;inline-block大总结

block，inline和inline-block概念和区别

block，inline和inline-block概念和区别