CSS基础整合3

【行高】

浏览器默认文字大小：16px；

行高是文字基线与基线之间的距离

行高=文字高度+上下边距 

一行文字行高和父元素一致的时候，垂直居中显示。

【行高的单位】

行高单位  文字大小     值

20px     20px        20px

2em     20px        40px

150%    20px        30px

2          20px        40px

总结：除了像素px以外，行高都是line-height与文字大小的乘积。

行高单位    父元素文字大小   子元素文字大小     行高值

20px          20px                       30px                 20px

2em           20px                      40px                  40px

150%          20px                      30px                 30px

2                 20px                      30px                 60px

总结：不带单位时，行高和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。

【盒子模型】

为了让页面布局更合理

内容与盒子边距离是内边距；盒子之间是外边距。

边框：border

线型：border-top-style: solid（实线）、dotted（点线）、dashed（虚线）
边框颜色：border-top-color: red;

边框粗细：border-top-width: 5px;

连写：border-top:red solid 5px;

四个边框相同的写法：border:red solid 5px;

边框合并：border-collapse:cpllapse;

去掉边框：border: 0 none; 

去掉轮廓线：outline-style：none;  (针对input输入框)

获取光标焦点：label for id

【内边距】

padding-left：20px；  内容距左边框的距离

padding-right：50px； 内容距右边框的距离

padding-top：40px；

padding-bottom：50px；

连写：padding：上下左右一个值、

                          上下|左右两个值、

                          上|左右|下 三个值、

                          上|右|下|左 四个值。

内边距撑大盒子的问题：

影响盒子宽度的因素：内边距，边框

盒子的宽度=定义的宽度+边框的宽度*2+左右内边距

继承的盒子一般不被撑大（只有水平方向）

子盒子没有设置宽度的前提下，子盒子继承父盒子的宽度（不继承高度），所以再为子盒子设置左右内边距时，只要不超过父盒子宽度，盒子就不会被撑大。

但垂直方向，子盒子会被撑大。

盒子居中：margin: 0 auto；

盒子里面的内容居中：text-align：center；

行内元素可以定义左右的内外边距，上下会被忽略掉。