div + css (一)盒子模型_w3c盒子模型中，位置最高的是（）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43439782/article/details/87804983

本文详细介绍了W3C盒子模型的基本概念，包括高度、宽度、内边距、外边距和边框的CSS属性设置。并通过具体示例展示了如何在不同浏览器中实现盒子模型的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

W3C盒子模型

声明盒子模型时用到的css属性：
height width margin padding border
padding: 10px 20px 30px; 上10px, 左右20px，下30px

<style>
	.box{
	border：1px solid blue；
	padding：10px 20px 25px 10px；//上 右 下 左
	margin ： 10px；
	height：300px；
	width：300px；
	}
</style>
<body>
<div class="box"></div>
</body>

注意：在盒子模型时，如果有height 和 width时，必须考虑兼容性，尤其是在有border 和padding 和margin，因为ie浏览器是和其它浏览器是不一样的，如height定义值，ie浏览器解析的是用height-border-padding后剩下的为box的内容实际height（IE盒子模型），而非IE如火狐浏览器，height定义值（如在style定义的）既为盒子的内容height，如果需要浏览器做兼容，有两种解决方式

对height 和weight 写两次，计算两次height值，对非IE的加!important标识，因为该标识具有最高优先级，写法如下
文档的头部需要使用 <!DOCTYPE html>声明
<style>
	.box{
	border：1px solid blue；
	padding：10px 20px 25px 10px；//上 右 下 左
	margin ： 10px；
	height：263px !important；//300-1-1-10-25
	height：300px；
	width: 268px !important;//300-1-1-20-10 
	width：300px；
	}
</style>
<body>
<div class="box"></div>
</body>
<!DOCTYPE html>
<style>
	.box{
	border：1px solid blue；
	padding：10px 20px 25px 10px；//上 右 下 左
	margin ： 10px；
	height：300px；
	width：300px；
	}
</style>
<body>
<div class="box"></div>
</body>