CSS 盒子模型及网页布局
- 边框(border):可分为border-width边框粗细(px)、border-style边框样式、border-color边框颜色
主要用到的是solid 实线边框、dashed 虚线边框、dotted 点线边框
border也可以和背景一样合起来写
border包含了上(top)、下(bottom)、左(left)、右(right)四条边 可以分开设置 也可利用层叠性 先设置全部的四条边 再单独设置少的部分
制作细线表格可以用border-collapse来做
- 内边距(padding):
padding-left 左内边距 padding-right右内边距 padding-top上内边距 padding-bottom 下内边距
padding也会影响盒子的大小 但在盒子本身没有指定width/height属性时 此时padding不会撑开盒子大小
复合使用的方法:
3. 外边距(margin):
相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和。
取两个值中的较大者这种现象被称为 相邻块元素垂直外边距的合并。
嵌套块元素垂直外边距的塌陷问题
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
清除内外边距