垂直居中：
文字本身具有行高，并且是居中的 强行改变文字的行高字体仍然是在居中状态的，当行高变大时候font-size 并没有变化，所以就是居中的。
CSS的选择器的优先级：
行内（样式style）选择器--->ID选择器#--->类选择器----->元素选择器div{}
类选择器的 就近原则。
CSS盒子模型：
盒子模型分为标准盒模型和怪异盒模型；
内外边距 padding + margin
padding top
padding right
padding bottom
padding left
padding ； 10px 20px 20px 10 px 上右下左的顺序
margin是控制元素块移动的；
下面；
①嵌套的div中，外部div设定了标签box-sizing:border-box，其不随内部div的padding（内边距）变化而变化；
② margin（外边距）控制着元素块的位置和移动，指定margin-top：50px,测了下是正确的；
附上代码；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>内外边距</title> <style type="text/css"> /*当内边距增大后，会把盒子撑大，若不想让盒子变大设置box-sizing:border-box*/ .father { width: 150px; height: 150px; background-color: hotpink; padding: 10px 20px 20px 30px; /*中间不需逗号*/ box-sizing: border-box; } .son { width: 150px; height: 150px; background-color: pink; } /*外边距控制着 元素块的移动*/ .margin { width: 200px; height: 200px; background-color: green; margin-top: 50px;/* 和下面一行可以更改为 margin：50px auto */ /*margin: 0 auto;*/ /*水平居中*/ } </style></head><body><!--内边距 padding --><div class="father"> <div class="son"></div></div><!--外边距 margin 中特殊取值 margin:0 auto 让一个固定大小的元素块水平居中 --><div class="margin"></div></body></html>