会员专栏

Sass带来的变革

接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上。同时也让自己喜欢上了Sass,目前在自己的私人项目中,我一直都在使用Sass做为前端开发,用来处理CSS。其实,在W3cplus站点上,已经发布了近一百篇有关于Sass方面的教程(教程有自己的学习心得、有译文,也有其他同学的使用经验分享)。也自认自己是Sass在中国的推广者,其实我也更想做为Sass在中国的布道者,让更多的人了解他,学习他,使用他。

CSS Grid布局:网格的流动

HTML文档中有文档流,其实在CSS Grid Layout中有网格流。简单点理解就是,在一个被显式声明为网格的容器中,其所有子元素自动被认定为网格单元格,而这些网格单元格在没有被显式设置明确位置时,浏览器将会自动为这些网格单元格的位置进行计算,按照先后顺序从左向右,或从上到下排列。在这里把这种方式称之为网格的流动。

CSS Grid布局:独立源与网格的层叠顺序

最近一直在学习CSS Grid布局相关的知识与使用,虽然目前浏览器对其支持度还并不十分的友好,但我始终相信有一天,浏览器会支持,Web人员也迟早有一天能在自己的布局中使用上CSS Grid。前几天花了几节内容,介绍了CSS Grid布局中的概念测试环境创建单元格合并单元网格线创建网格区域相关的内容。可以说这些内容都是CSS Grid布局最基础和最常用的相关知识,当然,除了这些之外,还会有其他相关的知识,今天要与大家一起探讨的就是有关于CSS Grid Layout中的独立源与网格层叠顺序。

CSS Grid布局:网格区域

在CSS Grid Layout中除了可以使用风格线实现网格布局之外,还可以使用网格区域来实现布局。在《CSS Grid布局:网格单元格布局》和《CSS Grid布局:合并单元格布局》文中都已经领略了CSS Grid Layout中gird-area实现的单元格和合并单元格的布局,但这仅是网格布局使用较为简单、基础的应用。在这篇文章中,将和大家一起探讨CSS Grid Layout中grid-area其他的功能与使用。

CSS Grid布局:合并单元格布局

CSS Grid布局:网格单元格布局》一文中通过一些简单的实例介绍了如何给容器定义网格,并且怎么使用网格线或者网格区域来实现单元格这样的简单的布局。在文章结尾之处也提到过,这样的单元格如同表格一样,仅仅一个个独立的单元格是无法满足一些复杂的Web布局,我们需要将多个单元格合并在一起,拼装成一个稍为复杂一点的布局。简单点说,就是由单元格慢慢过渡到具有合并单元格的布局(在脑海中想想曾经爱过的table)。

CSS Grid布局:网格单元格布局

CSS Grid布局对于我等来说就是一个全新的布局,但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容(《CSS Grid布局:什么是网格布局》和《CSS Grid布局:浏览器开启CSS Grid Layout》)为这篇文章做足了铺垫。或许你想知道的是如何使用?各位看官不用太急,接下来通过各种实例向大家阐述CSS Grid布局,让我们一起领略其强大的魅力。

CSS Grid布局:浏览器开启CSS Grid Layout

上一篇《CSS Grid布局:什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语,为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不一致,致使无法全面使用,就算是学习做一些测试示例都还需要做一些设置。那么在这篇文章中,将向大家介绍如何让自己的浏览器支持CSS Grid Layout模块功能。

CSS Grid布局:什么是网格布局

CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中,被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格,也就是早期的960gs。不管是网格还是栅格或者现在的CSS Grid Layout Module,我想掌握这些技术对于我们将来在Web项目中实现布局只有好处没有坏处。那么从今天开始我将和大家一起探讨CSS中的网格布局。

CSS Counters

CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ulol元素。如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image来实现。在CSS2.1的规范中介绍了一种新技术,允许开发人员使用伪类:after:before或者伪元素::after::before给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type)。更神奇的是,可以给这些计数器设置独特样式,让其在外观上更靓丽。

如何在项目中使用Sass

想想学习Sass时间也有差不多一年的光景了。在这一年来的时间中,在GitHub不断阅读Sass相关的源码。也在国外涉猎了相关的知识,也让自己初步掌握了一些Sass一些基础知识与技能,当然也让自己喜欢上了Sass,并且在国内致力于Sass的推广。希望各多的前端开发者喜欢上Sass,也希望Sass能真正为前端人员带来好处。

页面

返回顶部