深入浅析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实现质感细腻丝滑按钮
Mar 09 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
python 有效的括号的实现代码示例
2019/11/11 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
python实现数字炸弹游戏
2020/07/17 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
学生安全责任书模板
2014/07/25 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android