怪异盒模型

最新推荐文章于 2024-10-31 14:03:24 发布

Stirve unremitting

最新推荐文章于 2024-10-31 14:03:24 发布

阅读量86

点赞数

分类专栏：笔记文章标签： css css3 html html5

本文链接：https://blog.csdn.net/weixin_46421045/article/details/105027297

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box1{
				width: 200px;
				height: 200px;
				padding: 10px;
				border:2px solid red;
				margin: 100px;
				background: skyblue;
			}
			.box2{
				width: 200px;
				height: 200px;
				padding: 10px;
				border:2px solid blue;
				margin: 100px;
				box-sizing:border-box;/*怪异盒模型*/
				background: skyblue;
			}
		</style>
	</head>
	<body>
		<!--
			标准盒模型: box-sizing:content-box;
				宽高是独立的
				内边距是独立的,会把元素撑大,
				边框是独立
				注:宽高不包含内边距和边框
				
			怪异盒模型: box-sizing:border-box;
				宽高包含内边距和边框
			
			怪异盒模型触发方式:
				方式一: 丢失<!DOCTYPE html>  在ie678下触发为怪异盒模型
				方式二: 给元素box-sizing:border-box;
		-->
		<div class="box1">怪异盒模型</div>
		<div class="box2">怪异盒模型</div>
	</body>
</html>