盒模型的外三层结构
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒模型的外三层结构</title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 8px;}.text{width: 500px;height: 500px;background-color: lavender;/*padding-top: 50px;padding-right: 60px;padding-left: 60px;padding-bottom: 50px;*/padding: 50px 60px; /*这句相当于上面四句*/color: black;font-size: 2em;text-indent: 2rem; /*首行缩进2个字符*/text-align: justify;/*文本两端对齐*/line-height: 3rem; /*行之间的距离*/border-bottom: 10px solid orange;}</style></head><body><div class="text">《鲜花》是回春丹乐队演唱的歌曲，由刘西蒙作词、作曲，于2023年9月30日作为单曲发行。《鲜花》是刘西蒙为纪念去世前辈而创作的歌曲，是首治愈系歌曲，歌词美好又热烈，像告白又像告别，像重逢又写满了遗憾与悔恨，唱出了对生命和生活的热爱。</div></body>
</html>
排版鲜花页面
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>排版鲜花页面</title><style type="text/css">*{margin: 0; padding: 0;}.parent{width: 1000px;/*height: 300px;*/margin: 0 auto;overflow: hidden;/*background-color:red;*/}.son01,.son02,.son03,.son04{float: left;width: 200px;height: 200px;margin-left:20px;border: 1px solid black;padding: 20px 12px 50px;}</style></head><body><div class="parent"><div class="son01"><img src="img/花朵1.png" /></div><div class="son02"><img src="img/花朵1.png" /></div><div class="son03"><img src="img/花朵1.png" /></div><div class="son04"><img src="img/花朵1.png" /></div></div></body>
</html>
盒模型的外三层，指的是从内到外包裹内容的三层“容器”，分别是：
- 内边距（padding）：内容与边框之间的距离
- 边框（border）：盒子本身的边界线
- 外边距（margin）：盒子与其他盒子之间的距离
你可以把它想象成一个快递盒：
- 商品内容 = width/height （盒子内部的内容尺寸）
- 防震泡沫 = padding （商品和盒子内壁的空隙）
- 纸箱本身 = border （盒子的边框）
- 两个快递盒之间的空隙 = margin （盒子和盒子之间的距离）