CSS细节问题回顾
早些年闲的蛋疼的时候，写了一些关于CSS无关紧要的细节的的文章，如今因为繁忙恐怕难就再有这种功夫胡扯了。这些文章离现在最近的也快要超过1年半，是时候拿出来更新和回顾一下了。 2012/11/28 - 那些CSS的细节问题(1) 2013/01/06 - 那些CSS的细节问题(2) —— 圆角响应区 2013/02/15 - 那些CSS的细节问题(3) —— 圆角边框和overflow 2013/04/12 - 那些CSS的细节问题(…
CSS
漫谈标准中CSS浮动令人困惑的部分
时间追溯到4年前，那时刚出道，写了一篇CSS定位机制之一：普通流，转眼4年酱油人生，说好的浮动和绝对定位的篇幅也一拖4年。多少是因为对于熟悉的东西很难提起兴致，但更多还是因为懒惰。 这些年一过，浏览器环境的变化令人欣喜。当年甚少人讨论的BFC等概念，如今也已经说烂了。虽尚未满三十却深感锐气不比当年——说好的第二第三篇浮动和绝对定位应该不会有了，所以就随便聊聊浮动和绝对定位的一些麻烦之处——一些很多人可能不知道的，或者故意略过的，或者困惑的地方。 既然是浮动，那么首先第一个问题，什么是浮动？ 如果是4年前的我，一定会摆出一堆定义，然后对着各种可能是人尽皆知的特性码很多字。如今，要是在让我解释什么是浮动，我只会说：“浮动===靠边”，并且我觉得我已经找不到比“…
Chrome的onload动画bug
一开始的起的标题是《Chrome中CSS3 transition和form导致的意外的onload动画》，不过太长了，所以最后删减了一下。但至少我遇到这个chrome的bug的时候，确实是transition和form同时出现时。 这个bug的具体的表现是：chrome会在页面加载后自动开始一段动画。 我使用的是chrome 36.0.1985.125 m，算是当前的最新版。页面中的全局样式添加了<a>的transition，而且还是非常偷懒的使用了all这样的参数，所以最后整个页面在加载完成后，所有的<a>都开始了过度效果，从尺寸到颜色，结果就导致了的整个页面的抖动。…
答网友关于CSS中的一些问题
上周有位网友simple_life(雷同学？)提了一个关于CSS的问题给我，因为当时非常忙所以没有时间回答。问题是这样的： 在css中，格式化上下文( Formatting context )和包含块( Containing block )是种什么关系？还有，浮动元素已经脱离了常规流，而块格式化上下文是描述常规流的，可是为什么又说块格式化上下文可以包含浮动元素？ 总共是两个问题，简单说就是，FC和包含块是什么关系？以及，为什么BFC可以包含浮动元素？ 一开始看到这两个问题时，其实我是非常迷惑的，有种不知道从何处开始回答的感觉，后来意识到可能是长期适应概念后对某些问题看的理所当然的缘故。所以现在虽然作答，但回答本身也不一定能让提出问题的人满意。 首先是，…
那些CSS的细节问题(4) —— 圆角边框和outline
能写文章，说明时间略有空余，这应该算好事吧～看了下草稿箱，果断还是选这篇先写完，因为和前面的几篇有关联。在之前的 圆角响应区 以及 圆角边框和overflow 中，已经讨论过圆角边框的一些问题，本篇如题，是关于圆角边框和 outline 的，这里也正好回答了一丝在圆角响应区里提出的“为什么不在做DEMO的时候用 outline 描画边缘？”的问题。在写那篇之前做DEMO的时候，我是用了 outline 的，但注意到 outline 的一些问题之后，又把它从DEMO里移除了，并起草了这篇文章的标题，…
CSS伪类与CSS伪元素的典型与非典型应用
在上一篇《CSS伪类与CSS伪元素的区别及由来》里，已经详细区分了伪类和伪元素。但在这篇讲应用的文章里，其实并不需要这么明晰的概念区分。本文也不会再重提单冒号和双冒号之间的区别，本文更关注如何更好的使用伪元素和伪类——通过罗列一些典型甚至是非典型的用法，讲述伪类和伪元素的一些使用上的小技巧。在这个过程中，始终忽略浏览器的支持情况，任何一个例子无法正确运行的话，请先检查一下你当前的浏览器，是否赶上了这个时代的浪潮～ 当然，一开始都是一些比较常规的内容，如果你对这些内容已经了然，可以直接跳到后面“非典”的部分:) 列表处理 伪类与伪元素很大部分常规用途是在处理列表的。特别是 :nth-child() 这类结构伪类。 页脚链接 页脚链接可能是一个最为合适的例子，因为例子里伪元素和伪类并用。很多网站的页脚链接是用竖线分隔的罗列&…
那些CSS的细节问题(3) —— 圆角边框和overflow
本篇是上篇《那些CSS的细节问题(2) —— 圆角响应区》的一个简短的延续，因为在上篇的篇幅里实在已经容不下更多混乱的部分。 尽管现在圆角边框的教材已经烂了大街到处都是，并且这个属性已经是诸多CSS3属性里应用最为广泛的特性之一，但却丝毫无法掩盖这个属性一路走来的坎坷。时至今日，现代浏览器对圆角边框的解释仍然存在诸多问题，比如上篇那些CSS的细节问题(2) —— 圆角响应区 讲到的对“响应区”影响的问题，实则也只是这个属性一路而来的问题之一而已。因为，单看一个属性确实很明了——无论是定义还是实际实现起来，然而，一旦这个属性和其他属性作用在一起，事情就没这么简单了。 下文中的内容，皆以如下版本的浏览器为基准：Chrome-24，IE-9，Firefox-18，Opera-12.…
那些CSS的细节问题(2) —— 圆角响应区
之前《那些CSS/JavaScript的细节问题》我都是凑足3个再开始写，现在发觉，很多时候要凑出3个古里古怪的问题还真不是件易事~ 有的时候想到要写一个问题，想等凑多些再写，但又总是一直拖着，好端端的讨论话题都过期了。更糟糕的是，往往好不容易凑足了数量，结果之前要写的东西居然又模糊不清了...以后，在一定时间里凑不出数量的话，也只好先写起来再说:) 所以今天，就只有一个问题，关于边框圆角：圆角边框是否影响元素的响应区域？ 想象一下，一个 div 通常被我们认知为一个盒子(box)，现在在它的周围有一个圆角边框，那么在这个矩形盒子的四个角上，必然会出现一些空隙（特别是当这个圆角矩形变成一个圆时候）。那么对于这个元素而言，…