CSS3 box学习笔记

CSS3提供的盒子样式可实现对盒子内部元素的弹性布局，我们就不用使用float或者display：inline来使块元素横向排布（box-orient可以做到），或者计算每个块的宽度or百分比来实现均分（box-flex可做到）。so，大胆地用吧妹纸。对父元素设置display:box，可对内部的块级子元素进行布局，此时，内部的元素按照内联元素的排列方式，但可以设置宽和高。对父盒子使用如下的样式：

先来说一下box的特点吧：
1.当父元素设置为display:-webkit-box后，内部的元素默认是横向排布；且盒子的宽度是由内容多少来决定的，除非设置了一个宽度。基本父元素设置-webkit-box-orient:vertical，子盒子也不是占满整行。
2.当不对子和子的高度做任何处理时，如果子盒子的排列方式是横向的，则其高度是填充满父元素的高度（因为-webkit-box-align:stretch是默认值）。当纵向排布的时候是由内容多少来撑开高度。
3.只要子盒子中有一个是块级元素，则通过父盒子设置下列的属性都是有效的，但是在子盒子自身上设置的属性flex是只针对块级盒子的。
因此，如果想要使用box来进行布局，最好就是子元素都是块级元素。

1.box-orient

规定了内部子元素的排列方式，具体有

• vertical
• horizontal
• inline-axis
• block-axis

2.box-align

规定了内部子元素在垂直方向上的对齐方式：

• center：即垂直居中于父盒子中
• start：从父元素顶部开始排列
• end：对齐父元素底部
• stretch：纵向拉伸填满整个父元素（默认）
• baseline
  除了stretch是填满整个父元素高度外，其他都是由子盒子自身的高度决定。

3.box-pack

在水平方向上的对齐方式
start：左对齐
center：实现子元素在水平方向上居中对齐
justify：两端对齐
end：右对齐

说明：box-align和box-pack对齐方式的解释都和box-orient的设置有关。

4.box-direction

子盒子的排列顺序。

5.box-sizing

设置width都包括了盒子的哪些部分：

• content-box：width=内容区
• border-box：width=内容区+padding+border

6.box-flex

这个属性要在子元素中设置，用来分配父元素的剩余宽度和高度（当设置为vertical排布时），设置这个属性必须由父元素设置了display：box才有用。
剩余宽度的理解：

父容器宽度-子容器固定宽度（优先）/子容器内容宽度-子容器margin&border&padding

box-align和box-pack对内联元素也起作用，而box-flex对内联元素不管用。

发现一个奇怪的现象，当img和input标签放一起，使用box-align:center无法对input垂直居中，而当对img设置vertical-align:middle后就可以了。艾玛，应该是vertical-align的关系有关，而不是由box-align控制的。