css3的盒模型及网页设计的范例_css3弹性盒布局和盒模型的区别

1、css3 弹性盒布局和盒模型的区别

弹性盒布局的容器（flex container）指的是采用了弹性盒布局的 DOM 元素，而弹性盒布局的条目（flex item）指的是容器中包含的子 DOM 元素。图中的最外围的边框表示的是容器，而编号 1 和 2 的边框表示的是容器中的条目。
从图中可以看到，弹性盒布局中有两个互相垂直的坐标轴：一个称之为主轴（main axis），另外一个称之为交叉轴（cross axis）。主轴并不固定为水平方向的 X 轴，交叉轴也不固定为垂直方向的 Y 轴。在使用时，通过 CSS 属性声明首先定义主轴的方向（水平或垂直），则交叉轴的方向也相应确定下来。容器中的条目可以排列成单行或多行。主轴确定了容器中每一行上条目的排列方向，而交叉轴则确定行本身的排列方向。可以根据不同的页面设计要求来确定合适的主轴方向。有些容器中的条目要求从左到右水平排列，则主轴应该是水平方向的；而另外一些容器中的条目要求从上到下垂直排列，则主轴应该是垂直方向的。
确定主轴和交叉轴的方向之后，还需要确定它们各自的排列方向。对于水平方向上的轴，可以从左到右或从右到左来排列；对于垂直方向上的轴，则可以从上到下或从下到上来排列。对于主轴来说，排列条目的起始和结束位置分别称为主轴起始（main start）和主轴结束（main end）；对于交叉轴来说，排列行的起始和结束位置分别称为交叉轴起始（cross start）和交叉轴结束（cross end）。在容器进行布局时，在每一行中会把其中的条目从主轴起始位置开始，依次排列到主轴结束位置；而当容器中存在多行时，会把每一行从交叉轴起始位置开始，依次排列到交叉轴结束位置。
弹性盒布局中的条目有两个尺寸：主轴尺寸和交叉轴尺寸，分别对应其 DOM 元素在主轴和交叉轴上的大小。如果主轴是水平方向，则主轴尺寸和交叉轴尺寸分别对应于 DOM 元素的宽度和高度；如果主轴是垂直方向，则两个尺寸要反过来。与主轴和交叉轴尺寸对应的是主轴尺寸属性和交叉轴尺寸属性，指的是 CSS 中的属性 width 或 height。比如，当主轴是水平方向时，主轴尺寸属性是 width，而 width 的值是主轴尺寸的大小。
弹性盒布局模型中的 CSS 样式声明分别适用于容器或条目。在下面的内容中会详细的介绍相关的 CSS 属性。首先介绍如何使用弹性盒布局模型进行基本的页面布局。在本文的所有代码示例中，容器的 CSS 类名统一为 flex-container，而条目的 CSS 类名则为 flex-item。所有的示例都可以在CodePen上进行预览。

2、css3中用哪个属于可解决盒子模型在不同浏览器下表现不一致的问题

css3用这句把盒模型设为怪异模式就一致了：

box-sizing: border-box;/*请自行添加相关浏览器前缀*/

问题是ie低版本是不认专css3这句的，所属以更建议用正确的html声明，让浏览器解析盒模型时用标准模式来形成一致的尺寸。如果正确的声明了xhtml或html5，在不同浏览器下应该是表现一致的，除非你还有什么特别的代码行为触发了怪异模式。

3、以下哪些css3属性可设定弹性盒子模型让子元素反向排列

“以下哪些css3属性” 选项呢？

box-direction 属性用于改变容器的显示顺序,使之反向排列。默认的情况下，内block 级元素容是按照加载顺序从上到下排列， inline 级元素是从左到右排列的。下面来看看box-direction：

reverse：block 级元素显示在最顶部，最后加载的 inline 级元素显示在左边

4、css3盒子模型，display:-webkit-box的问题

最简单的办法是：使用 box-flex 的每一个子元素都加上一句： width: 0%;，原因不明，反正有效。回具体CSS修改如下：

.test{
  background:red;
  display:-webkit-box;
  width:600px;
  height:300px;
}
.test1{
  background:green;
  -webkit-box-flex:1;
  width: 0%;                 /*  ****加上答这一行**** */
}
.test2{
  background:blue;
  -webkit-box-flex:1;
  overflow: hidden;
  width: 0%;                /*  ****加上这一行**** */
}
.test3{
background:yellow;
-webkit-box-flex:1;
width: 0%;                 /*  ****加上这一行**** */
}

5、css3的弹性框模型是什么意思？

弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。

使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。例子使用以下的HTML代码：

传统的盒模型基于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;
}

盒子尺寸

默认情况下，盒子并不具有弹性，如果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、 or center。

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。

6、css3什么属性可以改变盒模型?

比如你现在CSS盒子块里现有那些样式然后你需要怎么去改变呵呵麻烦您说清楚我们好为你跟好的解答

7、使用css3时能选择是标准盒模型和传统ie盒模型吗

css3是解释语言，你写下的代码，是被客户端的浏览器编译的，所有才会有兼容的问题，不存在选择标准盒模型和传统ie盒模型，客户端用的浏览器是什么版本，就是用什么内核

导航:首页 > 万维百科 > css3的盒模型及网页设计的范例

css3的盒模型及网页设计的范例

与css3的盒模型及网页设计的范例相关的知识