使用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实现多列布局与多背景的技巧
Feb 29 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
CSS3实现指纹特效代码
Mar 17 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 mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
php模板中出现空行解决方法
2011/03/08 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP7新功能总结
2019/04/14 PHP
php中错误处理操作实例分析
2019/08/23 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
Python Grid使用和布局详解
2018/06/30 Python
Django开发的简易留言板案例详解
2018/12/04 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
python实现tail -f 功能
2020/01/17 Python
Django静态文件加载失败解决方案
2020/08/26 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
《再别康桥》教学反思
2014/02/12 职场文书
教职工代表大会主持词
2014/04/01 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
高中班级口号
2014/06/09 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
2014年学生工作总结
2014/11/20 职场文书
行政申诉状范文
2015/05/20 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers