现代 CSS

Pet的博客

如何实现跨浏览器的SVG Sprites

CSS Sprites对于前端人员都比较熟悉,为了让Web网站减放Http的请求数,很多同学都常使用Sprites(国内称之为雪碧图或精灵)。但随着技术的更新,位图的Sprites已无法满足我们实际的需求了。这篇译文就用另外的一种方式,向大家阐述了Sprites——如何实现跨浏览器的SVG Sprites。

inline SVG 入门指南

SVG全称为“可缩放矢量图形”,它的名字暗示着它本身的特点。SVG让我们可以将一个图形从100%放大到1000%并且完全不失真。SVG是一个基于XML并可以在SVG对象中描述不同形状和路径的文件。每一个形状和路径都由一系列的点、位置、长度、半径,等等的来组成。如果你曾经使用过任何的矢量图软件 (像 Adobe Illustrator 或 Corel Draw),你能将你创建的矢量图轻松地输出为SVG文件。

深入理解BFC和Margin Collapse

BFC其实没有那么神秘,BFC只是一个独立的布局环境,理解BFC对我们日常的布局设计上有着重要的帮助,并且BFC和Margin Collapse之间有着重要关联。另外文中还提到了clear float时候所产生'clearance'的计算。希望大家有所收获。

前端开发必备!Emmet使用手册

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具,它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它,并且它还支持CSS3新属性和自动拓展各个浏览器的前缀,这对于开发者来说实在是一个福音!本文详细为你介绍了所有的HTML以及CSS的缩写方法,妈妈再也不用担心你HTML/CSS了!

结合智能选择器的语义化的CSS

或许很多前端开发人员都会困惑一个问题,在书写HTML和CSS的时候,结构更重要还是功能更重要?在一些热门的框架例如Twitter Bootstrap里面我们也会看到使用a标签来作为按钮的元素的例子,这样是否合理?一起来读一读这篇文章吧,或许能够解开你的疑惑。

表格元素的完全指南

HTML的表格的每一个元素都做了比较完整的讲解,并附有大量的demo,带领大家一步步地全面地了解表格,并且讲解了表格的适用范围、语义化等相关问题,希望大家能透过此文对表格有一个全面的认识。

float深入剖析

float是什么?

float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念:

返回顶部