display 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <!--
  block 块元素
  inline 行内元素
  inline-block 是块元素，但是可以内联，在一行！
  none 消失
  -->
  <style>
    div{
      width: 100px;
      height:100px;
      border: 1px solid red;
      display: inline-block;
    }
    span{
      width: 100px;
      height:100px;
      border: 1px solid red;
      display: inline-block;
    }
  </style>
</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

posted @ 2022-04-11 23:34  少时凌云志  阅读(143)  评论(0)    收藏  举报