CSS多列

常用属性:

column-count 分几列

column-gap 列间距

column-rule 列分割线的样式(写法和border一样)

例如:

一个div分三列,列之间间距为10px,分割线为(可以不设置)5像素红色实线这样写

<style>

  div{column-count:3;

    column-gap:10px;

    column-rule:5px solid red;

    }

</style>

写此样式要加前缀

column-rule

宽度:可选值有thin(细边框)、medium(中等边框)、thick(粗边框)、也可以指定数值

样式:可选值有hidden(隐藏)。dotted(点状)。dashed(虚线)、solid(实线)、double(双线)

CSS中的用户界面相关属性

resize:调整尺寸

box-sizing:方框调整大小

显示如下:

CSS多列、用户界面属性的更多相关文章

  1. CSS(二)- 属性速览(含版本、继承性和简介)

    相关链接 CSS3速查表,这里面列出了所有新增的属性以及新增或者修改的属性值 css参考手册,很好地一个常用网站 CSS定位(不可继承) CSS布局(仅visibility可继承) CSS尺寸(不可继 ...

  2. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  3. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

  4. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  5. CSS中的display属性(none,block,inline,inline-block,inherit)

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  6. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

  7. css的五种属性值----在路上(21)

    在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...

  8. 脚本化CSS类-HTML5 classList属性

    HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...

  9. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

随机推荐

  1. 笔试 - 高德软件有限公司python问题 和 答案

    高德软件有限公司python问题 和 答案 本文地址: http://blog.csdn.net/caroline_wendy/article/details/25230835 by Spike 20 ...

  2. vs2010下载链接中国简体(中国含msdn)

    昨天一个朋友说vs2010中国版可下载,我开始不相信.只是周末.所以,我下载一试 果然,安装了中国版,原本msdn订户才能够下载,感谢朋友们上传. 文件名 cn_visual_studio_2010_ ...

  3. ASP.NET请求处理过程

    当请求一个*.aspx文件的时候,这个请求会被inetinfo.exe进程截获,它判断文件的后缀(aspx)之后,将这个请求转交给Aspnet_isapi.dll,aspnet_isapi.dll会通 ...

  4. DefaultModelBinder

    Asp.net MVC的Model Binder工作流程以及扩展方法(3) - DefaultModelBinder Default Binder是MVC中的清道夫,把守着Model Binder中的 ...

  5. WinDbg 命令手册

    WinDbg 命令三部曲:(一)WinDbg 命令手册   本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 系列博文 <WinDbg 命令三部 ...

  6. IP数据报是如何在网络中转发的?

    首先发送方抽取目的站的网络前缀,来判断是否目的站是否位于同一网络上,如果在二者有相同的网络前缀,则,直接使用直接交付的方式, 否则,使用由路由器互连的间接交付,这要借助IP路由表,采用表驱动法,路由表 ...

  7. 浅谈DevExpress<一>:换肤

    最近要用到devExpress,一句话,很好很强大,比起vs自带的winform界面,种类和花样要多了不少,然而,强力的功能带来了庞大的信息量,所以我打算通过一些小模块来和大家一起对它进行探讨和研究. ...

  8. node-webkit入门

    node-webkit入门   一.简介 node-webkit 是一个基于chromium与node.js的应用程序运行器,它允许开发者使用web技术编写桌面程序.通过Node.js和WebKit技 ...

  9. JavaScript插件——按钮

    Bootstrap3.0学习第二十四轮(JavaScript插件——按钮)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/ ...

  10. QuickWebApi2:使用Lambda方式,完成对WebApi的开发和调用-文档的生成

    续 QuickWebApi:使用Lambda方式,完成对WebApi的开发和调用 上一篇完成了主要的功能,本次修订主要重构了对接口文档的生成规范,使之可读性更佳,甚至可以作为接口文档进行发布(当然,在 ...