经常遇到这样一种布局(示例代码),数量不定的卡片,左对齐,并且充满容器(卡片与容器四边无间距),效果如下图所示:

分享编程的乐趣与珠玑
大多数情况下,浏览器默认的的 checkbox 样式都满足不了我们对外观的需求,这时候就需要在 checkbox 的基础上实现自定义样式,核心是如何使用“打勾”效果
有三种方式:
这里主要说明第三种,目前很多网站使用的 WebFont 就是在 content 属性中写字体代码实现图标。其实浏览器自带很多特殊符号,其中又分 html 特殊符号与 css 特殊符号。在 css 的特殊符号中,就有“打勾”这个符号,先看效果图:
CSS 的后代伪类选择器共五对,两种类型(我命名为:child 型与 type 型),分别是:
child 型 | type 型 |
---|---|
:first-child |
:first-of-type |
:last-child |
:last-of-type |
:only-child |
:only-of-type |
:nth-child(n) |
:nth-of-type(n) |
:nth-last-child(n) |
:nth-last-of-type(n) |
两种类型的主要区别在于查找元素的顺序,child 型先查找元素位置,再查找元素类型;而 type 型则刚好相反,先找类型,后找位置。
今天在计算文字填充元素高度遇到一个有意思的东西,所以分享出来,首先有如下代码片段:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style> body { margin: 0; font-size: 12px; } ul { background: #ddd; margin: 15px; padding: 5px; } li { background: #aaa; margin: 20px; padding: 10px; list-style: none; } </style> <ul> <li id="line_height">Lorem ipsum dolor sit amet, consectetur.</li> </ul> |
本以为li
的高度会是 32px ,结果在 Firefox 中的高度却是 35px 。再仔细一看,原本以为 12px 的字体高度,结果却是 15px: