×

《CSS世界》之块级元素

96
程序蜗牛
2018.04.09 23:59 字数 352

所谓的块级元素(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的特性,可以设置widthheight

盒子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
CSS世界
Web note ad 1