首先,::first-letter
本身兼容性非常好,然而,细细体味,会发现,虽然::first-letter
兼容性很好,浏览器很早就支持,但是我们实际项目用得并不多,那是因为,我们可以通过嵌套span
标签的方式,实现更为广泛更灵活的样式控制。
但是,实际开发场景千千万,总会遇到HTML结构不能改动,或者改动成本很高的的情况,此时::first-letter
等就非常有用,而且多半扮演英雄或者救星的角色……
首先,::first-letter
本身兼容性非常好,然而,细细体味,会发现,虽然::first-letter
兼容性很好,浏览器很早就支持,但是我们实际项目用得并不多,那是因为,我们可以通过嵌套span
标签的方式,实现更为广泛更灵活的样式控制。
但是,实际开发场景千千万,总会遇到HTML结构不能改动,或者改动成本很高的的情况,此时::first-letter
等就非常有用,而且多半扮演英雄或者救星的角色……
大家应该都知道,如果元素没有格式化的高度值,子元素的height百分比高度是不起作用的,常见的就是height:100%无效,而宽度就没有此问题,所以,新人经常会提出的一个问题是:“为何我的div设置了height:100%却没有效果?”
不知道大家有没有思考过这样一个问题。
然后,有同行就提出了这么一个看似很合理的解释,就是,“假如父元素height:auto且没有其他格式化高度,子元素支持height:100%,则很可能会出现高度死循环”。
看似合理,实际上这种解释是表面的,错误的……
盒尺寸由4个盒子组成,分别是content box, padding box, border box, margin box。这个和盒模型中的几个盒子其实是对应的。但是,对于的CSS关键字中却没有margin-box,唯独缺了margin-box,这是为什么呢?