CSS 基础学习-145 css 使用display：inline-block属性改变元素的显示方式

由 hrs, 3 十一月, 2021

使用display：inline-block属性改变元素的显示方式

 /* 当display值为inline时，此时为默认值，其元素的宽度和高度都不会改变*/

/* 当display值为inline-block时，此时元素的宽度和高度都会改变大小*/

 /* 当display值为block时，此时元素的宽度和高度都会改变，而且还会换行 。*/

实例代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      span{
          border:1px solid blue;
          background-color:yellow;
          width:100px;
          height:100px;
          padding:5px;
      }
      .inline{
        display:inline;
        /* 当display值为inline时，此时为默认值，其元素的宽度和高度都不会改变*/
      }
      .inline-block{
        display:inline-block;
        /* 当display值为inline-block时，此时元素的宽度和高度都会改变大小*/
      }
      .block{
        display:block;
      /*当display值为block时，此时元素的宽度和高度都会改变，而且还会换行*/
      }
    </style>

  </head>
  <body>
    <h1>display 属性</h1>
    <h2>display:inline</h2>
    <div>Shanghai is one of the four direct-administered municipalities of <span class="inline">the People's Republic of China</span>.Welcome<span class="inline">Shanghai</span>!</div>
    <h2>display:inline-block</h2>

    <div>Shanghai is one of the four direct-administered municipalities of <span class="inline-block">the People's Republic of China</span>.Welcome<span class="inline-block" >Shanghai</span>!</div>
  <h2>display:block</h2>
    <div>Shanghai is one of the four direct-administered municipalities of <span class="block" >the People's Republic of China</span>.Welcome<span class="block">Shanghai</span>!</div>
  </body>
</html>

运行效果：

css-145.png
 

标签

评论