美文网首页
两种盒模型的介绍

两种盒模型的介绍

作者: 前端咸蛋黄 | 来源:发表于2019-04-22 13:13 被阅读0次

一、概述

CSS有两种盒模型:W3C盒模型(标准盒模型)和IE盒模型,这两种盒模型,主要区别是在解释元素的width和height属性上。

二、W3C盒模型

W3C盒模型认为,元素的with和height属性仅仅指content area。就是元素的width不包括padding,border,margin。

width / height = content

三、IE盒模型

IE盒模型认为,元素的with和height属性由content area + padding + border组成。

width / height = content + padding + border

四、box-sizing

CSS3新增了box-sizing属性,定义了 user agent 应该如何计算一个元素的总宽度和总高度。

  • content-box是默认值,代表W3C盒模型
  • border-box代表IE盒模型

相关文章

  • 两种盒模型的介绍

    一、概述 CSS有两种盒模型:W3C盒模型(标准盒模型)和IE盒模型,这两种盒模型,主要区别是在解释元素的widt...

  • css盒模型

    什么是盒模型? 目前盒模型分为两种,分别是符合w3c标准的盒模型与IE盒模型,这两种盒模型在网页布局中是有差异的,...

  • 前端面试之浏览器/HTML/CSS问题

    盒模型 盒模型主要两种,标准盒模型和怪异和模型 标准盒模型:width指content部分的宽度 怪异盒模型:wi...

  • 前端面试之浏览器/HTML/CSS问题

    盒模型 盒模型主要两种,标准盒模型和怪异和模型 标准盒模型:width指content部分的宽度 怪异盒模型:wi...

  • CSS盒模型

    盒模型有两种,一种为标准盒模型,又称为W3C盒模型;另一种为怪异盒模型,又称为IE盒模型。其区别在于两种盒模型的c...

  • 盒模型

    盒模型 盒模型,可以简单解释为:盒模型用来描述元素所占据的空间。有两种盒模型:W3C盒模型(标准盒模型)和IE盒模...

  • 两种Box Model(盒模型)的理解、区别以及注意事项

    盒模型,可以简单解释为:盒模型用来描述元素�所占据的空间。 有两种盒模型:W3C盒模型(标准盒模型)和IE盒模型这...

  • 盒模型

    主要有两种盒模型: IE盒模型和标准盒模型。 CSS3的box-sizing可以定义使用哪种盒模型。 IE盒模型的...

  • Css盒模型以及Bfc的应用场景

    CSS盒模型: 一 基本概念: 分为标准模型+IE模型。 二 标准盒模型和IE盒模型的区别。CSS如何设置这两种盒...

  • css相关——盒模型、弹性盒

    盒模型(box-sizing属性) 盒模型尺寸基准有两种,分别是默认的content-box(标准盒模型)(默认)...

网友评论

      本文标题:两种盒模型的介绍

      本文链接:https://www.haomeiwen.com/subject/xrjygqtx.html