仓酷云

标题: CSS教程之CSS3实例教程:自顺应的弹性结构 [打印本页]

作者: 不帅 时间: 2015-1-15 23:19
标题: CSS教程之CSS3实例教程:自顺应的弹性结构
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
破洛洛文章简介：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;
程度或垂直散布
“box-orient”界说散布的坐标轴：vertical和horizional。这两个值界说盒子怎样显现
body{
display:box;
box-orient:horizontal;
}

反向散布
“box-direction”能够设置盒子呈现的按次。默许情形下，只需界说散布坐标轴——box随html流散布。假如为程度坐标轴，则从左到右散布；垂直坐标轴则从上到下散布。界说“box-direction”的属性值为“reverse”，则反转盒子的分列按次。
body{
display:box;
box-orient:vertical;
box-direction:reverse;
}

详细散布
属性“box-ordinal-group”界说盒子散布的按次。能够随便的把持其散布按次。这些组以一个从“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;
}

破洛洛文章简介：css3弹性盒模子.

盒子尺寸
默许情形下，盒子其实不具有弹性，假如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的巨细为box2的两倍，box2与box3巨细一样。看起来仿佛是用百分比界说盒子的巨细，可是有一个区分：利用弹性盒模子，增添一个盒子，不必从头盘算其巨细。
body{
display:box;
box-orient:horizontal;
}
#box1{
box-flex:2;
}
#box2{
box-flex:1;
}
#box3{
box-flex:1;
}

一些盒子有流动巨细
上面的例子中，box3并非弹性的，宽度为160px；如许box1和box2将有240px的可使用空间。因而，box1的宽度为160px(240*2/3)，box2的宽度为80px(240*1/3)。
body{
display:box;
box-orient:horizontal;
width:400px;
}
#box1{
box-flex:2;
}
#box2{
box-flex:1;
}
#box3{
width:160px;
}

溢出办理
由于是弹性盒子、非弹性盒子混排，有大概一切盒子的尺寸年夜于或小于父盒子的尺寸。如许就有大概空间太多或空间不敷。
空间太多怎样处置
可使用空间的散布取决于两个属性值：box-align和box-pack。
属性“box-pack”办理程度偏向上的空间散布，有以下四个大概属性：start、end、justify、orcenter。

start一切盒子在父盒子的左边，余下的空间在右边；
end一切盒子在父盒子的右边，余下的空间在左边；
justify余下的空间在盒子间均匀分派；
center可使用的空间在父盒子的两侧均匀分派。

属性“box-align”办理垂直偏向上的空间散布，有以下五个大概属性之：start、end,、center、baseline和stretch。

start每一个盒子沿父盒子的上边沿分列，余下的空间位于底部；
end每一个盒子沿父盒子的下边沿分列，余下的空间位于顶部；
center可用空间均匀分派，下面一半，上面一半；
baseline一切盒子沿着它们的基线分列，余下的空间可前可后；
stretch每一个盒子的高度调剂到合适父盒子的高度

body{
display:box;
box-orient:horizontal;
width:400px;
}
#box1{
box-flex:2;
}
#box2{
box-flex:1;
}
#box3{
width:160px;
}

空间不敷怎样办
与传统的盒模子一样，overflow属性用来决意其显现体例。为了不溢出，你能够设置box-lines为multiple使其换行显现。
弹性盒模子看起来很不错，Gecko和WebKit对该模子都有一些实验性的测试。在这些属性之前加上-moz和-webkit便可利用该属性。也便是说，firefox、safari、chrome可使用这些特征，能够看看这个弹性盒模子的demo。
作为前端开辟者来讲，该模子对我们办理网页计划中一些罕见的成绩十分便利，如：表单结构、垂直居中、视觉上分别html流，等等。不就的未来它将成为一个web尺度，早早熟习它不是甚么好事。
更多参考
ShawnJ.Goff:CSS3FlexibleBoxLayoutModule
CSS3.info:Introducingtheflexibleboxlayoutmodule
W3C:FlexibleBoxLayoutModule原文地点：http://www.denisdeng.com/?p=938
转载地点：http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
</p>
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

作者: 深爱那片海 时间: 2015-1-17 21:52
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 愤怒的大鸟 时间: 2015-1-26 19:54
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 老尸 时间: 2015-2-4 21:25
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 谁可相欹 时间: 2015-2-10 17:25
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 爱飞 时间: 2015-3-1 14:11
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 再现理想 时间: 2015-3-17 11:08
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 金色的骷髅 时间: 2015-3-24 09:30
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

欢迎光临仓酷云 (http://ckuyun.com/)