Blogger Information
Blog 22
fans 3
comment 3
visits 16314
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
内外边距的特点,浮动的实现及定外的基本操作-2019年7月7日12时44分
辰晨的博客
Original
720 people have browsed it

一、外边距的三个特征:

1.同级塌陷:两个盒子之间的上下外边距会发生塌陷,两盒子外边距之和等于两盒子中设置的最大外边距的值。

    示例如下:

<!DOCTYPE html>
<html>
<head>
	<title>外边距的同级塌陷</title>
	<style type="text/css">
		.box1{
			width: 100px;
			height: 100px;
			background-color:red;
			margin-bottom: 10px; 
		}
		.box2{
			width: 100px;
			height: 100px;
			background-color:green;
			margin-top: 20px; 
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

运行实例 »

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

2.嵌套传递:子元素添加外边距会添加到父元素上。

    示例如下:

<!DOCTYPE html>
<html>
<head>
	<title>外边距的嵌套传递</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color:red;
		}
		.box2{
			width: 100px;
			height: 100px;
			background-color:green;
			margin-top:50px; 
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>	
</body>
</html>

运行实例 »

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

3.自动挤压:当左边距为auto时,左边距的值会尽可能的大,将盒子挤到最右端;此时,当右边距也为auto时,同样会将盒子挤到最左端,两种对抗力量互不相让,实现盒子的自动居中。

    示例如下:

<!DOCTYPE html>
<html>
<head>
	<title>外边距的自动挤压</title>
	<style type="text/css">
		.box1{
			width: 100px;
			height: 100px;
			background-color:red;
			margin:auto;
		}
	</style>
</head>
<body>
	<div class="box1">
	</div>	
</body>
</html>

运行实例 »

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

二、内边距居中的三种解决方式

1.方法一:重新设置原盒子的宽度 

父元素设置padding后,盒子会被撑开,这时将被撑开的宽度与高度减掉,显示效果就会把子元素居中

计算公式:设置padding左右的值=(父元素宽度-子元素宽度)/2

计算公式:重新设置的盒子的宽度=设置padding左右的值*2

    示例如下:

<!DOCTYPE html>
<html>
<head>
	<title>解决内边距居中问题的三个方法</title>
	<style type="text/css">
		.box1{
			width:300px;
			border:1px dashed #000;			
			padding: 50px;
		}
		img{
			width: 200px;
			height: 200px;
		}
		.box1{
			width:200px;
			height:200px;
		}
	</style>
</head>
<body>	
	<div class="box1">
		<img src="https://img.php.cn/upload/jscode/000/000/001/5d11814409068367.jpg">
	</div>
</body>
</html>

运行实例 »

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

2.方法二:宽度分离

给div再套一个父级元素,由于子元素会继承父元素的宽度,因此盒子不会被撑开

    示例如下:    

<!DOCTYPE html>
<html>
<head>
	<title>解决内边距居中问题的三个方法</title>
	<style type="text/css">
		.box{
			width:300px;
		}
		.box1{
			border:1px dashed #000;			
			padding: 50px;
		}
		img{
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1">
		<img src="https://img.php.cn/upload/jscode/000/000/001/5d11814409068367.jpg">
	</div>
	</div>
</body>
</html>

运行实例 »

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

3.方法三:box-sizing:border-box;将宽度作用于边框级,内边距不会撑开盒子。

    示例如下:

<!DOCTYPE html>
<html>
<head>
	<title>解决内边距居中问题的三个方法</title>
	<style type="text/css">
		.box1{
			width: 300px;
			box-sizing:border-box;
			border:1px dashed #000;			
			padding:50px;
		}
		img{
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
		<div class="box1">
		<img src="https://img.php.cn/upload/jscode/000/000/001/5d11814409068367.jpg">
	</div>
</body>
</html>

运行实例 »

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

三、浮动的实现与清除

1.给元素添加浮动后,元素会脱离文档流,进入浮动流按先来后到的顺序重新排布。float:left; float:right;

2.清除浮动clear:left;(清除左浮动的影响)。clear:right;(清除右浮动的影响)。clear:both;清除浮动影响。

    示例如下:

<!DOCTYPE html>
<html>
<head>
	<title>浮动的实现与清除</title>
	<style type="text/css">
		.box1{
			width: 100px;
			height: 200px;
			float: left;
			background-color: red;
		}
		.box2{
			width: 200px;
			height: 100px;
			float: right;
			background-color: green;
		}
		.box3{
			width: 100%;
			height: 100px;
			clear:both;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>

运行实例 »

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

四、定位

1.相对定位:position: relative;未脱离文档流,相对于元素本身的位置做偏移。

    示例如下:

<!DOCTYPE html>
<html>
<head>
	<title>相对定位</title>
	<style type="text/css">
		.box1{
			width:20px;
			height:20px;
			color:#000;
			background-color: #46ff00;
			border-radius: 50%;
			position:relative;
			margin-top:0;
			margin-left:280px;
		}
		.box2{
			width:30px;
			height:30px;
			color:#000;
			background-color: #ecfe01;
			border-radius: 50%;
			position:relative;
			margin-top:25px;
			margin-left:210px;
		}
		.box3{
			width:40px;
			height:40px;
			color:#000;
			background-color: #b21d53;
			border-radius: 50%;
			position:relative;
			margin-top:25px;
			margin-left:140px;
		}
		.box4{
			width:50px;
			height:50px;
			color:#000;
			background-color: #1ae7e7;
			border-radius: 50%;
			position:relative;
			margin-top:25px;
			margin-left:70px;
		}
		.box5{
			width:60px;
			height:60px;
			color:#000;
			background-color: #0e01f5;
			border-radius: 50%;
			position:relative;
			margin-top:25px;
			margin-left:0px;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="box5"></div>
</body>
</html>

运行实例 »

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

2.绝对定位:position: absolute;脱离文档流,以父元素的位置为参照做偏移,不论元素之前是什么类型,全部转为块元素,支持宽高。

    示例如下:

<!DOCTYPE html>
<html>
<head>
	<title>绝对定位</title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 300px;
			position:relative;
			border:1px dashed red;
		}
		.box1{
			width:20px;
			height:20px;
			color:#000;
			background-color: #46ff00;
			border-radius: 50%;
			position:absolute;
		}
		.box2{
			width:30px;
			height:30px;
			color:#000;
			background-color: #ecfe01;
			border-radius: 50%;
			position:absolute;
			margin-top:45px;
			margin-left:45px;
		}
		.box3{
			width:40px;
			height:40px;
			color:#000;
			background-color: #b21d53;
			border-radius: 50%;
			position:absolute;
			margin-top:100px;
			margin-left:100px;
		}
		.box4{
			width:50px;
			height:50px;
			color:#000;
			background-color: #1ae7e7;
			border-radius: 50%;
			position:absolute;
			margin-top:165px;
			margin-left:165px;
		}
		.box5{
			width:60px;
			height:60px;
			color:#000;
			background-color: #0e01f5;
			border-radius: 50%;
			position:absolute;
			margin-top:240px;
			margin-left:240px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
	</div>
</body>
</html>

运行实例 »

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

3.绝对定位小案例

【1】用绝对定位设置遮罩,使其脱离文档流不随窗口变化而变化,背景色为黑色,宽高100%,不透明度70%。

【2】登录框用绝对定位也是相同的道理,top、left各50%,margin-top减去二分之一的高度,margin-left减去二分之一的宽度,使登录框居中显示。

    示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位小案例</title>
	<style>
		body{
			background-color:#00a5e0;
			color: #fff;
		}
		.box1{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: 0.4;
		}
		.box2{
			width: 380px;
			height: 380px;
			border-radius:10px;
			position: absolute;
			background-color: #fff;
			top:50%;
			left:50%;
			margin-top: -190px;
			margin-left: -190px;
		}
		.box3{
			padding: 30px;
			color:#373737;
		}
		input{
			width: 220px;
			height: 40px;
			border-radius: 4px;
			border:1px solid #ccc;
			font-size: 14px;
			padding:0 10px;
		}
		button{
			width: 320px;
			height: 40px;
			background-color: #00a5e0; 
			color:#fff;
			font-size: 16px;
			font-family:'微软雅黑';
			border-radius: 4px;
			border:none;
		}
		button:hover{
			background-color:#2d7bdd;
		}
		p{
			margin-top:30px;
		}
	</style>
</head>
<body>
	<h1>php中文网</h1>
	<div class="box1"></div>
	<div class="box2">
		<div class="box3">
			<h2>登录</h2>
			<hr>
			<p>
				<label for="username">用户名:</label>
				<input type="username" name="username" id="username" placeholder="请输入3-8字符用户名" autofocus="">
			</p>
			<p>
				<label for="password">密<span>&nbsp;&nbsp;&nbsp;</span>码:</label>
				<input type="password" name="password" id="password" placeholder="请输入6-12位数字、字母组成的密码" autofocus="">
			</p>
			<p>
				<button type="submit">登录</button>
			</p>
		</div>
	</div>
</body>
</html>

运行实例 »

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

4.固定定位:position:fixed;始终以浏览器窗口为父元素进行定位

    示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定定位</title>
	<style>
		body{
			background-color:#00a5e0;
			width: 100%;
			height: 100%;
		}
		.box{
			width: 200px;
			height: 300px;
			background-color:#fff;
			border-radius: 6px;
			box-shadow: 2px 2px 5px #ccc;
			position:fixed;
			padding: 15px;
			bottom:10px;
			right: 10px;
		}
		button{
			position: relative;
			top:-286px;
			left:186px;
		}
	</style>
</head>
<body>
	<div class="box">
		<h2>广告</h2>
		<p>我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告,我是广告</p>
		<button>x</button>
	</div>
</body>
</html>

运行实例 »

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


Correction status:qualified

Teacher's comments:浮动与定位是布局最常用的工具
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments