JavaWeb_CSS（10）_div 和 span_边框

最新推荐文章于 2024-06-24 11:02:57 发布

魏宇轩

最新推荐文章于 2024-06-24 11:02:57 发布

阅读量1.3k

点赞数 1

分类专栏： CSS（更新完）文章标签： JavaWeb CSS 边框

本文链接：https://blog.csdn.net/qq_36260974/article/details/88410068

版权

CSS（更新完）专栏收录该内容

21 篇文章 3 订阅

订阅专栏

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

一、div 的边框样式

示例

<!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 在布局上都遵守盒子模型

在这里插入图片描述

三、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>

四、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>