DIV与CSS

最新推荐文章于 2023-09-23 15:51:54 发布

luweifeng1983

最新推荐文章于 2023-09-23 15:51:54 发布

阅读量142

点赞数

分类专栏： HTML 文章标签： CSS HTML

本文链接：https://blog.csdn.net/luweifeng1983/article/details/83852574

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

盒子模型

　　盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制页面中各元素的位置。

１、盒子模型的概念

　　所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置。
　　一个盒子模型由content（内容）、border（边框）、padding（间隙）和margin（间隔）这４个部分组成。

border、padding、margin属性

　　border一般用于分离元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。
　　border主要有３个属性，分别是color（颜色）、 width（粗细）、 style（样式）。

下面示例：

<html>
	<head>
		<title>Test div</title>
		<style type="text/css">
		<!--
		div{
			background-color: #FFFFCC;
			border-color:#000000;
			border-width:6px;
			padding:20px;
			margin:10px;
		}
		-->
		</style>
	</head>
	<body>
	<div style="border-style:double">The border-style of dashed	</div>
	<div style="border-style:groove">The border-style of dashed	</div>
	<div style="border-style:dashed">The border-style of dashed	</div>
	</body>
</html>

效果：