Layout

学习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实现两端对齐。受益无穷。但随着响应式布局的出现,这样的布局又提出一个新的要求,要实现响应式布局,最近邮箱常收到的《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还是使用最老的语法规范。根据的《Designing CSS Layouts With Flexbox Is As Easy As Pie》所译,再次向大家介绍了Flexbox的使用,以及罗列出Flexbox布局模块在各规范下的属性对比。

Grid

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

CSS3 Grid Layout

Web页面的布局,我们常见的主要有“浮动布局(float)”、“定位布局(position)”、“行内块布局(inline-block)”、“CSS3的多栏布局(Columns)”、“伸缩布局(Flexbox)”以及“网格布局(Grids)”等,在众多布局方法中,大家最为熟悉的就是浮动布局和网格布局,并且使用不同的细节能得到不同的布局效果。虽然这些布局能让大家实现常见的布局效果,但在实际中还是存在不少的问题,比如说浏览器的兼容性、修改显示顺序需要调整文档结构等。那么有没有什么更好的,更理想的布局方法?这也就是今天要和大家一起学习的一个布局模式——CSS3 Grid Layout

使用Flexbox:新旧语法混用实现最佳浏览器兼容

Flexbox用于布局真是强大,前面在《使用CSS3 Flexbox布局》和《Flexbox——快速布局》介绍了使用Flexbox制作布局,而且使用Flexbox还可以快速的实现响应式布局:《响应式设计的未来——flexbox》。可是大家看到Flexbox具有多个版本的语法规则,而且还受限于浏览器支持度,都不敢轻意尝试使用。其实早在《跨浏览器的Flexbox》一文中已做过各浏览器兼容处理的介绍。今天通过一个三列网格布局的案例,再一次向大家介绍如何使用Flexbox的旧语法、过渡语法和新语法混合使用,实现Flexbox在各浏览器下的最佳兼容。感兴趣的同学不仿自己动手一试。

使用CSS3 Flexbox布局

Flexbox是CSS3的一个新模块,主要用于实现弹性布局,这个属性给我们布局带来极大的方便与简易。随着Flexbox新语法的落定,现代主流浏览器也紧跟其后,都在慢慢支持这个属性。而有关于Flexbox的教程,在W3cplus站上已经分享了很多篇,从理论知识到实例,从各个方面阐述了Flexbox的功能与特性以及其使用方法。根据Helen Emerson的《Using the CSS3 flexbox layout》所译,详细向大家介绍了如何使用Flexbox属性创建一个典型的三列布局,希望大家能从这个简单的实例教程中更进一步的了解Flexbox的特性与使用方法。

页面

返回顶部