精华内容
下载资源
问答
  • 盒模型分为两种: 第一种是W3c标准的盒子模型(标准盒模型) 、第二种IE标准的盒子模型(怪异盒模型) 。 标准盒模型怪异盒模型的表现效果的区别之处: 标准盒模型中 width 指的是内容区域 content 的宽度,height...

    盒模型: 可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。
    盒模型分为两种: 第一种是W3c标准的盒子模型(标准盒模型) 、第二种IE标准的盒子模型(怪异盒模型)

    标准盒模型与怪异盒模型的表现效果的区别之处:

    标准盒模型中 width 指的是内容区域 content 的宽度height指的是内容区域content的高度。 padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding )
    在这里插入图片描述
    怪异盒模型中的 width指的是内容、边框、内边距总的宽度(content + border + padding)height指的是内容、边框、内边距总的高度。 padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )。
    在这里插入图片描述
    如何触发两种盒模型:

    如果是定义了完整的doctype的标准文档类型,无论是哪种模型情况,最终都会触发标准模式,如果doctype协议缺失,会由浏览器自己界定,在IE浏览器中IE9以下(IE6.IE7.IE8)的版本触发怪异模式,其他浏览器中会默认为W3c标准模式。

    除此之外,我们还可以通过属性box-sizing(作用:设置或检索对象的盒模型组成模式。)来设置盒子模型的解析模式
    属性box-sizing有三个属性值:
    1、content-box: 默认值,border和padding不算到width范围内,可以理解为是W3c的标准模型。【当设置为box-sizing:content-box时,将采用标准模式解析计算(默认模式)】
    2、border-box:border和padding划归到width范围内,可以理解为是IE的怪异盒模型。【当设置为box-sizing:border-box时,将采用怪异模式解析计算】
    3、padding-box:将padding算入width范围

    展开全文
  • 标准盒子模型和怪异盒子模型 标准盒子模型: 当元素设置宽高后,再给元素设置padding和border后,元素的尺寸会变大,如果不希望元素的尺寸变大,要相应从content区域手动减去padding和border撑开的大小 怪异盒子模型...

    标准盒子模型和怪异盒子模型

    标准盒子模型:

            当元素设置宽高后,再给元素设置padding和border后,元素的尺寸会变大,如果不希望元素的尺寸变大,要相应从content区域手动减去padding和border撑开的大小

    怪异盒子模型(内减模式):

            当元素设置宽高后,再给元素设置padding和border后,元素的尺寸不会变大,会自动从content区域减去padding和border撑开的大小,盒子的尺寸不变


    注意: 使用怪异盒子模型时,必须设置固定的宽高才能实现内减模式

     

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			/*
    			 标准盒子模型: content+padding+border+margin 当元素设置宽高后,再给元素设置
    			 padding和border后,元素的尺寸会变大,如果不希望元素的尺寸变大,要相应从content
    			 区域手动减去padding和border撑开的大小
    			 怪异盒子模型(内减模式):content+padding+border+margin 当元素设置宽高后,
    			 再给元素设置
    			 padding和border后,元素的尺寸不会变大,会自动从content区域减去padding和borde
    			 r撑开的大小,盒子的尺寸不变
    			 注意: 使用怪异盒子模型时,必须设置固定的宽高才能实现内减模式
    			 */
    			.one{
    				width: 200px;
    				height: 200px;
    				background-color: pink;
    				padding: 10px;
    				border: 10px solid red;
    				/* 标准盒子模型 (默认值) */
    				box-sizing: content-box;
    			}
    			.two{
    				width: 200px;
    				height: 200px;
    				background-color: pink;
    				padding: 10px;
    				border: 10px solid red;
    				margin-top: 10px ;
    				/* 怪异盒子模型 */
    				box-sizing: border-box;
    			}
    			.three{
    				float:left;
    				background: blue;
    				padding: 10px;
    				margin-top: 10px ;
    				border: 10px solid red;
    				box-sizing: border-box;
    			}
    			.box{
    				
    				width: 200px;
    				height: 200px;
    				
    			}
    		</style>
    	</head>
    	<body>
    		<div class="one"></div>
    		<div class="two"></div>
    		<div class="three">
    			<div class="box"></div>
    		</div>
    	</body>
    </html>
    

    可以看到,此时设置了200px * 200px的标准盒子模型.one盒子大小为240px * 240px,因为算上了边框和内边距的宽度

     

    可以看到,此时设置了200px * 200px的怪异盒子模型.two盒子大小为200px * 200px,当给元素设置padding和border后,content区域会变小,此时content区域大小为160px * 160px,盒子整体的大小不变。

    展开全文
  • 标准盒模型和怪异盒模型的区别 在正式介绍标准盒模型和怪异盒模型之前,我们先来简单介绍一下什么是盒模型。 所谓的盒模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是盛装内容的容器。每个容器都是由内容...

    标准盒模型和怪异盒模型的区别

    在正式介绍标准盒模型和怪异盒模型之前,我们先来简单介绍一下什么是盒模型。

    所谓的盒模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是盛装内容的容器。每个容器都是由内容(content)、内边距(padding)、外边距(margin)和边框(border)组成。

    对于标准盒模型来说,它的width和height定义的是内容(content)的宽高,不包括padding和border,而对于怪异盒模型来说,它的width和height不光包括内容区(content),还包括内边距(padding)和边框(border)

    也就是说

    标准盒模型:

    	标准盒模型的宽=width(content) + padding + border + margin
    	标准盒模型的高=height(height) + padding + border + margin
    

    怪异盒模型:

    	怪异盒模型的宽=width(content+padding+border) + margin
    	怪异和模型的高=height(content+padding+border) + margin
    

    下面通过实例说明一下
    首先,创建一个盒子,并以标准盒模型显示,并定义相关属性如下

    			div{
    				width: 100px;
    				height: 100px;
    				padding: 20px;
    				margin: 30px;
    				background-color: greenyellow;
    				border: solid 10px goldenrod;
    				box-sizing: content-box;
    			}
    

    通过控制台,我们可以清除的看到这个标准盒模型的width和height只包含内容区,并不包含边框和内边距
    在这里插入图片描述
    我们让它以怪异盒模型的方式显示,改变以下属性

    box-sizing: border-box;
    

    再次观察控制台,我们可以发现,它的内容区的大小变成了40px x 40px,我们设置的宽高100px,变成了border + padding +content的总的大小
    在这里插入图片描述
    本片文章到此结束,感谢浏览

    展开全文
  • 标准盒模型和怪异盒模型的比较和应用

    标准盒模型

    标准盒模型
    可以看到,在标准盒模型下,width和height是内容区域,即content的width和height。
    但是盒子的总宽度为,在标准模式下,一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)

    怪异盒模型

    IE盒模型
    而IE盒模型或怪异盒模型显而易见的区别就是,width 和 height 除了content区域外,还包含padding和border。盒子总宽度为一个块的总宽度 = width + margin(左右) (即width已经包含了padding和border值)

    在不同的情况下,我们可以合理的运用不同的盒模型
    只要在文档首部加了doctype声明,即使用了标准盒模型,如果不交,则会由浏览器决定。在ie浏览器中显示“ie盒模型”,在非IE浏览器中显示“标准w3c盒子模型”

    比如当我们使用百分比控制盒子的宽度时,在给盒子加上border,是控制不了盒子的宽度的,如果将盒子设置怪异盒模型,border就已经包含在width里面了,width = 50% ,border = 20px ,怪异盒模型width还是50%,但是如果是标准和模型的话,width是50%,border是20px,总宽度是无法控制的。

    W3C标准盒模型和IE盒模型(怪异盒模型)之间的转换:
    box-sizing:content-box | border-box | inherit;
    值为content-box时,将采用标注盒模型进行解析计算;
    值为border-box时,将采用怪异盒模型进行解析结算;
    值为inherit时,将从父元素来继承box-sizing属性的值;

    展开全文
  • 标准盒模型和怪异盒模型区别在于他们的总宽度的计算公式不一样。 标准盒模型中整个块的总宽度为:width+padding(左右)+border(左右)+margin(左右) IE盒子模型或怪异盒模型中整个块的总宽度为:width+margin...
  • 标准盒模型总宽度 = width + 左右padding + 左右border + 左右margin 标准盒模型总高度 = height + 上下padding + 上下border + 上下margin 怪异盒模型总宽度 = width + 左右margin (width包含了paddingborder) ...
  • 标准盒模型和怪异盒模型 盒子模型众所周知,这里先简单介绍一下。 可以看到,在标准盒模型下,width和height是内容区域即content的width和height。而盒子总宽度为 在标准模式下,一个块的总宽度= width + ...
  • 一、概念 CSS盒模型本质上是一个盒子,封装... CSS盒模型:标准模型 + IE模型 1.1 W3C盒子模型(标准盒模型) 标准盒模型:box-sizing: content-box; ( 浏览器默认设置 ) 1.2 IE盒子模型(怪异盒模型) IE盒子模型:bo...
  • CSS基础之标准盒模型和怪异盒模型

    千次阅读 2020-06-30 18:49:01
    标准盒模型和怪异盒模型:盒子的大小是由于盒子的content,padding,border,margin组成的。 标准盒模型:主要是非IE浏览器。 盒子的总宽度: width = content + padding + border + margin 怪异盒模型:IE浏览...
  • 众所周知,我们常见的两种盒模型,一种是W3C盒模型(标准盒模型),另外一种是IE盒模型(怪异盒模型),很多小伙伴分不清楚这两个到底有什么区别呢 标准盒模型 从图中不难看出,在标准盒模型中 盒子的宽:width= ...
  • 我们今天就来讲讲网页中的盒子模型,盒子模型它分为标准盒子模型和怪异盒子模型。但他们有什么区别呢?怪异盒子它怪异在哪呢?是和孙悟空一样会72变吗?还是… 来首先我们来看看什么是盒子模型 一、什么是盒子模型...
  • 要想了解标准盒模型和怪异盒模型,首先我们得先清楚,什么是盒模型。盒子模型是CSS技术中常用到的一种思维模式,CSS里形象的吧HTML里的所有标签当成一个矩形的盒子,这些盒子都有四个部分组成,分别是内容(content...
  • 标准盒模型和怪异盒模型的区别: 无非就是一些很小的差距,光看别人的文章难理解,自己动手一写就会 1.标准盒模型(box-sizing:content-box//默认属性 ):标准盒模型的高度和宽度是和padding和border分开算的,说简单点:...
  • 标准盒模型和怪异盒模型的区别?

    千次阅读 2020-03-16 13:00:32
    标准盒模型:content(内容区)+padding...标准盒模型和怪异盒模型本质上都是一个盒子,它们的区别就是计算宽度和高度的不同。 标准盒模型是盒子的总宽度=内容区+填充区+边框+外边距,它的内容区是不包含填充区和...
  • 这是一个目录~概述标准盒模型怪异盒模型 概述 标准盒模型:由w3c定义的标准的盒子模型,盒子的宽度为= margin2+padding2+border2+width 怪异盒模型(也称为IE盒模型):在IE浏览器中的盒子模型,盒子的宽度为= margin2 + ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 641
精华内容 256
关键字:

标准盒模型和怪异模型