HTML的两种盒子模型

一、引入

  • 在网站的制作中,一个复杂的页面,被划分为一个一个的小块。
  • 通过这种划分,把网站的开发过程化整为零、化繁为简,以达到减少开发工作,减轻维护压力的目的。
  • 在网页中,把这种划分后的小块形象的看成一个个的盒子。只有理解了盒子模型才能更好的排版,更好的编写网站界面

二、盒子的布局

把HTML中的元素看做是一个矩形的盒子(盛装内容的的容器),每个容器都是由元素内容、内边距(padding)、边框(border)和外边距(margin)组成。
HTML盒子

ps:浏览器默认的margin值为8px!


三、两种盒子模型

  • w3c的盒子模型: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding ) 此属性表现为标准模式下的盒模型。
    这里写图片描述

  • IE的盒子模型: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width ) 。
    这里写图片描述

ps:一般都使用标准的w3c盒子模型,如果需要使用IE的盒子模型,可以使用box-sizing属性进行修改。

  • w3c的盒子模型
.test1{
	box-sizing:content-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}
  • IE的盒子模型
.test1{
	box-sizing:border-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}

四、总结

W3C盒模型是与IE盒模型的区别就是对宽高的定义不同。
W3C认为:宽高是内容区的宽度(只包含节点显示的具体内容)
IE认为:宽高是显示效果的实际效果(包含节点的全部内容)

  • 8
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,下面是 HTML 盒子模型代码以及两种标准的盒模型的图解: ```html <!DOCTYPE html> <html> <head> <title>盒子模型示例</title> <style> /* 标准盒模型 */ .standard { width: 200px; height: 100px; padding: 20px; border: 1px solid #000; margin: 10px; } /* IE 盒模型 */ .ie { width: 200px; height: 100px; padding: 20px; border: 1px solid #000; margin: 10px; box-sizing: border-box; /* 设置为 IE 盒模型 */ } </style> </head> <body> <h2>标准盒模型</h2> <div class="standard">这是一个标准盒模型</div> <h2>IE 盒模型</h2> <div class="ie">这是一个 IE 盒模型</div> </body> </html> ``` 标准盒模型和 IE 盒模型的图解分别如下: 标准盒模型: ``` +-------------+ | content | | | +-------------+ | padding | | | +-------------+ | border | | | +-------------+ | margin | | | +-------------+ ``` IE 盒模型: ``` +-------------+ | border | | | +-------------+ | padding | | | +-------------+ | content | | | +-------------+ | margin | | | +-------------+ ``` 两种盒模型的区别在于它们计算元素的宽度和高度的方式不同。标准盒模型的宽度和高度只包括内容区域,而 IE 盒模型的宽度和高度包括了内容区域、内边距和边框。在标准盒模型下,如果想要增加元素的宽度和高度,需要同时增加内边距和边框的宽度;而在 IE 盒模型下,增加元素的宽度和高度只需要改变内容区域的大小即可,内边距和边框的宽度不会影响整个元素的大小。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值