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布局样式的更多相关文章

  1. CSS3知识点整理(四)----布局样式及其他

    包括CSS3多列布局样式.Flexbox伸缩布局.盒子模型等.重点介绍了Flexbox伸缩布局的各种属性用法. 一.多列布局 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给 ...

  2. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  3. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  4. 针对移动设备的CSS3布局

    针对移动设备的CSS3布局 一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主,不管这个预言是否应验,让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务,本教程学习用CS ...

  5. 学习笔记 第十一章 CSS3布局基础

    第11章   CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1  CSS盒模型基础 页面中所有元素基本显示形态为方形 ...

  6. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  7. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  8. Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式

    Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式 Fragment FragmentManager frag ...

  9. 炫酷的CSS3抖动样式:CSS Shake

    CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...

随机推荐

  1. Hibernate学习笔记(六)—— 查询优化

    一.Hibernate的抓取策略 1.1 什么是抓取策略 抓取策略是当应用程序需要在(Hibernate实体对象图的)关联关系间进行导航的时候,Hibernate如何获取关联对象的策略. HIbern ...

  2. Flask之flask_script

    flask端口占用 解决方案: lsof -i:5000 #查询是哪个进程占用的 kill PID 杀掉进程 flask_script之Manager类 from flask import Flask ...

  3. C++_类继承3-动态联编和静态联编

    程序调用函数时,将使用哪个可执行代码块呢?编译器负责回答这个问题. 将源代码中的函数调用解释为特定的函数代码块被称为函数名联编(binding). 在C语言中,这非常简单,因为每个函数名对应一个不同的 ...

  4. LightOJ - 1197 素数筛

    深夜无事可干啊 #include<bits/stdc++.h> using namespace std; const int maxn = 1e6+11; typedef long lon ...

  5. C++标准库之String

    C++中支持的字符串处理的函数库叫String,但它不是STL,却与STL操作十分相似. 1.声明: 使用String之前要有以下头文件 #include<string> using na ...

  6. Java 安全套接字编程以及 keytool 使用最佳实践

    Java 安全套接字编程以及 keytool 使用最佳实践 http://www.ibm.com/developerworks/cn/java/j-lo-socketkeytool/

  7. Oracle分区表管理的一些笔记

    [转自] http://www.linuxidc.com/Linux/2011-07/38381.htm Oracle分区表的管理笔记(仅限于对普通表,即堆表的分区管理,IOT跟CLUSTER TAB ...

  8. Notepad++ 代码格式化插件

    UniversalIndentGUI 是一个代码格式化工具合集,基于很多开源的代码格式化项目.有NPP的插件版也有独立的程序,支持常见代码格式. 支持的代码格式: C, C++, C#, Cobol, ...

  9. (转)远程SSH连接服务与基本排错

    远程SSH连接服务与基本排错 原文:https://www.cnblogs.com/chensiqiqi/p/6224474.html#top 1.1 为什么要远程连接Linux系统 在实际的工作场景 ...

  10. webservice 介绍

    Web service 即web服务,它是一种跨编程语言和跨操作系统平台的远程调用技术即跨平台远程调用技术. l 采用标准SOAP(Simple Object Access Protocol)  协议 ...