今年特别忙。年初看的《CSS 世界》,刚有时间看第二次。
替换元素(图片替换)
比如图片悬停遮罩之类功能,一般正如作者所说,使用两个元素,用 js 控制。
完全没想到还有 content
这种用法。
1 2 3 4 5 6 7 8 9 10 11 12 13
| <style> img { width: 100px; height: 100px; } img:hover { content: url("https://images.unsplash.com/photo-1586971934493-d6829d89393c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"); } </style>
<img src="https://images.unsplash.com/photo-1562887284-8ba6b7c90fd8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"/>
|
不仅如此, h1
之类的元素,加入 content
也可以变成替换元素。
伪元素单冒号双冒号
貌似 IE8 开始,及之后浏览器支持伪元素。
而 IE8 只支持单冒号的写法,其他后续浏览器支持双冒号写法。
所以一般要支持 IE8 的话,就要写单冒号。常见于 :after
。
标签元素内置的 padding
我知道很多元素都有内 padding,一般简单来说就是全局重置下:
1 2 3 4
| * { margin: 0; padding: 0; }
|
button 比较特殊,据说火狐浏览器用上述方案还会左右留下内边距。可能是我很多年没有在做过 PC 端研发了,这个完全不清楚。需要对按钮特殊处理下:
1 2 3
| button::-moz-focus-inner { padding:0; }
|
不过类似的问题我倒是遇到过,大致是在 safari 下,按钮样式和其他浏览器有些许不同。也是需要改变私有属性。当时我记得是:
1 2 3 4
| button { -webkit-appearance: none; }
|
绘制三道杠(移动端常见菜单按钮图标)
如果是我估计就会直接用元素画一根线,剩余两根用两个伪元素来实现。书中给出了用 border
来进行画上下两根线的方案。关键是我就算知道这个思路也画不出来,因为没用过也不会用 background-clip
:
1 2 3 4 5
| <div class="flex"> <div class="div1"></div> <div> </div> <div class="div2"></div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| .flex { display: flex; }
.div1 { position: relative; margin-bottom: 10px; width: 13px; height: 3px; background-color: #000; } .div1::before { content: ''; position: relative; top: 5px; display: block; width: 13px; height: 3px; background-color: #000; } .div1::after { content: ''; position: relative; top: 7px; display: block; width: 13px; height: 3px; background-color: #000; }
.div2 { padding: 2px 0; width: 13px; height: 3px; border-top: 3px solid #000; border-bottom: 3px solid #000; background-color: #000; background-clip: content-box; }
|
具体例子参见这里。
左右等高
常见的,一个容器内左右两侧内容不一样多,但是要求两侧的元素是一样高的,而且常见两侧元素有不同的背景(或颜色)。
这种情况主要是不确定那一侧内容比较多,而且大小不是固定的。因为如果已知内容高度,那么左右两侧直接写死高度就行了。
现在的我只能想到 flex
写法,非常简单就能实现。
文中给出了负 margin 解法,也听说过,不过也早忘记了。
1 2 3 4 5 6 7 8 9 10 11
| <div class="box"> <div class="div1"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> <div class="div2"> <p>1</p> </div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| .box { overflow: hidden; }
.div1 { background-color: red; }
.div2 { background-color: blue; }
.div1,.div2{ float: left; margin-bottom: -9999px; padding-bottom: 9999px; width: 100px; }
|
此外文章还提到了 table-cell
解法,连查待尝试,摸索出来了。
1 2 3 4 5 6 7 8 9 10 11 12 13
| .box {}
.div1 { background-color: red; }
.div2 { background-color: blue; } .div1,.div2{ display: table-cell; width: 100px; }
|
具体例子参见这里。
–END–