下载此文档

自适应弹性布局.doc


文档分类:论文 | 页数:约7页 举报非法文档有奖
1/7
下载提示
  • 1.该资料是网友上传的,本站提供全文预览,预览什么样,下载就什么样。
  • 2.下载该文档所得收入归上传者、原创者。
  • 3.下载的文档,不会出现我们的网址水印。
1/7 下载此文档
文档列表 文档介绍
【2017年整理】自适应的弹性布局CSS3实例教程:自适应的弹性布局Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML、GladeXML。使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:<body><divid="box1">1</div><divid="box2">2</div><divid="box3">3</div></body>传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序,也可以反转之。要开启弹性盒模型,只需设置拥有子盒子的盒子的display的属性值为box(或inline-box)即可。display:box;水平或垂直分布orient”定义分布的坐标轴:vertical和horizional。这两个值定义盒“box-子如何显示body{display:box;box-orient:horizontal;}反向分布“box-direction”可以设置盒子出现的顺序。默认情况下,只需定义分布坐标轴——box随html流分布。如果为水平坐标轴,则从左到右分布;垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”,则反转盒子的排列顺序。body{display:box;box-orient:vertical;box-direction:reverse;}具体分布group”定义盒子分布的顺序。可以随意的控制其分布顺序。属性“box-ordinal-这些组以一个从“1”开始的数字定义,盒模型将首先分布这些组,所有这些盒子将在每个组中。分布将从小到大排列。body{display:box;box-orient:vertical;box-direction:reverse;}#box1{box-ordinal-group:2;}#box2{box-ordinal-group:2;}#box3{box-ordinal-group:1;}盒子尺寸默认情况下,盒子并不具有弹性,如果box-flex的属性值至少为1时,则变得富有弹性。如果盒子不具有弹性,它将尽可能的宽使其内容可见,且没有任何溢出,其大小由“width”和“height”来决定(或min-height、min-width、max-width、max-height)。如果盒子是弹性的,其大小将按下面的方式计算:(width、height、min-width、min-height、max-width、max-height);,那么其大小将完全取决于父box的大小。即:盒子的大小等于父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比(子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和)。如果一个或更多的盒子有一个具体的大小声明,那么其大小将计算其中,余下的弹性盒子将按照上面的原则分享剩下的可利用空间。看看下面的例子,理解起来更容易。所有盒子都是弹性的下面的例子中,box1的大小为

自适应弹性布局 来自淘豆网m.daumloan.com转载请标明出处.

相关文档 更多>>
非法内容举报中心
文档信息
  • 页数7
  • 收藏数0 收藏
  • 顶次数0
  • 上传人cnanjringh
  • 文件大小51 KB
  • 时间2020-08-04