CSS | 前端道场

饱满的卡片列表布局

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

使用伪类的 content 属性实现自定义选择框

大多数情况下，浏览器默认的的 checkbox 样式都满足不了我们对外观的需求，这时候就需要在 checkbox 的基础上实现自定义样式，核心是如何使用“打勾”效果

有三种方式：

使用图上实现
使用元素，隐藏两个边框，并旋转
使用伪元素 content 属性中的特殊字符

这里主要说明第三种，目前很多网站使用的 WebFont 就是在 content 属性中写字体代码实现图标。其实浏览器自带很多特殊符号，其中又分 html 特殊符号与 css 特殊符号。在 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 型则刚好相反，先找类型，后找位置。

查看全文

不同浏览器与不同字体，默认 line-height 的表现差异

今天在计算文字填充元素高度遇到一个有意思的东西，所以分享出来，首先有如下代码片段：

<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>

<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：

查看全文