CSS 3.0 布局属性简介
| css 3.0 布局属性简介 |
| 时间: 2006-9-27 16:31:31 浏览：975 |
列出一些例子，看看这些属性是怎么工作的！一些图示去这里看看 body { column-width: 15em;/*列宽*/ } In the above example, the body element is set to have columns at least ''''15em'''' wide. The exact number of columns will depend on the available space. body { column-count: 2;/*两列布局*/ } The shorthand ''''columns'''' property can be used to set both properties in one declaration. The rule in the example below sets the same property/value pairs as the rules in the two examples above: body { columns: 2 15em ;/*缩写*/} Another group of properties introduced in this module describe gaps and rules between columns. Here is a simple example: body { column-gap: 1em; /*列空白区*/ column-rule: thin solid black;/*列分割线*/ } The first declaration in the example above sets the gap between two adjacent columns to be 1em. In the middle of the gap there will be a rule which is described by the ''''column-rule'''' property. The values of the ''''column-rule'''' property are similar to those of the CSS border properties. Like ''''border'''', ''''column-rule'''' is also a compound property. The example above is therefore identical to the one below: body { column-gap: 1em; /*列空白区*/ column-rule-width: thin; /*列分割线宽度*/ column-rule-style: solid;/*列分割线样式*/ column-rule-color: black;/*列分割线颜色*/ } A third group of properties indicate where column breaks should occur: h1 { column-break-before: always; } h2 { column-break-after: avoid; } h1, h2 { column-break-inside: avoid; } 这是张关于该类布局的图示 |
