HTML/CSS

浅谈 CSS3 盒布局与弹性盒布局

也想出现在这里?联系我们
创客云

在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用 float:left。但使用 float 属性时,会出现一些问题,例如浮动,并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。

section

什么是 CSS3 盒布局

那么 CSS3 盒布局 display:box 就可以解决这样的问题,它可以不需要使用 float 属性就可以横排块状元素。并且每一个版块的高度都是一样的。它的作用与 CSS3 多栏布局 columns 很相似。
浅谈 CSS3 盒布局与弹性盒布局
怎么使用 CSS3 盒布局 display:box 呢?方法很简单,只需要给父元素加上 display:box 即可。

也想出现在这里?联系我们
创客主机
  1. .tt{display:box;display:-webkit-box;display:-moz-box;}

实例代码:

  1. <style>
  2. .tt{display:box;display:-webkit-box;}
  3. .ft1{font-size:20px;text-transform:capitalize;width:200px;background:#f00;padding:20px}
  4. .ft2{font-size:20px;text-transform:uppercase;width:200px;background:yellow;padding:20px}
  5. .ft3{font-size:20px;font-variant:small-caps;width:200px;background:green;padding:20px}
  6. </style>
  7. <div class="tt">
  8. <div class="ft1">首字母大写:hello world首字母大写:hello world首字母大写:hello world首字母大写:hello world首字母大写:hello world首字母大写:hello world</div>
  9. <div class="ft2">全部大写:hello world全部大写:hello world全部大写hello world全部大写:hello world全部大写:hello world</div>
  10. <div class="ft3">小型大写:Hello World小型大写:Hello World小型大写:小型大写:Hello World</div>
  11. </div>

section

什么是弹性盒布局

上面的盒布局可以自动将块状区域横排,但是它不会随浏览屏幕变化而变化宽度形成自适应。这时可以给盒布局里子版块添加 box-flex 属性让变成弹性盒布局,就会自适应了。

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

另外还可以通过 box-ordinal-group 属性来改变每个子版块的的顺序,后面数字越小越靠前。

  1. .ft1{-webkit-box-ordinal-group:1;-moz-box-ordinal-group:1;}
资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!