分析项目：html5中mark标签，CSS3中column,grid.

piaoling  2011-04-26 18:33:34

分析项目：html5中mark标签，CSS3中column,grid.

各浏览器支持情况

Tips: 目前没有任何浏览器支持grid,不方便演示与测试，详细介绍可在 http://dev.w3.org/csswg/css3-grid/上查看。
  mark column
Chrome 8.0 OK Partially
Firefox 3.6 partially(can identify but no highlight) Partially
Opera 11 partially(can identify but no highlight) NOK
Safari 5.0 partially(can identify but no highlight) Partially
IE 6,7,8 NOK(can use head.js) NOK
BB 6 partially(can identify but no highlight) Partially

mark

1.2mark 示例

< mark > 在需要突出显示文本时使用。 支持html5的标准属性与事件。

Tips: ff,opera,safari,BBOS6中，能识别mark 标签，但默认无高亮。

grid

grid示例

    body { columns:3; column-gap:0.5in; }
    img { float:page top right; width:3gr; }
效果如图：
Tips: multiple-column,grid都主要用于页面布局，二者结合相信能给布局带来方便。。

multiple-column

2.1multiple-column属性

利用Multiple Columns属性可以自动将内容按指定的列数排列，报纸和杂志一般都采用这种布局 。可按列宽Multiple Columns (Width)和列数 Multiple columns (Count),columns控制。属性写法为：

Property Values Applies to chrome 8.0 ff 3.6 safari 5.0 BB OS6
break-after auto | always | avoid | left | right | page | column | avoid-page | avoid-column block-level elements NOK NOK NOK NOK
break-before auto | always | avoid | left | right | page | column | avoid-page | avoid-column block-level elements NOK NOK NOK NOK
break-inside auto | avoid | avoid-page | avoid-column block-level elements NOK NOK NOK NOK
column-count <integer> | auto non-replaced block-level elements (except table elements), table cells, and inline-block elements OK OK

partially

(last line will higher than others)

 OK
column-fill auto | balance multi-column elements NOK NOK NOK NOK
column-gap <length> | normal multicol elements OK OK OK NOK
column-rule <column-rule-width> || <border-style> || [ <color> | transparent ] multicol elements OK OK OK NOK
columns <'column-width'> || <'column-count'> non-replaced block-level elements (except table elements), table cells, and inline-block elements OK NOK OK NOK
column-span 1 | all static, non-floating elements NOK NOK NOK NOK
column-width <length> | auto non-replaced block-level elements (except table elements), table cells, and inline-block elements OK OK OK NOK

2.2Multipl column 示例

2..2.1.按列宽Multiple Columns (Width)：

.column-width{
	-moz-column-width: 150px;
	-moz-column-gap: 20px;
	-moz-column-rule: 1px solid #222;
	-webkit-column-width: 150px;
	-webkit-column-gap: 20px;
	-webkit-column-rule: 1px solid #222;
	column-width: 150px;
	column-gap: 20px;
	column-rule: 1px solid #222;

}
img{display:block; 
width:100%;  }

利用Multiple Columns属性可以自动将内容按指定的列数排列，报纸和杂志一般都采用这种布局 。可按列宽Multiple Columns (Width)和列数 Multiple columns (Count)控制。

属性写法为：column-width: 2列宽设置 column-gap: //两列之间的间隙大小 column-rule: //分割样式 ff和webkit需要加前缀-moz和-webkit。利用Multiple Columns属性可以自动将内容按指定的列数排列，报纸和杂志一般都采用这种布局方法。可按列宽Multiple Columns (Width)和列数 Multiple columns (Count)控制。属性写法为：column-width: //列宽设置 column-gap: //两列之间的间隙大小 column-rule: //分割样式 ff和webkit需要加前缀-moz和-webki。

Tips: safari:默认最后一栏会比其他多一行，但如果加了图片在栏内则不会。栏高度固定，栏内图片会被断开。 ff,chrome:栏中插入图片，栏高度会变化，图片不分栏。

2.2.2按列数Multiple columns (Count)

.column-count {
	-moz-column-count: 5;
	-moz-column-gap: 20px;
	-moz-column-rule: 1px solid #222;
	-webkit-column-count: 5;
	-webkit-column-gap: 20px;
	-webkit-column-rule: 1px solid #222;
	column-count: 6;
	column-gap: 20px;
	column-rule: 1px solid #222;
	column-fill: balance;
	-webkit-column-fill: balance;
	-moz-column-fill: balance;
}
利用Multiple Columns属性可以自动将内容按指定的列数排列，报纸和杂志一般都采用这种布局方法。可按列宽Multiple Columns (Width)和列数 Multiple columns (Count)控制。属性写法为：column-width: //列宽设置 column-gap: //两列之间的间隙大小 column-rule: //分割样式 ff和webkit需要加前缀-moz和-webki。

2.2.3其余属性

.column-columns {
	columns:4 130px;
	-moz-columns:4 130px;
	-webkit-columns: 4 130px;
}
.column-span{
	column-span:3;
 	-webkit-column-span:3;
	-moz-column-span: 3;}
h5{
	 break-before: column; 
      break-inside: avoid-column; 
      break-after: avoid-column;
      -moz-break-before: column; 
      -moz-break-inside: avoid-column; 
      -moz-break-after: avoid-column;
      -webkit-break-before: column; 
      -webkit-break-inside: avoid; 
      -webkit-break-after: avoid-column;
}

利用Multiple Columns属性可以自动将内容按指定的列数排列，报纸和杂志一般都采用这种布局方法。可按列宽Multiple Columns (Width)和列数 Multiple columns (Count)控制。属性写法为：column-width: //列宽设置 column-gap: //两列之间的间隙大小 column-rule: //分割样式 ff和webkit需要加前缀-moz和-webki。

column-span:测试会不会正常，这个我们不知道哦，还是看看再说吧。

利用Multiple Columns属性可以自动将内容按指定的列数排列，报纸和杂志一般都采用这种布局方法。可按列宽Multiple Columns (Width)和列数 Multiple columns (Count)控制。属性写法为：column-width: //列宽设置 column-gap: //两列之间的间隙大小 column-rule: //分割样式 ff和webkit需要加前缀-moz和-webki。

TIPS: 貌似目前仅有column-count,column-gap,column-width,column-rule能被较好地支持。

 

 

 


原文：http://html_templates.sarge.com/kelly/templates/column.html

类别 :  CSS（6）  |  浏览（4701）  |  评论(0)
发表评论（评论将通过邮件发给作者）：

Email: