博主信息
加勒比强强的博客
博文
13
粉丝
0
评论
0
访问量
4953
积分:0
P豆:26

子元素浮动,三列布局2019年9月4日20时

2019年09月06日 16:55:35阅读数:315博客 / 加勒比强强的博客/ php中文网学习
  1. 实例演示如何消除子元素浮动造成父元素高度折叠的影响

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>外边距</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
.box1 {
	width: 300px;
	
	border: 5px dashed red;
}
.box2 {
	width: inherit;
	height: 200px;
	background-color: lightcoral;

}

/* .box2{
	float: left;
} */
.box1 {
	overflow: hidden;
}

	</style>
</head>
<body>

<div class="box1">
	<div class="box2"></div>
</div>

	

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

8.JPG


总结:当设置父元素CSS属性值overflow:hidden后,子元素的高度变化时,父元素的高度也随着子元素变化。



2.实例演示三列布局的实现原理(绝对定位实现,浮动定位实现)


绝对定位:

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>三列布局(绝对定位)</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
	.container {
		width: 1000px;
		margin: 0 auto;
	}
	.header,.footer {
		height: 60px;
		background-color: #ccc;
	}
	.main {
		background-color: blue;
		margin: 5px auto;
	}
	.main_left {
		width: 200px;
		min-height: 400px;
		background-color: seagreen;
	}
	.main_content {
		min-height: 400px;
		background-color: green;
	}
	.main_right {
		width: 200px;
		min-height: 400px;
		background-color: coral;
	}
	.main {
		position: relative;
	}
	.main_left {
		position: absolute;
		left: 0;
		top: 0;
	}
	.main_right {
		position: absolute;
		right:  0;
		top: 0;
	}
	.main_content {
		margin-left: 200px;
		margin-right: 200px;
	}
	</style>
</head>
<body>

<div class="container">
	<div class="header">头部</div>


<div class="main">
	<div class="main_left">左侧</div>
	<div class="main_content">主体</div>
	<div class="main_right">右侧</div>
</div>

<div class="footer">底部</div>

</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

通过对主体先使用绝对定位,然后,将两侧的侧边栏使用绝对定位,左侧参考左上角,右侧参考右上角,中间的主体部分,运用挤压方式,测出中间主体的宽度,margin-left/right 设置后生效。

9.JPG


浮动定位:

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>三列布局(浮动定位)</title>
	<link rel="stylesheet" type="text/css" href="div.css">
	<style type="text/css">
	.container {
		width: 1000px;
		margin: 0 auto;
	}
	.header,.footer {
		height: 60px;
		background-color: #ccc;
	}
	.main {
		background-color: blue;
		margin: 5px auto;
	/* 使用overflow:hidden方式来达到清除浮动的效果 */
		overflow: hidden;
	}
	.main_left {
		width: 200px;
		min-height: 400px;
		background-color: seagreen;
	}
	.main_content {
		min-height: 400px;
		background-color: green;
	}
	.main_right {
		width: 200px;
		min-height: 400px;
		background-color: coral;
	}
	/* 浮动定位 */
	.main_left {
		float: left;
	}
	.main_right {
		float: right;
	}
	.main_content {
		float: left;
		width: 600px;

	}
	 /* 清除浮动 下面的方式不推荐使用,因为主体内容有父元素,对父元素有影响 */
	/*  .footer {
		clear: both;
	}
	 */


	</style>
</head>
<body>

<div class="container">
	<div class="header">头部</div>


<div class="main">
	<div class="main_left">左侧</div>
	<div class="main_content">主体</div>
	<div class="main_right">右侧</div>
</div>

<div class="footer">底部</div>

</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

9.JPG

浮动定位中,左侧向左浮动,右侧向右浮动,中间的部分随意,一般习惯使用左浮动并设置中间的宽度,底部页脚部分会消失,其实不是消失,而是由于主体内容浮动后脱离文档流,底部灰色部分隐藏到主体内容后边。通过清除浮动达到显示底部内容(overflow: hidden)这个属性值添加到主体元素的父元素CSS类选择器。

批改状态:合格

老师批语:浮动的用途还有很有用的, 并非全是负面

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论