关于css3弹性盒模型的介绍

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年10月7日04:56:44 评论 12 views 1387字阅读4分37秒

这篇文章主要介绍了关于css3弹性盒模型的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

Css3引入了新的盒模型——弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间,使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局

Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML 、GladeXML。使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:

<body> 
<p id="box1">1</p> 
<p id="box2">2</p> 
<p id="box3">3</p> 
</body>

传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序,也可以反转之。要开启弹性盒模型,只需设置拥有子盒子的盒子的display的属性值为box(或inline-box)即可。
display: box;
水平或垂直分布
“box-orient”定义分布的坐标轴:vertical和horizional。这两个值定义盒子如何显示,

body{ 
display: box; 
box-orient: horizontal; 
}

关于css3弹性盒模型的介绍
反向分布
“box-direction”可以设置盒子出现的顺序。默认情况下,只需定义分布坐标轴——box随html流分布。如果为水平坐标轴,则从左到右分布;垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”,则反转盒子的排列顺序。

body { 
display: box; 
box-orient: vertical; 
box-direction: reverse; 
}

关于css3弹性盒模型的介绍
具体分布
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义,盒模型将首先分布这些组,所有这些盒子将在每个组中。分布将从小到大排列。

body { 
display: box; 
box-orient: vertical; 
box-direction : reverse; 
} 
#box1 {box-flex:1;box-ordinal-group: 2;}
#box2 {box-flex:2;box-ordinal-group: 2;} 
#box3 {box-flex:2;box-ordinal-group: 1;}

盒子尺寸
默认情况下,盒子并不具有弹性,如果box-flex的属性值至少为1时,则变得富有弹性。box-flex如何对父容器的宽度进行划分,三个子块分别设置了1、2、2,也就是把这个父容器分成5份,分别占据了父结构宽度的1/5(100px)、2/5(200px)、2/5(200px)。如果盒子不具有弹性,它将尽可能的宽使其内容可见,且没有任何溢出,其大小由“width”和“height”来决定(或min-height、min-width、max-width、max-height)。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

CSS使用盒模型实例

以上就是关于css3弹性盒模型的介绍的详细内容,更多请关注css教程其它相关文章!

继续阅读
HTML和CSS3中的2D、3D结合实现动画效果 html教程

HTML和CSS3中的2D、3D结合实现动画效果

这篇文章给大家介绍的内容是关于HTML和CSS3中的2D、3D结合实现动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 虽然我们我们在前端工作中,对于2D、3D动画效果一般来说...
如何用CSS3属性选择器替代JS的作用 css教程

如何用CSS3属性选择器替代JS的作用

我们知道,在CSS3中除了引入动画和滤镜等特效还有新的布局技术以外还有在选择器的方面也有增强,以前在JS才能完成的工作现在通过CSS的技术也可以实现完成,接下来就给大家介绍一下强大的CSS3 属性选择...
css3的Transition平滑过渡菜单栏实现 css教程

css3的Transition平滑过渡菜单栏实现

这次给大家带来css3的Transition平滑过渡菜单栏实现,实现Transition平滑过渡菜单栏的注意事项有哪些,下面就是实战案例,一起来看一下。 CSS3的制作动画的三大属性(Transfor...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: