css3中webkit-box的用法
2024-07-29 23:37:24 218人阅读
webkit-box
1、之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性,浏览器会帮我们做额外的计算。
提供的关于盒模型的几个属性:
box-orient 子元素排列 vertical or horizontal box-flex 兄弟元素之间比例,仅作一个系数 box-align box 排列 box-direction box 方向 box-flex-group 以组为单位的流体系数 box-lines box-ordinal-group 以组为单位的子元素排列方向 box-pack以下是关于flexible box的几个实例 1、三列自适应布局,且有固定margin: <!DOCTYPE html><html><style> .wrap { display: -webkit-box; -webkit-box-orient: horizontal; } .child { min-height: 200px; border: 2px solid #666; -webkit-box-flex: 1; margin: 10px; font-size: 100px; font-weight: bold; font-family: Georgia; -webkit-box-align: center; } </style><div><div>1</div><div>2</div><div>3</div></div></html> 2、当一列定宽,其余两列分配不同比例亦可(三列布局,一列定宽,其余两列按1:2的比例自适应): <!DOCTYPE html><html><meta charset=”utf-8″ /><style> .wrap { display: -webkit-box; -webkit-box-orient: horizontal; } .child { min-height: 200px; border: 2px solid #666; margin: 10px; font-size: 40px; font-weight: bold; font-family: Georgia; -webkit-box-align: center; } .w200 {width: 200px} .flex1 {-webkit-box-flex: 1} .flex2 {-webkit-box-flex: 2} </style><div><div>200px</div><div>比例1</div><div>比例2</div></div></html> 3、下面是一个常见的web page 的基本布局: <!DOCTYPE html><html><meta charset=”utf-8″ /><style> header, footer, section { border: 10px solid #333; font-family: Georgia; font-size: 40px; text-align: center; margin: 10px; } #doc { width: 80%; min-width: 600px; height: 100%; display: -webkit-box; -webkit-box-orient: vertical; margin: 0 auto; } header, footer { min-height: 100px; -webkit-box-flex: 1; } #content { min-height: 400px; display: -webkit-box; -webkit-box-orient: horizontal; } .w200 {width: 200px} .flex1 {-webkit-box-flex: 1} .flex2 {-webkit-box-flex: 2} .flex3 {-webkit-box-flex: 3} </style><div id=”doc”><header>Header</header><div id=”content”><section>定宽200</section><section>比例3</section><section>比例1</section></div><footer>Footer</footer></div></html> |
css3中webkit-box的用法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉:
投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。