【前端】CSS : display
【前端】CSS : display
介绍
元素的显示方式
基本属性
- none ： 隐藏，且不占空间
- inline ： 设置元素为行内元素
- block ： 设置元素为块状元素
- list-item ：会把元素作为列表显示
- inline-block ： inline-block既具有block的宽高特性又具有inline的同行元素特性（CSS 2.1 新增）
- table ： 作为块级表格来显示（类似table），表格前后带有换行符。
- flex ： 弹性布局属性
用法
none
隐藏，且不占空间
{display:none}另一种隐藏的方式 {visibility :hidden}
inline
设置元素为行内元素
{display:inline}设置了该属性之后设置高度、宽度都无效，同时text-align属性设置也无效，但是设置了line-height会让inline元素居中
例：两个块元素div（div为块元素，默认display为block）
.display1 {
border: 1px solid;
width: 50px;
text-align: center;
}<div class="display1">div 1</div>
<div class="display1">div 2</div>效果：显示在两行
div
如果在样式中添加属性
{display: inline;}效果：添加属性inline后，两个出现在同一行
div inline
注：发现div1和div2之间出现奇怪间隔。原因：div换行产生的换行空白。解决方法：两个div写在一行
默认为inline的元素：span、a、label、input、 img、 strong 和em就是典型的行内元素元素。
block
设置元素为块状元素 如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。
例：两个行内元素span（div为块元素，默认display为inline）
.display2 {
border: 1px solid;
text-align: center;
}<span class="display2">span 1</span>
<span class="display2">span 2</span>效果：显示在同一行
span
添加属性
{display: block;}效果：显示在同一行
span block
list-item
会把元素作为列表显示
例：
.display3 {
display: list-item;
}<div>
<span class="display3">span 1</span>
<span class="display3">span 2</span>
<span class="display3">span 3</span>
</div>效果：
list-item
为div添加padding-left: 30px，可以看到前面的点。因为默认的列表之前的·在box外面 效果：
inline-block
inline-block既具有block的宽高特性又具有inline的同行元素特性 (CSS 2.1 新增)
例：
.display4 {
display: inline-block;
height: 100px;
width: 100px;
text-align: center;
color: #FFFFFF;
background-color: #27ad9a;
line-height: 100px;
}<div>
<div class="display4">div 1</div>
<div class="display4">div 2</div>
<div class="display4">div 3</div>
</div>效果：
table
作为块级表格来显示（类似table），表格前后带有换行符。 使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式， 而不会产生因为使用了table那样的制表标签所导致的语义化问题。
例：
.display5 {
display: table;
border-collapse: collapse;
}
.display5_tr {
display: table-row;
}
.display5_td {
padding: 5px;
display: table-cell;
border: 1px solid;
}<div class="display5">
<div class="display5_tr">
<div class="display5_td">header 1</div>
<div class="display5_td">header 2</div>
<div class="display5_td">header 3</div>
</div>
<div class="display5_tr">
<div class="display5_td">content 1-1</div>
<div class="display5_td">content 1-2</div>
<div class="display5_td">content 1-3</div>
</div>
<div class="display5_tr">
<div class="display5_td">content 2-1</div>
<div class="display5_td">content 2-2</div>
<div class="display5_td">content 2-3</div>
</div>
</div>效果：
table
flex
弹性布局 常用的布局属性，可以解决大部分布局。 主要属性有两大类：容器属性和项目的属性
容器属性
- 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。
（跟之前在RN中写的flex-box相似，就不详细描述了。详细用法参考Flex 布局教程：语法篇）
注：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
结语
在熟悉display的使用之后，日常的布局基本都能解决。 （多数布局都可以通过flex解决）
参考
有错误之处，感谢指出，接收批评