css3知识-*茉莉花开*

一、box-sizing 属性

　　 规定两个并排的带边框的框

二、align-items (适用于父类容器上)

　　 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

值：

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

事例：

  1     DOCTYPE html  > 
  2     html  > 
  3     head   lang  ="en"  > 
  4         meta   charset  ="UTF-8"  > 
  5         title  >  title  > 
  6         style   type  ="text/css"  > 
  7           .box  { 
  8               display  :  -webkit-flex  ; 
  9               display  :  flex  ; 
 10               width  :  200px  ;  height  :  100px  ;  margin  :  0  ;  padding  :  0  ;  border-radius  :  5px  ;  list-style  :  none  ;  background-color  :  #eee  ;  } 
 11           .box li  {  margin  :  5px  ;  border-radius  :  5px  ;  background  :  #aaa  ;  text-align  :  center  ;  } 
 12           .box li:nth-child(1)  {  padding  :  10px  ;  } 
 13           .box li:nth-child(2)  {  padding  :  15px 10px  ;  } 
 14           .box li:nth-child(3)  {  padding  :  20px 10px  ;  } 
 15           #box  { 
 16               -webkit-align-items  :  flex-start  ; 
 17               align-items  :  flex-start  ; 
 18           } 
 19           #box2  { 
 20               -webkit-align-items  :  flex-end  ; 
 21               align-items  :  flex-end  ; 
 22           } 
 23           #box3  { 
 24               -webkit-align-items  :  center  ; 
 25               align-items  :  center  ; 
 26           } 
 27           #box4  { 
 28               -webkit-align-items  :  baseline  ; 
 29               align-items  :  baseline  ; 
 30           } 
 31           #box5  { 
 32               -webkit-align-items  :  strecth  ; 
 33               align-items  :  strecth  ; 
 34           } 
 35         style  > 
 36     head  > 
 37     body  > 
 38         h2  > align-items:flex-start   h2  > 
 39         ul   id  ="box"   class  ="box"  > 
 40             li  > a   li  > 
 41             li  > b   li  > 
 42             li  > c   li  > 
 43         ul  > 
 44         h2  > align-items:flex-end   h2  > 
 45         ul   id  ="box2"   class  ="box"  > 
 46             li  > a   li  > 
 47             li  > b   li  > 
 48             li  > c   li  > 
 49         ul  > 
 50         h2  > align-items:center   h2  > 
 51         ul   id  ="box3"   class  ="box"  > 
 52             li  > a   li  > 
 53             li  > b   li  > 
 54             li  > c   li  > 
 55         ul  > 
 56         h2  > align-items:baseline   h2  > 
 57         ul   id  ="box4"   class  ="box"  > 
 58             li  > a   li  > 
 59             li  > b   li  > 
 60             li  > c   li  > 
 61         ul  > 
 62         h2  > align-items:strecth   h2  > 
 63         ul   id  ="box5"   class  ="box"  > 
 64             li  > a   li  > 
 65             li  > b   li  > 
 66             li  > c   li  > 
 67         ul  > 
 68     body  > 
 69     html  >  

查看更多关于css3知识-*茉莉花开*的详细内容...