关于块级元素

块级元素对应的英文是 block-level element,常见的块级元素有

  • 等。需要注意,块级元素displayblock的元素”不是一个概念。例如,
  • 元 素默认的 display值是list-item
  • 元素默认的display 值是table,但是它们 均是块级元素,因为它们都符合块级元素的基本特征,也就是一个水平流上只能单独显示一 个元素,多个块级元素则换行显示。

    • 块级元素可以配合 clear 属性来清除浮动带来的影响。

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

    下面是一个示例

    HTML 代码

    CSS 代码

    .box {
        padding: 10px;
        background-color: #cd0000;
    }
    .box > img {
        float: left;
    }
    
    .clear:after {
        content: "";
        display: block;
        clear: both;
    }
    
    图 1-1 不清除浮动
    图 1-2 使用 block 或者 tabel 清除浮动
    图 1-3 使用 list-item 清除浮动

    开发时,我们使用 block 或 table,并不会使用 list-item,主要有 3 个原因。

    1. 1 个字符的比较多,其他都是 5 个字符。
    2. 会出现不需要的项目符号,如图 1-3 所示。加上 list-style: none 就可以去除了。
    3. IE 浏览器不支持伪元素的 display值为list- item。这是不使用 display:list-item 清除浮动的 主因,兼容性不好。对于 IE浏览器(包括 IE11),普通元 素设置 display:list-item 有效,但是:before /:after伪元素就不行。之所以 list-item 元素会出现项目符号是因为生成 了一个附加的盒子,学名“标记盒子”(marker box),专门用来放圆点、数字这些项目符号。IE 浏览器下伪元素不支持 list-item 或许就是无法创建这个“标记盒子”导致的。

    你可能感兴趣的:(关于块级元素)