<<CSS World>>笔记

前段时间断断续续的把张鑫旭的《CSS World》看了两遍,这本书很偏基础,也很有张鑫旭个人特色,不像是那么多技术类书籍章法森严罗列技术词汇,这本书的内容都是他长年累月的实践中沉淀下来的干货和私货,更像是在看一个程序员的笔记, 值得一看的一本书。

书里的内容只精专于CSS部分,而且由于出书时间比较久了,CSS3现在的发展比书中的内容丰富了很多,有些实现在现在看来已经更好的解决方案了,不过里面涉及到的一些基础知识和实现确是出乎了我的意料,有不少意外的收获,以下内容记录的仅是我个人平时没有注意到或者比较意外的点,配合codepen提供的demo,demo集合地址:https://codepen.io/collection/ngQGBY, 部分知识点很简略所以无demo知道即可

1. 替换元素不支持伪元素 :before:after

例如<img />src加载之前或者加载失败的时候是普通元素,伪元素可以生效, 在src加载成功之后就会变成替换元素, 此时伪元素就会失效.

<img />需要在如下条件下才能支持伪元素:1. 无src属性; 2. 有alt属性; 3. 不能使用content属性生成图片

See the Pen 替换元素不支持伪元素 by kricsleo (@kricsleo) on CodePen.

2. content属性支持attr来引用元素上的其他属性来进行内容生成

例如通过content: attr(alt)引用alt属性, content: attr(id)引用id属性等

See the Pen content使用attr进行内容生成 by kricsleo (@kricsleo) on CodePen.

3. marginpadding不论哪个方向的百分比值均是相对父元素宽度计算

可使用这个特性实现固定宽高比的缩放

See the Pen padding支持百分比及计算规则 by kricsleo (@kricsleo) on CodePen.

4. css原生变量currentColor变量可以直接引用当前color的最终计算值

例如想要实现元素的边框与元素文字颜色相同, 可以设置border-color: currentColor

5. 触发margin:auto计算值自动计算距离来实现居中的条件是:元素在该方向上可以自动填充可用空间

例如positon:absolute;top:0;bottom:0;此时垂直方向是可以自动填充全部高度的,此时margin-top:auto;margin-bottom:auto;就可以实现垂直方向自动计算距离,保持垂直居中; 但是如果元素在一个方向上本身就不会自动填充可用空间, 例如单纯inline-block元素宽度是包裹性而不是自动填充性, 那么就无法直接使用margin:auto来实现居中

See the Pen 触发margin:auto计算值自动计算距离来实现居中 by kricsleo (@kricsleo) on CodePen.

6. vertical-align玄之又玄

在翻了很多资料和实践之后我仍然感觉vertical-align就像一个黑盒一样,各种表现怪异,会配合其他几个属性甚至于所使用的字体然后造成一些很难以理解的现象, 最常见的可能是想使用vertical-align: middle;来实现垂直居中,但是这种居中一是不可控的, 二是本身实现的居中也只是受字体等因素影响的近似居中(只是看起来好像居中而已, 实际有像素级别的偏差) ,我已经基本放弃了这个属性, 除了有时候垂直方向的像素级别的偏移(例如:vertiacla-align: -1px;)之外,我现在是尽量避免使用这个属性

7. 滚动容器本身尽量避免设置padding-bottom

在chrome和safari中底部会包含这个间距,但是firefox不会包含,存在兼容性问题, 如果想实现内部滚动区域与底部有一定间距建议使用别的方式来实现, 例如容器本身底部加上透明border

See the Pen 滚动容器的padding-bottom的兼容性 by kricsleo (@kricsleo) on CodePen.

8. overflow:hidden仅仅只是隐藏了滚动条同时对鼠标的滚动无效,但是通过scrollTop定位或者锚点定位的方式仍然是可以滚动内部元素的

由这点引申出的一个说明: 有些时候我们会使用overflow:hidden来实现一些幻灯片效果, 然后可能通过锚点定位来切换内容区, 需要注意的一点,锚点定位是会由内向外触发滚动和定位的,也就是说如果页面本身也有滚动条,会造成页面整体也会滚动一下把元素置顶,体验不是很好,虽然也有类似的hack做法可以一定程度避免,但是用起来复杂一些不划算

See the Pen overflow:hidden by kricsleo (@kricsleo) on CodePen.

9. overflow:hidden如果想要裁剪内部的定位元素, 需要满足如下条件:自身为定位元素或者自身和子元素之间的某个元素为定位元素,否则无法裁剪内部的定位元素

See the Pen overflow:hidden的裁剪规则 by kricsleo (@kricsleo) on CodePen.

10. position:absolute常见的错误认知是要配合父元素的position:relative或者自身的top/right/bottom/left来使用,但是其实这本身就是个独立的属性,可以不依赖其他属性达到一些效果(例如无依赖相对定位和无依赖绝对定位)

absolute单独作用时可以理解为不相对任何元素定位,只在原本应该在位置浮了出来,但是仍处在原来的位置,原来的空间会空出来可被后面的元素填充

See the Pen position:absolute单独使用 by kricsleo (@kricsleo) on CodePen.

11. font-weight不同的值实际上是加载的不同的字体,利用这一点可以实现图标的渐进性显示等体验

例如font-weight: normal的时候显示一个小的简略版的麦克风图标,font-weight:bold的时候显示一个完整细腻的麦克风图标

See the Pen font-weight 指定不同图标 by kricsleo (@kricsleo) on CodePen.

12. chrome在图片加载失败时在图片区域显示的灰色边框可以通过text-indent去除

出现灰框的前提条件是:img元素需要有src属性,无论属性值是否为空, 根据作者推测灰色边框是预留给alt属性,所以可以使用text-indent来规避掉,在Stack Overflow上也有关于这种情况的另一种bug解释和规避做法:https://stackoverflow.com/questions/6013071/removing-the-image-border-in-chrome-ie9

See the Pen 使用text-indent或者其它方法隐藏加载失败的灰色边框 by kricsleo (@kricsleo) on CodePen.

13. background-position百分比的计算方式与别的属性都不相同

positionX = (容器宽度 - 图片宽度) * percentX
positionY = (容器高度 - 图片高度) * percentY
按照这个计算方式, 即使percent为负值,计算出来的结果也有可能是正的,例如图片宽度大于容器宽度的时候

See the Pen background-position特殊的计算方式 by kricsleo (@kricsleo) on CodePen.

14. 最后一点很重要的思想无宽度

css的布局应该像水流一样自然而然的填充空间, 尽量不要通过限定宽度来布局, 这是在思考一个布局时的总体出发点, 内容和宽度都可以随着空间的变化而像水流一样伸缩适应

例如position:absolute;left:0;right:0之后就不要再加上width:100%了,这只会破坏元素的流动性, 如果之后需要再增加margin, 那么width:100%反而会导致问题, 还有更多的情况不再枚举, CSS本身设计如水流一样的特性实在是太棒了!

知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
comments powered by Disqus