精华内容
下载资源
问答
  • 两种盒子模型

    2019-08-12 14:49:59
    一、w3c盒子模型 又称内容盒子或传统盒子,是绝大多数浏览器默认的盒子模型,可以设box-sizing:content-box;使一个盒子变为w3c盒子。width和height指的是元素中内容的宽高。如下图: 二、IE盒子模型 可以通过设置...

    盒模型由外而内包括:边距(margin、padding)、边框(border)、填充(padding)、内容(content)

    一、w3c盒子模型

    又称内容盒子或传统盒子,是绝大多数浏览器默认的盒子模型,可以设box-sizing:content-box;使一个盒子变为w3c盒子。width和height指的是元素中内容的宽高。如下图:
    在这里插入图片描述

    二、IE盒子模型

    可以通过设置box-sizing:border-box;使一个盒子变为IE盒子模型。其中width=边框以内所有元素的宽,即width=border+padding+内容区域。如下图:在这里插入图片描述

    展开全文
  • 网页里有两种盒子模型标准一是W3C盒子模型;二是IE盒子模型(IE浏览器默认的模型)下面就用公式来区分这两种不同的盒子模型
  • CSS两种盒子模型

    2020-07-07 21:48:39
    CSS的两种盒子模型 两种常用的盒子模型 主要的区别是内容content width和height分别是由什么组成的 1.W3C盒子模型 在标准的盒子模型中,width指content部分的宽度 在CSS中对应 box-sizing: content-box 是W3C盒子...

    CSS的两种盒子模型

    两种常用的盒子模型

    主要的区别是内容content width和height分别是由什么组成的

    1.W3C盒子模型

    在标准的盒子模型中,width指content部分的宽度

    在CSS中对应 box-sizing: content-box 是W3C盒子模型

    在这里插入图片描述

    2.IE盒子模型

    在IE盒子模型中,width表示content+padding+border这三个部分的宽度

    在CSS中对应 box-sizing: border-box 是IE盒子模型

    在这里插入图片描述

    展开全文
  • Div+CSS两种盒子模型

    2017-04-16 11:22:28
    网页里有两种盒子模型标准一是W3C盒子模型;二是IE盒子模型(IE浏览器默认的模型)下面就用公式来区分这两种不同的盒子模型 网页盒子模型存在两种:  1:标准W3C盒子模型; 2:IE盒子模型(IE浏览...
    网页里有两种盒子模型标准一是W3C盒子模型;二是IE盒子模型(IE浏览器默认的模型)下面就用公式来区分这两种不同的盒子模型
    网页盒子模型存在两种: 

    1:标准W3C盒子模型; 2:IE盒子模型(IE浏览器默认的模型)。 

    在两种不同模型网页里,定义了相同CSS属性的元素显示效果是不一样的,下面就用计算公式来区分这两种不同的盒子模型。 

    1:标准W3C盒子模型 

    宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right) 
    高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom) 
     
    2: IE盒子模型 

    宽=width+(border-left)+(border-right) 
    高=height+(border-top)+(border-bottom) 
     

    该模型是IE浏览器默认的盒子模型,当然也可以对其进行更改

    虽然IE的盒子模型比较符合我们的思考逻辑,但是为了提高我们浏览器的兼容性,还是建议使用标准的盒子模型。




    展开全文
  • css的两种盒子模型

    2016-03-31 10:26:00
    css的两种盒子模型:W3C标准盒子模型、IE盒子模型 两者的相同之处:都包含margin、border、padding、content 两者的不同之处:W3C标准盒子模型的content部分不包含其他部分;IE盒子模型的content部分包含border...

          css的两种盒子模型:W3C标准盒子模型、IE盒子模型

          两者的相同之处:都包含margin、border、padding、content

          两者的不同之处:W3C标准盒子模型的content部分不包含其他部分;IE盒子模型的content部分包含border、padding部分。

         举例说明:一个盒子模型margin为10px,border为2px,padding为5px,content为100px,高为50px。

         1.W3C标准盒子模型

            盒子需要占据的位置:宽10*2+2*2+5*2+100=134px、高10*2+2*2+5*2+50=84px;盒子的实际大小:宽2*2+5*2+100=114px、高2*2+5*2+50=64px。

         2.IE盒子模型

           盒子需要占据的位置:宽10*2+100=110px、高10*2+50=60px;盒子的实际大小:宽100px、高50px、

        关于浏览器显示的是哪种盒子模型

       一般情况下,在加了doctype声明的情况下浏览器显示的都是W3C标准盒子模型,如果没有加doctype声明,那么不同的浏览器会根据自己的解释去显示盒子模型,IE浏览器就可能会显示IE盒子模型。

     

    转载于:https://www.cnblogs.com/haimengqingyuan/p/5340146.html

    展开全文
  • 在辨析两种盒子模型之前。先简单说明一下什么叫盒子模型。 原理: 先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。 这些属性我们...
  • DIV+CSS两种盒子模型

    2013-03-07 16:41:00
    DIV+CSS两种盒子模型 利用CSS来布局页面布局DIV有点逻辑性!重点理解盒子模型,标准流和非标准流的区别,还有定位原理!把这3个攻破了,就非常简单了!多实践多参考!最后就是兼容问题了,在实践中自然就有经验了!这些...
  • HTML的两种盒子模型

    2020-12-03 22:36:30
    一、引入 在网站的制作中,一个复杂的页面,被划分为一个一个的小块。 通过这种划分,把网站的开发过程化整为零、化繁为简,以达到减少开发工作,减轻维护压力的目的。 在网页中,把这种划分后的小块...三、两种盒子
  • 盒子模型两种,一种为W3C盒子,一种为IE盒子。
  • 两种盒子模型的理解

    2020-05-06 21:17:30
    一.先用代码和效果图来说明: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...css盒模型</title> </head> <style type="text/css"> .content { ...
  • 网页盒子模型存在两种:  1:标准W3C盒子模型; 2:IE盒子模型(IE浏览器默认的模型)。  在两种不同模型网页里,定义了相同CSS属性的元素显示效果是不一样的,下面就用公式来区分这两种不同的盒子模型...
  • css 两种盒子模型

    2017-05-16 20:07:45
    http://www.360doc.com/content/14/1010/01/18139076_415672404.shtml
  • CSS3中新增了盒子模型box-sizing,分为border-box和content-box两种;      (一) 对于border-box,padding和border占用的是盒子内部的高度与宽度,举个例子,如果你建立一个500px*500px的盒子,那么你再设置...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,079
精华内容 431
关键字:

两种盒子模型