首页 > 代码库 > css3盒子模型
css3盒子模型
通常要把一个容器分成三栏的话比较简便的方法是把三个字容器的 width 都设为33.3%,这种方法无法把父容器的宽度完全填充,在父容器的宽度足够大的时候留下的空白会是页面变得很不美观。利用css3盒子模型,这种问题将迎刃而解。
<div class="content"> <div class="v1"></div> <div class="v2"></div> <div class="v3"></div></div>
.content{ display:-webkit-box; display:-moz-box; display:box; width:500px; height:200px;}.v1{ background-color:#0f0; -webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2;}.v2{ background-color:#f00; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; }.v3{ width:100px; background-color:#0f0;}
几个有用的属性:
-webkit-box-orient
box-orient属性用于设置盒模型内部元素的排列方式:
- inline-axis:从左向右排列(默认值)
- horizontal:水平排列
- vertical:垂直排列
- block-axis:从上向下排列
-webkit-box-sizing
box-sizing属性用于改变容器的盒模型组成方式(规定两个并排的带边框的框):
- content-box: 此值维持css2.1盒模型的组成模式,border|padding|content {element width=border+padding+content}
- border-box: 此值改变css2.1盒模型组成模式,content|border|padding {element width=content}
-webkit-box-direction
box-direction 属性用于改变容器的显示顺序,使之反向排列(以反方向显示 div 框的子元素),默认的情况下,block 级元素是按照加载顺序从上到下排列, inline 级元素是从左到右排列的:
box-direction: normal|reverse|inherit;
- reverse:block 级元素显示在最顶部,最后加载的 inline 级元素显示在左边
-webkit-box-pack
box-pack 属性可以用于设置子容器在水平轴上的空间分配方式,它共有四种可能值:start,end,justify 和 center:
- start :所有子容器都分布在父容器的左侧,右侧留空
- end :所有子容器都分布在父容器的右侧,左侧留空
- justify :所有子容器平均分布(默认值)
- center :平均分配父容器剩余的空间(能压缩子容器的大小,并且有全局居中的效果)
-webkit-box-align
box-align 属性用于管理子容器在竖轴上的空间分配方式,共有五个值:start,end,center,baseline 和 stretch。
- start :子容器从父容器顶部开始排列
- end :子容器从父容器底部开始排列
- center :子容器横向居中
- baseline :所有子容器沿同一基线排列
- stretch :所有子容器和父容器保持同一高度(默认值)
支持chrome和firefox和safari,ie和opera无效。
css3盒子模型
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。