CSS

什么鬼,又不知道怎么命名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的责任是让许许多多的可能性更加靠近。

CSS居中完整指南

垂直居中、水平居中或者说水平垂直居中的方案很多种,但在实际当中,不管是具体业务或者入职面试,很多同学都有失足之处。那么使用CSS实现居中效果困难吗?显然不是。实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法判断哪种方法最合适。@Chris Coyier整理了一篇有关于居中的实现方法的文章,可以说这篇文章涵盖了各式各样的居中方法,希望这篇文章能帮你解决选择困难症~

vertical-align

vertical-align 是 CSS 中的一个常见属性,但是当你第一次学习和使用它的时候,往往会很困惑,所以我觉得有必要深入了解它的用法。最常见的使用方式就像下面这样:img { vertical-align: middle;}。从这里可以看到,vertical-align 属性被应用到了 img 标签上。img 标签是naturally inline elements,,它们可以嵌入到文本之中,而 vertical-align 属性就是用来控制它们相对于所在行的对齐方式。在我的印象中,开发者使用 vertical-align 最大困惑就是在块级元素上设置该属性不会有任何效果。

理解CSS中BFC

BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。摘自W3C浮动,绝对定位元素,inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素,(除了这个值已经被传到了视口的时候)将创建一个新的块级格式化上下文上面的引述几乎总结了一个BFC是怎样形成的。但是让我们以另一种方式来重新定义以便能更好的去理解。

实现两列等宽布局的几种方法

当你想实现两列等宽,左边一些内容,右边一些内容时,基本上都需要在一个容器的内部设置两个高度相等的列。每一面正好占用容器的一半,并且可以明显的区分他们。在CSS中有很多方法都可以实现,那么来看看如何用多种方法实现这种两列等宽布局。

CSS代码审查可能会是什么样子

许多编程语言在部署之前会有代码审查。 无论是快速过一遍,或者深度审查,又或者是完整的单元测试,代码审查都会让我们在发布代码时更有自信。我开始琢磨CSS代码审查会是什么样子。 CSS有很多种书写方式,“最好的方式”通常是因项目而论。 我这样说,绝对不是要写一篇教条的文章,而是为讲CSS发布之前从何处着手审查做铺垫。

何时使用 Em 与 Rem

你可能已经很熟练使用这两个灵活的单位,但你可能不完全了解何时使用 rem ,何时使用 em。 本教程将帮你弄清楚!

页面

返回顶部