前端学习(十二）

内边距（padding）：指的是盒子内容区和盒子边框之间的距离，通过padding-top,padding-right,padding-bottom,padding-left来设置四个方向的内边框，会影响盒子可见框的大小。

盒子的大小由内容区，内边框和边框共同决定。

盒子的外边距：

盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置，样式：margin-XXX（接像素或auto【对水平方向设置，默认父元素居中，垂直默认为0】）由于页面中的元素靠左上摆放，所以设置上左边距时，盒子位置会发生改变。

垂直边距的重叠：

在网页中“垂直方向”的“相邻外边距”会发生重叠，所谓的外边距重叠之相邻兄弟元素边距取最大值，如果父子元素的垂直外边距相邻了，子元素的外边距会传递给父元素。

浏览器的默认样式：

浏览器为了在页面没有样式时依旧有一个良好的显示效果，会对许多元素设置默认样式，通过通配标签*全部清除。

内联元素的盒模型：

内联元素设置的width和height无法生效。设置水平内边距，内联元素可以设置水平方向的内边距，垂直方向的内边距但不影响内容布局。对于边框，内联元素垂直方向上也不影响内容布局。内联元素的外边距不会发生重叠，但依旧不支持垂直方向。