排版鲜花页面

排版鲜花页面

盒模型的外三层，指的是从内到外包裹内容的三层“容器”，分别是：

  1. 内边距（padding）：内容与边框之间的距离
  2. 边框（border）：盒子本身的边界线
  3. 外边距（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.可以用来控制图片实现文字环绕图片的效果。

posted @ 2026-04-20 17:58  今今日晴  阅读(7)  评论(0)    收藏  举报