css3盒子模型 css弹性盒模型
这篇文章给大家聊聊关于css3盒子模型，以及css弹性盒模型对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
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已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。
对盒子模型的理解
（整理自网络）
1、盒子模型有两种，W3C和IE盒子模型（padding-border-margin模型）
从直观上而言，margin用于控制块与块之间的距离。倘若将盒子模型比作展览馆里展出的一幅幅画，那么content就是画面本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。
包括margin、border、padding、content，元素的width=content的宽度
其与W3C盒子区别在于它的content部分包含了 border和 padding。
那应该选择哪中盒子模型呢？当然是“标准 w3c盒子模型”了。怎么样才算是选择了“标准 w3c盒子模型”呢？很简单，就是在网页的顶部加上 doctype声明。假如不加 doctype声明，那么各个浏览器会根据自己的行为去理解网页，即 ie浏览器会采用 ie盒子模型去解释你的盒子。
我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在 CSS3中新增了一个样式box-sizing，包含两个属性content-box和 border-box。
语法：box-sizing:content-box|border-box|inherit;
设置box-sizing:border-box以后，如果想要一个宽度为200px的盒子，那么我们直接设置宽度为200px。当再设置它的左右边框和左右补白后，它的内容区会自动调整（向里缩进）。
DOM是 Document Object Model的缩写，即“文档对象模型”。一个网页的所有元素组织在一起，就构成了一个棵“DOM”树。
一个HTML文档并不是一个简单的文本文件，而是一个具有层次结构的逻辑文档，每一个HTML元素都作为这个层次结构中的一个节点存在。每个节点反应在浏览器上回具有不同的表现形式，具体的表现形式是由CSS来决定的。
CSS的目的是使网页的表现形式与内容结构分离，CSS控制网页的表现形式，HTML控制网页的内容结构。
“标准文档流”简称“标准流”。指在不适用其他的与排版和定位相关的特殊CSS规则是，各种元素的排列规则。
1.块级元素（blocklevel）
总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
2.行内元素（inline）
标记本身不占有独立的区域，仅仅实在其他元素的基础上指出了一定的范围。
行内元素在DOM树种同样是一个节点。从DOM的角度来看，块级元素和行内元素是没有区别的，都是树上的一个节点；而从CSS的角度来看，二者有很大的区别，块级元素拥有自己的区域，行内元素则没有。
标准流就是CSS规定的默认的块级元素和行内元素的排列方式。
3.标记和标记
是一个块级元素，他保卫的元素会自动换行。而仅仅是一个行内元素，在它的前后不会换行。
4.盒子在标准流中的定位原则
（1）行内元素之间的水平margin
当两个行内元素紧邻时，他们之间的距离为第一个元素的 margin-right加上第2个元素的margin-left。
（2）块级元素之间的竖直margin
两个竖直块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者。这个现象称为 margin的“塌陷”现象。
（3）嵌套盒子之间的margin
如果父div的高度值小于子块div的高度加上margin的值，此时IE浏览器会自动扩大，保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。而firefox会保证父元素的高度完全吻合，子元素会超出父元素的范围。
CSS规范中有四个宽度和高度的相关属性，为：min-height、max-height、min-width、max-width。 IE浏览器不支持。
（4）将margin设置为负值
当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。
关于css3盒子模型和css弹性盒模型的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。