block,inline和inline-block的区别

Posted 2020-06-18 改变需要勇气，习惯需要坚持。

概念

block是块级元素，会被现实认为是单独的一块，会单独占一行。

常见的block元素有： DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。

 

inline内联元素，不会产生换行，一系列的inline在一行内显示，直到排满为止。

常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

 

inline-block:是将对象呈现为inline对象，但是对象的内容作为block呈现。

 

细节对比

display:block

1)block元素会独自占一行，多个block元素各自新起一行，默认情况下 ，block元素宽度自动填充其父元素宽度

2）block可以设置width,height属性，设置之后仍然独占一行

3）block元素可以设置margin和padding属性

 

display:inline

1) inline元素不会独自占一行，多个相邻元素会排在同一行中，直到一行排不下，才会新换一行，其宽度随元素的内容而变化

2) inline元素设置的width,height属性无效

3）对于inline元素的margin和padding属性，水平方向的padding-left,padding-right,margin-left,margin-right有效，

    而竖直方向的padding-top,padding-bottom,margin-top,margin-bottom无效

 

display:inline-block

就是它将对象呈现inline的表现形式，即不会独占一行，而内容作为block对象呈现，即可以设置width,height,padding-top等属性

例如：

<style type="text/css">
        div, p {
            border: 1px solid red;
        }
        
        span {
            border: 1px solid green;
            width: 600px;
            height: 200px;
        }
        em {
            border: 1px solid green;
            width: 600px;
            height: 200px;
        }
        
        .setline {
            border: 1px solid green;
            display: inline-block;
            width: 400px;
            height: 50px;
        }
    </style>


    <div>我是块级div元素哦，我会独自占一行哦</div>
    <p>我也是块级p元素哦，我会独自占一行哦</p>
    <h1>我也是块级h1元素哦，我也会独自占一行哦</h1>
    
    <span>我是行内元素span哦，不会占一行哦，但是设置width,height对我无效哦</span>
    <em>我也是行内元素em哦，设置的width，height对我无效哦</em>
    <span class="setline">我是span，我改变display值时，width,height对我有了效果</span>
    <em class="setline">我是em，我改变display值时，width,height对我有了效果</em>

对应的效果为：

 

用display：inline-block 实现列表布局

既然display：inline-block对象既可以拥有inline的表现形式，内容又能够拥有block的形式，则可以用来流式布局，例如html代码如下：

 <style type="text/css">
        .layoutImg {
            width: 840px;
            overflow: hidden;
            margin: 20px;
        }
         .layoutImg span {
             display: inline-block;
             width: 120px;
             height: 160px;
             margin: 10px 5px;
         }
          .layoutImg span label{
              height: 25px;
              line-height: 25px;
              display: inline-block;
         }
    </style>
   <div class="layoutImg">
        <span><img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/><label>这是测试的哦</label></span>
        <span><img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/><label>这是测试的哦</label></span>
        <span><img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/><label>这是测试的哦</label></span>
        <span><img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/><label>这是测试的哦</label></span>
        <span><img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/><label>这是测试的哦</label></span>
        <span><img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/><label>这是测试的哦</label></span>
        <span><img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/><label>这是测试的哦</label></span>
        <span><img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/><label>这是测试的哦</label></span>
        <span><img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/><label>这是测试的哦</label></span>
        <span><img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/><label>这是测试的哦</label></span>
    </div>

效果如下：

刚学css，没有做兼容性，做得有点粗糙

一般的列表布局采用的都是浮动布局，也可以用浮动布局实现：

例如：

 <style type="text/css">
          .content
         {
             width: 530px;
             border: 1px gold solid;
         }
         
         .content ul {
             list-style-type: disc;
             margin: 0;
             padding: 0;
         }
         
         .cf:after {
             content: ".";
             display: block;
             clear: both;
             font-size: 0;
             height: 0;
             line-height: 0;
             visibility: hidden;
             overflow: hidden;
         }
         
         .content ul li {
             float: left;
             width: 120px;
             height: 170px;
             padding-left: 5px;
             list-style: none;
             padding: 5px;
         }
          .title{
              height: 25px;
              line-height: 25px;
              overflow: hidden;
              display: inline-block;
         }
    </style>
 
    <div class="content">
        <ul class="cf">
            <li>
                <a>
                    <img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/>
                    <span class="title">这是测试的标题哦</span>
                </a>
            </li>
            <li>
                <a>
                    <img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/>
                    <span class="title">这是测试的标题哦</span>
                </a>
            </li>
            <li>
                <a>
                    <img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/>
                    <span class="title">这是测试的标题哦</span>
                </a>
            </li>
            <li>
                <a>
                    <img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/>
                     <span class="title">这是测试的标题哦</span>
                </a>
            </li>
            <li>
                <a>
                    <img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/>
                    <span class="title">这是测试的标题哦</span>
                </a>
            </li>
            <li>
                <a>
                    <img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/>
                    <span class="title">这是测试的标题哦</span>
                </a>
            </li>
            <li>
                <a>
                    <img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/>
                   <span class="title">这是测试的标题哦</span>
                </a>
            </li>
            <li>
                <a>
                    <img src="http://img1.gtimg.com/astro/pics/hv1/208/21/2030/132006313.jpg"/>
                   <span class="title">这是测试的标题哦</span>
                </a>
            </li>
        </ul>
    </div>

效果如下：