CSS的inline、block与inline-block

本文是对CSS的inline、block与inline-block的总结整理

行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。

块级元素(block)：

• 独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为父元素的宽度。即使设置宽度，也是独占一行。
• 当指定了 width 和 height 的值时，内容超出块级元素的尺寸就会溢出，这时块级元素要呈现什么行为要看其 overflow 的值（visible,hidden,overflow,scroll)

行内元素(inline)：

• 可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。
• margin-top、margin-bottom不起作用。padding和margin-left、margin-right起作用
• 如果想让padding-top或者padding-bottom起作用，只需要给padding-left或者padding-right设置一个值，或者当inline的元素有内容时就会起作用。

行内块元素(inline-block)：
结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。

行内、块级元素

其中img和input为行内块元素。

行内元素与块状元素之间的转换:

1. float:
当把行内元素设置完float后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。
2. position:
当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。
3. display:
1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;

注意点

1.text-align

text-align属性对块级元素起作用，对行内元素不起作用（直接作用于行内元素）：

<!-- 起作用 -->
<div style="text-align:center">test</div>   

<!-- 不起作用 -->
<span style="text-align:center">span标签</span>

原因是块级标签如果不给宽度，块级元素就默认为父元素的宽度，即就是100%宽，那么在100%的宽度中居中生效；但是行内元素的宽完全是靠内容撑开，所以宽度就是内容撑开的宽：

所以块级是在盒子中间居中了，但是因为行内元素的宽就是内容宽，没有可居中的空间，所以text-align:center;就没有作用；

text-align作用在块级元素上，这个块级元素一般是父元素，里面的inline、inline-block子元素会水平居中，或是文字元素会水平居中。若子元素是设置了width的block元素则不会水平居中。

<style>
        .container {
            text-align: center;
        }
        .box {
            width: 20px;
            height: 20px;
            background-color: red;
        }
</style>    
    <div class="container">
          hhhh
          <p>p标签</p>
          <span>span标签</span>
          <div class="box"></div>
          <div>eeeeeeee</div>
    </div>  

2.inline-block碰到同类时，行高也会一起使用

<style>
     body,div{
         margin: 0;
         padding:0;
     }
        .item1{
            display: inline-block;
            width: 100px;
            height:100px;
            line-height: 100px;
            background-color: red;
        }
        .item2{
            display: inline-block;
            background-color: pink;
        }
    </style>
  <div class="item1">item1</div>
<div class="item2">item2</div>

如图所示，inline-block碰到同类时，行高也会一起使用。其他的padding-top和margin-top甚至都会一起使用

3.inline和inline-block会引起间距的空格

        .span1 {
            background-color: pink;
        }
        .span2 {
            background-color: aqua;
        }
        
        <span class="span1">hello</span>
        <span class="span2">world</span>

中间有空格

原因：
是因为换行或者空格引起的

解决方法：
1.直接写在一行

<span class="span1">hello</span><span class="span2">world</span>

2.在父元素上加上font-size:0;

        .span1 {
            font-size: 16px;
            background-color: pink;
        }
        .span2 {
            font-size: 16px;
            background-color: aqua;
        }
        
        <div style="font-size: 0">
            <span class="span1">hello</span>
            <span class="span2">world</span>
        </div>

没有空格