css3属性:column分栏
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"。
整数是将元素内容划分为最佳列数。
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-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分栏的更多相关文章
- css笔记 - column分栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3 column 分栏
column的布局形式还没有使用过,后续的bug和解决方案有待检验. column column-count:number: 设置内容分为多少栏显示 column-width:长度单位:设置每一栏的 ...
- css3属性column知多少
CSS3 可以将文本内容设计成像报纸一样的多列布局.像下面这样: 这样的布局称为"多列布局". 对多列属性分别进行学习: 对于 column 的所有属性,ie10+ 支持,fire ...
- css遮罩蒙版效果 分栏效果
mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态 要展示的图像 使用mask之后产生的效果图 首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...
- CSS3-column分栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 纯CSS实现侧边栏/分栏高度自动相等
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...
- IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...
- css3分栏
<!DOCTYPE HTML> <meta charset="UTF-8"> <title>分栏</title> <style ...
- columns分栏与flex弹性盒模型
columns 分栏 值:column-width:设置每列的宽度 column-count:设置列数 例:columns{200px 3} 列数和宽度固定 co ...
随机推荐
- CSS3选择器小结
CSS3 选择器小结 一 通用选择器 1 *{}通配选择符(CSS2):适合所有元素对象. 2 E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3 E#myid是id ...
- dedecms友情链接flink的调用方法
标记名称:flink[标签简介][功能说明]:用于获取友情链接,其对应后台文件为"includetaglibflink.lib.php".[适用范围]:全局标记,适用V55,V56 ...
- dobbo学习
http://www.cnblogs.com/Javame/p/3632473.html 1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以 ...
- 文件:一个任务 - 零基础入门学习Python029
文件:一个任务 让编程改变世界 Change the world by program 一个任务 这节课,我们需要一起来完成一个任务:将文件(record.txt)中的数据进行分割并按照以下规律保存起 ...
- DataTables给每一列添加下拉框搜索
$(document).ready(function() { $('#example').DataTable( { initComplete: function () { var api = this ...
- 无人参与安装IIS 6.0
使用脚本安装 IIS 从“开始”菜单,单击“运行”. 在“打开”框中,键入 cmd,然后单击“确定”. 在命令提示符下,键入 Sysocmgr.exe /i:sysoc.inf /u:%path_to ...
- 转:修改类不重启tomcat 自动加载项目
可以修改类不用重启Tomcat加载整个项目(手工启动) 配置reloadable=true(自动重载) 使用Debug模式,前提是仅限于局部修改.(修改类不用重启--热加载) (rel ...
- php curl 中的gzip压缩性能测试
前因: 请求接口次数很多,每日两亿多次,主要是有些接口返回数据量很大高达110KB(为了减少请求次数,将多个接口合并成一个导致的).后端接口的nginx已经开启gzip,所以做个测试,看看是否在请求时 ...
- linux中patch命令 -p 选项
patch命令和diff命令是linux打补丁的成对命令,diff 负责生产xxxxx.patch文件,patch命令负责将补丁打到要修改的源码上.但是patch命令的参数-p很容易使人迷惑,因为对- ...
- Longest Consecutive Sequence 解答
Question Given an unsorted array of integers, find the length of the longest consecutive elements se ...