IT兄弟连 HTML5教程 CSS3属性特效 弹性盒模型
CSS3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。弹性盒模型看起来很不错,Gecko和WebKit对该模型都有一些尝试性的测试。在这些属性之前加上-moz和-webkit即可使用该属性。也即是说,firefox、safari、chrome可以使用这些特性。该模型对我们解决网页设计中一些常见的问题非常方便,如:表单布局、垂直居中、视觉上分离html流,等等。为了方便,笔者在这里都使用webkit的前缀来讲解弹性盒模型的例子,读者可以通过chrome浏览器预览案例。弹性盒模型的例子使用以下的HTML代码:
传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序,也可以反转之。要开启弹性盒模型,只需设置拥有子盒子的盒子的display的属性值为box(或inline-box)即可。这里的盒子是box,为box开启盒模型:
#box{ display:box; } /* 为box盒子开启盒模型 */
弹性盒子基础布局的CSS代码如下:
使用chrome浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,如图1所示。
图1 弹性盒模型
(1)box-orient定义盒模型的布局方向
box-orient的参数说明如表1所示。
表1 box-orient参数说明
“box-orient”定义分布的坐标轴:vertical和horizontal。默认是horizontal水平,当将box中的该属性设为水平方向vertical时,box的子盒子垂直显示,为box设置CSS部分代码如下:
使用chrome浏览器重新打开这个文件,就可以看到这个盒模型的子盒子垂直分布,如图2所示。
图2 弹性盒模型垂直分布
(2)box-direction元素排列顺序
“box-direction”可以设置盒子出现的顺序。默认情况下,只需定义分布坐标轴——box随html流分布。如果为水平坐标轴,则从左到右分布;垂直坐标轴则从上到下分布。box-direction的参数说明如表2所示。
表2 box-direction参数说明
定义“box-direction”的属性值为“reverse”,则反转盒子的排列顺序。若不设置该属性值或为为该属性设值为“normal”,则盒子以正序排列。接下来,我们将盒子设为水平分布并将其出现的顺序反转,box的CSS代码如下:
将上例的box的CSS代码替换后,使用chrome浏览器重新打开这个文件,就可以看到这个盒模型的顺序反转了,如图3所示:
图3 弹性盒模型反转
(3)box-ordinal-group设置元素的具体位置
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义,盒模型将首先分布这些组,所有这些盒子将在每个组中。分布将从小到大排列。将盒子的分布顺序按照特定的顺序排列如“3-2-1-5-4”,CSS代码如下:
将上例的CSS代码替换,使用chrome浏览器重新打开这个文件,就可以看到这个盒模型的顺序按照“3-2-1-5-4”排列,如图4所示:
图4 弹性盒模型排序
(4)box-flex定义盒子的弹性空间
默认情况下,盒子并不具有弹性,如果box-flex的属性值至少为1时,则变得富有弹性。如果盒子是弹性的,其大小将按下面的方式计算:
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
下面的例子中,为每个盒子设定弹性空间。看起来好像是用百分比定义盒子的大小,但是有一个区别:使用弹性盒模型,增加一个盒子,无须重新计算其大小,CSS代码如下:
将上例的CSS代码替换,使用chrome浏览器重新打开这个文件,就可以看到每个盒模子的弹性空间不同,如图5所示:
图5 盒模型弹性空间
除了为每个盒子设定弹性空间,我们还可以为部分盒子设定弹性空间,其它部分盒子有固定大小,例如我们将最中间的盒子也就是第三个盒子设定一个固定宽度为200px,其它盒子设定box-flex的属性值至少为1时,随着box盒子的宽度变化,除了第三个子盒子的宽度固定,其它盒子的宽度都会变化,CSS代码如下:
将上例的CSS代码替换,使用chrome浏览器重新打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,如图6所示:
图6 盒模型弹性空间
我们试图改变box的宽度来查看子盒子的大小,因为这里设定的box宽度为100%,所以我们可以通过改变浏览器的大小来控制box的宽度,当我们缩小浏览器时,可以观察到第三个盒子的宽度固定,其它盒子的宽度变小,如图7所示:
图7 盒模型弹性空间
同样地,我们也可以将两边的盒子固定,中间的盒子固定大小,这里就需要读者自己去实践练习。
(5)box-pack对盒模型富裕空间进行管理
box-pack属性规定当框大于子元素的尺寸,在何处放置子元素。该属性规定水平框中的水平位置,以及垂直框中的垂直位置。box-pack的参数说明如表3所示。
表3 box-pack参数说明
下面通过一个案例来对盒模型的富裕空间进行管理,通过一起使用box-align和box-pack属性,当有富裕空间时,让所有子元素居中,CSS代码如下:
将上例的CSS代码替换,使用chrome浏览器重新打开这个文件,就可以看到盒子的子元素居中,如图8所示:
图8 盒模型富裕空间管理
特别地,我们来对“box-align”属性的“baseline”属性值来进行说明,“baseline”表示设置伸缩盒对象的子元素基线对齐,可能大多数读者不理解什么叫做基线对齐,我们通过下面的案例来对这个属性值进行图形化的理解,代码如下:
本例中的盒模型包含5个子元素,并为该盒子的“box-align”属性设置为基线对齐“baseline”。为第2个子元素的行高设为200px,第4个子元素的行高设为100px,其余子元素为本身的高度130px。运行这个文件,得到的效果如图9所示:
图9 盒模型子元素基线对齐
通过本例的展示,我们不难理解基线对齐的意义,它根据盒模型子元素的主体内容进行对齐。
(6)box-align在垂直方向上对元素的位置进行管理
box-align属性规定如何对齐框的子元素,box-align的参数说明如表4所示。
表4 box-align参数说明
下面通过一个案例来对盒模型的垂直方向的富裕空间进行管理。当有垂直方向有富裕空间时,让所有子元素居中,html代码如下:
使用chrome浏览器重新打开这个文件,就可以看到盒模型的子元素居中显示,如图10所示:
图10 盒模型垂直富裕空间管理
作为前端开发者来说,该模型对我们解决网页设计中一些常见的问题非常方便,如:表单布局、垂直居中、视觉上分离html流,等等。
IT兄弟连 HTML5教程 CSS3属性特效 弹性盒模型的更多相关文章
- IT兄弟连 HTML5教程 CSS3属性特效 小结及习题
本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...
- IT兄弟连 HTML5教程 CSS3属性特效 文字描边
用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- IT兄弟连 HTML5教程 CSS3属性特效 盒模型阴影
除了为文字添加阴影,我们还可以为盒模型添加阴影.盒模型阴影的属性名称为box-shadow,此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表 ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换3
5 3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋 ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换2
3 perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换1
3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1 3D转换属性 3D的转换方法如表2: 表2 3D转换方法 1 transform-style transform- ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换2
3 scale() 方法 通过scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数.缩放scale()函数让元素根据中心原点对对象进行缩放.默认值是1,因此0.01 ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
随机推荐
- python_MySQL数据库
MySQL数据库的特点: 1.是关系型数据库 关系型数据库的特点 1.数据是以行和列的的形式存储的 2.这一系列的行和列称为表 ...
- python_爬虫
1.网络爬虫 1.定义:网络蜘蛛,网络机器人,抓取网络数据的程序 2.总结:用Python程序去模仿人去访问网站,模仿的越逼真越好 3.目的:通过有效的大量的数据分析市场走势,公司的 ...
- Java修炼——ArrayList常用的方法以及三种方式遍历集合元素。
List接口ArrayList用法详解 ArrayList常用方法: 1. List.add():添加的方法(可以添加字符串,常量,以及对象) List list=new ArrayList(); l ...
- 【Git】远程分支
[Git]远程分支 转载:https://www.cnblogs.com/yangchongxing/p/10239270.html 目录 ============================ 1 ...
- Java修饰符public,protected,default,private访问权限
public 具有最大的访问权限.所有类可访问. protected 主要是用来保护子类.自身.子类及同一个包中类可以访问 default 没有加修饰符的.有时候也称为friendly,它是针对本包访 ...
- Linux之find命令操作技巧
一.前言 工作中,我们常用find命令查找某些文件或者删除一些旧的日志文件,所以学会find命令的操作技巧就极为重要. 二.find常用参数选项 -depth 从指定目录下最深层的子目录开始查找 -m ...
- Java堆的结构是什么样子的?什么是堆中的永久代(Perm Gen space)?
JVM的堆是运行时数据区,所有类的实例和数组都是在堆上分配内存.它在JVM启动的时候被创建.对象所占的堆内存是由自动内存管理系统也就是垃圾收集器回收. 堆内存是由存活和死亡的对象组成的.存活的对象是应 ...
- Laravel 中使用 swoole 项目实战开发案例二 (后端主动分场景给界面推送消息)
推荐阅读:Laravel 中使用 swoole 项目实战开发案例一 (建立 swoole 和前端通信) 需求分析 我们假设有一个需求,我在后端点击按钮 1,首页弹出 “后端触发了按钮 1”.后端点了 ...
- 《Java基础知识》Java类与类之间的关系
类与类之间最常见的关系主要有三种:依赖(uses-a).聚合(has-a)和继承(is-a). 下面以在线书店订单系统为例,来详细的讲述这三种关系的概念. 在线书店订单系统的主要功能是:注册用户可以登 ...
- 《Java基础知识》Java 泛型详解
JDK 1.5 之后,Java 通过泛型解决了容器类型安全这一问题,而几乎所有人接触泛型也是通过Java的容器.那么泛型究竟是什么? 泛型的本质是参数化类型:也就是说,泛型就是将所操作的数据类型作为参 ...