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: ...
随机推荐
- DynamicResource与StaticResource的区别
原文:DynamicResource与StaticResource的区别 2008-06-20 12:16:12 静态资源在第一次编译后即确定其对象或值,之后不能对其进行修改.动态资源则是在运行时决定 ...
- AppCompat v21 — Android 5.0之前版本设备的Material Design实现
博客原文地址:http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html,要想打 ...
- Unity学习入门
文章说明,文本内容基于配置文件进行依赖注入 unity介绍:Unity是由微软的Patterns & Practices团队开发的一个轻量级.可扩展的依赖注入(Dependency Injec ...
- Blend4开发:会飞的小鸟
1,绘图,动画制作: 2,运行截图: 源码:http://files.cnblogs.com/yuanli/Animals.zip 动画效果参见源码.
- EF Code First Migrations, 支持MySQL
1.Enable-Migrations 2. Add-Migration TagName 3. Update-Database 注意,每次更改cs后,注意Build,再运行命令. MySql参考: h ...
- Working with Entity Relations in OData
Working with Entity Relations in OData 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs. ...
- JSON.NET基本使用
序列化一个对象 public static string ToJson( object obj) { string json = JsonConvert .SerializeObject(obj); ...
- Forms Authentication in ASP.NET MVC 4
原文:Forms Authentication in ASP.NET MVC 4 Contents: Introduction Implement a custom membership provid ...
- last error : SSL certificate problem, verify that the CA cert is OK. Details: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate veri
今天在用搜狐提供的邮件群发系统的sdk,做发送邮件的测试时,提示: last error : SSL certificate problem, verify that the CA cert is O ...
- Private和Protected方法
.NET中如何测试Private和Protected方法 TDD是1)写测试2)写通过这些测试的代码,3)然后重构的实践.在,NET社区中, 这个概念逐渐变得非常流行,这归功于它所增加的质量保证. ...