2016年09月 存档

深入CSS ::first-letter伪元素及其实例等

2016年09月30日,星期五

首先,::first-letter本身兼容性非常好,然而,细细体味,会发现,虽然::first-letter兼容性很好,浏览器很早就支持,但是我们实际项目用得并不多,那是因为,我们可以通过嵌套span标签的方式,实现更为广泛更灵活的样式控制。

但是,实际开发场景千千万,总会遇到HTML结构不能改动,或者改动成本很高的的情况,此时::first-letter等就非常有用,而且多半扮演英雄或者救星的角色……

阅读全文…

从height:100%不支持聊聊CSS中的“死循环”

2016年09月16日,星期五

大家应该都知道,如果元素没有格式化的高度值,子元素的height百分比高度是不起作用的,常见的就是height:100%无效,而宽度就没有此问题,所以,新人经常会提出的一个问题是:“为何我的div设置了height:100%却没有效果?”

不知道大家有没有思考过这样一个问题。

然后,有同行就提出了这么一个看似很合理的解释,就是,“假如父元素height:auto且没有其他格式化高度,子元素支持height:100%,则很可能会出现高度死循环”。

看似合理,实际上这种解释是表面的,错误的……

阅读全文…

聊聊CSS世界中的margin-box

2016年09月16日,星期五

盒尺寸由4个盒子组成,分别是content box, padding box, border box, margin box。这个和盒模型中的几个盒子其实是对应的。但是,对于的CSS关键字中却没有margin-box,唯独缺了margin-box,这是为什么呢?

阅读全文…