div+css教程_Css3 弹性盒模型
div+css视频教程共三课,57集。由“教程网” 精心打造,每个知识点都对应着实例进行贯通巩固，并提供了对应实例的源码示例下载，及作业的讲解视频，老师答疑等;
视频教程内容主要包括：web,Css语法基础及代码瘦身,div+css布局实例讲解,xml+css布局的讲解等。
课程总目标 课程目标 Web标准概论
Web标准中标记应用思路 检测网站符合web标准 学习div+css的相关学习工具
xhtml语法及与html区别 div标签 Dreamweaver中css的使用
新建CSS规则面板的介绍 css类型面板介绍 css背景面板介绍
css区块面板介绍 css方框面板介绍 css边框面板介绍
css列表面板介绍 Div+css布局流程 Div+css布局实例操作-切片
布局实例操作-定义布局层 布局实例操作-逐步定义每个层(body) 布局实例操作-逐步定义每个层(top)
布局实例操作-逐步定义每个层(contents) 布局实例操作-逐步定义每个层(left) 布局实例操作-逐步定义每个层(foot)
布局实例操作-逐步定义每个层(left) 布局实例操作-逐步定义每个层(main) 布局实例操作-逐步定义每个层(right)
定义全文文字样式 定义指定层里文字样式(使文字垂直居中) 定义标题样式(h1,h2,h3,h4)等
定义全页链接样式 定义指定层里链接样式 定义ul的项目符号
导航栏设置1 导航栏设置2
我们来介绍一下Css3 弹性盒模型。Css3引入了新的盒子模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。
使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子使用以下的HTML代码:
view sourceprint?
1.<body>
2. <div id="box1">1</div>
3. <div id="box2">2</div>
4. <div id="box3">3</div>
5.</body>
传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序，也可以反转之。要开启弹性盒模型，只需设置拥有子盒子的盒子的display的属性值为box（或inline-box）即可。
view sourceprint?
1.display: box;
水平或垂直分布
“box-orient”定义分布的坐标轴：vertical和horizional。这两个值定义盒子如何显示，
view sourceprint?
1.body{
2. display: box;
3. box-orient: horizontal;
4.}
反向分布
“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。
view sourceprint?
1.body {
2. display: box;
3. box-orient: vertical;
4. box-direction: reverse;
5.}
具体分布
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义，盒模型将首先分布这些组，所有这些盒子将在每个组中。分布将从小到大排列。
view sourceprint?
01.body {
02. display: box;
03. box-orient: vertical;
04. box-direction : reverse;
05.}
06.#box1 {
07. box-ordinal-group: 2;
08.}
09.#box2 {
10. box-ordinal-group: 2;
11.}
12.#box3 {
13. box-ordinal-group: 1;
14.}
盒子尺寸
默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。
如果盒子不具有弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）。
如果盒子是弹性的，其大小将按下面的方式计算：
相关文章
精彩导读
热门资讯
关注我们
