CSS3魔法堂:说说Multi-column Layout

简介:

 是否记得《读者文摘》中那一篇篇优美感人的文章呢?那除了文章内容外,还记得那报刊、杂志独有的多栏布局吗?
当我们希望将报刊、杂志中的阅读体验迁移到网页上时,最简单直接的方式就是采用多栏布局来对内容排版,然而在过去我们仅能通过float+positioned来模拟多栏布局,而且效果不尽人意。而CSS3引入新的Multi-column Layout模型,从底层支持多栏布局。
文本作为学习笔记,以便日后查阅。

通栏布局与多栏布局

 在深入Multi-column Layout模型之前,我们先看看疗效吧。

通栏布局

 大家在网上浏览的新闻、博客等一般采用的是通栏布局,效果如同当前本篇博客一样,就是所有内容均集中在一列中排版。若将这种布局方式运用在报刊、杂志上那只能一个字来形容,那就是丑了。

多栏布局

347002-20160420151648882-1024387122.jpg
感觉是不是犹如在读纸质的杂志呢:)

深入Multi-column Layout模型

模型组成

347002-20160420151700820-1049996964.jpg
multi-column element(abbr. multicol):图中白色线框,column-widthcolumn-count属性值不为auto时,该元素则作为multicol并为其子元素提供multi-column layout。
注意:

  1. multicol会生成新的BFC,因此不会出现collapsing margins效果。

column box(abbr. column):图中红色线框,如同line box一样用于组织multicol中的各子元素。具体特性如下

  1. multicol下的子元素被分配到column box中进行排版,若column box不足以容纳某个子元素,则将子元素拆解成N个部分并分配到N个column box中;
  2. column box沿multicol的inline direction排列;
  3. column box的数目是根据column-widthcolumn-count属性值,和multicol的content box的inline dimension上的长度度计算而来的;
  4. 同一个multicol下的所有column box的宽度都是一样的,当column-fill:balance时高度均等于mluticol在block dimension上的长度;
  5. 子元素所属的containing block不再是multicol的content box,而是该元素位于的column box;(因此如width:100%float:left均是以column box为参考系)
  6. 若内容超出column box在inline dimension的长度时,则会被隐藏;(视觉上就是内容刚好在column gap前被截取了)
  7. absolute positioned元素不参与multi-column layout.

column gap:图中粉色线框,位于column box之间。
column rule:图中蓝色线框,位于column gap内,作为column box间的分隔线。

注意上述内容有几个相对陌生的概念——inline directionblock directioninline dimensionblock dimension,其实就是对应我们默认情况下的"从左至右"、"从上到下"、"水平方向"和"垂直方向"。那为何不用后者来描述呢?原因就是后者是一种"合理误解"的描述方式,"从左至右"只是inline direction的其中一种而已。下面我们简单梳理一下!参考

  1. block dimension与inline dimension相互垂直;
  2. writing mode为水平方向时,inline dimension与horizontal dimension一致;writing mode为垂直方向时,inline dimension与vertical dimension一致;
  3. block direction其实是Flow-relative Direction下的block flow direction,我们要从关注"上下"转移到关注block-startblock-end,沿block direction排列实际上就是从block-startblock-end排列。当writing-modehorizontal-tb时,block-start为上,block-end为下;当writing-modevertical-rl时,block-start为右,block-end为左;当writing-modevertical-lr时,block-start为左,block-end为右;
  4. inline direction其实是Flow-relative Direction下的inline base direction,我们要从关注"左右"转移到关注line-startline-end,沿inline direction排列实际上就是从line-startline-end排列。当writing-modehorizontal关键词时,且directionltr,则line-start为左,line-end为右,否则相反;若writing-modevertical关键词时,且directionltr,则line-start为上,line-end为下,否则相反。
    347002-20160420151716491-2002200236.jpg

      <style type="text/css">
    .container{
      width: 300px;
      height: 500px;
      padding: 5px;
      border: dashed 1px #888;
    
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.3em;
      -webkit-writing-mode: vertical-rl;
      text-align: justify;
    
      -webkit-columns: auto 2;
      -webkit-column-gap: 1.5em;
    }
    .container h1{
      background: #eee;
      text-align: center;
    }
    .container p{
      text-indent: 2em;
    }
      </style>
      <div class="container">
    <h1>梦开始的地方</h1>
    <p>核心提示:十年寒窗无人问,一举成名天下知。不可否认求学之路的艰辛苦闷。但这似乎也阻止不了那些为上大学而昼夜奋战的莘莘学子。如此的努力,为了仅仅是能在大学“逍遥快活一番”这动机实在让人心寒,也正因如此造就了大学生的堕落。电脑,科技革命的产物。人类文明进步最有力的证明。这也成为了大学生必不可少的装备之一,但大多数...</p>
    <p>十年寒窗无人问,一举成名天下知。不可否认求学之路的艰辛苦闷。但这似乎也阻止不了那些为上大学而昼夜奋战的莘莘学子。如此的努力,为了仅仅是能在大学“逍遥快活一番”这动机实在让人心寒,也正因如此造就了大学生的堕落。</p>
      </div>

CSS属性详解

1.column-width:auto|<length>
设置每栏的宽度

  1. column-count属性值为auto,则column-count=父容器宽度/column-width;
  2. column-count属性值不为auto,则该设置为每栏的最小宽度,并根据父容器宽度,调整显示的栏目数目。(注意:当column-width*column-count < 父容器宽度时,column-width将自动扩大)

2.column-count:auto|<integer>
作用:设置栏目数量

  1. column-width属性值为auto,则无论父容器宽度是多少,依然保持固定的栏目数;
  2. column-width属性值不为auto,则该设置为栏目的最大数量,并根据父容器宽度,调整显示的栏目数目。(注意:当column-width*column-count < 父容器宽度时,column-width将自动扩大)

column:<column-width> || <column-count>

3.column-gap:normal|<length>
作用:设置栏之间的间距,normal的结果值一般为1em。
4.column-rule:<length>||<style>||<color>||<transparent>
作用:设置栏之间边框的宽度、样式和颜色。
子属性column-rule-width:<lenght>
子属性column-rule-style:<border-style>
子属性column-rule-color:<color>
5.column-span:1|all
作用:设置某子元素跨1栏还是跨所有栏。
6.column-fill:balance|auto
作用:设置栏高是相等,还是根据自身内容而定。

7.在默认情况下,当column没有足够的空间容纳整个子元素时,则会对子元素进行拆解(如同line box中的inline-level box一样)。而CSS3中还提供了break-before/after/inside3个属性来调整拆解方式。
break-before:auto|always|avoid|left|right|page|column|avoid-page|avoid-column
break-after:auto|always|avoid|left|right|page|column|avoid-page|avoid-column
break-inside:auto|avoid|avoid-page|avoid-column
针对screen媒介的属性值
auto, 不强制也不禁止在盒子前/后/内发生网页/栏目拆解;
always/column, 强制在盒子前/后发生网页/栏目拆解;
avoid/avoid-column, 禁止在盒子前/后/内发生网页/栏目拆解;
针对打印的属性值
left/right/page/avoid-page
347002-20160420151735413-189496180.jpg

<p style="-webkit-column-break-inside:avoid;">核心提示:十年寒窗.....</p>

兼容——无法抹去de痛

 Multi-column Layout的各个属性在不同的浏览器中的支持程度也有所区别,但就columns属性的支持如下:
347002-20160420151747179-1620156986.jpg

-webkit-columns
-moz-columns
columns

总结

 由于兼容性问题,我们并不能很好地享受Multi-column Layout的美好,幸运的是模拟报刊多栏布局的场景并不多见,而且用户通过网页阅读时已习惯通栏布局,因此不是非用不可啦!
尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/5412841.html^_^肥仔John

感谢

CSS3 Multi-column Layout
Columns
http://caniuse.com/#search=column
《CSS 3实战》——第6章 CSS 3多列布局
《图解CSS3核心技术与案例实战》——第9章 CSS3 多列布局

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

posted @ 2016-04-22 08:55 ^_^肥仔John 阅读( 965) 评论( 0) 编辑 收藏
 

公告本文转自Justin博客园博客,原文链接:http://www.cnblogs.com/justinw/,如需转载请自行联系原作者

本文转自^_^肥仔John博客园博客,原文链接:http://www.cnblogs.com/fsjohnhuang/p/5412841.html,如需转载请自行联系原作者

 

相关文章
|
前端开发
CSS - Layout
CSS - Layout
77 0
|
前端开发
一个css文件里实际并不存在的class,不能给element layout产生任何影响
一个css文件里实际并不存在的class,不能给element layout产生任何影响
69 0
一个css文件里实际并不存在的class,不能给element layout产生任何影响
|
5天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
19 0
HTML5/CSS3粒子效果进度条代码
|
5天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
27 1
|
5天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
5天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
5天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
5天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
5天前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
|
5天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。