css3流式布局

css3布局方式:

  • 不推荐使用float,有时候使用浮动的时候,对于可适应的流氏布局,无法胜任。 推荐使用css3的display:webkit-box

使用的html代码

        <div class="warp">              <div class="one"> </div>              <div class="two"></div>              <div class="three"></div>          </div>
  • box-flex属性

    • box-flex主要让子容器针对父容器的宽度按一定规则进行划分
    • 最重要的一个特性是:如果子元素中有固定的宽度,其他没有设置宽度的则在 父元素的基础上减去子元素的宽度,再按照比例划分。 css3流式布局

css代码

    .warp{display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}     .one{height:80px;width:80px;background:#FFA600;}     .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}     .three{height:80px;width:80px;background:#028002;}
  • box-orient属性

    用来确定父容器里子容器的排列方式,是水平还是垂直;

    • 水平排列 box-orient:horizontal

      css代码

      .warp{-webkit-box-orient: horizontal;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}

      css3流式布局

    • 垂直排列 box-orient:vertical

      css代码

      .warp{-webkit-box-orient: vertical;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}

      css3流式布局

  • box-align属性

    box-align表示父容器里面子容器的垂直对齐方式,可选参数如下所示: start | end | center | baseline | stretch。

    • 居顶对齐 start

      css代码

      .warp{-webkit-box-align: start;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}

      css3流式布局

    • 垂直排列 end

      css代码

      .warp{-webkit-box-align: end;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}

      css3流式布局

  • 垂直排列 center

    css代码

      .warp{-webkit-box-align: center;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}   .one{height:80px;width:80px;background:#FFA600;}   .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}   .three{height:80px;width:80px;background:#028002;}

    css3流式布局

  • 垂直排列 stretch

    css代码

      .warp{-webkit-box-align: stretch;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}   .one{width:80px;background:#FFA600;}   .two{-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}   .three{width:80px;background:#028002;}

    css3流式布局 但是需要注意的是:如果子元素的高度已经设置啦height:20px就不会自动的拉伸。

  • box-pack属性

    box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示: start | end | center | justify

    • 水平居左对齐 start

      css代码

      .warp{-webkit-box-pack: start;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;} .one{height:80px;width:80px;background:#FFA600;} .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;} .three{height:80px;width:80px;background:#028002;}

      css3流式布局

  • box-pack表示水平居右对齐 end

    css代码

      .warp{-webkit-box-pack: end;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}   .one{height:80px;width:80px;background:#FFA600;}   .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}   .three{height:80px;width:80px;background:#028002;}

    css3流式布局

  • box-pack 表示水平居中对齐 center

    css代码

      .warp{-webkit-box-pack: center;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}   .one{height:80px;width:80px;background:#FFA600;}   .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}   .three{height:80px;width:80px;background:#028002;}

    css3流式布局

  • box-pack 表示水平居中对齐 justify

    css代码

      .warp{-webkit-box-pack: justify;display:-webkit-box;display:-moz-box;display:box;height:100px;width:300px; border:1px solid #333;}   .one{height:80px;width:80px;background:#FFA600;}   .two{height:100px;-webkit-box-flex: 1;-o-box-flex: 1;box-flex: 1;background:#7F0081;}   .three{height:80px;width:80px;background:#028002;}

    css3流式布局

上一篇:quick 2.23 它们的定义c++代码lua与总结的一些细节


下一篇:菜鸟学SSH(三)——Struts2国际化自动检测浏览器语言版