CSS3

探讨CSS Grid Layout在原生客户端中运用

CSS Grid Layout是W3C规范中专门为Web布局提供的一个特性。CSS Grid Layout将改变传统的布局模式,他将让布局从一维布局变成了二维布局。简单的说,有了CSS Grid Layout之后,布局不再局限于单个维度了。这个时候你要实现类似九宫格,拼图之类的布局效果显得格外的容易。虽然CSS Grid Layout给Web布局带了革命性的变化,那么他在原生客户端(也就是APP)开发中,其运用是否也能像Web一样呢?接下来我们就一起来探讨。

CSS即将具备的6种处理器特性

今天看到@Dennis Gaebel分享的一篇博文。觉得很有意思。同时感觉老外分享出来的东西就是不一样,尽管自己也专门整整CSS,但从新特性的发掘和敏锐性就差十万八千里。不吐槽了,还是回到正题来吧。

如何使用CSS Grid布局实现限宽容器全屏效果

在Web的布局设计中时常会碰到全屏的效果,而且很多时候会碰到在限制宽度的容器中实现全屏效果。到写这篇文章的这个时候,前端有关于布局方面的技术又得到了新的突破,比如CSS Grid布局方案,到现在已经得到了主流的浏览器支持。在这里提到CSS Grid布局方案,其实就是想说一点,通过现在的CSS Grid布局效果,也可以实现在限宽容器中实现全屏布局效果。这也是接下来要介绍的内容。

Web中如何实现纵横比

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

实现精准的流体排版原理

流体排版这一词似乎看上去有点陌生,在英文中常把他称之为Fluid Typography,当然也有很多朋友称之为流体字号(Fluid Size)。大概的意思就是Web排版中的font-size会根据浏览器窗口的大小自动改为。

如何美化下划线

2014年@Marcin Wichary在Medium分享了如何更好的突出链接的下划线效果@Mary Lou更疯狂的制作出了一个Demo,这个Demo展示了多种突出链接的效果,有些是使用的背景色,有些是使用不同的下划线方式。那么,接下来我们一起看看在Web中,如何更好的美化下划线的效果。

管理CSS层叠

了解CSS的同学都应该知道,CSS是由Cascading Style Sheets三个单词首字母组成,简单的讲就是层叠样式表。事实上,在CSS中,层叠(也有同学称之为级联)也是一个非常基础,但也是一个非常重要的概念。只有理解了层叠这个概念才能更好的理解和使用CSS中的每一个属性。话又说回来,既然是一个基础概念,懂CSS的同学都知道,那还有必要来说这个吗?那我就得问一下了,你真的懂CSS中的层叠,能使用好CSS的层叠吗?如果你没有这方面的自信,那不仿花点时间来阅读这篇文章。

CSS Grid布局这样玩

自从去年下半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

flow-root

今天我们来介绍CSS中的一个新属性flow-root。这个属性是CSS Display Module Level3中的一个属性。简单讲这个属性是display中的一个新属性,对于display属性,大家熟悉的可能是常见的几个属性,比如blockinlineinline-blockflexgridtabletable-cell等,其实除了这些常见的属性值之外,还有很多其他的值。如果想了解更多,那可以点击这里阅读

纯CSS实现瀑布流布局

瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了,我最早知道这个名词的时候大约是在2012年,当时Pinterest网站的布局就是使用的这种流式布局,简言之像Pinterest网站这样的布局就称之为瀑布流布局,也有人称之为Pinterest 布局。

页面

返回顶部