display

定义:设置或检索对象是否及如何显示
取值
1. none:隐藏对象,不同于visibility:hidden,被隐藏的元素会从文档流中移除.因此display:none会引起重排.
  
  如果设置display:none,则float和position不再生效.
  
  Demo
  
  上面两个div分别使用了一次display:none和一次visibility:hidden
2. inline:指定对象为内联元素.行内元素不会在之前或者之后生成"行分隔符".
3. block:指定对象为块级元素.块级元素在正常流中,会在其框之前和之后生成"换行",在正常流中会计元素会垂直摆放.
4. list-item:指定对象为列表项目
5. inline-block:指定元素为内联块元素.与inline的区别为可以设置宽和高.
6. table:指定对象作为块级元素的表格,其他相应的HTML元素为table.
7. inline-table:指定对象作为一个行内元素的表格,定义了一个生成行内框的矩形块.与之接近的HTML元素为table,但是默认情况下table不是行内元素.
8. table-caption:指定对象作为表格标题.CSS没有明确定义如果多个元素的display值都设置为table-caption会怎样,但是警告"创作人员不要再一个表或行内表元素中放多个display:table-caption的元素".相应的HTML元素为caption元素.
9. table-cell:指定对象作为表单元格.HTML元素th和td都属于table-cell元素
10. table-cell:
11. table-row:指定对象作为表格行.相应的HTML元素为tr.
12. table-row-group:指定对象为一个或多个行的组,相应的HTML元素为tbody
13. table-column:指定对象作为表格列.相应的HTML元素为col元素.
14. table-column-group:指定对象作为表格一个或者多个列的组.相应的HTML元素为colgroup元素
15. table-footer-group:指定对象作为表格脚注组.相应的HTML元素为tfoot元素.
16. table-header-group:指定对象作为表格标题组,类似table-row-group,只是视觉格式化方面有所不同,标题行组总是在其他行和行组之前显示.相应的HTML元素为thead.
17. run-in:根据上下文决定是内联对象还是块级对象
  
  在网上找到一篇英文,使用[demo](https://css-tricks.com/run-in/),但是还是没法验证(MDN上指出该值还只是试验性的值,不建议使用)
18. 1. box:将元素及其子直系子代加入弹性框模型.与flexbox的区别是:flexbox只适用于直系子代.
  2. 设置display:box之后可以设置一些用于框的样式.
    1. 设置框的样式
      1. box-orient(设置子代如何排列): horizontal｜vertical｜inherit｜inline-axis(默认值)|block-axis
        
        inline-axis:沿着行内轴来排列子元素(映射为 horizontal).
        
        block-axis:沿着块轴来排列子元素(映射为 vertical).
        
        inherit:从父元素继承box-orient属性的值.
      2. box-pack(设置沿box-orient轴的框排列方式,规定当框大于子元素的尺寸,在何处放置子元素):start|end|center|justify
        
        justify:在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）
      3. box-align(设置框的子代在框中的排列方式):start｜end｜center｜baseline｜stretch
        
        这是一个与box-pack相对的方式排列.
        
        baseline:从基线开始排列.
        
        stretch:拉伸子元素以填充包含块.
    2. 设置子代框的样式
      1. box-flex(属性规定框的子元素是否可伸缩其尺寸):0(不具有弹性)｜任意整数.
  3. 目前没有浏览器支持box属性以及相关box-XX属性Firefox 支持替代的 -moz-box- 属性.Safari、Opera 以及 Chrome 支持替代的 -webkit-box-属性.
19. inline-box(伸缩盒老版本):将对象作为内联块级弹性伸缩盒显示.
20. flexbox== 这一功能等同于(display:box;设置子box-flex)(伸缩盒过渡版本)
  1. 弹性盒布局,设置元素为display:flex则其变成弹性容器.
  2. 给子框设置伸缩尺寸:flex:none|整数.
21. inline-flexbox(伸缩盒过渡版本):将对象作为内联块级弹性伸缩盒显示.
22. flex(伸缩盒最新版本):将对象作为弹性伸缩盒显示.任何一个容器都可以指定为Flex布局.
  1. 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效.采用Flex布局的元素,成为Flex容器,简称"容器",它的所有子元素自动成为容器成员,称为Flex项目(Flex item),简称"项目".
  2. 容器默认存在两根轴:水平的主轴（main axis）和垂直的交叉轴（cross axis）.主轴的开始位置（与边框的交叉点）叫做main start,结束位置叫做main end；交叉轴的开始位置叫做cross start,结束位置叫做cross end.项目默认沿主轴排列.单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size.
  3. 父元素设置display:flex,而子元素可以使用固定宽度,也可以使用flex属性设置所占比例.
  4. 容器的属性
    1. flex-direction
      1. 含义:决定主轴的方向(即项目的排列方向)
      2. 取值
        
        row(默认值):主轴为水平方向,起点在左端.
        
        row-reverse:主轴为水平方向,起点在右端.
        
        column:主轴为垂直方向,起点在上沿.
        
        column-reverse:主轴为垂直方向,起点在下沿.
    2. flex-wrap
      1. 含义:默认情况下,项目都排在一条线(又称"轴线")上,flex-wrap的属性定义,如果一条轴线排不下,如何换行.
      2. 取值
        
        nowrap(默认):不换行.
        
        wrap:换行,第一行在上方.
        
        wrap-reverse:换行,第一行在下方.
    3. flex-flow
      1. 含义:flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap.
      2. 取值
        
        flex-flow:'lex-direction' || 'flex-wrap'
    4. justify-content
      1. 含义:定义了项目在主轴上的对齐方式.
      2. 取值
        
        flex-start(默认值):左对齐.
        
        flex-end:右对齐.
        
        center:居中.
        
        space-between:两端对齐,项目之间的间隔都相等.
        
        space-around:每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.
    5. align-items
      1. 含义:定义项目在交叉轴上如何对齐
      2. 取值
        
        flex-start:交叉轴的起点对齐.
        
        flex-end:交叉轴的终点对齐.
        
        center:交叉轴的中点对齐.
        
        baseline:项目的第一行文字的基线对齐.
        
        stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度.
    6. align-content
      1. 含义:定义了多根轴线的对齐方式.如果项目只有一根轴线,该属性不起作用.
      2. 取值
        
        flex-start:与交叉轴的起点对齐.
        
        flex-end:与交叉轴的终点对齐.
        
        center:与交叉轴的中点对齐.
        
        space-between:与交叉轴两端对齐,轴线之间的间隔平均分布.
        
        space-around:每根轴线两侧的间隔都相等.所以,轴线之间的间隔比轴线与边框的间隔大一倍.
        
        stretch(默认值):轴线占满整个交叉轴.
  5. 项目属性
    1. order
      1. 含义:定义项目的排列顺序.数值越小,排列越靠前,默认为0.
      2. 取值:integer
    2. flex-grow
      1. 含义:定义项目的放大比例,默认值为0,即如果存在剩余空间也不会放大.
      2. 取值:integer
      3. 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话).如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍.
    3. flex-shrink
      1. 含义:flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小.
      2. 取值:integer
      3. 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小.如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小.负值对该属性无效.
    4. flex-basis
      1. 含义:定义了在分配多余空间之前,项目占据的主轴空间(main size).浏览器根据这个属性,计算主轴是否有多余空间.它的默认值为auto,即项目的本来大小.
      2. 取值:'length'|auto.
      3. 它可以设为跟width或height属性一样的值（比如350px）,则项目将占据固定空间.
    5. flex
      1. 含义:flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选.
      2. 取值:none|['flex-grow' 'flex-shrink'? 'flex-basis']
      3. 快截值:auto(1 1 auto)和none(0 0 auto)
      4. 推荐使用这个属性而不是单独写三个分离属性.
    6. align-self
      1. 含义:允许单个项目有与其他项目不一样的对齐方式.可覆盖align-items属性.默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch.
      2. 取值: auto | flex-start | flex-end | center | baseline | stretch
      3. 该属性可能取6个值,除了auto,其他都与align-items属性完全一致.
23. inline-flex(伸缩盒最新版本):将对象作为内联块级弹性伸缩盒显示.

display

table类

花名册1:

CSS3新增

box-orient

box-pack

box-align

box-flex:01设置为1,02设置为3,03设置为0

box-flex:01设置为600px,02设置为3,03设置为1,04设置为0(总宽度600px;)