[js]03css基础

margin塌陷现象

标准文档流中，竖直方向的margin不叠加，以较大的为准。

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：

盒子居中margin:0 auto;

margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了：
1） 使用margin:0 auto; 的盒子，必须有width，有明确的width
2） 只有标准流的盒子，才能使用margin:0 auto; 居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用

text-align:center;

善于使用父亲的padding，而不是儿子的margin

margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
所以，我们一定要善于使用父亲的padding，而不是儿子的margin。

行高和字号

CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。

line-height: 40px;

文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么：

需要注意的是，这个小技巧，行高=盒子高。 只适用于单行文本垂直居中！！不适用于多行。
如果想让多行文本垂直居中，需要设置盒子的padding：

font-family: "微软雅黑","宋体";
font-family: "Times New Roman","微软雅黑","宋体";

font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";


font:16px/48px “宋体”;
行高可以用百分比，表示字号的百分之多少
font:12px/200% “宋体”;
font:12px/24px “宋体”;