返回 盒子模型---...... 登陆

盒子模型----浮动(捣蛋鬼)

学院里的小寂寞 2019-05-21 17:45:41 283

        如果把边框看做是盒子模型这个大家庭中的家长,那么浮动就是一个调皮的小孩子。因为,浮动属性是针对于当前被设置浮动的标签的上一级内容而言的。浮动是一个比较特殊的css属性,它会破坏掉当前你当前被设置浮动的标签内的布局排版,直接漂浮到所有内容的的上方。具体的我们用代码康康,下面上代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型--浮动</title>
<style type="text/css">
	/*主要操作都在css里,html我只写了一个大致的框架样子*/
	.bord1-fin{ width: 666px;height: 666px; background-color: black; border: 5px solid red;margin: 233px 233px;box-shadow: 10px 20px 30px 10px yellow;float: left;}
	.bord1-cen1{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;float: left;}}
	.bord1-cen2{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;float: left;}}
	.bord1-li1{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;margin:12px auto;border-radius:25px;}
	.bord1-li2{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: left;margin:12px auto;border-radius:25px;}
	.bord1-li3{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;;margin:12px auto;border-radius:25px;}
	.bord1-li4{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: left;margin:12px auto;border-radius:25px;}
	/*右边浮动正常*/
	.bord2-fin{ width: 666px;height: 666px; background-color: black; border: 5px solid red;margin: 233px 15px;box-shadow: 10px 20px 30px 10px yellow;float: right;}
	.bord2-cen1{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;}
	.bord2-cen2{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;}
	.bord2-li1{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;margin:12px auto;border-radius:25px;}
	.bord2-li2{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: right;margin:12px auto;border-radius:25px;}
	.bord2-li3{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;;margin:12px auto;border-radius:25px;}
	.bord2-li4{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: right;margin:12px auto;border-radius:25px;}
	/*注:想要管住浮动这个捣蛋鬼,就必须找到这个捣蛋鬼的爸爸,因为浮动再调皮捣蛋,碰上了它的爸爸还是需要消停下来,这个爸爸角色就是你设置浮动的标签的上一级标签。*/
	 .clear { clear: both; }
</style>
</head>
<body> 
	<div class="oulaoula"><!-- 欧拉欧拉 -->
		<div class="bord1-fin"><!-- 最外面的盒子边框--><!-- 这个盒子是用来和右面的盒子的浮动效果进行一个对比用的。 -->
			<div class="bord1-cen1"><!-- 中间的边框 --><!-- 浮动慎用!慎用! -->
				
				<div class="bord1-li1"><p>浮动就是个捣蛋鬼,用不好的话就会非常气人,所以使用的时候需要慎重的考虑一下。</p></div><!-- 最里面的盒子1 左-->
				<div class="bord1-li2"></div><!-- 最里面的盒子2 右-->
			
			<!--<div class="bord1-cen2"></div>-->
				
				<div class="bord1-li3"><p>但是对于浮动不能一棍子打死,浮动用的好的话是很神奇的,能够让页面标签很听话的去你想让它去的地方!</p></div><!-- 最里面的盒子3 左-->
				<div class="bord1-li4"></div><!-- 最里面的盒子4 右-->
			</div>
		</div>
		<div class="bord2-fin"><!-- 最外面的盒子边框-->
			<div class="bord2-cen1"><!-- 中间的边框 -->
				
				<div class="bord2-li1"><p>浮动就是个捣蛋鬼,用不好的话就会非常气人,所以使用的时候需要慎重的考虑一下。</p></div><!-- 最里面的盒子1 左-->
				<div class="bord2-li2"></div><!-- 最里面的盒子2 右-->
			</div>
			<div class="bord2-cen2"><!---->
				
				<div class="bord2-li3"><p>但是对于浮动不能一棍子打死,浮动用的好的话是很神奇的,能够让页面标签很听话的去你想让它去的地方!</p></div><!-- 最里面的盒子3 左-->
				<div class="bord2-li4"></div><!-- 最里面的盒子4 右-->
			</div>
		</div>
		<div class="clear"></div><!-- 这是为了防止页面布局散乱而设置的clear,用于清除浮动 -->
	</div>
</body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网