css的一些小问题

这是今天整理的笔记
一、属性书写顺序： Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果）
的顺序书写，以提高代码的可读性。**
Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等
另外，如果包含 content 属性，应放在最前面。
示例：
.sidebar {
/* formatting model: positioning schemes / offsets / z-indexes / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden;

/* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd;

/* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px;

/* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}
有顺序之后，能让自己理清思路，不会漏掉一些属性。

二、font-weight 属性必须使用数值方式描述。

解释：

CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。

浏览器本身使用一系列启发式规则来进行匹配，在 <700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。

但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表)，故使用数值描述增加了灵活性，也更简短。

使用 transition 时应指定 transition-property。
示例：

/* good */
.box {
transition: color 1s, border-color 1s;
}

/* bad */
.box {
transition: all 1s;
}

三、尽可能在浏览器能高效实现的属性上添加过渡和动画。

解释：

见本文，在可能的情况下应选择这样四种变换：

transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0..1;
典型的，可以使用 translate 来代替 left 作为动画属性。

示例：

/* good */
.box {
transition: transform 1s;
}
.box:hover {
transform: translate(20px); /* move right for 20px */
}

/* bad */
.box {
left: 0;
transition: left 1s;
}
.box:hover {
left: 20px; /* move right for 20px */
}

遇到的问题：
1.为什么div的height为70px时，line-height为50px。文本才看起来垂直居中。
找到line-height属性定义
对于块级元素，CSS属性line-height指定了元素内部line-boxes的最小高度。
对于非替代行内元素，line-height用于计算line box的高度。
对于替代行内元素，如button/input等元素，line-height并没有影响。

2.为了用:after伪类在strong标签后面添加换行，找遍了好多地方。

最后找到了方法：

p > strong:after {
content: "\a";
white-space: pre;
}

3.h2元素的font-size设置为10px和p元素的12px差不多。