美文网首页前端杂货随记我爱编程
《CSS世界》之块级元素

《CSS世界》之块级元素

作者: 程序蜗牛 | 来源:发表于2018-04-09 23:59 被阅读9次

所谓的块级元素(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世界》之块级元素

    所谓的块级元素(block-level element),他们都有个特征是在一个水平流上只能单独显示一个元素,多个...

  • 垂直居中,水平居中

    CSS设置行内元素的水平居中 CSS设置行内元素的垂直居中 CSS设置块级元素的水平居中 CSS设置块级元素的垂直居中

  • 01-CSS

    前言1-CSS对HTML元素分类 css元素分为三种:块级元素、行内元素和行内块元素。 1.块级元素:设置disp...

  • CSS03

    CSS 元素分类(块级元素、行内元素) display:block、inline、inline-block 块级包...

  • CSS布局(inline和block)

    CSS内联元素和块级元素, 内联块级元素 HTML语言标签元素被分为三种类型: 内联元素(行内元素), 块级元素,...

  • css居中大全

    css居中大全 Horizontally 水平居中 内联元素 块级元素 多个块级元素 Vertically 垂直...

  • CSS 常见样式

    CSS 常见样式 块级元素和行内元素 块级元素 HTML(超文本标记语言)中元素大多数都是“块级”元素或行内元素。...

  • CSS 中的行级元素和块级元素

    CSS 中的行级元素,和块级元素。 常见块级元素:div p form ul ol li 等; ...

  • 前端学习记录c s s一

    css里面的 块元素: ... 内联元素: 以及一些加强语气的标签。 内联块元素: 块级元素的特点: 每个块级元素...

  • 2020-03-05 CSS水平垂直居中学

    1.块级元素水平居中,水平元素垂直居中 CodePen:CSS块级水平居中 2.块级元素垂直居中 CodePen:...

网友评论

    本文标题:《CSS世界》之块级元素

    本文链接:https://www.haomeiwen.com/subject/enishftx.html