CSS 盒子模型

最新推荐文章于 2024-10-11 14:23:30 发布

豆豆_Q

最新推荐文章于 2024-10-11 14:23:30 发布

阅读量305

点赞数

分类专栏： CSS 文章标签： css 盒子模型

本文链接：https://blog.csdn.net/Homing_qu/article/details/62037503

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS盒子模型

CSS盒子模型是非常重要的概念，理解了盒子模型才能更好的进行排版；

1、概念:HTML中的任何元素都可以看作为盒子，规定了元素框处理元素内容、内边距、外边距和边框的方式；

2、盒子模型分类

a) 标准盒子模型

从上图可以看出:标准盒子模型包括了border、padding、margin、content，其中content只为内容本身；

b)IE盒子模型

从上图可以看出:IE盒子模型包括了border、padding、margin、content，但是content与标准盒子模型不同，包括了border、padding；

<html>
	<head>
		<title>盒子模式</title>
		<meta content="text/html" http-equiv="content-type" charset="UTF-8">
		
		<style type="text/css">
			*{margin:0}
			#container1,#container2{
				width:200px;
				height:200px;
				
				background-color:#cccccc;
				padding-top:150px;
				padding-left:150px;
				
				border:20px solid blue; /*边框：大小 实线 颜色*/
				/*border-width:20px;
				border-style:solid;
				border-color:blue;*/
				
				margin-top:20px;
				margin-left:20px;
			}
		</style>
	</head>
	<body>
		<div id="container1">元素1</div>
		<div id="container2">元素2</div>
	</body>
</html>