JavaWeb_CSS（10）_div 和 span_边框

原创

wx5b04e97300ec7 2021-08-19 15:46:28 博主文章分类：CSS（更新完） ©著作权

文章标签 JavaWeb CSS 边框 html ide 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者wx5b04e97300ec7的原创作品，请联系作者获取转载授权，否则将追究法律责任

本系列博客汇总在这里：JavaWeb_CSS 汇总

<!DOCTYPE html>
<html>	
	<head>	
		<meta charset="UTF-8">		
		<title> www.weiyuxuan.com </title>		
		<style type="text/css">
			div
			{
				font-family: 楷体;
				font-size: 20px;
				font-weight:bold;
				background-color: orange;
				width: 100px;
				height: 100px;
				text-align: center;
				border-width: 6px;
			}
		</style>					
	</head>		
	<h1> 边框 </h1>		
	<hr>		
	<body>				
		<div style="border-style: double;"><img src="test.jpg"/></div>
		<div style="border-style: double;"><img src="test.jpg"/></div>
		<div><img src="test.jpg"/></div>				
	</body>		
</html>

二、所有 html 在布局上都遵守盒子模型

JavaWeb_CSS（10）_div 和 span_边框_ide_03

三、div 的内边框 padding

示例

<!DOCTYPE html>
<html>	
	<head>		
		<meta charset="UTF-8">		
		<title> www.weiyuxuan.com </title>			
		<style type="text/css">
			.outside
			{
				padding: 10px 10px 10px 10px; 	/*从上边距顺时针赋予宽度*/
				border: 1px solid black; 		/*给边框设置宽度，样式，颜色 , 多个样式的值用空格分开*/
				width: 800px;
				background-color: yellow;
			}
			.inside
			{
				width: 100%;
				height: 100%;
				background-color: orange;
				border: 1px solid black;
			}
		</style>					
	</head>		
	<h1> 内边框 </h1>		
	<hr>		
	<body>	
		<div class="outside">
			<div class="inside">内容</div>
		</div>	
	</body>		
</html>

JavaWeb_CSS（10）_div 和 span_边框_JavaWeb_04

四、div 的外边框 margin

示例一

<!DOCTYPE html>
<html>	
	<head>		
		<meta charset="UTF-8">			
		<title> www.weiyuxuan.com </title>			
		<style type="text/css">
			span
			{
				font-size: 12px;
				font-family: Arail;
				padding: 10px;
				background-color: orange;
				border: 1px solid black;
			}			
			.right
			{
				background-color: orange;
				margin-right: 10px;
			} 
			.left
			{
				background-color: orange;
				margin-left: 10px;
			} 
		</style>					
	</head>		
	<h1> 外边框 </h1>		
	<hr>		
	<body>		
		<span class="right">元素1</span>
		<span class="left">元素2</span>		
	</body>		
</html>

示例二

<!DOCTYPE html>
<html>	
	<head>		
		<meta charset="UTF-8">			
		<title> www.weiyuxuan.com </title>			
		<style type="text/css">
			div
			{
				font-size: 12px;
				font-family: Arial;
				padding: 10px;
				background-color: yellow;
				border: 1px solid black;
			}			
			.inside
			{
				background-color: orange;
				margin: 10px 30px 10px 30px;
			}
		</style>					
	</head>	
	<h1> 外边框 </h1>		
	<hr>		
	<body>		
		<div class="outside">
			<div class="inside">内部 div </div>
		</div>		
	</body>		
</html>