w3c盒子和ie盒子介绍以及区别

1.盒子模型
标准模型由四部分组成:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。

W3C标准盒子模型box-sizing : content-box
盒子实际内容(content)的width/height=设置的width/height
盒子总宽度/高度=width/height+padding+border+margin

IE盒子模型box-sizing : border-box
盒子的(content)宽度=设置的width - 内边距padding - 边框border宽度
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin

模型区分:
标准表型指的是设置box-sizing为content-box的盒子模型,一般width,height指的是content的宽高。IE盒模型指的是box-sizing为border-box的盒子。宽高的计算是content+padding+border;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值