使用CSS3实现多列布局与多背景的技巧


Posted in HTML / CSS onFebruary 29, 2016

多列布局
CSS多列布局继承自块级布局模式,允许简单地定义多列文本。 一行太长的文字读起来很麻烦;当人眼从一行过长的文字末端移动到下一行开始处,就容易弄错到底该读哪一行。因此,为了最优化使用大的显示屏幕,设计者应该限制文字段落的宽度而并排排列,就像报纸一样。

糟糕的是如果不使用CSS和HTML在特定的位置强制换行,或者严格限制文本中允许的标记,或者夸张地使用脚本的话,这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。

列计数器和宽度

有两个CSS属性控制是否实现多列布局和显示多少列: column-count and column-width。

属性 column-count 设置特定数量的列数。例如,

CSS Code复制内容到剪贴板
  1. <div style="column-count:2;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat    
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa    
  6. qui officia deserunt mollit anim id est laborum</div>   

会以两列的方式显示内容:(如果你正使用支持多列布局的浏览器的话):

属性 column-width 设置期望的最小列宽。如果 column-count 没有设置,那么浏览器就会以合适的宽度尽量显示更多的列。

CSS Code复制内容到剪贴板
  1. <div style="column-width:20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,   
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,   
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat   
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa   
  6. qui officia deserunt mollit anim id est laborum</div>   

变成:
使用CSS3实现多列布局与多背景的技巧

在多列块中,内容会自动从一列换到另一列中。所有 HTML, CSS 和 DOM 功能在列之间都得到支持, 比如编辑和打印。

columns 属性简写

多数时候,网页设计者都会使用 column-count 和 column-width 的一个. 由于它们的值没有重叠,一般使用简写属性 columns。例如,

CSS声明 column-width:12em 可替换成:

CSS Code复制内容到剪贴板
  1. <div style="columns:12em">Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat    
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa    
  6. qui officia deserunt mollit anim id est laborum</div>  

使用CSS3实现多列布局与多背景的技巧

CSS声明 column-count:4 可替换成:

CSS Code复制内容到剪贴板
  1. <div style="columns:4">Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat    
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa    
  6. qui officia deserunt mollit anim id est laborum</div>  

使用CSS3实现多列布局与多背景的技巧

CSS声明 column-width:8em 和 column-count:12 可替换成:

CSS Code复制内容到剪贴板
  1. <div style="columns:12 8em">Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat    
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa    
  6. qui officia deserunt mollit anim id est laborum</div>  

使用CSS3实现多列布局与多背景的技巧

高度平衡

CSS3多列规范需要列高平衡:即,浏览器自动设置最大列高,因此每列中的内容高度大致相同。Firefox浏览器是这样的。

然而,一些情况下,明确设置最大列高也是有用的,这样内容从第一列开始,尽可能多的生成列,甚至会溢出右边沿。因此,如果通过设置height 或 max-height 属性来限制列高,在生成新的一列之前每一列都会仅允许增加到这个高度。该模型对布局来说也更高效。

列间隙

列之间有缝隙。建议值为1em。该值可通过设置多列模块的 column-gap 属性来修改:

CSS Code复制内容到剪贴板
  1. <div style="column-width:20em; column-gap:2em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,    
  2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,    
  3. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    
  4. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat    
  5. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa    
  6. qui officia deserunt mollit anim id est laborum</div>  

使用CSS3实现多列布局与多背景的技巧

优雅降级
多列属性会被不支持多列模型的浏览器忽略。因此,为这些浏览器创建单列结构而为支持多列的浏览器创建多列结构相对来说比较简单。

注意不是所有的浏览器都支持不带前缀的属性名。为了在大多数现代浏览器中应用这种特性,每个属性必须写三次: 一次用 -moz 前缀,一次用 -webkit 前缀,一次不使用前缀

多背景
通过使用 CSS3,你可以向元素应用多个背景。这些背景相互堆叠,第一个背景放在最上面,最后一个背景放在最下面。 仅最后一个背景允许拥有背景色。

指定多个背景很简单:

CSS Code复制内容到剪贴板
  1. .myclass {   
  2.   background: background1, background 2, ..., backgroundN;   
  3. }  

你既可以使用简写属性 background 也可以使用除 background-color 外的独立属性。即,,下面的属性可以用属性列表指定, 每个背景一个: background,background-attachment,background-clip, background-image,background-origin,background-position, background-repeat, background-size。

示例
该例中,三个背景进行堆叠:火狐标志,一个线性渐变, 和一张带有花的图片:

CSS Code复制内容到剪贴板
  1. .multi_bg_example {   
  2.   backgroundurl(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),   
  3.         linear-gradient(to rightright, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),   
  4.         url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);   
  5.   background-repeatno-repeatno-repeatrepeat;   
  6.   background-positionbottombottom rightrightleftrightright;   
  7. }  

结果
使用CSS3实现多列布局与多背景的技巧

HTML / CSS 相关文章推荐
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 #HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 #HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 #HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 #HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 #HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 #HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 #HTML / CSS
You might like
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
python Canny边缘检测算法的实现
2020/04/24 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Python 实现一个计时器
2020/07/28 Python
Python类成员继承重写的实现
2020/09/16 Python
香港零食网购:上仓胃子
2020/06/08 全球购物
中学校庆方案
2014/03/17 职场文书
大学自主招生推荐信
2014/05/10 职场文书
某某同志考察材料
2014/05/28 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python