CSS

基于视窗单位的排版

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

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

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

CSS属性:background-size

background-size属性用于指定背景图像的大小。背景图像可以被设置为覆盖该元素的整个背景区域,或者被设置为由CSS作者所定义的明确的尺寸大小。可以使用 cover 关键字将背景图像设置为覆盖整个元素的背景区域。也可以使用contain关键字将背景图像在背景区域内尽可能大的被包含。如果使用了这两个关键字中的任何一个且该图像具有固定的尺寸和比例,那么该图像的高度和宽度的固有比率将被保留。

未来CSS文件加载方式

Chrome打算改变<link rel="stylesheet">的加载方式,当link出现在<body>中时,就变得非常明显了。在blink-dev的文章中,它的影响和性能尚不明确,所以我想在这里深入讲讲。

Meta 标签与搜索引擎优化

当谈及到<meta>标签对搜索引擎排名的影响,很多人都存在误解。在过去,许多已经失去作用的标签仍然被频繁使用。所以哪些标签对搜索引擎优化(SEO)有作用,哪些没有呢?

z-index的工作原理

可能并不是那么显而易见,但是HTML文档中的元素却是存在于三个维度之中。除了大家熟知的平面画布中的x轴和y轴,还有控制第三维度的z轴。

什么鬼,又不知道怎么命名class了

相信写css的人都会遇到下面的问题:糟糕,怎么命名这个class,好像不太贴切,要是冲突了怎么办,要不要设计成通用一点...;而改别人css代码的时候则会一直有个疑问:这个class到底是只在这个地方用了,还是其他地方都用了?

css设计中的不变与可变

“人活一世,有人成了面子,有人成了里子,都是时势使然。”——《一代宗师》。如果重构分里子与面子的话,那么html应该是负责里子的,而css就是负责面子了。在上篇html结构的拆与合说了html之后,我们继续来说下css,这次我们从可变与不变的角度分析。

 

float是如何工作的

虽然现在很少使用浮动,但在某些情况下,浮动是唯一可行的解决方案。偶尔会觉得很沮丧,因为我觉得浮动应该起作用但是它并没有。所以我决定研究下浮动的工作原理以及如何正确的使用浮动。

CSS模块

如果让你选出一个近期CSS发展的转折点,你很可能会选2014年11月NationJS大会上Christopher Chedeau关于“CSS in JS”的分享。那个时刻是个分水岭,一系列不同的想法像经历过高能碰撞一样在各自方向上螺旋上升。例如,React Style, jsxstyleRadium 是目前在React中写样式的三个最新,最好,最可行的方法并且所有的参考资料都在它们的项目Readme中。如果发明是对于相邻可能性的一种探索,那么Christopher的责任是让许许多多的可能性更加靠近。

页面

返回顶部