Css概念

CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的，相当于页面化妆。

1、行高

浏览器默认文字大小：16px 行高：是基线与基线之间的距离行高=文字高度+上下边距一行文字行高和父元素高度一致的时候，垂直居中显示。

总结

标准盒模型box-sizing:content-box
- margin(左右外边距)+padding(左右内边距)+border(左右边框)+内容的(width)
IE盒模型box-sizing:border-box
- 宽度=内容的(width)+margin(左右)（这里的内容width包含了padding(左右内边距)+border(左右边框)）

边框属性的连写 border-top: red solid 5px; 特点：没有顺序要求，线型为必写项。

特点：没有顺序要求，线型为必写项。边框合并 border-collapse:collapse; label for id 获取光标焦点

<label for="username">用户名:</label><input type="text" class="username" id="username">

Padding-left | right | top | bottom

padding连写
- Padding: 20px; 上右下左内边距都是20px
- Padding: 20px 30px; 上下20px 左右30px
- Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
- Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
内边距撑大盒子的问题
- 影响盒子宽度的因素
- 内边距影响盒子的宽度
- 边框影响盒子的宽度
- 盒子的宽度=定义的宽度+边框宽度+左右内边距
继承的盒子一般不会被撑大
- 包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。

margin-left | right | top | bottom

外边距连写
- Margin: 20px; 上下左右外边距20PX
- Margin: 20px 30px; 上下20px 左右30px
- Margin: 20px 30px 40px; 上20px 左右30px 下 40px
- Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
垂直方向外边距合并
- 两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
嵌套的盒子外边距塌陷解决方法: 1、给父盒子设置边框 2、给父盒子overflow:hidden; bfc 格式化上下文