html&css

你真的了解background-position

background属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground-clipbackground-originbackground-size。你可能会说,这些属性再简单不过了,没有可讲的。这篇文章接下来要介绍的不是所有有关于background里面的属性,而是说说background-position属性。在详细介绍background-position之前,先要问大家,你真的了解这个属性吗?言外之意,接下来介绍是你所不了解的background-position相关细节。

如何隐藏DOM元素

早在2011年整理了一篇有关于图片替换文本的方法,而前几天看到一篇有关于隐藏DOM元素的几种方法。今天这里也将继续说说如何隐藏DOM元素?

HTML head里的元素

或许有很多标签(<link>meta)的类型你从未见,甚至都不知道这些标签的意义何在,更何况是如何使用了。其实这些并不复杂,也没有太多的技术含量在里面,而且这些标签具体的意思是什么很容易的找到。 这篇文章是一篇基础性的文章,昨天在Github上看到@Josh Buchea整理了一份有关于HTML中<head>里的标签元素,觉得还是蛮有意义的,今天将其复制到这里。

【转载】CSS Modules 详解及 React 中实践

CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展,CSS 被远远甩在了后面,逐渐成为大型项目工程化的痛点。也变成了前端走向彻底模块化前必须解决的难题。

REM vs EM

网页字体排版的最佳实践之一就是使用相对单位,如remem。问题是,你应该使用哪一个呢?一直以来,rem支持者和em支持者之间都存在着争辩,认为应该使用自己支持的那个。在这篇文章中,你会找到我如何在remem之间做抉择.你也将了解remem到底是什么以及如何使用它们来构建模块化组件。

码农的自留地

2015年已悄然离去,已成为昨天。回忆昨天,我有过2012年的《我和W3cplus的故事》,悄悄《走过的2013年》,随着《辞旧迎新,更上一层》,迎来了2015,可是时间的流逝,不知道不觉得就踏入了2016年。也走过了码农传说中的宿命节点35岁。这也是我为何将这篇总结命题为码农的自留地,希望自己能一直拥有这块自留地,一直耕耘下去。

Web重构之道

Web重构之道是今年十月份参加上海Qcon全球软件开发大会新时代的前端专题的一次分享的主题。这次有幸能跟@达峰@sofish@桂川等大神一起同台分享,感到非常的荣幸,也感到无比的压力。还好分享已结束,借此机会重新回忆这次大会上自己分享的主题。在此之前我首先要感谢@贺佬给我上台分享的机会,感谢@winter大大的推荐、建议与鼓励。最后感谢Qcon提供这样的分享平台。

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

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

css设计中的不变与可变

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

 

html结构的拆与合

写下这篇标题的时候,脑海中突然闪过《三国演义》的纲领——天下大势分久必合合久必分。也许html结构也如是,总是在拆拆合合中演绎着一段段神奇的故事。玩过七巧板的都知道,虽然看起来只有七块,但随便拼装下就是一份不一样的惊喜。而对于重构也一样,常用的标签也就那么几个,但是经过一番拼凑就会呈现出不一样的美。闲话暂且不表,先来个本文思路来源的实例。

页面

返回顶部