CSSdisplay属性详解
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的重要属性进⾏讲解，并配合⼀些相关的例⼦
none是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也⽆法显⽰，相当于该元素不存在。
该属性可以⽤来改善重排与重绘，同时我也经常⽤它来做模态窗等效果。
inline也是 CSS 1 提出的属性，它主要⽤来设置⾏内元素属性，设置了该属性之后设置⾼度、宽度都⽆效，同时text-align属性设置也⽆效，但是设置了line-height会让inline元素居中
同时从上图可以看到两个inline标签之间出现了奇怪的间隔，改间隔的原因是div换⾏产⽣的换⾏空⽩，解决办法
将两个inline标签写到⼀⾏
<body>
<div class="test">123</div><div class="test">123</div>
</body>
或者使⽤⼀点技巧
<div class="main">
<div class="test">zhan</div>
<div class="test">123</div>
</div>
<style>
html{
-webkit-text-size-adjust:none;/* 使⽤webkit的私有属性，让字体⼤⼩不受设备终端的调整，可定义字体⼤⼩⼩于12px */
}
.main{
font-size:0;
*word-spacing:-1px;/* 使⽤word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空⽩（即字间隔） */
}
.test{
display:inline;
width: 10000px;
height:10000px;
border:1px solid;
font-size:12px;
letter-spacing: normal;/* 设置字母、字间距为0 */
word-spacing: normal; /* 设置单词、字段间距为0 */
}
</style>
设置元素为块状元素，如果不指定宽⾼，默认会继承⽗元素的宽度，并且独占⼀⾏，即使宽度有剩余也会独占⼀⾏，⾼度⼀般以⼦元素撑开的⾼度为准，当然也可以⾃⼰设置宽度和⾼度。
在设计的过程中有时需要设计⼀个div宽⾼都是整个屏幕，整个时候宽度很好设置，可是⾼度⼀般很难设置，因为页⾯⼀般都是可以滚动的，所以⾼度⼀般可变，所以这个时候可以使⽤⼀个⼩技巧，如下。
<div class="main">
</div>
<style>
html{
height: 100%;
}
body{
height: 100%;
padding: 0;
margin:0;
}
.main{
background: red;
width: 100%;
height: 100%;
}
</style>
基本原理：div继承的是⽗元素body的⾼度，body是继承html的⾼度，html是继承的浏览器屏幕的⾼度。
此属性默认会把元素作为列表显⽰，要完全模仿列表的话还需要加上list-style-position，list-style-type
<div>
<span>111111</span>
<span>222222</span>
<span>333333</span>
</div>
<style>
div{
padding-left:30px;
}
span{
display:list-item;
list-style:disc outside none;
}
</style>
效果图如下：
通过上⾯样式设置，就能仿出⼀个类似的列表，⼀定要在div上加padding，因为默认的列表之前的·在box外⾯
inline-block为 CSS 2.1 新增的属性。inline-block既具有block的宽⾼特性⼜具有inline的同⾏元素特性。通过inline-block结合text-align: justify还可以实现固定宽⾼的列表两端对齐布局，如下例⼦：
<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"> </div>
<div class="col fix"> </div>
<div class="col fix"> </div>
<div class="col fix"> </div>
<div class="col fix"> </div>
</div>
<style>
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;cssclass属性
}
</style>
效果图如下：
text-align: justify属性会使⾏内元素两端对齐，但是要求这些⾏内元素总宽度⾄少占满⼀⾏，所以在总宽度不⾜⼀⾏的时候这个属性没⽤，因此在最后需要加上⼀些占位符。
详情可以查看
Tip: inline-block会形成⼀个BFC
table此元素会作为块级表格来显⽰（类似table），表格前后带有换⾏符。CSS表格能够解决所有那些我们在使⽤绝对定位和浮动定位进⾏多列布局时所遇到的问题。例如，display:table的CSS声明能够让⼀个HTML元素和它的⼦节点像table元素⼀样。使⽤基于表格的CSS布局，使我们能够轻松定义⼀个单元格的边界、背景等样式，⽽不会产⽣因为使⽤了table那样的制表标签所导致的语义化问题。
利⽤table的特性，我们能够轻易的实现三栏布局，并且能够兼容IE8，如下是使⽤table属性，实现三栏布局的例⼦：
<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>
<style>
.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;
}
</style>
效果如下图：
CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的⽂档语⾔中。这时，那些“丢失”的元素会被模拟出来，从⽽使得表格模型能够正常⼯作。所有的表格元素将会⾃动在⾃⾝周围⽣成所需的匿名table对象，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。所以在⼀般情况下我们也可以不写外⾯的table-row元素以及table元素。
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。
⽬前我有⼀个需求，有⼀个列表页，左侧固定，右侧固定，总宽度固定，但是左侧的内容可能会增加，右侧的内容也可能会增加，要求平时⼀⾏展⽰，增加的时候两⾏展⽰，左侧两⾏，右侧还是⼀⾏，
并且都居中。
先上效果图，不然可能会迷糊：
为了实现上述效果，代码如下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。