css定位篇-display

作者: 护念 | 来源:发表于2018-06-17 17:43 被阅读0次

css定位篇-display
CSS -- 定位篇
CSS -- 布局篇
CSS布局
css绝对定位、相对定位和文档流的那些事
CSS布局
CSS书写规范
CSS属性书写顺序及页面布局整体思路
初级前端面试常见问题（上岸某公司）
css的布局

我们在许多时候，都会看到display这个东东，它对于布局的影响还是挺大的。需要学习下：

1 、 block 块级元素（默认下的div p h 等标签）
2 、inline 内联元素（默认下的 span a img等）
3 、 inline-block 行内块
4 、 none 不显示元素且不占文档流
5、flex弹性布局

inline-block 内联块

它类似于内联元素，但和内联元素不同的是：
1 、它可以有自己的高度、宽度
2、在布局上可以方便的替换浮动
3 、行内块，在视口宽度调整时，还可以调整一行显示的数量

内联元素 VS 行内块

<style type="text/css">
   #inline {
    height: 100px;
    width: 100px;
    border: 5px solid yellow;
   }

   #inline-block {
    display: inline-block;
    height: 100px;
    width: 100px;
    border: 5px solid pink;
   }
 </style>
<body>
  <a href="#">一个a标签的元素 </a>
  <span id="inline">内联元素,虽然设置了高度 宽度 但是展现不出来</span>
  <span id="inline-block"> 行内块，设置高度宽度后展现出来了</span>
</body>

image.png

行内块可替换浮动布局

<style type="text/css">

   h3 {
    text-align: center;
   }

   #inline-block {
    height: 200px;
    width: 200px;
    display: inline-block;
    border: 5px solid pink;
    margin-left: 2em;
    margin-top: 0.5em;
   }

   #after-inline-block {
    margin: 10px;
    border: 5px solid yellow;
   }
 </style>
<body>
  <h3> 行内块 </h3>
  <div id="inline-block">
    行内块
  </div>

  <div id="inline-block">
    行内块
  </div>

  <div id="inline-block">
    行内块
  </div>

  <div id="inline-block">
    行内块
  </div>

  <div id="inline-block">
    行内块
  </div>

  <div id="inline-block">
    行内块
  </div>

  <div id="inline-block">
    行内块
  </div>

  <div id="inline-block">
    行内块
  </div>

  <div id="inline-block">
    行内块
  </div>

  <div id="inline-block">
    行内块
  </div>
  <div id="after-inline-block"> 我不用清除浮动，回到块级元素 </div>
</body>

image.png