欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

块级元素

程序员文章站 2022-12-23 12:08:05
“块级元素”和“display为block的元素”不是一个概念,因为
  • 元素默认的display值是list-item,元素默认的display值是table,它们都是块级元素。 正是由于“块级元素”具有换行特性,因此理论上它们都可以配合clear属性来清除浮动带来的影响。例如: ......

     

    “块级元素”和“display为block的元素”不是一个概念,因为<li>元素默认的display值是list-item,<table>元素默认的display值是table,它们都是块级元素。

    正是由于“块级元素”具有换行特性,因此理论上它们都可以配合clear属性来清除浮动带来的影响。例如:

    1 .clear:after {
    2    content : ' ';
    3    display : table;  //也可以使用table,或者list-item。
    4    clear : both;
    5 }

     在实际开发中,我们要么使用block,要么使用table,并不会使用list-item,这有以下原因:

       1.会出现不必要的项目符号

       2.ie浏览器不支持伪元素的display值为list-item。兼容性不好。

     那么为什么list-item元素会出现项目符号?

      是为了满足list-item,在块级元素上添加了一个“标记盒子”,专门用来放原点、数字这些项目符号。

     同样的道理,什么是inline-block呢?

      在块级盒子的基础上,又添加了一个盒子,外在盒子控制元素是可以一行显示,还是换行显示。内在盒子则负责宽高、内容呈现。外在盒子inline级别的,内在盒子block级别的。

     很显然width/height是作用在内在盒子上的。