深入浅析css3 中display box使用方法
发布时间：2015-11-25 16:11:29 作者：佚名 
我要评论
我要评论css3给display属性提供了box这个值，极大的方便了开发者，下面给大家介绍css3 display box具体用法,对css3 display box相关知识感兴趣的朋友一起学习吧
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>
效果如下：
子元素中box-flex属性为该元素的占比，若想让此属性生效，父元素必须设置display:box。以a3为例，a3设置了box-flex为3，则他所占的宽度为600*(3/(1+2+3))为300px。
如果其中一个子元素设置了固定宽度100px，则剩下的500px将会参与到比例划分的规则中。
以上所述就是本文给大家分享的css3 中display box使用方法，希望大家喜欢。
相关文章
这篇文章主要介绍了使用CSS的border-radius属性 设置圆弧,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-26详解CSS3中的box-sizing（content-box与border-box）
这篇文章主要介绍了CSS3中的box-sizing（content-box与border-box）的相关资料,需要的朋友可以参考下2019-04-19
这篇文章主要介绍了使用CSS的border属性绘制各种几何形状的方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们2019-03-01
这篇文章主要介绍了CSS绘制三角形的实现代码(border法)的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-11- 本篇文章主要介绍了CSS3 用border写 空心三角箭头 (两种写法)，非常具有实用价值，需要的朋友可以参考下2017-09-29
- 这是一款由脚本之家翻译自国外网站的在线CSS工具，可在线调整生成样式的边框圆角效果，以及边框的宽度、颜色、样式等属性，还可实时预览生成的CSS代码，并支持一键复制代码2017-09-19
css display inline block 兼容性问题写法
今天在写布局的时候发现的一个bug，如果不这样就达不到预期的效果，无法两行排列，原来ie6、ie7下对display:inline-block不支持，所以需要用到css hack才可以2016-01-10- 本篇文章给大家介绍css3 display知识详解，涉及到css3 display相关知识，感兴趣的朋友一起学习吧2015-11-25
深入解析CSS的display:inline-block属性的使用
这篇文章主要介绍了CSS的display:inline-block属性的使用,其中对使用时产生的空隙问题的解决作了重点讲解,需要的朋友可以参考下2015-11-09- 在一般的CSS布局制作时候，我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过CSS display知识加实例讲解2014-09-02
最新评论