CSS3布局样式
CSS3多列布局columns
为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现,语法:

参数描述:

例子:

CSS3 列间距column-gap
column-gap主要用来设置列与列之间的间距,其语法规则如下:

参数说明:

CSS3 列表边框column-rule
column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说,就有点类似于常用的border属性。但column-rule是不占用任何空间位置的,在列与列之间改变其宽度不会改变任何列的位置,语法规则如下:

参数说明:

CSS3 跨列设置column-span
column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列,不管里面元素如何排放顺序,他们都是从左向右的放置内容,但有时我们需要基中一段内容或一个标题不进行分列,也就是横跨所有列,此时column-span就可以轻松实现,此属性的语法如下。

参数说明:

实现标题跨列,例子:

CSS3 盒子模型
在CSS3中新增加了box-sizing属性,能够事先定义盒模型的尺寸解析方式,其语法规则如下:

参数说明:

例子:

CSS3布局样式的更多相关文章
- CSS3知识点整理(四)----布局样式及其他
包括CSS3多列布局样式.Flexbox伸缩布局.盒子模型等.重点介绍了Flexbox伸缩布局的各种属性用法. 一.多列布局 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给 ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- 针对移动设备的CSS3布局
针对移动设备的CSS3布局 一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主,不管这个预言是否应验,让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务,本教程学习用CS ...
- 学习笔记 第十一章 CSS3布局基础
第11章 CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1 CSS盒模型基础 页面中所有元素基本显示形态为方形 ...
- web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...
- 前端CSS3布局display:flex用法
前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...
- Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式
Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式 Fragment FragmentManager frag ...
- 炫酷的CSS3抖动样式:CSS Shake
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...
随机推荐
- Qt 学习之路 2(67):访问网络(3)
Qt 学习之路 2(67):访问网络(3) 豆子 2013年11月5日 Qt 学习之路 2 16条评论 上一章我们了解了如何使用我们设计的NetWorker类实现我们所需要的网络操作.本章我们将继续完 ...
- 关于Apache显示port 80 in use 无法解决的情况,这个世界对程序媛太不友好了
学到Ajax时下载了Apache,百度的安装教程,配置文件参数分别是: 1. httpd.conf里的80改为8000或者其他的,共三处(用记事本打开,按ctrl+F找方便) 2. httpd-ssl ...
- CentOS 7 设置日期和时间
现代操作系统分为以下两种类型的时钟: 实时时钟(Real-Time Clock,RTC),通常称为硬件时钟(一般是系统主板上的集成电路),它完全独立于操作系统的当前状态,即使在计算机关闭时也能运行. ...
- [转] docker save与docker export的区别
[From]http://cnodejs.org/topic/59a2304f7aeedce818249eeb 很久没有写博客了,坟头草都长了老高了.写博客要靠惯性,一旦停下来时间长了,就很难再坚持下 ...
- [转]【NODE】用WS模块创建加密的WS服务(WSS)
[From] https://luojia.me/2015/07/21/%E3%80%90node%E3%80%91%E7%94%A8ws%E6%A8%A1%E5%9D%97%E5%88%9B%E5% ...
- [转] Spring Boot特性
[From] http://blog.javachen.com/2015/03/13/some-spring-boot-features.html 1. SpringApplication Sprin ...
- oracle 查看一个表中的记录是否被锁住
SELECT a.object_id, a.session_id, b.object_nameFROM v$locked_object a, dba_objects bWHERE a.object_i ...
- PIXI 太空玉兔游戏(6)
想法来源 出于练习看到这篇文章 没有什么难度 效果如下,接下来会用pixijs讲解如何实现 创建应用及舞台 HTML部分只创建标签引入 pixi.min.js 即可: <script ...
- TimesTen启动停止命令
ttDaemonAdmin –start 启动 ttDaemonAdmin –stop 停止 或打开服务cmd-serviers.msc,找到相关服务启动或停止.
- 把linux图形启动界面修改成命令行界面
由于图形界面比较耗资源,需要把启动界面修改成命令行界面,怎么修改呢? 1.vim /etc/inittab 2.把id:5:initdefault:改成 id:3:initdefault: 3.重启即 ...