Css3分列布局相关.docxVIP

Css3分列布局相关CSS3 多列布局——Columns为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。语法：columns：column-width || column-count多列布局columns属性参数：属性描述column-width设置每栏宽度column-count设置栏数举例：要显示2栏显示，每栏宽度为200px，代码为：columns: 200px 2;到目前为止大部分主流浏览器都对其支持：CSS3 多列布局的子属性子属性描述Column-widthcolumn-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。Column-countcolumn-count属性主要用来给元素指定想要的列数和允许的最大列数Column-gapcolumn-gap主要用来设置列与列之间的间距，其语法规则如下：column-gap: normal || length默值为1em（如果你的字号是px，其默认值为你的font-size值）。Column-rulecolumn-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。语法规则：column-rule:column-rule-width|column-rule-style|column-rule-color取值说明：属性值属性值说明column-rule-width类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。column-rule-style类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。column-rule-color类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为：column-rule: 2px dotted green;Column-spancolumn-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。column-span: none | all取值说明 属性值 说明 None 此值为column-span的默认值， 表示不跨越任何列。 All 这个值跟none值刚好相反，表 示的是元素跨越所有列，并定位 在列的Ｚ轴之上。例如：将第一个标题跨越所有列，代码：column-span:all;