css3弹性盒子(css3滚动条弹性)
其实css3弹性盒子的问题并不复杂，但是又很多的朋友都不太了解css3滚动条弹性，因此呢，今天小编就来为大家分享css3弹性盒子的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
css3的弹性框模型是什么意思
弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML、GladeXML。
使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。例子使用以下的HTML代码：
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="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;
}
盒子尺寸
默认情况下，盒子并不具有弹性，如果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。
盒子模型介绍
概念：盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
作用： CSS围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个 HTML文档的表现效果和布局结构。
组成：每个盒子都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin），4个属性组成。
每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。
一、内容(content)
宽度width和高度height属性设置，对盒子内容大小的大小进行控制
二、内边距（padding）
padding属性用于设置内边距。是指边框与内容之间的距离。
a）padding-top、padding-right、padding-bottom、padding-left
b) padding: 1px 2px 3px 4px(顺时针)
注意：后面跟几个数值表示的意思是不一样的。值的个数表达意思：
1个值padding：上下左右边距比如padding: 3px;表示上下左右都是3像素
2个值padding:上下边距左右边距比如 padding: 3px 5px;表示上下3像素左右 5像素
3个值padding：上边距左右边距下边距比如 padding: 3px 5px 10px;表示上是3像素左右是5像素下是10像素
4个值padding:上内边距右内边距下内边距左内边距比如: padding: 3px 5px 10px 15px;表示上3px右是5px下 10px左15px
三、盒子边框（border）
border属性来定义盒子的边框，该属性包含3个子属性：border-style(边框样式)，border-color(边框颜色)，border-width(边框宽度)。
1、定义宽度
a） border-top-width、border-bottom-width、border-left-width、border-right-width
b） border-width:2px;
border-width:1px 2px 3px 4px;
注意：当定义边框宽度时，必须要定义边框的显示样式，由于默认样式为none,所以仅设置边框的宽度，由于样式不存在，边框宽度也自动被清除为 0。
2、定义颜色
Demo:border-top-color:green;border-color:yellow;
3、定义样式border-style:
hidden:隐藏边框(IE不支持) dotted:点线
dashed:虚线 solid:实线 double:双线边框
4、复合属性
综合写法：border: border-width|| border-style|| border-color
注意：顺序不能错误。
5、圆角边框（CSS3）：
语法：border-radius:左上角右上角右下角左下角;
Demo：border-radius:10px;/*一个数值表示4个角都是相同的 10px的弧度*/
border-radius: 50%;/* 100px 50%取宽度和高度一半*/
四、外边距（margin）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，定义了元素与其他相邻元素的距离，这段空白通常不能放置其他内容。
margin-top、margin-right、margin-bottom、margin-left
margin:1px 2px 3px 4px(顺时针)
常用功能：
一、盒子水平居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
块级元素和盒子必须指定宽度（width）
左右的外边距都设置为auto，就可使块级元素水平居中。
二、外边距合并
margin的外边距合并（margin collapsing）
margin属性有一个特别的行为，就是外边距合并，这个行为只对普通文档流中的块级元素的垂直外边距有效；行内框（inline-block）、浮动元素和绝对定位的原素不会发生外边距合并。
发生外边距合并的两种基本情况：
1、两个或多个垂直毗邻的兄弟元素，上面元素的下边距会与下面元素的上边距发生合并，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
2.父元素和子元素之间，父元素的上外边距和第一个子元素的上外边距、父元素的下外边距和最后一个子元素的下外边距。发生这种情况的前提是父元素和第一个（或最后一个）子元素之间不存在边框和内边距把外边距分隔开，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
三、盒子模型和box-sizing
box-sizing是用来设置width、height的作用对象的。
三个值:content-box(默认值)、 border-box、inherit（继承父类）;
注意：没有margin-box
box-sizing:conten-box，width=元素的内容区(标准盒子模型)
box-sizing:border-box，width=元素内容区+padding+border(IE盒子模型)
四、背景剪裁(Background clip)
当我们给一个元素设置background-color和background-imge时，这个背景会覆盖到元素border的外边界，background-clip属性可以用来调整背景所覆盖的区域:
border-box:背景延伸到边框外，默认值
padding-box：背景延伸到内边距外，但是不会绘制到border。
content-box：背景被裁剪至内容区（content box）外沿。
五、溢流（overflow）
当用绝对的值设置盒子的大小时（比如，固定像素的 width和 height），内容可能会超出设置的大小，此时内容就会溢流盒子。要控制这时候发生的事情，我们可以使用 overflow属性。最常用的：
hidden：溢出部分不会显示
visible：默认值，子元素会从父元素溢出，在父元素外部显示
scroll：生成两个滚动条，通过滚动条来查看完整的内容
auto：根据需要生成滚动条
六、轮廓(Outline)
盒子的 outline看起来像边界，但是它不是盒模型的一部分。它表现得像边界，但是是画在盒子之上，不会修改盒子的大小（具体来说，ouline是画在边界框之外，外边距区域之内）。
七、盒子显示（display）类型
display三种常见的值为block、inline、inline-block
block（块盒）：盒子之前以及之后的内容出现在不同的行上
inline（行内盒）：与块盒相反：与周围的文本和其它行内元素出现在同一行，并且其内容会像段落中的文本行一样，随着文本流换行（宽度和高度设置对行内盒无效，在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置，但是不会影响周围块盒的位置。）；
inline-block（行内块盒）：
介于前两者之间：
像行内盒一样，跟随周围的文本流堆放，不会在其前后创建换行；
像块盒一样，使用宽度和高度设置大小，并且维护其块完整性—它不会跨段落行换行。
块级元素默认设置为display: block;，行内元素默认设置为display: inline。
display: flex—允许你处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。
css3弹性盒子和css3滚动条弹性的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！