div+css

当前位置:地方网站工作室 >> 网络技术 >> div+css >> 浏览文章

CSS 3 灵活的 Box Model

文章来源:菏泽网站建设  文章作者:javaeye.com  日期:2009年08月29日
Alex Russell之前有许多很有意思的讨论-当前网络上的哪些东西是错误的!

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,你就可以轻松的做到垂直对齐

以下为引用的内容:

<div class="hbox center">
    <div class="vbox center">
        <div>...</div>
        <div>...</div>
    </div>
</div>

分组:

以下为引用的内容:

<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>

追求卓越 精心缔造 菏泽网站建设 地方网络工作室
上一篇:Photoshop CS3可以跑雪豹
下一篇:5个CSS3技术 实现设计增强!
相关文章

我们能为菏泽企业做什么?

菏泽企业网站建设
DIV+CSS布局技术、底层SEO规划设计、菏泽地方网络工作室为您提供优质网站建设服务!
SEO网站推广策划
菏泽唯一SEOwhy认证的SEOER,全面的SEO推广方案,为您量身定制SEO网站推广策划!
国内顶级服务器
新网互联、中国频道、美国主机、韩国主机、地方网络工作室只提供最优质的服务器主机!
《书生商友》商机群发软件
Booksir,一步到位彻底解决中小企业网络整合营销的书生商友营销引擎!

公告

怎么联系我们?

手机:18651363941
地址:由于菏泽生存压力巨大,本人现未居菏泽,在北京就值。如有业务需要,请直接电联。
联系人:刘峰 高娜
QQ:61572536
微信:61572536
邮箱:guf521@163.com

服务宗旨

因为执着 所以专业 追求卓越 精心缔造
售后为先 宁得罪新客户  不拖拉老客户
诚信为本 新互顶级域名空间  畅爽速度