深入浅析css3 中display box使用方法


Posted in HTML / CSS onNovember 25, 2015

css3给display属性提供了box这个值,极大的方便了开发者,下面给大家介绍css3 display box具体用法。

其中的一个场景如下:

假如我们想要使得内部的123元素水平以不同的比例分割outer所占的空间,以往的做法我们可能会让123元素浮动或者设置display属性为inline-block,然后再给width属性设置宽度百分比去分割outer。

使用display:box后可以这样实现:

复制代码
代码如下:

<code class="language-css" hljs="">#outer{
width:600px;
height:100px;
display:-moz-box;
display:-webkit-box;
display:box;
}
#a1{
background:blue;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
#a2{
background:green;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
#a3{
background:yellow;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}</code>

效果如下:

深入浅析css3 中display box使用方法

子元素中box-flex属性为该元素的占比,若想让此属性生效,父元素必须设置display:box。以a3为例,a3设置了box-flex为3,则他所占的宽度为600*(3/(1+2+3))为300px。

如果其中一个子元素设置了固定宽度100px,则剩下的500px将会参与到比例划分的规则中。

以上所述就是本文给大家分享的css3 中display box使用方法,希望大家喜欢。

HTML / CSS 相关文章推荐
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 HTML / CSS
CSS3 display知识详解
Nov 25 #HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 #HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 #HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 #HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 #HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 #HTML / CSS
Css3圆角边框制作代码
Nov 18 #HTML / CSS
You might like
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python获取代码运行时间的实例代码
2018/06/11 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
大学生四年生活自我鉴定
2013/11/21 职场文书
企业负责人任命书
2014/06/05 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
营运督导岗位职责
2015/04/10 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python