排版鲜花页面
盒模型的外三层，指的是从内到外包裹内容的三层“容器”，分别是：
- 内边距（padding）：内容与边框之间的距离
- 边框（border）：盒子本身的边界线
- 外边距（margin）：盒子与其他盒子之间的距离
你可以把它想象成一个快递盒：
- 商品内容 = width/height （盒子内部的内容尺寸）
- 防震泡沫 = padding （商品和盒子内壁的空隙）
- 纸箱本身 = border （盒子的边框）
- 两个快递盒之间的空隙 = margin （盒子和盒子之间的距离）
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>排版鲜花页面</title><style type="text/css">*{margin: 0 ;padding: 0;}.parent{width: 1000px;margin: 0 auto;/*background-color: lavender;*/}.son1,.son2,.son3,.son4{float: left;width: 200px;height: 200px;margin-left: 20px;border: 1px solid #333333;padding: 20px 12px;text-align: center;}</style></head><body><div class="parent"><div class="son1"><img src="img/1.png"height="120" width="150"/></div><div class="son2"><img src="img/1.png"height="120" width="150"/></div><div class="son3"><img src="img/1.png"height="120" width="150"/></div><div class="son4"><img src="img/3.png"height="120" width="150"/></div></div></body>
</html>Float
Float常跟属性值left、right、none
float:left靠左浮动
float:right靠右浮动
float:none不使用浮动
没有居中浮动
浮动的作用：
1.让盒子从普通流中脱离出来，可以用于让多个盒子一行显示。
2.可以实现盒子的左右对齐。
3.可以用来控制图片实现文字环绕图片的效果。