《CSS世界》之块级元素

所谓的块级元素（block-level element）,他们都有个特征是在一个水平流上只能单独显示一个元素，多个块级元素则换行显示

问：display:block 和 块级元素 一样？？？

这种说法是错误的

li元素的dispaly:list-item也是块级元素

table元素的display:table也是块级元素

<style>
  .con{
    padding:30px;
  }
  .con .cell{
    width:50%;float:left;padding:0 20px;
  }
  .clear{
    border:10px solid #b4a078;
  }
  .clear img{
    width:100%;
    float:left;
  }
  .clear2:after,.con:after{
    clear:both;
    content:"";
    display: table;// block
  }
</style>
<template>
  <div class="con">
    <div class="cell">
      <span>正常内部float的效果</span>
      <div class="clear">
        <img src="./assets/images/1.jpeg" />
      </div>
    </div>
    <div class="cell">
      <span>清楚float的效果</span>
      <div class="clear clear2">
        <img src="./assets/images/1.jpeg" />
      </div>
    </div>
  </div>
</template>
<script>
</script>

image.png

问：为什么实际开发的过程中，不使用dispaly:list-item 设置块级元素，而经常使用block或者table?

• 字符比较多，其他两个相对少

• 会出现不需要的项目符合，当然也可以解决 list-style:none

• IE浏览器不支持微元素的display:list-item,属于兼容性的问题

问：为什么list-item元素会出现项目符号？

系统会生成一个附加的盒子，学名标记盒子（marker box）,专门用来放圆点、数字这些项目符号

特殊性别display:inline-block

俗话：穿着inline的皮藏着block的心,专业名称叫容器盒子，

• 不仅有inline的特性，和图文一行显示

• 而且有block的特性，可以设置width和height

盒子display:inline-table

从上面可以知道，inline内联盒子和table盒子的结合，得到一个和文字在一行中的显示的表格

<style>
  .con{
    padding:30px;
  }
  .con .inline-table{
    display:inline-table;
    width:130px;
    background-color:#b4a078;
    text-align:center;
    margin-bottom:10px;
  }
</style>
<template>
  <div class="con">
    <div class="inline-table">
      第一列
    </div>
    <div class="inline-table">
      第二列
    </div>
    <div class="inline-table">
      第三列
    </div>
    <div class="inline-table">
      第一列
    </div>
    <div class="inline-table">
      第二列
    </div>
    <div class="inline-table">
      第三列
    </div>
  </div>
</template>
<script>
</script>

image.png