博客列表 >内外边距的特点,浮动的实现及定外的基本操作-2019年7月7日12时44分

内外边距的特点,浮动的实现及定外的基本操作-2019年7月7日12时44分

辰晨的博客
辰晨的博客原创
2019年07月07日 13:33:00718浏览

一、外边距的三个特征:

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>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议