cssdisplay属性及使⽤⽅法
1.display的取值
浏览器⽀持
IE Firefox Chrome Safari Opera
⽀持⽀持⽀持⽀持⽀持
所有主流浏览器都⽀持 display 属性。
注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更⾼版本）⽀持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
定义和⽤法
display 属性规定元素应该⽣成的框的类型。
说明
这个属性⽤于定义建⽴布局时元素⽣成的显⽰框类型。对于 HTML 等⽂档类型，如果使⽤ display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显⽰层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
可能的值
值描述
none此元素不会被显⽰。
block此元素将显⽰为块级元素，此元素前后会带有换⾏符。
inline默认。此元素会被显⽰为内联元素，元素前后没有换⾏符。
inline-block⾏内块元素。（CSS2.1 新增的值）
list-item此元素会作为列表显⽰。
run-in此元素会根据上下⽂作为块级元素或内联元素显⽰。
compact CSS 中有值 compact，不过由于缺乏⼴泛⽀持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏⼴泛⽀持，已经从 CSS2.1 中删除。
table此元素会作为块级表格来显⽰（类似 <table>），表格前后带有换⾏符。
inline-table此元素会作为内联表格来显⽰（类似 <table>），表格前后没有换⾏符。
table-row-group此元素会作为⼀个或多个⾏的分组来显⽰（类似 <tbody>）。
table-header-group此元素会作为⼀个或多个⾏的分组来显⽰（类似 <thead>）。
table-footer-group此元素会作为⼀个或多个⾏的分组来显⽰（类似 <tfoot>）。
table-row此元素会作为⼀个表格⾏显⽰（类似 <tr>）。
flex布局对齐方式table-column-group此元素会作为⼀个或多个列的分组来显⽰（类似 <colgroup>）。
table-column此元素会作为⼀个单元格列显⽰（类似 <col>）
table-cell此元素会作为⼀个表格单元格显⽰（类似 <td> 和 <th>）
table-caption此元素会作为⼀个表格标题显⽰（类似 <caption>）
inherit规定应该从⽗元素继承 display 属性的值。
2.基本属性
display: none
none 是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也⽆法显⽰，相当于该元素不存在。
该属性可以⽤来改善重排与重绘，同时我也经常⽤它来做模态窗等效果。
display: inline
inline也是 CSS 1 提出的属性，它主要⽤来设置⾏内元素属性，设置了该属性之后设置⾼度、宽度都⽆效，同时text-align属性设置也⽆效，但是设置了line-height会让inline元素居中（可以把块元素转化成⾏元素）
display: block
设置元素为块状元素，如果不指定宽⾼，默认会继承⽗元素的宽度，并且独占⼀⾏，即使宽度有剩余
也会独占⼀⾏，⾼度⼀般以⼦元素撑开的⾼度为准，当然也可以⾃⼰设置宽度和⾼度。（可以把⾏元素转化成块元素）
display: list-item
此属性默认会把元素作为列表显⽰，要完全模仿列表的话还需要加上 list-style-position，list-style-type
display: inline-block
inline-block为 CSS 2.1 新增的属性。 inline-block既具有block的宽⾼特性⼜具有inline的同⾏元素特性。 通过inline-block结合text-align: justify 还可以实现固定宽⾼的列表两端对齐布局（可以把块元素设置为⾏内块元素）
display: table
table 此元素会作为块级表格来显⽰（类似table），表格前后带有换⾏符。CSS表格能够解决所有那些我们在使⽤绝对定位和浮动定位进⾏多列布局时所遇到的问题。例如，display:table的CSS声明能够让⼀个HTML元素和它的⼦节点像table元素⼀样。使⽤基于表格的CSS布局，使我们能够轻松定义⼀个单元格的边界、背景等样式， ⽽不会产⽣因为使⽤了table那样的制表标签所导致的语义化问题。
display: inline-list-item
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。后两个属性可选。

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