6.7 盒子模型应用小结

(1)box-sizing实际项目采用border-box。

(2)浏览器按照CSS规范给一些常用标签添加了默认的盒子属性,例如body、p与h1-h6的margin、ul的padding。通常会根据项目需求重新设置它们。

(3)文本内容使用inline盒子,根据字体三属性自动计算宽度与高度,字体三属性通常设置在父级块元素;div等block盒子占满一行。

(4)精确的空白间距。通过盒子模型的内边距与外边距,能够精确设置元素的内外部空白间距。禁止通过空格转义字符 与换行符br来实现空白间距,无法精确控制。

开发错误DevError008:通过空格转义字符 与换行标签br实现水平与垂直间距。

(5)横线与竖线。通过盒子模型的border边框,可以画线:水平线、竖直线。不建议hr标签画水平线。

(6)盒子的显示区域与占据区域可能不一致。这是后续学习脱离流定位的关键。