CSS3

显式网格和隐式网格的区别

网格布局最终使我们能够在CSS中定义网格,并将项目放置到网格单元格中。这本身就很好,但事实上我们也不必指定每个网格轨道,也不必手动拖动每一个网格项目。网格足够灵活,可以适应它们的网格项目。这些都由所谓的显式和隐式网格来处理的。

为什么是display:contents而不是CSS Grid的subgrid

在CSS Grid Layout中,如果没有人提出display:contents;来解决一部分问题,那么你就无法深入的讨论CSS Grid Layout中的subgrid,那么我们真的需要subgrid?事实并非如此,display:contents的确帮我们解决了这类问题,但这些问题与subgrid帮助我们解决的问题不同。在这篇文章中,我将用实例来介绍他们的不同之处。

CSS Grid Layout一些有趣的事情

几周前,我举办了一个有关于CSS Grid Layout的研讨会。我和大多数人一样,对这个话题也很陌生,我在准备PPT和DEMO的时候学到了很多东西。我决定和大家一起分享一些我觉得其中特别感兴趣的东西。希望大家对这些也会感兴趣。

CSS实现长宽比的几种方案

在上一篇文章中总结了CSS如何实现容器长宽比几种方法。对于在CSS中实现容器的长宽比最初的创意是来自于在Web中如何实现纵横比。主要是用于响应式设计中的iframeimgvideo之类的元素。随之扩展为适用于任何的容器长宽比。那在CSS中到底有多少种方案可以实现呢?我一向喜欢做这样的事情,到处搜集多种解决方案。如果你看到前面的两篇文章,或许你知道一些方法,或者说所有的方案你都想到了。如果是这样的话,你可以停止阅读这篇。如果没有的话,你可以继续往下阅读。

容器长宽比

容器长宽比,这个话题在站上也有相关的文章介绍,最早出现于Responsive Web Design中,主要用来处理imgiframevideoobject这些元素的自适应问题。简单点讲,就是根据容器的宽度,按照宽高比例自动计算出容器的大小。并且让图片,视频之类能自适应容器。另外记得在知乎上有一个问题“移动端布局,div按比例布局,宽度为百分比,但又想让高度和宽度一样,即让div为正方形,怎么做布局呢?”,其实解决方案在前面的教程已提到过。既然有相应的解决方案,继续花时间来说,是不是有点多余。那么这个问题又回到了CSS的根源上:在Web中,使用CSS解决问题,往往不只有一种方案,只有更适合的方案。这两天看到@Chris Coyier特意也整理了一篇《Aspect Ratio Boxes》文章,里面有新的方案值得我们思考,特别是CSS自定义属性的部分。那我们再次花时间将相关方案整理在一起,仅供学习与参考。

minmax()函数如何工作

CSS Grid Layout规范中的minmax()函数是一个非常有用的新特性。这个函数能够让我们用最简单的CSS控制网格轨道的大小。这个函数包括一个最小值和最大值。

阐述CSS Grid实现限宽容器全屏效果

在《如何使用CSS Grid布局实现限宽容器全屏效果》一文中介绍了使用CSS Grid布局实现限宽容器全屏效果,特别是全屏图片的效果时常可见。但这篇文章并没有详细阐述为什么使用CSS Grid这种方法。@Rachel Andrew新发的博文尝试阐述其中的原理。

学习CSS Grid

CSS Grid是一个强大的工具,它允许在Web上创建二维布局。这一篇学习CSS Grid的指南,通过图形的方式帮助您更好的理解和学习CSS Grid。花时间整理和阅读这篇文章都是非常有意义的。我们要特别感谢Mozilla开发人员W3C规范中有关于CSS Grid的资源。同时也需要特别感谢@Jen Simmons@Rachel Andrews两位女士,她们是CSS Grid的主要贡献者,可以说要是没有她们,就没有今天的CSS Grid。

Web中如何实现纵横比

Web发展到现在,已经有很大的变化,特别在当前这样的时代,我们面对的设备种类繁多。言外之意,这样的环境之下,Web的页面布局时常会碰到一些缩放比例的控制,特别是针对imgiframeobjectvideoembed等元素的比例缩放。当然,就img元素而言,要实现纵横比例的布局已有多种方案,而且实战性也特别的强,并且在Responsive设计中已使用广泛。

CSS Animations vs Web Animations API

上周,我写了一篇关于如何使用CSS制作bitsofcode logo的动画效果。之后收到一些建议,尝试比较一下CSS动画和Web Animations API。所以今天写了这篇文章。

页面

返回顶部