display_css

display所有可选值：

  • none
  • block
  • inline
  • inline-block
  • inherit
  • initial
  • unset
  • compact & marker
  • list-item
  • run-in
  • table inline-table table-cell table-row table-row-group table-column table-column-group table-header-group table-footer-group table-caption
  •  ruby
  • flow-root （css3）
  • contents （css3）
  • box & flexbox(css3 盒子模型的过渡产物已被flex取代)
  • flex （css3）
  • grid（css3）

none：

        元素不显示，同时不占据空间，width和height无效。visible=false，会占据空间也不显示。

block:

      块级元素的默认显示方式。此元素前后会有换行符。独立占据一行。width和height有效。

inline：

     内联元素的默认显示方式。此元素前后没有换行符。width和height无效，left和right有效，top/bottom无效。

inline-block：

    css2.1 添加样式，结合内联和块级元素。没有换行符，但是width和height有效。类似于float。

   float会使得父元素的高度塌陷，需要clear:both，来清除这种影响，元素不在文档流中，不过可以居左居右。

   inline-block：内容还在文档流中，不会使得父元素高度塌陷。但元素只能从左到右排列，元素之间会有小间隙（空白符），

   通过设置font-size:0;可消除间隙。

inherit：

    集成父元素的显示方式。

initial：

   恢复到浏览器最初始的display状态。

unset：

   不设定，即如果有父元素集成父元素，没有则使用initial。

compact & marker：

   css2.1将其删除，支持面不够。

list-item：

   li 元素的默认表示形式。列表项呈现的方式。可用于任何元素。一旦元素使用此list-item则可以使用列表样式list-style属性。

.item{
    display:list-item;
    list-style-type: circle;
    margin-left:5px;
 }

<div style="margin-left:5px;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

 run-in:

       字面意思是跑进，即如果后面紧接着的元素是块级元素(display:block)，则此元素会变为内联元素，嵌入到后面元素中呈现，否则还是块级元素。

       因firefox和chrome等都已不再支持，因此建议不要使用。

table:

inline-table：不设置换行符，其它和table一致。

      table家族的这些属性对应了我们table元素的内容。

  1. table { display: table }
  2. tr { display: table-row }
  3. thead { display: table-header-group }
  4. tbody { display: table-row-group }
  5. tfoot { display: table-footer-group }
  6. col { display: table-column }
  7. colgroup { display: table-column-group }
  8. td, th { display: table-cell }
  9. caption { display: table-caption }

    当我们不用table元素而使用div+css时，可使用table属性来达到表样式。

display: table时padding会失效
display: table-row时margin、padding同时失效
display: table-cell时margin会失效

多用场景为垂直居中：
.cell{
    display: table-cell;
    vertical-align:middle;
    text-align:center;
}

 .table{
    display: table;
    width:100%;
    height:80px;
 }
<div class="table">
    <div class="cell">1</div>
</div>

 

 标签页设计，内部元素平均分配空间，而不需要设置百分比：

.cell{
    display: table-cell;
    vertical-align:middle;
    text-align:center;
}

 .table{
    display: table;
    width:60%;
    height:80px;
 }

<ul class="table">
    <li class="cell">1</li>
    <li class="cell">2</li>
    <li class="cell">3</li>
    <li class="cell">4</li>
</ul>

 

 table所有元素使用，展现表格：

.table{
    display:table;
    width:100%;
    border-collapse: collapse;
 }

 .table .theader{
    display: table-header-group;
 }
 .table .caption{
    display: table-caption;
 }
  .table .tcolumn{
    display: table-column-group;
 }
 .table .column{
    display:table-column;
 }
 .table .tbody{
    display: table-row-group;
 }
 .table .row{
    display:table-row;
 }
  .table .cell{
    border: 1px solid black;
    display:table-cell;
 }
 .table .tfooter{
  display:table-footer-group;
 }
 .table .tfooter{
  display:table-foot;
 }


</style>
<div class="table">
    <div class="theader">
        <div class="caption">我是Title</div>
    </div>
    <div class="tcolumn">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>
    <div class="tbody">
        <div class="row">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
        </div>
    </div>
    <div class="tfooter">
        <div class="footer">zhongguogosssss</div>
    </div>
</div>

 

 ruby：

    亚洲文字用格局，支持不太好，除了firefox其它浏览器不支持。

float-root:

    之前对于float元素，我们都会在最后天剑clear:both来消除父元素高度塌陷的问题。有了float-root后，可直接给父元素设置display:float-root；父元素就不会高度塌陷了。

.divF{
    background-color:#3355FF;
    width:100%;
    display:flow-root;
}
.flow{
    background-color:#ff5533;
    width:50%;
    height:80px;
    flow:left;
}

<div class="divF">sfsfsfsfsf
    <div class="flow">
    flow
    </div>
</div>

 对于老版本不兼容css3的页面，可用css的条件判断@supports()：

 .divF{
    background-color:#3355FF;
    width:100%;
}
.flow{
    background-color:#ff5533;
    width:50%;
    height:80px;
    flow:left;
}

/**
 * 支持flowroot情况
 */
@supports(display:flow-root){
    .divF{
        display:flow-root;
    }
}

/**
 * 不支持flowroot情况
 */
@supports not(display:flow-root){
    .divF{
        display:block;
    }
    .divF::after{
        content:'',
        display:block;
        clear:both;
    }
}

 contents：

     css3新加入内容，将会成为下一代html的默认display。moz引擎已经支持，Blink引擎和WebKit引擎开始支持，edge不支持。

     display:contents 元素本身不产生任何边界框，但是子元素和伪元素可设置边框。同时在这个元素中的css属性样式，将会影响到子元素。

     即仅保留内容，自身不做参与，自身的css会影响到子元素，不会在自己身上起作用。

.contents{
    display:contents;
    font-size:10em;
    border:1px solid black;
}

<div class="contents">
    <div class="flow">
    flow242342
    </div>
</div>

以上代码中font-size会对子元素产生影响，但border不会对自身产生影响，即border无效。

box & flexbox:

    css3新内容，盒子模型，之前我们要让多个div排列使用flow或inner-block来实现，盒子模型可以解决这个问题。

    display:-webkit-box；display:-moz-box;display:box;

    是盒子模型的过渡产物，现在都以flex来代替。因此不做介绍。

flex:

　弹性盒子模型，将彻底取代float，实现局部内容页面的排列。小范围内布局，grid是大范围页面框架的布局。

   flex为了兼容safari要设置为-webkit-flex;ie10及以上支持。

    flex中的子元素成为项目item。flex分为main主轴，和cross纵轴。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

　flex-direction | -webkit-flex-direction: row（默认值）横向排列，row-reverse 反向横向。 column 纵向排列，column-reverse反纵向排序。

   flex-wrap：nowrap（不换行，默认值），wrap（换行），wrap-reverse（反向换行）

   flex-flow:是flex-direction和flex-wrap的结合体。

      比如：

　　   flex-direction: row;flex-wrap:wrap;    ====  flex-flow:row wrap;

   justify-content: 项目在主轴上的排列方式。

         flex-start （左对齐，默认值）| flex-end（右对齐） | center（居中） | space-between（两端对齐）

    | space-around（项目间隔平均分配，项目与项目间隔相等，比项目与边框间隔大一倍，如同每个项目有个相等的margin）

  align-items：项目在交叉轴对齐方式

        flex-start（上对齐） | flex-end（下对齐） | center（居中） | baseline（项目的第一行文字作为基线，对齐）

    | stretch（拉伸，默认值，项目未有高度或高度为auto时，占据整个高度）

  align-content： 多根交叉轴线对齐方式，单轴线不起作用。

     align-content: flex-start | flex-end | center | space-between | space-around | stretch（默认值）;

    内部item项目属性：

       order ： integer；  排序，数值越小越靠前。

      flex-grow： number； 放大比例，默认值为0，不放大。即在有多余空间时，是否将当前项目扩展，填充剩余空间。

  flex-shrink：number;缩小比例，默认值为1，缩小。为0时不缩小。

     flex-basis：length| auto(默认值); 在分配多余空间之前，项目占据的主轴空间，相当于div margin一样，比如width=300px; flex-basis:350px;就相当于margin:0px 25px;

     flex:是前3个属性的合体。flex: 0 1 auto;

     align-self: 允许单个项目有与其他项目不一样的对齐方式，相当于覆盖父类的align-items。默认值为auto，即按照父类来。 

       　　align-self: auto | flex-start | flex-end | center | baseline | stretch;

      相当于我们可以让部分项目上对齐，但是个别项目下对齐。

grid：

    grid网格布局，控制整体页面布局用。将页面分为列和行，有点类似于html最初的table作为布局一样。但是是div来实现的。IE10要附带-ms。

    grid引入一个新的单位 fr ：fraction（ 分数）。还有斜杠 / ,斜杠在此表示从第几个开始到第几个结束（不包括结束）。

     vh视口。将窗体大小为100vh = screenHeight。内容相对于窗体大小的高度。

     grid-template-columns：1fr 1fr 2fr 1fr 1fr; 指定列和列宽,总共分5个列，中间列占据2/6的宽度,其它各占据1/6的宽度。

     grid-template-rows：50vh 50vh; 指定行和行高，总共分2行，各行占据屏幕一半高度。

  grid-template-columns：1fr 1fr;
  grid-template-rows：50vh 50vh;

 

   

   结果如上图所示。

      被设为display:grid;为网格容器；网格容器的子元素为网格项。网格之间为网格线，网格占据空间为网格区域。

     以上图为例：

　　　　网格项：就是上面的4个模块。

              网格线：横向有3个，纵向有3个。line1-line3.

              可通过网格来设置模块所在的位置，以及所跨度的位置，就如同row-span和column-span一样。　　

  .Search{

　　　　　     grid-column-start:1;

             grid-column-end:2;

             grid-row:2/3;

     }

 

             也可通过斜杠来设置,可设置跨行跨列：

              grid-column:1/2;

              如果只有1行的情况可设置为  grid-row:1;没有跨度的也可以直接用数字，

              比如:

              .search{ grid-column:1;grid-row:2; }

              也可通过在网络容器中通过网格区域设置：

 grid-template-areas : "A B C D";
 .search{
　　grid-area:A;
}

 以下为一个例子：　

.container{
    display:grid;
     height: 100vh;
    grid-template-columns:100px 250px 1fr;
    grid-template-rows:auto 1fr auto;
}
.team{
    grid-column:1;
    grid-row:1/4;
    background-color:red;
}
.channel{
    grid-column:2;
    grid-row:1/4;
    background-color:green;
}
.header{
    grid-column:3;
    grid-row:1;
    background-color:gray;
}
.content{
    grid-column:3;
    grid-row:2;
    background-color:yellow;
}
.footer{
    grid-column:3;
    grid-row:3;
    background-color:blue;
}
</style>


<div class="container">
    <div class="team"></div>
    <div class="channel"></div>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

 

布局结果：

   

 

 

  

     

     

   

 

  

        

  

 

   

   

 

posted on 2018-03-13 16:58  zhaoqiang1980  阅读(211)  评论(0)  编辑  收藏  举报
Copyright © 2024 zhaoqiang1980
Powered by .NET 9.0 on Kubernetes Powered by: 博客园