CSS-盒模型

最新推荐文章于 2023-05-11 14:26:21 发布

娃娃救葫芦爷

最新推荐文章于 2023-05-11 14:26:21 发布

阅读量511

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS基础

本文链接：https://blog.youkuaiyun.com/cc098818/article/details/99404865

CSS基础专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了CSS盒模型的基本概念，包括边框（border）、内边距（padding）和外边距（margin）。详细讲解了如何设置边框的宽度、颜色和样式，以及如何利用padding和margin调整元素间距。同时，还探讨了盒模型在网页布局中的应用，区分了块级元素和行内元素的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、盒模型基本概念
相框边框 - > border
画和相框边框的距离 -> padding
相框之间的距离 -> margin
在这里插入图片描述

2、边框
border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框</title>
<style type="text/css">
	#outerBox1{
		border-width: 2px;
		border-color: red;
		border-style:solid;
	}
	
	#outerBox2{
		border: thick blue dashed;
	}
	
	#outerBox3{
		border-top: thick blue dashed;
		border-right: 2px red solid;
		border-bottom: thin yellow dotted;
		border-left: 2px red solid;
	}
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>
</html>

运行结果：
在这里插入图片描述
3、内边距
用 padding 设置内边距


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style type="text/css">
	#outerBox1{
		border-width: 2px;
		border-color: red;
		border-style:solid;
		padding: 40px;
	}
	
	#outerBox2{
		border: thick blue dashed;
		padding-top: 20px;
		padding-right: 10px;
		padding-bottom: 5px;
		padding-left: 2px;
	}
	
	#outerBox3{
		border-top: thick blue dashed;
		border-right: 2px red solid;
		border-bottom: thin yellow dotted;
		border-left: 2px red solid;
		padding: 20px 10px 5px 2px;
	}
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>
</html>

运行结果：
在这里插入图片描述
4、外边距
用 margin 设置外边距


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
	#outerBox1{
		border-width: 2px;
		border-color: red;
		border-style:solid;
		padding: 40px;
		margin: 10px;
	}
	
	#outerBox2{
		border: thick blue dashed;
		padding-top: 20px;
		padding-right: 10px;
		padding-bottom: 5px;
		padding-left: 2px;
		
		margin-top: 20px;
		margin-right: 10px;
		margin-bottom: 5px;
		margin-left: 2px;
	}
	
	#outerBox3{
		border-top: thick blue dashed;
		border-right: 2px red solid;
		border-bottom: thin yellow dotted;
		border-left: 2px red solid;
		padding: 20px 10px 5px 2px;
		margin: 20px 10px 5px 2px;
	}
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>
</html>

运行结果：
在这里插入图片描述
5、网页布局与盒模型
块级元素 VS 行内元素
块级元素：以一个块的形式展现，跟同级的兄弟块依次竖直排列，左右撑满，比如

；
行内元素：以普通的一个 DOM 节点展现，跟同级的兄弟元素横向排列，排满后，自动换行，比如；


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块级元素VS行内元素</title>
</head>
<body>
<h1>块级元素</h1>
<div>块1</div>
<div>块2</div>
<div>块3</div>
<h1>行内元素</h1>
<span>块1</span>
<span>块2</span>
<span>块3</span>
</body>
</html>

运行结果：
在这里插入图片描述