CSS@8布局(上):display&z-index

作者 Jackie Anxis 日期 2016-12-09
CSS@8布局(上):display&z-index

CSS布局(上):display&z-index

文档流的概念

文档流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,或者说在排布过程中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。
但是,在某些情况下,元素会脱离文档流,他们不会按照既定的顺序进行排布,而是按照指定的规则在文档流中浮动。


display

display属性,是用来设置元素的布局方式,就是元素如何在页面上展示。

display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

display可以有很多可选的值,但是,“似乎”最重要的就只有我加粗的这几个。比较常用的也是这几个。下面就分别介绍这几个值的含义。

display:inline 行内元素

  • 默认宽度为内容宽度
  • 不可设置宽高
  • 元素之间同行显示,内部会换行
  • 如果一个元素被指定为display:inline,那么这个元素就是一个行内元素。
  • 行内元素的意思,就是这个元素能和其他元素在同一行显示,比如以下两个元素都是display:inline,他们在同一行显示:

  • 内部会换行:虽然inline是一个行内元素,但是它自己内部是会换行的

  • 不可设置宽高:就是无法为一个行内元素设置宽(width)高(height),inline元素的行高完全是由元素本身内容决定的

  • 默认是display:inline的元素有:span, a, label, cite, em, …

display:block 块级元素

  • 默认宽度为父元素的宽度
  • 可设置宽高
  • 元素之间换行显示
  • 默认宽度为父元素的宽度,指的是,子元素的margin+border+padding+content的宽度和等于父元素content-box的宽度。默认高度是元素内容高度,值得注意。如果没有内容,那么高度即为0。

    .parent{
    width:200px;
    height:200px;
    margin:10px;
    padding:50px;
    background-color: lightseagreen;
    box-sizing: border-box;
    }
    .child{
    height:20px;
    padding:20px;
    margin:10px;
    background-color: white;
    }

  • 默认是display:block的元素有:div, p, h1-h6, ul, form


    display:inline-block 行块元素

    • 默认宽度为内容宽度
    • 可设置宽高
    • 元素之间,同行显示
    • 后续元素宽度超过边界之后就会整块换行
  • display:inline-block综合了行级元素和块级元素的特点。

  • 默认宽度为内容宽度,在未设置元素宽度的时候,元素的默认宽度就是内容的宽度,这和inline元素保持一致。但又同时是可设置宽高的。
  • 元素之间,同行显示,超过边界换行

    .parent{
    width: 100px;
    height: 60px;
    background-color:lightseagreen;
    }
    .children{
    display: inline-block;
    width: 30px;
    height: 10px;
    background-color:white;
    outline:1px solid lightblue;
    }
  • 默认是display:inline-block的元素有:input, textarea, selelct, button, …

  • display:inline-block一直有一个历史遗留问题。就是间隙问题,就比如下面这段代码,你可以复制这段代码到本地,你会发现,将content-box之外的所有内容都设为0,元素之间仍旧有一个间隙,令人百思不得其解。
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    .parent {
    width: 200px;
    height: 100px;
    background-color: lightseagreen;
    }
    .element {
    display: inline-block;
    width: 80px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: white;
    }
    </style>
    </head>
    <body>
    <div class="parent">
    <span class="element"></span>
    <span class="element"></span>
    <span class="element"></span>
    <span class="element"></span>
    </div>
    </body>
    </html>

mark
关于它的历史和解决方案,可以参照这篇文章inline-block 前世今生,以及这篇文章提到了很多解决方案:去除inline-block元素间间距的N种方法

  • 我个人而言,比较推崇在父元素上加上font-size:0的方法。但是这个方法也有局限性,因为要为每个子元素都再设置一遍font-size

display:none 不显示

  • 指的是元素不出现在文档流中,和变透明是不一样的,display:none是完完全全的消失

定位偏移属性


top bottom left right

  • 当元素的position属性不是static的时候(下文中会讲),或者添加了float属性,那么就可以使用标题中的这四个属性来进行定位偏移
  • 默认是auto,也就是topleft都为0,对齐到父元素content-box的左上角,以此类推。
  • 这四个值都可以设置