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. js判断浏览器类型(手机和电脑终端)

    工作中经常会用到通过js来判断浏览器的功能!今天这里通过js来判断浏览器是来自移动设备还是pc设备! 代码如下: var browser={ versions:function(){ var u = ...

  2. cocos2d-x3.0 经常使用绘图方法

    HelloWorldScene.h 例如,下面的代码被添加: protected: void onDraw(const kmMat4 &transform, bool transformUpd ...

  3. 【转】在PC上测试移动端网站和模拟手机浏览器的5大方法

    查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...

  4. SQL面试题1

    SQL面试题 Sql常用语法 下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言 ...

  5. robotlegs2.0框架实例源码带注释

    robotlegs2.0框架实例源码带注释 Robotlegs2的Starling扩展 有个老外写了robotleges2的starling扩展,地址是 https://github.com/brea ...

  6. C#函数式程序设计之函数、委托和Lambda表达式

    C#函数式程序设计之函数.委托和Lambda表达式 C#函数式程序设计之函数.委托和Lambda表达式   相信很多人都听说过函数式编程,提到函数式程序设计,脑海里涌现出来更多的是Lisp.Haske ...

  7. Markdown 代码测试

    Mou Overview Mou, the missing Markdown editor for web developers. Syntax Strong and Emphasize strong ...

  8. C# 脚本代码自动登录淘宝获取用户信息

    C# 脚本代码自动登录淘宝获取用户信息   最近遇到的一个需求是如何让程序自动登录淘宝, 获取用户名称等信息. 其实这个利用SS (SpiderStudio的简称) 实现起来非常简单. 十数行代码就可 ...

  9. 模板方法(Template)模式

    模板方法(Template)模式 前言 前段时间在亚马逊买了一本<CLR>的书,当时搞活动买一送一,然后挑了一本<漫谈设计模式>,一位不相识的大牛写的,这几天闲来无事,翻了几页 ...

  10. Visual Stuido也有非常多的快捷键

    最近看到很多同事用 VI 来开发Ruby,Python脚本. 编辑代码全部用的是快捷键,效率很高. 其实Visual Stuido也有非常多的快捷键,熟练运用后,能大大提高工作效率. 本文介绍一些最常 ...