css3选择器中提出了分栏的属性,其浏览器支持情况为:Internet Explorer 10 和 Opera 支持 column 属性,Firefox 支持替代的 -moz-column 属性,Safari 和 Chrome 支持替代的 -webkit-column 属性。即在书写样式时要加上相应的浏览器前缀。

注意:Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。


column语法:

1 栏的数量控制,即可以定义分栏的数目。

column-count : auto | 整数;

auto是默认值,由其他属性决定列数,比如 "column-width"。

整数是将元素内容划分为最佳列数。

注意:如果样式里边都有column-width:200px;column-count:4;
      浏览器首先解析的是column-width属性,即分栏的宽度。  

2  定义两栏之间的间距距离

column-gap : normal | <length>;

normal规定列间间隔为一个常规的间隔,W3C 建议的值是 1em。

length把列间的间隔设置为指定的长度。

3 栏间距

column-width:[<length>|auto] 定义每栏的宽度。

4  column-rule 属性设置列宽度、样式和颜色规则。

默认值为:column-rule:medium none black;

5  column-rule-color:<color> ;
    定义每栏之间边框的颜色 ,默认值为黑色,black。
6  定义每栏之间边框的宽度
column-rule-width:<length>/thin/thick/medium;
thin:定义纤细规则。
medium:定义中等规则,默认值
thick:定义中等规则,默认值。
length:规定规则的宽度。

5 间隔线样式

column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset ;

none 定义没有规则。
hidden 定义隐藏边框规则。
dotted 定义点状线规则。
dashed 定义虚线规则。
solid 定义实线边框规则。
double 定义双线边框规则。
groove 定义 3D grooved(3D凹槽  ) 规则。该效果取决于宽度和颜色值。
ridge 定义 3D ridged(3D凸槽  ) 规则。该效果取决于宽度和颜色值。
inset 定义 3D inset 规则(3D凹边  )。该效果取决于宽度和颜色值。
outset 定义 3D outset(凸边 )  规则。该效果取决于宽度和颜色值。

6  column-span : all/none;是否跨栏显示。

none:只在本栏中显示;

all:横跨所有栏目并定位在栏目的Z轴之上。

注意: column大部分属性都是在为其父级元添加属性样式。

column-span:all/none;是给其自身添加属性样式。是否跨栏显示。

7 columns 属性是column-width,column-height的复合属性。用于规定分栏的宽度和列数。

  columns:column-width column-height;

  默认值是auto,即columns:auto auto;

css3属性:column分栏的更多相关文章

  1. css笔记 - column分栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS3 column 分栏

     column的布局形式还没有使用过,后续的bug和解决方案有待检验. column column-count:number: 设置内容分为多少栏显示 column-width:长度单位:设置每一栏的 ...

  3. css3属性column知多少

    CSS3 可以将文本内容设计成像报纸一样的多列布局.像下面这样: 这样的布局称为"多列布局". 对多列属性分别进行学习: 对于 column 的所有属性,ie10+ 支持,fire ...

  4. css遮罩蒙版效果 分栏效果

    mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态   要展示的图像 使用mask之后产生的效果图   首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...

  5. CSS3-column分栏

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...

  8. css3分栏

    <!DOCTYPE HTML> <meta charset="UTF-8"> <title>分栏</title> <style ...

  9. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

随机推荐

  1. sudo 无法解析主机的解决办法

    错误存在于更改主机名字后,解决办法如下: sudo gedit /etc/hosts找到如下行:127.0.1.1       XXX将其修改为:127.0.1.1       (你现在的主机名) 保 ...

  2. JAVA语言对比C++语言的几个优点和自身的关键特性

    之所以写这篇博客不是为了比较JAVA语言和C++语言到底孰优孰劣,而是从语言本身出发进行对比总结程序编码设计上的差别.因水平有限,某些内容可能太过片面,欢迎指正和讨论. JAVA语言在设计上很好地借鉴 ...

  3. hadoop学习之hadoop完全分布式集群安装

    注:本文的主要目的是为了记录自己的学习过程,也方便与大家做交流.转载请注明来自: http://blog.csdn.net/ab198604/article/details/8250461 要想深入的 ...

  4. 如何使用NSFetchedResultsController-备

    不知不觉我们已经来到了Core Data系列教程的最后一部分了,在这里我们要讨论如何使用NSFetchedResultsController来优化我们的应用,提高应用的运行速度,减少其内存占用. 你是 ...

  5. 谁在唱衰PC?说出你的理由

    在平板电脑的冲击下,PC真的衰落了吗?戴尔消费产品市场副总裁Raymond Wah给出了坚定的回答:“平板电脑没有办法代替PC”. 让他有如此底气做出这一判断的取决于两方面:一方面,PC(了解PC市场 ...

  6. android网址

    1. 优麒麟手机助手 https://github.com/ubuntu-kylin/phone_manager 2. http://forum.xda-developers.com/index.ph ...

  7. HDOJ-1015 Safecracker(DFS)

    http://acm.hdu.edu.cn/showproblem.php?pid=1015 题意:给出一个目标值target和一个由大写字母组成的字符串 A-Z分别对应权值1-26 要求从给出的字符 ...

  8. 【HDU1272】小希的迷宫(并查集基础题)

    仍旧裸敲并查集.有这两点注意: 1.输入 0 0 时候要输出YES 2.留心数组的初始化 #include <iostream> #include <cstring> #inc ...

  9. javascrpit开发连连看记录-小游戏

        工作之余,总想做点什么有意思的东西.但是苦于不知道做什么,也就一直没有什么动作.在一个午饭后,跟@jedmeng和@墨尘聊天过程中,发现可以写一些小东西来练练手,有以下几点好处:     1. ...

  10. (转载) C/C++编译和链接过程详解 (重定向表,导出符号表,未解决符号表)

    转载http://blog.csdn.net/neo_ustc/article/details/9024839 有 些人写C/C++(以下假定为C++)程序,对unresolved external ...