CSS3

试探列表中的::marker

前几天有位同学问过一个问题,<li>元素中的子元素浮动(float:left)之后,列表的项目符号会跑到浮动元素的后面。这个问题似乎在三年前碰到过,但又有那么点不一样。后来查阅相关文档,了解到,造成这个问题就是列表中的::marker造成。虽然将来能解决,但在浏览器还没有支持这个属性之前,我们也只能另寻途径,先解决问题,感兴趣的同学可以先跟我一起初探::marker

如何处理CSS3属性前缀

今天闲来无聊,重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说:"为什么还要用mixin呢?为什么不使用Autoprefixer?使用Autoprefixer,只需要输入一行代码,编译器帮你做了一切,还纠结个毛mixin。"姐姐的一句话让我汗颜,我还在思考着如何让Sass来写Gradient,或者类似这样需要带前缀的CSS3属性。也这样让我在思考,那么有了Autoprefixer这样的后处理,Sass中有关于CSS3的mixins是不是已失去了他存在的意义。带着这样的为什么?我们一起来开启今天有关于CSS3前缀的探讨。

2015年CSS的几大亮点

CSS是一门不断在发展的“语言”。在这篇文章中,我们一起来看看我们可以先玩起来的一些新特性。在本文中提到的一些新特性,在个别浏览器中已得到支持。但这些功能并不一定可以立即用于生产,甚至有些还是在实验阶段。但在这里你会发现很多东西,你可以开始玩——即使仅在实验阶段。其实有好几个特性在2014年的时候W3cplus就曾有介绍过,比如CSS Shapes、calc()、CSS混合模式等。

辞旧迎新,更上一层

随着2015年的跨年钟声的响起,2014已成为我们的过去。即将要为之奋斗的是2015。其实想在2014年写这篇总结文章,但由于最近很多事情给耽搁了,其实也有点不知道做什么样的一个总结,因为总感觉2014年就这样匆匆离我而去。有些许的伤感,或许是因为年纪越来越大的缘故吧。不过跟着一群比自己小一轮甚至更多岁数的年轻人在一起共事、一起学习,还是让自己觉得,我也还是很年轻的(可以叫我叔,但别喷我)。

今天可算是执笔开始写这篇文章了。在继续写下去之前,我要先感谢@娜姐@裕波@林毅一直以来让W3cplus能在社区活动中露脸。同时也要非常感谢@w3cplus的爱好者,支持者一路以来的支持与鼓励,正因为有了你们,她才能走到现在,才能成长,才能美丽动人。

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布局的介绍,大家对CSS Grid Layout也略有了解吧,如果你有动手写过的话,你应该可以借助网格线制作一些布局效果出来,比如说单元格布局合并单元格布局等。是否有一种感觉,CSS Grid Layout好强大,好灵活。是不是期待浏览器厂商早一天能支持。

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

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

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

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

页面

返回顶部