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，也就是top和left都为0，对齐到父元素content-box的左上角，以此类推。
  • 这四个值都可以设置