CSS多列、用户界面属性
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多列、用户界面属性的更多相关文章
- CSS(二)- 属性速览(含版本、继承性和简介)
相关链接 CSS3速查表,这里面列出了所有新增的属性以及新增或者修改的属性值 css参考手册,很好地一个常用网站 CSS定位(不可继承) CSS布局(仅visibility可继承) CSS尺寸(不可继 ...
- CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
- CSS多列布局
× 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- css 两列自适应布局的4种思路
前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...
- css的五种属性值----在路上(21)
在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...
- 脚本化CSS类-HTML5 classList属性
HTML元素可以有多个CSS类名,class属性保存了一个用空格隔开的类名列表.标识符class在JavaScript中是保留字,所以在JavaScript中可以用className. //如下代码设 ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
随机推荐
- 牛腩公布系统--HTTP 错误 403.14 - Forbidden
忘了是谁说的"至理名言",做牛腩公布系统,不怕出错误,就怕出跟牛老师不一样的错误!! 刚做就開始出现各种错误了,只是话说错误越多,收获越多.把每次困难都当做历练成长的机会.不多说, ...
- 依据道路的shape获得high_cross和low_cross
如图所看到的:怎样依据提供的道路的shape file获得该路的high cross和low cross 所谓的high cross就是图中的king st这条路,low cross是Gravers ...
- 通过如何通过js实现复制粘贴功能
在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...
- C#放缩、截取、合并图片并生成高质量新图的类
原文:C#放缩.截取.合并图片并生成高质量新图的类 using System;using System.Drawing;using System.Drawing.Imaging;using Syste ...
- Javascript技巧实例精选(3)—用字符在屏幕上打印金字塔
用Javascript实现用★字符在屏幕上打印金字塔 >>点击这里下载完整html源码<< 这是最后的截图 这是相应的Javascript源码 //动态创建表格 var s=' ...
- Summation of Four Primes - PC110705
欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/uva10168.html 原创:Summ ...
- UNIX基础知识--<<UNIX 环境编程>>读书笔记
1 shell程序就是位于应用软件与系统调用之间的程序 每个用户登录系统,系统就会为用户分配shell (用户的登录的口令文件 在 /etc/passwd 2 ls filename 运行原理 ...
- 历年noip复赛试题整合
早晨打算把历年的试题都过一遍,整理一下大概会往哪个方向考,考什么,不说太多,开始吧 2013: Day1: T1 转圈游戏 : 快速幂(关键在于要会打 快速幂) 思路:因为每次都进m位,相当于每次x加 ...
- 使用NPOI导出,读取EXCEL(可追加功能)
使用NPOI导出,读取EXCEL,具有可追加功能 看代码 using System; using System.Collections.Generic; using System.Text; usin ...
- canvas 之刮刮卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...