Layout

再谈等高列布局、水平垂直居中与置顶页脚

CSS中的等高布局、水平垂直居中以及置顶页脚(Sticky Footer)这几个效果(我喜欢把他们说成是CSS效果,而不喜欢说其是问题)并不是常陌生,而且很多同学都似乎有碰到过,也经常体验过。甚至在很多韦德1946手机版客户端面试中也常被考官问到,有的时候还直接被考官给秒杀了。早前在水平垂直居中系列八种创建等高列布局如何将页脚固定在页面底部几篇文章中也或多或少介绍过。今天老调重谈,用几种新方法和大家探讨这几个效果,希望能帮助大家开拓思维。

Hold住CSS布局新属性

新css属性为我们提供了更加便捷的网页布局方式。来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域。这篇文章最早出现在 the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者,全球销量最高的杂志。按照以往来说,用CSS来布局看起来总是一样非常繁杂的工作。然而,随着一个个新标准的推出,网页设计者已经能够实现非常轻松地进行布局工作了。 主流的浏览器,在W3C的推动下,已经开始实现多种新型的布局方式,而且我们现在已经可以开始使用了。举个例子,W3C开始把CSS3 Multicolumn Layout Module考虑进来。这就意味着W3C非常愿意看到浏览器在将来能够对上面的模块实现出来。

CSS布局的未来

大家都知道,css有着奇妙的特性,然而让人失望的是,css对基本页面布局上的支持有所欠缺。但是这种情况正在得到改变,更多的动态页面正是由css所支持的,正如peter gasston所说的。这是一篇关于css布局且具有前瞻性的 文章。在这里,我能够保证在数年之后,css3必定能够引领潮流。在这篇文章当中,我将为大家从优秀实用到纯粹理论阶段中介绍有关css布局的工具,也许在这些阶段中你不一定用得到他们,(至少不是现在),但仍然还很有必要去了解,通过这样可以透过迷雾,看清未来。

学习CSS布局

这个篇文章介绍的是现在广泛使用于网站布局领域的CSS基础。你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够。如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则,在工作的时候,你依然陷入迷惘的泥潭中苦苦挣扎。由LL根据Learn CSS Layout站点所译,让我们学一些CSS布局的基础知识。希望大家喜欢。

Text-align:Justify和RWD

项目列表两端对齐,给一些同学带来了很多困惑,我在群里也时常看到有人问这样的布局问题,记得很早前在《如何在Drupal中避免重复列末尾的Margin》中有做过一点简单的介绍。后来在张旭鑫的博客中,找到两篇《display:inline-block/text-align:justify下列表的两端对齐布局》《拜拜了,浮动布局-基于display:inline-block的列表布局》中介绍了使用text-align:justify和display:inline-block实现两端对齐。受益无穷。但随着响应式布局的出现,这样的布局又提出一个新的要求,要实现响应式布局,最近邮箱常收到Patrick Kunka的《Text-align: Justify and RWD》一文,觉得蛮好的,特译成中文与大家共享,希望大家喜欢。

如何使用CSS网格创建一个自适应布局

毫无疑问,当开发人员谈到网页布局时会有很多选择。为了确保你的布局可以适应不同设备、方向和屏幕大小,你需要慎重考虑清楚,你要使用哪些方法来布局。网格布局是一个新的布局方法,使你可以把网页的主要区域在游览器窗口内设置一个固定大小或者自由空间,你也可以两个同时使用。 因为网格布局使用您能够根据列和行对齐,但没有内给结构,它还使场景像这篇文章中描述的,要么是不可能或很难用HTML和CSS样式实现。但你使用网格布局和媒体查询结合,你可以使你的布局来适应设置变化,比如定位、可用空间等。

CSS3网格布局介绍——网格的运行

CSS3网格布局模块的一个任务是帮助我们处理非常简单和清晰的任何布局,很有可能是一个内容块在一个虚拟的网络位置。与旧的表格方法相比,表格是基于一个使用的表,这里的具有清晰的文档语义和内容与结构的分离。在一个模板中使用不同的结构标签,使用多个浮动和手动计算实现一个布局是困难的,这里介绍的方法变得非常简单和清晰。与绝对定位相比,网格更具灵活性。与当今天流行的CSS/JS库相比,这些库使用网格都需要指定相应的类名(作为一个示例,比如bootstrapyui css grids),而在网格布局模块中是不需要额外增添这些类名。

使用CSS3 Grid布局实现内容优先

浏览器支持许多CSS3的模块,帮助我们解决我们习惯于使用图片的CSS效果。崛起的移动浏览器和响应式网页设计概念给了我们一个全新的方式来来看待Web设计。然而,当它们来临的时候,我们的布局还没有跟上。我们已经讨论了多年的源顺序、内容也结构和内容与样式的分离。然而,为了得到一定的视觉布局,我们大多数不得不决定源秩序。目前,W3C在制作一些一趣的规范,虽然这些规范会不断的变化,但他们总是在一个起跑线上变动。在这篇文章中,我将向大家介绍CSS的一个模块——CSS3网格布局模块,使我们能够定义一下网格和放置元素。本文实示演示基本的网格布局,并讨一个方法,我们可以开始思考的内容是具有一个更多的自适应方法。在我们开始之前,需要特别注意,在撰写本文的时候,这些例子只能在IE10上运行。CSS3网格布局是由微软创建的一个模块,在使用的时候需要添加IE10浏览器的前缀“-ms-”。我的例子都将使用“-ms-”前缀,而不包括其他浏览器的前缀,不仅仅因为CSS3 Grid布局模块还是一个规范草案,而且在其他浏览器中实现的效果也可能存在不一致。实现今天的效果也很有可能会改变,希望能得到您的反馈。

Flexbox制作CSS布局易如反掌

伸缩盒模型(flexbox)是一个新的盒子模型,主要优化了UI布局。作为实际布局的第一个CSS模块(浮动真的应该主要用来制作文本围绕图片这样的效果),它使很多任务容易多。Flexbox的功能主要包手:简单使用一个元素居中(包括水平垂直居中),可以让扩大和收缩元素来填充容器的可利用空间,可以改变源码顺序独立布局,以及还有其他的一些功能。Flexbox一直都存在。它最开始作为Mozilla XUL的一个功能,被用来制作程序界面,如Firefox的工具栏,就多次使用这个属性。该规范最近才达到稳定,在主要的浏览器对新的版本有相当完整的支持。然而有一些事项需要注意。在IE中规范更改了他的语法,因此你将需要使用一个稍微不同的语法。Chrome当前版本仍然需要添加前缀“-webkit-”,而Firefox和Safari仍然还在使用最老版本的语法。Firefox已经更新为最新的规范,但是,在实际项目中目前最好还先别使用最新的规范,直到它被认为没有bug了或者更稳定了,在使用。在这之前,Firefox还是使用最老的语法规范。根据David Storey的《Designing CSS Layouts With Flexbox Is As Easy As Pie》所译,再次向大家介绍了Flexbox的使用,以及罗列出Flexbox布局模块在各规范下的属性对比。

Grid

CSS中的grid属性是网格布局的一个基础。它主要用来解决使用老布局技术还来的一些问题,比如浮动布局(除除浮动)、inline-block布局(间距问题)。通过提供一种新的方式来给Web页面布局。这个想法是把一个元素定义为一个网格。可以想像成电子表格的行与列。然后,你可以把每个子元素定义成一个列和行(类似于单元格)。不需要修改任何标记,直接通过css搞定。随着这个技术的成熟,我们可以使用这个方法解决我们老的布局技巧带来的问题。而有他的主要优点是你可以在一个页面上不改变文档流的顺序重新排列你的布局顺序。

页面

返回顶部