005css3盒子模型

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

陀陀吖

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

阅读量103

点赞数

CC 4.0 BY-SA版权

分类专栏： h5c3

本文链接：https://blog.youkuaiyun.com/weixin_40422393/article/details/88937483

h5c3 专栏收录该内容

19 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3盒子模型</title>
	<style>
		.one{
			width: 200px;
			height: 200px;
			background-color: pink;
			padding: 10px;
			border: 10px solid red;      /*css盒子，盒子的大小等于width+padding+border*/  /* 等于box-sizing:cony=content-box;*/
		}

		.two{
			width: 200px;
			height: 200px;
			background-color: pink;
			padding: 10px;
			border: 10px solid red; 
			box-sizing: border-box;    /*css3盒子模型,,盒子大小为width*/
		}

	/*	css3盒子模型有两种:
		1、box-sizing:border-box;    盒子大小等于width
		2、box-sizing:content-box    盒子大小等于width+padding+border   也就是css盒子的默认值*/
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>