静如秋月的博客

figure 和 figcaption 元素的正确使用方式

figurefigcaption是两个经常在一起使用的语义化元素。如果你还没有在规范中了解过他们,没有机会在项目中使用过他们,或者说现在对他们还是一无所知,这里就给大家讲一些如何正确使用他们的小技巧。

CSS Grid布局指南

CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式。如我们所知,CSS 总是用于网页的样式设置,但它并没有起到很好的作用。刚开始的时候我们使用表格(table),然后使用浮动(float)、 定位(position)和内联块(inline-block),但所有这些方法本质上来讲都是hacks,存留了很多需要实现的重要功能问题(例如,垂直居中)。虽然Flexbox可以起到一定的补救作用,但是它只可以实现简单的一维布局,并不适用于复杂的二维布局(实际上 Flexbox 和 Grid 可以一起结合使用起到最佳效果)。网格是 CSS 第一次专门创建的模块,用来解决我们之前在制作网站时使用hacks处理布局问题。

CSS Grid构建圣杯布局

CSS 网格布局模块,虽然现在仍处于编译者的草案之中但是即将定稿。我们现在可以在一些浏览器中进行测试并可以检测其潜在的bug。CSS 网格布局是真的很复杂,相较于 Flexbox 更是如此。它具有17个新属性并且在如何使用CSS书写方面介绍了很多新概念。为了尝试如何使用萦绕在我脑海中的这些新规范,我决定创建一个圣杯布局尝试新规范工作原理。

CSS Grid布局模块简介

随着 Web 应用程序变得越来越复杂,我们需要更自然的方式,在不使用hacky解决方案的情况下,如:使用浮动和其它繁琐的技术,就可以轻松做出高级的布局。令人兴奋的是产生了一种适用于布局的新解决方案---CSS Grid布局模块。在这个介绍性的教程中,我会向大家介绍这个相对较新的 CSS 功能,我将先讨论一下当前浏览器的支持情况,之后我会用一些例子告诉大家CSS Grid布局模块是如何工作的。

pointer-events

你也可以让元素响应于指针事件(auto),或者阻止响应(none)。如果你阻止元素响应于指针事件,那么该元素的子节点的元素将会成为这些事件的目标。如果你单击元素,其子节点元素将会接收该单击事件。这种情况同样适用于hover和一些其他游标操作。例如,利用pointer-events:none你可以获取一个元素的子元素中的文本(可以参考下面的实例)。

基于视窗单位的排版

我之前有写过基于remem响应式排版,并且也有写过两篇有关模块化组件的博客。在这些文章中,有关视窗单位的评论不可避免的形成了一个话题。

媒体查询--PX,EM or REM?

你是否思考过对于媒体查询你应该使用px,em还是rem?我也产生过同样的问题,并且目前为止,我还是没有明确的答案。一年之前,我第一次创建 mappy-breakpoint 仓库时,我一直使用rem单位。之后一次和Sam Richard谈话之后,我开始转向使用em,因为我并没有发现两者之间的区别。关于媒体查询,除了emrem,常用单位还有像素。自从现在所有浏览器存在像素缩放问题,我想知道像素是否还可以用于媒体查询。这周,我打算弄明白两者之间的区别。

content

content属性与::before::after伪元素配合使用,向网页中某个元素插入生成内容content属性的值就是通过伪元素插入到该元素的内容。使用content属性插入的内容可以是文本字符串、 符号、 图像、 计数器(即样式列表),或引号。同时,将多个值合并为一个,也是可能的。请参阅以下的值和一些详细的实例。

如何实现平滑的“box-shadow”动画效果

你如何在 CSS 中设置box-shadow属性实现动画效果,既不会导致重新绘制每一帧,又不会严重影响你页面的性能?回答是:你并不能实现。因为box-shadow的动画变化会损害性能。这里有一个简单的办法可以实现上述问题效果。如果要实现最小的重新绘制,应该创建一个伪元素并对其opacity元素进行动画处理,使其以每秒60帧的动画模仿运动物体相同的效果。

使用Flexbox的六个理由

您使用 flexbox吗?上周我在 twitter 上,问了这个问题,很惊讶地发现,不少于 50%的人回答是。之所以感到惊讶是因为,直到最近,我并不在我的任何项目中使用 flexbox ,我想我一定是唯一的一个。我不使用 flexbox 有几个原因。但是,经过一些调查研究之后,我的担忧得到明显的减弱,我已经开始了转变。所以这里有你应当开始使用Flexbox的六个理由。

页面

返回顶部