域名频道-专业提供域名注册,网站空间,电子邮箱,VPS主机等服务
首页 域名注册 虚拟主机 香港主机 美国主机 VPS主机 网站建设 ShopEX网店 软件开发 客户中心 购物车
域名服务,域名注册 常见问题
文章搜索


本类TOP10
·松江网页设计_松江网页制...
·上海轨道交通图-上海地图
·松江公交线路图-松江地图
·marquee连续滚动
·今天几度?-天气预报-全...
·松江新城地图-松江地图
·松江城区地图-松江地图
·HAO123邮箱登陆代码
·shopex免费模板,下...
·松江DNS服务器地址,松...
当前位置:域名频道首页 > 常见问题 > 网页制作
CSS 3 灵活的 Box 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,你就可以轻松的做到垂直对齐

以下为引用的内容:

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

点击查看文章详情:http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/

原文地址:http://www.javaeye.com/news/10046-css-box-model

来自:域名频道 时间:2009-8-27 返回 常见问题 首页
关于我们 联系方式 付款事宜 招聘启事 网站地图 域名注册 虚拟主机 法律顾问

Copyright 2000-2013 域名频道(www.DNS110.com)
地址:上海市松江区新松江路1188弄37号 邮编:201620
电话:021-67820741 67820742 67820743 传真:转分机805 值班电话:021-67820743
QQ:219854 Email:support@dns110.com