css3笔记——columns多列布局

css2.1中并没有专门的布局属性,因此css3种新增了多列自动布局的功能,Multi-colum Layout

Columns属性——定义多列布局

columns是多列布局的基本属性,具体定义多列布局时的属性有:

  • column-width属性可以定义每列的宽度,其值有 | auto。
  • column-count属性定义了对象的列数,其值为 | auto 。
  • column-gap属性定义了列与列之间的间距,其值有normal |
  • column-rule属性定义了每列之间边框的属性,其用方式与border使用一致。
  • column-span属性定义了元素的跨列显示或者单列显示,其值有 1 | all。
  • column-fill属性定义了栏目的高度是否统一,其值有auto | balance,值为auto的时候各列的高度对着其内容的变化而自动变化,而值为balance时,各列的高度将会根据内容最多的那一列的高度进行统一。

其实列css为:

.box { column-count:3; -webkit-column-count:3; -moz-column-count:3; column-gap:30px; -webkit-column-gap:30px; -moz-column-gap:30px; column-rule: 2px dashed #666; -webkit-column-rule: 2px dashed #666; -moz-column-rule: 2px dashed #666; column-fill :balance; -webkit-column-fill:balance; -moz-column-fill :balance; padding: 10px 40px; } .box h3 { column-span:all; -webkit-column-span:all; -moz-column-span:all; text-align: center; margin-bottom: 20px; }

通过demo测试,ie10支持上述属性,但ie10以下的ie系列浏览器不支持column属性,Firefox不支持其中的column-span属性和column-fill属性,Chrome浏览器在资料书籍中是支持上述的全部属性,但诡异的是经过测试却得到了不同的结果

chrome显示column-fill为不识别的属性chrome显示column-fill为不识别的属性

分页打印

break-before、break-after和break-inside是新增的用来控制分页打印的属性,使用方法与2.1规范化总的page-break-before、page-break-after和page-break-inside相同,其值有:

  • auto:不强迫也不禁止在生成框之前(之后、之间)分页。
  • always:强迫在生成框之前(之后、之间)分页。
  • avoid:避免在生成框之前(之后、之间)分页。
  • left:强迫在生成框之前(之后、之间)分一个或者两页,是下一页成为一个左页。
  • right:强迫在生成框之前(之后、之间)分一个或者两页,是下一页成为一个右页。
  • page:强迫在生成框之前(之后)分页。
  • column:强迫在生成框之前(之后)分页列。
  • avoid-page:避免在生成框之前(之后)分页。
  • avoid-column:避免在生成框之前(之后)分页列。

具体的分页位置通常受到父元素的break-inside属性、前继元素break-after属性和后继元素的break-before属性的影响,如果这些属性不为auto,则always、left、和right属性值由于avoid。

具体浏览器中有私有属性-webkit-break-before,-webkit-break-after和-webkit-break-inside私有属性,其他浏览器貌似不支持?(待测)

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus