打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
HTML的两种盒子模型

一、引入

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

二、盒子的布局

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

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;}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • IE的盒子模型
.test1{	box-sizing:border-box;	width:200px;	padding:10px;	border:15px solid #eee;}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

四、总结

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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
CSS 盒子模型 | 菜鸟教程
标准盒模型和怪异(ie)盒模型的对比
css经典布局
http://www.jb51.net/css/12199.html
深入理解CSS盒子模型(2)
了解CSS盒状模型 设计更佳网页
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服