CSS display 属性详解

时间 2019-11-10

标签 css display 属性详解栏目 CSS 繁體版

原文原文链接

原文地址：http://zhanfang.github.io/2016/07/22/display属性详解
转载请注明地址及做者: zhanfangcss

最近瞎忙了好长一段时间，一直没时间写文章，想深刻学习一下css的相关属性，因此有了这篇文章，若有错误请指针。html

display的全部属性

/* CSS 1 */
display: none;
display: inline;
display: block;
display: list-item;

/* CSS 2.1 */
display: inline-block;

display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: table-caption;
/* CSS 2.1 */

/* CSS 3 */
display: inline-list-item;
display: flex;
display: box;
display: inline-flex;

display: grid;
display: inline-grid;

display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
/* CSS 3 */

/* Experimental values */
display: contents;
display: run-in;
/* Experimental values */

/* Global values */
display: inherit;
display: initial;
display: unset;

下面就display的重要属性进行讲解，并配合一些相关的例子git

基本属性

display: none

none 是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也没法显示，至关于该元素不存在。github

该属性能够用来改善重排与重绘，同时我也常常用它来作模态窗等效果。web

display: inline

inline也是 CSS 1 提出的属性，它主要用来设置行内元素属性，设置了该属性以后设置高度、宽度都无效，同时text-align属性设置也无效，可是设置了line-height会让inline元素居中chrome

同时从上图能够看到两个inline标签之间出现了奇怪的间隔，改间隔的缘由是div换行产生的换行空白，解决办法浏览器

将两个inline标签写到一行ruby

<body>
  <div class="test">123</div><div class="test">123</div>
</body>

或者使用一点技巧ide

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="main">
    <div class="test">zhan</div>
    <div class="test">123</div>
  </div>

</body>
</html>


html{
  -webkit-text-size-adjust:none;/* 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px */
}
.main{
  font-size:0;
  *word-spacing:-1px;/* 使用word-spacing 修复 IE六、7 中始终存在的 1px 空隙，减小单词间的空白（即字间隔） */
}
.test{
  display:inline;
  width: 10000px;
  height:10000px;
  border:1px solid;
  font-size:12px;

  letter-spacing: normal;/* 设置字母、字间距为0 */ 
  word-spacing: normal; /* 设置单词、字段间距为0 */
}

实测chome49浏览器只用设置父元素的font-size为0便可。wordpress

目前有不少原生的元素都是inline的，span、a、label、input、 img、 strong 和em就是典型的行内元素元素。
连接：http://www.css88.com/archives...

display: block

设置元素为块状元素，若是不指定宽高，默认会继承父元素的宽度，而且独占一行，即便宽度有剩余也会独占一行，高度通常以子元素撑开的高度为准，固然也能够本身设置宽度和高度。

在设计的过程当中有时须要设计一个div宽高都是整个屏幕，整个时候宽度很好设置，但是高度通常很难设置，由于页面通常都是能够滚动的，因此高度通常可变，因此这个时候可使用一个小技巧，以下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="main">
  </div>
</body>
</html>

html{
  height: 100%;
}
body{
  height: 100%;
  padding: 0;
  margin:0;
}
.main{
  background: red;
  width: 100%;
  height: 100%;
}

基本原理：div继承的是父元素body的高度，body是继承html的高度，html是继承的浏览器屏幕的高度。

display: list-item

此属性默认会把元素做为列表显示，要彻底模仿列表的话还须要加上 list-style-position，list-style-type

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  <span>111111</span>
  <span>222222</span>
  <span>333333</span>
</div>
</body>
</html>

div{
  padding-left:30px;
}

span{ 
  display:list-item;
  list-style:disc outside none;
}

效果图以下：

经过上面样式设置，就能仿出一个相似的列表，必定要在div上加padding，由于默认的列表以前的·在box外面

display: inline-block

inline-block为 CSS 2.1 新增的属性。 inline-block既具备block的宽高特性又具备inline的同行元素特性。 经过inline-block结合text-align: justify 还能够实现固定宽高的列表两端对齐布局，以下例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="main">
  <div class="col col1">111111</div>
  <div class="col col2">222222</div>
  <div class="col col3">333333</div>
  <div class="col col1">111111</div>
  <div class="col col2">222222</div>
  <div class="col col3">333333</div>
  <div class="col fix">&nbsp;</div>
  <div class="col fix">&nbsp;</div>
  <div class="col fix">&nbsp;</div>
  <div class="col fix">&nbsp;</div>
  <div class="col fix">&nbsp;</div>
</div>
</body>
</html>

body{
  margin:0;
  padding:0; 
}
.main{
  text-align:justify;
}
.col{ 
  display: inline-block;
  margin-top:10px;
  width:100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}
.col1{
  background: red;
}
.col2{
  background: green;
}
.col3{
  background: blue;
}
.fix{
  height:0; 
  padding:0; 
  overflow:hidden;
}

效果图以下：

text-align: justify 属性会使行内元素两端对齐，可是要求这些行内元素总宽度至少占满一行，因此在总宽度不足一行的时候这个属性没用，所以在最后须要加上一些占位符。

详情能够查看张鑫旭老师的博客

Tip: inline-block会造成一个BFC

display: table

table 此元素会做为块级表格来显示（相似table），表格先后带有换行符。CSS表格可以解决全部那些咱们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，display:table的CSS声明可以让一个HTML元素和它的子节点像table元素同样。使用基于表格的CSS布局，使咱们可以轻松定义一个单元格的边界、背景等样式， 而不会产生由于使用了table那样的制表标签所致使的语义化问题。

利用table的特性，咱们可以轻易的实现三栏布局，而且可以兼容IE8，以下是使用table属性，实现三栏布局的例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="main">
  <div class="tr tr1">
    <div class="td">head1</div>
    <div class="td">head2</div>
    <div class="td">head3</div>
  </div>
  <div class="tr tr2">
    <div class="td">123</div>
    <div class="td">123</div>
    <div class="td">123</div>
  </div>
</div>
</body>
</html>

.main{
  display: table;
  width:100%;
  border-collapse: collapse;/*为表格设置合并边框模型：*/
}
.tr{
  display: table-row;
  border-color: inherit;
}
.tr1 .td{
  height:50px;
  vertical-align: middle;
}
.td{
  display: table-cell;
  border: 1px solid;
}
.td:nth-of-type(1){
  width: 100px;
}
.td:nth-of-type(3){
  width: 100px;
}

效果以下图：

CSS2.1表格模型中的元素，可能不会所有包含在除HTML以外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型可以正常工做。全部的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。

因此在通常状况下咱们也能够不写外面的table-row元素以及table元素。

display: inline-list-item

我在MDN上面看到有这个属性，可是我实际尝试发现这个属性是不能使用的，在 http://caniuse.com/#search=in... 上面也没有找到这个元素的兼容性，因此应该是不能使用的，支持度全无。

display: flex

flex是一种弹性布局属性
注意，设为Flex布局之后，子元素的float、clear和vertical-align属性将失效。
主要属性有两大类：容器属性和项目的属性

容器属性

flex-direction: 属性决定主轴的方向（即项目的排列方向）。
flex-wrap: 默认状况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，若是一条轴线排不下，如何换行。
flex-flow: 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content: 属性定义了项目在主轴上的对齐方式。
align-items: 属性定义项目在交叉轴上如何对齐。
align-content: 属性定义了多根轴线的对齐方式。若是项目只有一根轴线，该属性不起做用。

项目属性

order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow: 定义项目的放大比例，默认为0，即若是存在剩余空间，也不放大。
flex-shrink: 属性定义了项目的缩小比例，默认为1，即若是空间不足，该项目将缩小。
flex-basis: 属性定义了在分配多余空间以前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原本大小。
flex: 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self: 属性容许单个项目有与其余项目不同的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，若是没有父元素，则等同于stretch。

以上关于flex的基础知识基本是从阮一峰老师那copy过来的，有兴趣的同窗，能够到阮一峰老师的博客深刻阅读

http://www.ruanyifeng.com/blo...
http://www.ruanyifeng.com/blo...

实例：实现一个固定宽度但内容可变的列表

目前我有一个需求，有一个列表页，左侧固定，右侧固定，总宽度固定，可是左侧的内容可能会增长，右侧的内容也可能会增长，要求平时一行展现，增长的时候两行展现，左侧两行，右侧仍是一行，而且都居中。

先上效果图，否则可能会迷糊：

为了实现上述效果，代码以下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="main">
    <ul>
      <li>
        <span class="col1">累积的分为：123</span>
        <div class="col2">
          <span>123</span>
          <span>x 10</span>
          <button>submit</button>
        </div>
      </li>
      <li>
        <span class="col1">累积的分为：1234</span>
        <div class="col2">
          <img src="http://7xltvd.com1.z0.glb.clouddn.com/css1.png" alt="">
          <span class="col2-span">x 10</span>
          <button>submit</button>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

.main{
  height: 200px;
  width: 300px;
  border: 1px solid;
}
ul{
  padding: 0px;
  margin-top: 10px;
}
li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 10px;
  border: 1px solid;
}
button{
  height: 20px;
  vertical-align: middle;
  border:0;
  background: green;
  outline:none;
}
img{
  width:30px;
  vertical-align: middle;
}
.col2-span{
  vertical-align: middle;
}
.col1{
  width: 130px;
  padding-left:8px;
}
.col2{
  padding-right: 8px;
  vertical-align: middle;
}

display: -webkit-box

因为某X5浏览器某些版本还不支持最新版的flex布局，因此为了保证良好的运行，建议仍是使用display: box，box和flex布局的主要差异以下:

容器属性

display: box
该显示样式的新值可将此元素及其直系子代加入弹性框模型中。Flexbox 模型只适用于直系子代。
box-orient
值：horizontal | vertical | inherit

框的子代是如何排列的？还有两个值：inline-axis（真正的默认值）和 block-axis，可是它们分别映射到水平和垂直方向。

box-pack
值：start | end | center | justify

设置沿 box-orient 轴的框排列方式。所以，若是 box-orient 是水平方向，就会选择框的子代的水平排列方式，反之亦然。

box-align
值：start | end | center | baseline | stretch

基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。若是方向是水平的，该属性就会决定垂直排列，反之亦然。

项目属性

box-flex
值：0 | 任意整数

该子代的弹性比。弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为 0，也就是不具备弹性。

用box改造上述例子

基本只修改了容器元素li的属性，以下所示

li{
  display: -webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-pack: justify;
  -webkit-box-align: center;
  padding: 10px 0;
  margin-bottom: 10px;
  border: 1px solid;
}

display: inline-flex

我发如今chrome条件下设置了inline-flex，其子元素所有变成了inline模式，设置flex并无什么用，不知道是否是我写的有问题，目前没找到这个属性的用法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="main">
    <div class="sp1">123</div>
    <div class="sp1">123</div>
  </div>
</body>
</html>

.main{
  display: -webkit-inline-flex;
  justify-content: center;
}
.sp1{
  flex:1;
}

其余

如下属性是实验性质的，支持度都很低，不建议使用，知道就行。

run-in: 此元素会根据上下文做为块级元素或内联元素显示；
grid: 栅格模型，相似block
inline-grid: 栅格模型，相似inline-block
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container
contents