CSS3.0Box Model的应用

首页 > CSS3.0Box Model的应用

　Alex Russell之前有许多很有意思的讨论-当前网络上的哪些东西是错误的!他最近的一篇帖子提到了CSS 3 progress和一个特别灵活的box model：

　　David Baron(Mozilla公司)编写了一个灵活的Box Layout Module，又名“hbox and vbox”(横向盒和纵向盒)。使用Gecko和WebKit的浏览器都能支持hbox 和 vbox。你应该忽略IE浏览器，这样你创建box布局将会更容易。

以下为引用的内容：

    /* hbox and vbox classes */

      .hbox {
              display: -webkit-box;
              -webkit-box-orient: horizontal;
              -webkit-box-align: stretch;

              display: -moz-box;
              -moz-box-orient: horizontal;
              -moz-box-align: stretch;

              display: box;
              box-orient: horizontal;
              box-align: stretch;
      }

      .hbox> * {
              -webkit-box-flex: 0;
              -moz-box-flex: 0;
              box-flex: 0;
              display: block;
      }

      .vbox {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-box-align: stretch;

              display: -moz-box;
              -moz-box-orient: vertical;

              -moz-box-align: stretch;

              display: box;
              box-orient: vertical;
              box-align: stretch;
      }

      .vbox> * {
              -webkit-box-flex: 0;
              -moz-box-flex: 0;
              box-flex: 0;
              display: block;
      }

      .spacer {
              -webkit-box-flex: 1;
              -moz-box-flex: 1;
              box-flex: 1;
      }

      .reverse {
              -webkit-box-direction: reverse;
              -moz-box-direction: reverse;
              box-direction: reverse;
      }

      .boxFlex0 {
              -webkit-box-flex: 0;
             -moz-box-flex: 0;
              box-flex: 0;
      }

      .boxFlex1, .boxFlex {
              -webkit-box-flex: 1;
              -moz-box-flex: 1;
              box-flex: 1;
      }

      .boxFlex2 {
              -webkit-box-flex: 2;
              -moz-box-flex: 2;

              box-flex: 2;
      }

      .boxGroup1 {
              -webkit-box-flex-group: 1;
              -moz-box-flex-group: 1;
              box-flex-group: 1;
      }

      .boxGroup2 {
              -webkit-box-flex-group: 2;
              -moz-box-flex-group: 2;
              box-flex-group: 2;
      }

      .start {
              -webkit-box-pack: start;
              -moz-box-pack: start;
              box-pack: start;
      }

      .end {
              -webkit-box-pack: end;
              -moz-box-pack: end;
              box-pack: end;
      }

      .center {
              -webkit-box-pack: center;
              -moz-box-pack: center;
              box-pack: center;

}

有了这个核心的CSS，你就可以轻松的做到垂直对齐

以下为引用的内容：

分组：

以下为引用的内容：

<form action="handler.cgi" method="POST" class="hbox">
        <div class="vbox">
                <label>First Name (required):</label>
                <label>Last Name:</label>
        </div>
        <div class="vbox">
                <input type="text" name="first"/>
                <input type="text" name="last"/>
                <input type="submit"/>
        </div>
</form>

栏目导航

成功案例

mySurveyASIA
按照每成功注册一个mySurveyASIA会员（邮件激活，信息真实...

帮宝适
达闻采用绩效结算的方式，按照每成功注册一个Pampers...

中国元素
按照有效访问中国元素网站和成功报名参赛中国元素会员的注册数据，都作为有效数据结算

栏目导航

成功案例

常见问题