CSS3 box学习_html/css_WEB-ITnose

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

1.box-orient

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

vertical

horizontal

inline-axis

block-axis

2.box-align

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

center：即垂直居中于父盒子中

start：从父元素顶部开始排列

end：对齐父元素底部

stretch：纵向拉伸填满整个父元素

baseline

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

版权声明：本文为博主原创文章，未经博主允许不得转载。