本文主要讲解“什么是html的盒子模型”。感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习“html的盒子模型是什么”！
有两种html框模型：1。w3c box模型，其填充和边框不包含在定义的宽度和高度中；2.IE的盒子模型，其填充和边框包含在定义的宽度和高度中。
本教程操作环境：windows7系统，HTML5第5版，戴尔G3电脑。
00-1010在网站的制作中，一个复杂的页面被一个个分割成小块。
通过这种划分，可以将网站的开发过程拆分成几个部分，进行简化，从而减少开发工作，减轻维护压力。
在网页中，分割的小块被一个接一个地视为框。只有了解盒子模型，才能更好的排版和编写网站界面。
00-1010将HTML中的元素视为一个矩形框(内容的容器)，每个容器由元素内容、填充、边框和边距组成。
Ps:浏览器默认边距值是8px！
一、引入
w3c box模型：填充和边框不包括在定义的宽度和高度中。对象的实际宽度等于设置的宽度值以及边框和填充的总和，即(元素宽度=宽度边框填充)此属性表示标准模式下的盒子模型。
IE的盒子模型：填充和边框包含在定义的宽度和高度中。对象的实际宽度等于设置的宽度值，即使定义了边框和填充，也不会改变对象的实际宽度，即(Element width=width)。
Ps:一般使用标准的w3c box模型。如果需要使用IE的盒子模型，可以使用盒子大小属性进行修改。
W3c的盒子模型
. test1{
盒子大小：内容盒；
宽度width:200px
padding:10px
border:15pxsolid # eee
}IE的盒子模型
. test1{
盒子大小：边框盒子；
宽度width:200px
padding:10px
border:15pxsolid # eee
}至此，相信大家对“html的盒子模型有哪些”有了更深的理解，下面就来做一些实际的工作吧！这是网站。更多相关内容，可以去相关渠道查询，关注我们，继续学习！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/156539.html