CSS之盒子模型

最新推荐文章于 2025-04-24 09:15:00 发布

原创最新推荐文章于 2025-04-24 09:15:00 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS盒模型的概念及其组成部分，包括边框(border)、内边距(padding)、外边距(margin)等核心属性，并提供了丰富的示例帮助读者更好地理解和运用盒模型。

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

如果将html元素看做盒子，那么在布局设计时，只需要将每个元素代表的盒子进行整体布局，这样使得布局样式更加规范。CSS盒模型本质上是一个盒子，封装周围的html元素，包括：边距，边框，填充和实际内容。如图所示，就是盒子模型的示意图，文章主要通过边框、外边距、内边距等方面的内容来介绍盒子模型。

1.border

border是指边框的意思。它有四个方位：top、bottom、left、right；主要有三大属性：border-width、border-style、border-color;对应每个方位的属性则是(以top为例):border-top-width、border-top-style、border-top-color。针对border-width可以填写像素单位px，或者使用三个关键词:thick、medium、thin；border-style则主要有dotted(点线)、dashed(虚线)、solid(实线)、double(两个边框)等等;border-color则可以取常见的颜色。

以下通过示例来了解border的特点：

<html>
 <head>
  <style type="text/css">

	div {
		border-width: 10px;
		border-style: dotted;
		border-color:blue;
	}
	#div1{
		border-width:thick;
		border-style:double;
		border-color:red;
	}
	.div2{
		border:10px dashed gray;
	}
	#div3{
		border-top:10px dashed gray;
		border-bottom:5px dotted pink;
		border-left:15px double red;
		border-right:10px solid green;
	}
	
  </style>
 </head>
 <body>

<div >border三个元素分别标注使用示例</div>
<div id="div1" >border三个元素分别标注使用示例</div>
<div class="div2">border三个元素统一标注使用示例</div>
<div id="div3">border四个方位分开标注使用示例</div>
 </body>
</html>

查看效果：

由于布局不太好，利用选择器的优先级将div标签选择器代码更改如下：

div {
		height:100px;
		width:500px;
		border-width: 10px;
		border-style: dotted;
		border-color:blue;
	}

得到效过如下：

2.padding

padding是指内边距，即内容内容块与border的距离，它主要有四个方向：top、bottom、left、right，因此有可以设置四个方向的内边距:padding-top、padding-bottom、padding-left、padding-right四个方向；或者统一设置padding。以下padding使用示例：

<html>
 <head>
  <style type="text/css">
	div {
		padding:50px;	
	}
	#div1{
		padding-top:20px;
		padding-bottom:20px;
		padding-left:10px;
		padding-right:10px;
		
	}
  </style>
 </head>
 <body>

<div >padding统一标注使用示例</div>
<div  id="div1">padding四个方向分开标注使用示例</div>

 </body>
</html>

效过如图：

3.margin

margin主要是指外边距，margin的使用与padding类似。直接使用示例说明：

<html>
 <head>
  <style type="text/css">
	div {
		margin:50px 50px 60px 70px;	
		border:10px double red;
	}
	#div1{
		margin-top:20px;
		margin-bottom:20px;
		margin-left:10px;
		margin-right:10px;
		border:10px double red;
		
	}
  </style>
 </head>
 <body>

<div >margin统一标注使用示例</div>
<hr color="black"/>
<div  id="div1">margin四个方向分开标注使用示例</div>

 </body>
</html>

其中以上将两个盒子模型分开，使用了一条黑线分开，外边距就是边框距离整个页面边角的距离。

4.综合使用盒子模型

综合使用盒子模型，就是设置相关的属性，并且添加内容，同时还涉及了之前学过的选择器的一些内容，几个知识点混合一起。

<html>
 <head>
  <style type="text/css">
	div {
		border:10px double green;
		padding:20px 20px 30px 30px;
		margin:50px 50px 60px 70px;	
		height:200px;
		weight:50px;
		background-color:pink;

	}
	p.word{
		color:blue;
		font-family:Serif;
		font-size:35px;
		font-style:oblique;
		font-weight:10px;
	}
	#font{
		font-size:18px;
		color:red;

	}
  </style>
 </head>
 <body>

<div id="font"><center color="red"><p class="word">盒子模型综合使用</p></center><br/>网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。</div>


 </body>
</html>

效果如图：