您现在的位置是：网站首页> 编程资料编程资料
使用CSS3实现多列布局与多背景的技巧CSS3实现多背景模拟动态边框的效果CSS3点击按钮实现背景渐变动画效果CSS3条纹背景制作的实战攻略用CSS3实现背景渐变的方法css3中背景尺寸background-size详解使用CSS3的背景渐变Text Gradient 创建文字颜色渐变多重CSS背景动画实现方法示例CSS3之多背景background使用示例CSS3之背景尺寸Background-size使用介绍css3背景_动力节点Java学院整理
2023-10-23
251人已围观
简介 这篇文章主要介绍了使用CSS3实现多列布局与多背景的技巧,包括多列栏目的高度平衡和多间隙等一些细节方面的调整方法讲解,需要的朋友可以参考下
多列布局
CSS多列布局继承自块级布局模式，允许简单地定义多列文本。 一行太长的文字读起来很麻烦；当人眼从一行过长的文字末端移动到下一行开始处，就容易弄错到底该读哪一行。因此，为了最优化使用大的显示屏幕，设计者应该限制文字段落的宽度而并排排列，就像报纸一样。
糟糕的是如果不使用CSS和HTML在特定的位置强制换行，或者严格限制文本中允许的标记，或者夸张地使用脚本的话，这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。
列计数器和宽度
有两个CSS属性控制是否实现多列布局和显示多少列： column-count and column-width。
属性 column-count 设置特定数量的列数。例如，
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum
会以两列的方式显示内容：(如果你正使用支持多列布局的浏览器的话):
属性 column-width 设置期望的最小列宽。如果 column-count 没有设置，那么浏览器就会以合适的宽度尽量显示更多的列。
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum
变成：
在多列块中，内容会自动从一列换到另一列中。所有 HTML， CSS 和 DOM 功能在列之间都得到支持, 比如编辑和打印。
columns 属性简写
多数时候，网页设计者都会使用 column-count 和 column-width 的一个. 由于它们的值没有重叠，一般使用简写属性 columns。例如，
CSS声明 column-width:12em 可替换成：
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum
CSS声明 column-count:4 可替换成：
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum
CSS声明 column-width:8em 和 column-count:12 可替换成：
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum
高度平衡
CSS3多列规范需要列高平衡：即，浏览器自动设置最大列高，因此每列中的内容高度大致相同。Firefox浏览器是这样的。
然而，一些情况下，明确设置最大列高也是有用的，这样内容从第一列开始，尽可能多的生成列，甚至会溢出右边沿。因此，如果通过设置height 或 max-height 属性来限制列高，在生成新的一列之前每一列都会仅允许增加到这个高度。该模型对布局来说也更高效。
列间隙
列之间有缝隙。建议值为1em。该值可通过设置多列模块的 column-gap 属性来修改：
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
- qui officia deserunt mollit anim id est laborum
优雅降
相关内容
点击排行
本栏推荐
