案例解读CSS3中的box

2021-01-20 05:59 jianzhan

box-flex是css3新加上的盒子实体模型特性,它的出現摆脱了大家常常应用的波动合理布局,完成竖直等高、水均值分、按占比区划。可是它有1定的局限性,在firefox、chrome这访问器下必须应用它们的独享特性来界定:firefox(-moz)、chrome(-webkit)。

1、box-flex特性
box-flex关键让子器皿对于父器皿的宽度按1定标准开展区划。

CSS Code拷贝內容到剪贴板
  1. <div class="box">   
  2.  <div class="col_1">111</div>   
  3.  <div class="col_2">222</div>   
  4.  <div class="col_3">333</div>   
  5. </div>   
  6. <style type="text/css">   
  7. .box {   
  8.  display:box;   
  9.  display:-webkit-box;   
  10.  display:-moz-box;   
  11.  background-color:#fff;   
  12.  width:500px;   
  13.  height:100px;   
  14.  border:1px solid #333;   
  15.  margin:0 auto;   
  16. }   
  17. .col_1 {   
  18.  box-flex:1;   
  19.  -moz-box-flex:1;   
  20.  -webkit-box-flex:1;   
  21.  background-color:#ffc;   
  22. }   
  23. .col_2 {   
  24.  background-color:#ccf;   
  25.  box-flex:2;   
  26.  -moz-box-flex:2;   
  27.  -webkit-box-flex:2;   
  28. }   
  29. .col_3 {   
  30.  background-color:#fcf;   
  31.  box-flex:2;   
  32.  -moz-box-flex:2;   
  33.  -webkit-box-flex:2;   
  34. }   
  35. </style>  

留意:
父器皿务必界定为display:box,其子器皿才能够开展区划(假如定了display:box则该器皿为内联元素,应用margin:0 auto让其垂直居中在firefox下失效,必须根据父器皿的text-align:center;来操纵。但在chrome下是能够的)
上面所讲到的事例中,3个子块各自设定了1、2、2,也便是把这个父器皿分为5份,各自占有了父构造宽度的1/5(100px)、2/5(200px)、2/5(200px)。
以上是按占比数来开展区划的,假如在其中1个或好几个子器皿设定了固定不动宽度,其它子器皿沒有设定,那末设定宽度的按宽度来算,剩余的一部分再按上面的方式来测算。

CSS Code拷贝內容到剪贴板
  1. .col_3 {   
  2.  background-color:#fcf;   
  3.  width:50px;/*设定宽度为50px*/  
  4. }  

当子器皿中必须有间距的情况下,她们均分的宽度必须减去正中间的margin,随后再按占比均分。

CSS Code拷贝內容到剪贴板
  1. .col_2 {   
  2.  background-color:#ccf;   
  3.  box-flex:2;   
  4.  -moz-box-flex:2;   
  5.  -webkit-box-flex:2;   
  6.  margin:0 20px;   
  7. }  

2、box特性
上面讲到的是怎样将box-flex怎样对父器皿的宽度开展区划,如今来讲1下父器皿里边的box特性包含哪些。
box-orient, box-direction, box-align, box-pack, box-lines
1、box-orient
box-orient用来明确父器皿里子器皿的排序方法是水平還是竖直,可选特性以下:
horizontal | vertical | inline-axis | block-axis | inherit
horizontal和inline-axis特性其实际效果主要表现1致,都可以以将器皿水平排序,在默认设置状况下也展现水平排序的款式。当父器皿设定高宽比时,在firefox下面其子器皿的高宽比失效,但chroma下面则合理。

CSS Code拷贝內容到剪贴板
  1. .col_1 {   
  2.  height:50px;   
  3. }   
  4. .col_2 {   
  5.  height:80px;   
  6. }  

假如你器皿不设定高宽比,子器皿的高宽比值才起效,在firefox下面她们的高宽比取在其中的最大值。而chrome下面设定高宽比的子器皿为自身的高宽比,未设定的其高宽比和最大值的高宽比1样,实际上便是和父器皿的高宽比1致。

CSS Code拷贝內容到剪贴板
  1. .box {   
  2.  /*未设定高宽比*/  
  3. }   
  4. .col_1 {   
  5.  height:50px;   
  6. }   
  7. .col_2 {   
  8.  height:80px;   
  9. }   
  10. .col_3 {   
  11.  /*未设定高宽比*/  
  12. }  

vertical和block-axis特性实际效果主要表现1致,都可以将子器皿竖直排序。她们是对父器皿的高宽比开展分派。假如子器皿设定了宽度,也是谷歌下面合理,火狐失效,其它都与horizontal主要表现1致。

2、box-direction
box-direction用来明确父器皿里边的子器皿排序次序,具备下列特性:
normal | reverse | inherit
normal是默认设置值,如上面检测結果。
reverse表明翻转,其主要表现方法跟normal相反,展现为3、2、1

3、box-align
box-align表明父器皿里边子器皿的竖直对齐方法,特性值为:
start | end | center | baseline | stretch
start、baseline展现实际效果

end展现实际效果

center展现实际效果

stretch展现实际效果,(谷歌下面如start)

4、box-pack
box-pack表明父器皿里边子器皿的水平对齐方法,可选主要参数以下所示:
start | end | center | justify
css编码

CSS Code拷贝內容到剪贴板
  1. .box {   
  2.  display:box;   
  3.  display:-webkit-box;   
  4.  display:-moz-box;   
  5.  background-color:#fff;   
  6.  width:500px;   
  7.  border:1px solid #333;   
  8.  margin:0 auto;   
  9.  height:100px;   
  10.  -webkit-box-pack:start;   
  11.  -moz-box-pack:start;   
  12.  box-pack:start;   
  13. }   
  14. .col_1,.col_2,.col_3{   
  15.  width:100px;   
  16. }  

start:在box-pack表明水平居左对齐,以下所示:

end:在box-pack表明水平居右对齐,以下图所示

center:在box-pack表明水平垂直居中对齐,以下图所示

justify:在box-pack表明两侧对齐试