box相关css属性

盒子模式=外边距+边框+内边距+组件大小

box-shadow（火狐浏览器中常会添加该属性）

box-shadow 属性向框添加一个或多个阴影。默认值：none

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

语法

box-shadow: h-shadow v-shadow blur spread color inset;      

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

box-sizing（火狐只支持-moz-box-sizing）

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

语法

box-sizing: content-box|border-box|inherit;      

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。（默认值）
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

box-align（火狐只支持-moz-box-align,谷歌等支持-webkit-box-align,IE不支持该属性）

box-align 属性规定如何对齐框的子元素。

语法

box-align: start|end|center|baseline|stretch;      

值	描述
start	对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。 对于反方向的框，每个子元素的下边缘沿着框的底边放置。
end	对于正常方向的框，每个子元素的下边缘沿着框的底边放置。 对于反方向的框，每个子元素的上边缘沿着框的顶边放置。
center	均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。
baseline	如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。
stretch	拉伸子元素以填充包含块（默认值）

box-direction（火狐只支持-moz-box-direction,谷歌等支持-webkit-box-direction,IE不支持该属性）

box-direction 属性规定框元素的子元素以什么方向来排列。

语法

box-direction: normal|reverse|inherit;      

值	描述
normal	以默认方向显示子元素。（默认值）
reverse	以反方向显示子元素。
inherit	应该从子元素继承 box-direction 属性的值

box-flex（火狐只支持-moz-box-flex,谷歌等支持-webkit-box-flex,IE不支持该属性）

box-flex 属性规定框的子元素是否可伸缩其尺寸。默认值：0.0，即不可伸缩

提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。

语法

box-flex: value;      

值	描述
value	元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

box-ordinal-group（火狐只支持-moz-box-ordinal-group,谷歌等支持-webkit-box-ordinal-group,IE不支持该属性）

box-ordinal-group 属性规定框中子元素的显示次序。

值更低的元素会显示在值更高的元素前面显示。

注释：分组值相同的元素，它们的显示次序取决于其源次序。

语法

box-ordinal-group: integer;      

值	描述
integer	一个整数，指示子元素的显示次序。（默认值为1）

box-orient （火狐只支持-moz-box-orient ,谷歌等支持-webkit-box-orient ,IE不支持该属性）

box-orient 属性规定框的子元素应该被水平或垂直排列。

提示：水平框中的子元素从左向右进行显示，而垂直框的子元素从上向下进行显示。不过，box-direction 和 box-ordinal-group 能够改变这种顺序。

语法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;      

值	描述
horizontal	在水平行中从左向右排列子元素。
vertical	从上向下垂直排列子元素。
inline-axis	沿着行内轴来排列子元素（映射为 horizontal）。（默认值）
block-axis	沿着块轴来排列子元素（映射为 vertical）。
inherit	应该从父元素继承 box-orient 属性的值。

box-pack （火狐只支持-moz-box-pack  ,谷歌等支持-webkit-box-pack ,IE不支持该属性）

box-pack 属性规定当框大于子元素的尺寸，在何处放置子元素。

该属性规定水平框中的水平位置，以及垂直框中的垂直位置。

语法

box-pack: start|end|center|justify;      

值	描述
start	对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间） 对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）（默认值）
end	对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。 对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。
center	均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后
justify	在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。

overflow-x/ overflow-y（IE8及以下的浏览器不支持）

overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。

overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话

语法

overflow-x: visible|hidden|scroll|auto|no-display|no-content;      

值	描述
visible	不裁剪内容，可能会显示在内容框之外。（默认值）
hidden	裁剪内容 - 不提供滚动机制。
scroll	裁剪内容 - 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。