盒子模型基础知识点整理

盒子模型

border

border-style
solid 实线
dotted 点线
Dashed 虚线

连写：

  border: 1px  solid  #006600;
  border-left | right | bottom | top

边框合并：

border-collapse:collapse;  

内边距(padding)

padding:  left  | right  |  bottom  |  top

内边距连写

padding:  0  12px  13px  14px;
padding:  12px  20px  30px;

影响盒子大小

border、内边距会影响盒子大小;
盒子宽度=定义宽度+边框粗细+左右内边距;
嵌套关系时，子盒子不超过父盒子宽度，只要内边距不超过父盒子宽度，内边距不会撑大父盒子。

外边距(margin)

margin:  left | right | top  |bottom

外边距连写

margin: 12px 13px 14px 15px;
margin:12px  13px  14px;

垂直方向外边距合并

2个盒子垂直方向，同时定义了垂直方向外边距，发生合并，取的是最大值。

外边距塌陷

1. 给父盒子加border
2. overflow:hidden; bfc

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