你的位置:首页 > 网页设计

[网页设计]CSS3弹性盒模型


弹性盒模型

    1. 弹性盒模型,在使用弹性盒模型时,父元素必须要加:display:box; 或display: inline-box;   box-orient定义盒模型的布局方向,horizontal水平显示,vertical垂直显示
      • <style>  .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;}  .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}</style><body>  <div >    <div>1</div>    <div>2</div>    <div>3</div>  </div></body>

         

    2. 元素排列顺序box-direction: Normal, reverse(反序)
      • <style>  .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: reverse;}  .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}</style><body>  <div >    <div>1</div>    <div>2</div>    <div>3</div>  </div></body>

         

      • 元素排列顺序,box-ordinal-group:123..... 设置元素的具体的排列顺序
        • <style>  .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;}  .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}  .box div:nth-of-type(1) {-webkit-box-ordinal-group: 2;}  .box div:nth-of-type(2) {-webkit-box-ordinal-group: 3;}  .box div:nth-of-type(3) {-webkit-box-ordinal-group: 1;}</style><body>  <div >    <div>1</div>    <div>2</div>    <div>3</div>  </div></body>

           

    3. 弹性盒模型(2),box-flex定义盒子的弹性空间,定义盒子中每个div所占的份数,类似于定义百分比,子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
      • <style>  .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;}  .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}  .box div:nth-of-type(1) {-webkit-box-flex: 1;}  .box div:nth-of-type(2) {-webkit-box-flex: 2;}  .box div:nth-of-type(3) {-webkit-box-flex: 3;}</style><body>  <div >    <div>1</div>    <div>2</div>    <div>3</div>  </div></body>

         

    4. box-pack在水平方向上对盒子富裕的空间进行管理,属性值有:start(富裕空间在右侧), end(富裕空间在左侧), center(富裕空间在两侧), justify(富裕空间平均分配到元素之间的间隙)
      • <style>  .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-box-pack: end;}  .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}</style><body>  <div >    <div>1</div>    <div>2</div>    <div>3</div>  </div></body>

         

    5. box-align在垂直方向上对元素的位置进行管理,有三个属性值:start(富裕空间在底部), end(富裕空间在顶部), center(垂直居中)
    6. 盒 模型阴影box-shadow: [inset] x, y,  blur, [spread], color; inset: 投影方式(内投影); x, y: 阴影偏移; blur: 模糊半径; spread: 扩展阴影半径(先扩展一定像素再模糊); color: 阴影颜色;
      • <style>  .box {width: 100px; height: 100px; margin: 100px; background: red; box-shadow: 10px 10px 30px blue;}</style><body>  <div ></div></body>

         

    7. box-reflect倒影,有四个属性,表示四个方向分别是: above, below, left, right;
      • <style>
        // reflect表示倒影和元素之间的距离 img { display: block; margin: 200px auto; -webkit-box-reflect: below 10px;}</style><body> <img src="" /></body>

         

    8. 渐变: -webkit-linear-gradient(red 0, blue 100%);
    9. resize: both(上下左右均可拖动),horizontal(水平可拖动),vertical(垂直可拖动); 一定要配合overflow:auto使用
      • <style>  // 水平方向上可以拖动  .box {width: 100px; height: 100px; background: url(1.png); border: 5px solid #000; resize: horizontal; overflow: auto;}</style><body>  <div ></div></body>

         

    10. box-sizing盒模型的解析模式
      • content-box 标准盒模型   width/height = content
      • border-box 怪异盒模型   width/height = border + padding + content


        欢迎交流~