对于标准盒模型和IE盒模型的概述

这篇文章是,对于 标准盒模型 和 IE盒模型 的各自 定义,二者的 差异 性,彼此之间的 转换 方法的一个总结:


  • CSS 中盒模型概念 :

盒子模型组成 :由元素的 内容content),边框border),内边距padding),外边距margin)组成。

  1. 盒子里面的文字,图片等元素就是内容区域(content)。
  2. 盒子的厚度就是盒子的边框(border)。
  3. 盒子内容(content)和边框(border)之间的距离就是内边距(padding)(类似于单元格的 cellpadding 属性)。
  4. 盒子于盒子之间的距离就是外边距(margin)(类似于单元格的 cellspacing 属性)。

CSS 中 width 指的是内容的宽度,而不是盒子的宽度;同样的 height 指的是内容的高度,而不是盒子的高度。 

  • 盒模型的分类 :

盒模型分类 :

  1. 标准(W3C)盒模型 。(box-sizing : content-box;)
  2.  怪异(IE)盒模型 。    (box-sizing : border-box;)
  • 标准盒模型和怪异盒模型的区别 :

标准盒模型 :

  • 盒子 宽度 : 内容宽度(content)。
  • 盒子 高度 : 内容高度(content)。
  • 盒子 实际占有的宽度 :内容宽度 (content)+ 左右(padding) + 左右(boder) + 左右(margin)。
  • 盒子 实际占有的高度 : 内容高度 (content)+ 上下(padding) + 上下border + 上下(margin)。

怪异盒模型 :

  • 盒子 宽度 : 内容宽度(content) + 左右(padding )+ 左右(border)。
  • 盒子 高度 : 内容高度(content) + 上下(padding) + 上下(border)。
  • 盒子 实际占有的宽度 :内容宽度(content) + 左右(padding) + 左右(boder)+ 左右(margin)。
  • 盒子 实际占有的高度 : 内容高度(content) + 上下(padding) + 上下(border) + 上下(margin)。

总结 :二者盒子 实际占有的宽高 一样CSS中显示的宽高 不一样

  • 盒模型之间的转换 :

元素可以通过 CSS 中的 box-sizing 样式属性来转换盒子模型。

  1. 标准盒模型 : box-sizing : content-box;
  2. IE 盒模型 :    box-sizing : border-box;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值