CSS3中的网页布局

网页布局

columns是多列布局特性的基本属性，该属性可以同时定义列数和每列的宽度，基本语法如下：columns:<column-width>||<column-count>;

• column-width:定义每列的宽度；
• columns-count：定义列数。

columns-width属性可以定义单列显示的宽度，该属性可以与其他多列布局属性配合使用，也可以单独使用。基本语法如下：columns-width:<length>|auto;

column-count属性可以定义显示的列数，该属性的基本语法如下：column-count:<integer>|auto;

column-gap属性定义两栏之间的间距，该属性的基本语法如下：column-gap:normal|<length>;

• normal：根据浏览器默认设置进行解析，一般为1 em；
• length：由浮点数字和单位标识符组成的长度值，不可为负值。

column-rule属性可以定义每列之间边框的宽度、样式和颜色，基本语法如下：

column-rule:<length>|<style>|<color>|<transparent>;

column-span属性可以定义跨列显示，也可以设置单列显示，该属性的基本语法如下所示：column-span:1|all;

属性初始值为1，适用于静态的、非浮动元素。

• 1：只在本栏中显示；
• all：将横跨所有列，并定位在列的Z轴之上。

column-fill属性可以定义栏目的高度是否统一，基本语法如下所示： column-fill:auto|balance;

• auto：各列的高度随其内容的变化而自动变化；
• balance：各列的高度将会根据内容最多的那一列的高度进行统一。

break-before、break-after和break-inside是新增的用来控制页面分列打印的3个属性，基本语法如下所示：

• break-before:auto|always|avoid|left|right|page|column|avoid-page|avoid-column;
• break-after:auto|always|avoid|left|right|page|column|avoid-page|avoid-column;
• break-inside:auto|always|avoid|left|right|page|column|avoid-page|avoid-column;

如果这些属性值不为auto，则always、left和right属性值将优先于avoid。

CSS3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用弹性盒模型可以规定特定的顺序，也可以将其反转，要开启弹性盒模型，只需设置拥有子盒子的display属性值为box（或inline-box）即可。

在使用float属性或position属性的时候，一般使用包括负外边距在内的比较复杂的方法才能够达到这个要求，但是如果使用盒布局的话，只要使用一个box-flex属性，把盒布局变为弹性盒布局就可以了。如果改用弹性盒布局，就可以解决参与布局的元素的总宽度与总高度始终等于容器的宽度和高度。

-moz-box-flex:1;

-webkit-box-flex:1;

如果某个div元素的box-flex属性值大于1，页面显示会自动成倍扩展。

box-ordinal-group属性用来改变各元素的显示顺序，可以在每个元素的样式中加入box-ordinal-group属性，该属性使用一个表示序号的整数属性值，浏览器在显示时根据该序号从小到大来显示这些元素。

box-orient属性用来指定多个元素的排列方向，属性值为vertical即定义内容以垂直方向排列，如果在浏览器中预览，各元素的宽度为元素中内容的宽度，高度自动变为容器的高度；属性值为horizontal即指定为水平方向排列，在浏览器中预览时，各元素的高度为元素中内容的高度，宽度自动变为容器的宽度。

使用盒布局时，可以使用box-pack属性及box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。属性值包含start、center、end。