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. [译]Java 设计模式之备忘录

    (文章翻译来自Java Design Pattern: Memento) memento是一个保存另外一个对象内部状态拷贝的对象.这样以后就可以将该对象恢复到原先保存的状态. 在将来时空旅行将成为显示 ...

  2. Memcache存储大量数据的问题

    Memcache存储大数据的问题  huangguisu Memcached存储单个item最大数据是在1MB内,假设数据超过1M,存取set和get是都是返回false,并且引起性能的问题. 我们之 ...

  3. js根据IP地址判断城市

    var province = '' ;var city = '' ;jQuery.getScript("http://int.dpool.sina.com.cn/iplookup/iploo ...

  4. Oracle表介绍--簇表

    簇和簇表       簇其实就是一组表,是一组共享相同数据块的多个表组成. 将经常一起使用的表组合在一起成簇可以提高处理效率.       在一个簇中的表就叫做簇表.建立顺序是:簇→簇表→数据→簇索引 ...

  5. php中session和cookie

    cookie 每次请求页面的时候进行验证,如果用户信息存储在数据库中,每次都要执行一次数据库查询,给数据库造成多余的负担.cookie可以被修改的,所以安全系数太低. session是存储在服务器端面 ...

  6. LigerUI一个前台框架增、删、改asp.net代码

    LigerUI一个前台框架增.删.改asp.net代码的实现   先上代码:前台代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  7. iOS基础 - 相片浏览器

    一.需求分析 点击照片从当前照片位置动画弹出新的视图控制器显示选中的照片,新的视图控制器为全屏显示,背景为黑色,再次点击照片动画缩小至当前选中的照片位置,双击放大照片,如果已经放大则缩小,在新的视图控 ...

  8. Unkown2

    续上个unkown,这里mark一下,接下来觉得还有可能考到,且自己不会的东西(或不太会) 数学方面: 随机化,概率,简单的几何计算,杂七杂八的数论,组合数学中的差分,康托展开,高斯消元,线性规划 树 ...

  9. Bootstrap3.0入门学习系列

    Bootstrap3.0入门学习系列规划[持续更新]   前言 首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中, ...

  10. web开发相关

    Session相关 关了浏览器session当然仍然存在,因为session是储存在服务器端的,而服务器是不可能知道你有没有关掉浏览器. 服务器只是简单的保持session接受用户请求,只有当sess ...