css3中webkit-box的用法
2016-06-15 16:17
323 查看
转自:http://www.frontopen.com/288.html
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
提供的关于盒模型的几个属性:
1、三列自适应布局,且有固定margin:
2、当一列定宽,其余两列分配不同比例亦可(三列布局,一列定宽,其余两列按1:2的比例自适应):
3、下面是一个常见的web page 的基本布局:
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
提供的关于盒模型的几个属性:
1、三列自适应布局,且有固定margin:
<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>
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>
相关文章推荐
- 如何用css样式改变下拉菜单的样式?
- 100多个纯CSS动画图标
- css的四种隐藏方式
- Animate.css让添加CSS动画像喝水一样容易
- CSS学习7(颜色和背景)
- 学习记录--使用 F12 开发人员工具调试 HTML 和 CSS
- 基础理解2:CSS3按钮动画
- css的伪类和伪元素使用示例
- overflow:hidden清除浮动原理
- 【CSS学习】CSS背景background、background-position使用详解
- 12-CSS布局模型
- 写底部样式一定要加的属性
- CSS强制英文、中文换行与不换行 强制英文换行(转)
- CSS强制英文、中文换行与不换行 强制英文换行(转)
- 纯CSS设置Checkbox复选框控件的样式
- html css 行级标签 块级标签
- 通过jxl来生成,有单元格样式的excel
- 鼠标点击后的CSS3跑马灯效果
- CSS之密码强度检测
- 自定义网页滚动条样式插件malihu-custom-scrollbar-plugin的介绍和使用方法