2020-09-22 CSS盒子模型（上）

CSS 盒子模型及网页布局

1. 边框（border）：可分为border-width边框粗细（px）、border-style边框样式、border-color边框颜色

主要用到的是solid 实线边框、dashed 虚线边框、dotted 点线边框

border也可以和背景一样合起来写

border包含了上（top）、下（bottom）、左（left）、右（right）四条边 可以分开设置 也可利用层叠性 先设置全部的四条边 再单独设置少的部分

制作细线表格可以用border-collapse来做

2. 内边距（padding）：
   padding-left 左内边距 padding-right右内边距 padding-top上内边距 padding-bottom 下内边距

padding也会影响盒子的大小 但在盒子本身没有指定width/height属性时 此时padding不会撑开盒子大小

复合使用的方法：

3. 外边距（margin）：


相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。
取两个值中的较大者这种现象被称为 相邻块元素垂直外边距的合并。

嵌套块元素垂直外边距的塌陷问题
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

清除内外边距