第5篇：盒子模型（CSS）

最新推荐文章于 2024-04-28 16:04:57 发布

HaanLen

最新推荐文章于 2024-04-28 16:04:57 发布

阅读量157

点赞数

分类专栏： CSS/CSS3

本文链接：https://blog.csdn.net/weixin_40119412/article/details/103599427

版权

CSS/CSS3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

盒子模型

盒子模型组成部分：content（内容），border（边框），padding（内边距），margin（外边距）

content由width和height控制

content的上下左右同时存在边框、内边距和外边距属性

一个盒子实际在页面上占据懂得空间是由“内容+内间距+外边距+边框”组成的。

通过设定盒子的border，padding和margin来调节盒子的位置及大小。

盒子的边框（border）设置

盒子边框border包围了盒子的内边距和内容，形成了盒子的边界。border会占据空间，所以在排版计算时要考虑border的影响。

border的属性：颜色（color），宽度（width），样式（style）

边框属性在css代码中设置的几种形式

在一条css声明中同时设置边框的宽度、颜色和样式

在一条css声明中只设置四条边框的某个属性

在一条css声明中只设置一条边框的某个属性

盒子的内边距（padding）设置

盒子padding定义了边框和内容之间的空白区域，该区域称为盒子的内边距

盒子的外边距（margin）设置

盒子margin定义了页面元素和元素之间的空白区域，该空白区域称为盒子的外边距。

盒子内容大小设置

盒子内容的大小分别使用width（宽度）和height（高度）两个属性来设置。

盒子占位大小=内容+内边距+边框+外边距。

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			#aa{
				margin-top:40px;
				margin-left: 30px;
				border-top: 3px dotted firebrick;
				border-left: 2px dashed forestgreen;
				border-right: 2px dashed forestgreen;
				border-bottom: 3px double #BC8F8F;
				padding: 0px;
			}
			#bb{
				margin: 40px;
				border-top: 3px groove firebrick;
				border-left: 2px ridge forestgreen;
				border-right: 2px inset forestgreen;
				border-bottom: 1px outset #BC8F8F;
				padding: 20px;
			}
		</style>
	</head>
	<body>		
		<img id="aa" src="../img/bg.JPG"  width="400" height="200"/>		
		<br />		
		<img id="bb" src="../img/bg.JPG"  width="400" height="200"/>		
	</body>
</html>

HaanLen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第5篇：盒子模型（CSS）

盒子模型盒子模型组成部分：content（内容），border（边框），padding（内边距），margin（外边距）content由width和height控制content的上下左右同时存在边框、内边距和外边距属性一个盒子实际在页面上占据懂得空间是由“内容+内间距+外边距+边框”组成的。通过设定盒子的border，padding和margin来调节盒子的位置及大小。盒...
复制链接

扫一扫

专栏目录