什么是盒子模型？
时间：2023-03-29 12:54:42
HTML
什么是盒子模型？盒模型由4部分组成，即：contentinnermarginoutermargin（一般不计入盒的实际宽度）border盒模型有两种类型：标准盒模型和怪异盒模型标准盒模型=内容（content）+border(边框)+padding(内边距)weirdboxmodel=content(content)(已经包含padding和border)css3可以通过设置box-sizing属性来切换标准或weird盒模型，weirdboxmodel:box-sizing:边框框；标准盒模型：box-sizing:content-box在对文档进行布局（layout）时，浏览器的渲染引擎会使用一种标准的CSS基本盒模型（CSSbasicboxmodel），它将所有元素表示为一个矩形盒（盒子）。一个盒子由四部分组成：content、padding、border、margincontent，也就是实际的内容，显示文字和图片。border，也就是边框，包围元素内容的一行或多行padding，由thickness、style、color三部分组成value不能为负数，受box的background属性影响margin，即外边距，并在元素外部创建额外的空白区域。空白区域通常是指不能放置其他元素的区域。上图是从二维视角观察的一个盒子。我们来看一下立体图：如下代码boxmodel
当我们在浏览器中查看元素时，我们发现元素的大小变成了这是因为，在CSS中，boxmodel可以被分割into:W3CstandardboxmodelIEweirdboxmodel默认情况下，盒子模型是W3Cstandardboxmodelstandardboxmodel标准盒子模型，也就是浏览器默认的盒子模型。看下图标准盒子模型的模型图：从上图可以看出：盒子的总宽度=width+padding+border+margin；盒子的总高度=height+padding+border+margin，即width/height只是内容的高度，不包括padding和border值。所以在上面的问题中，宽度设置为200px，但是由于padding的存在，实际上盒子的宽度是240px。IEWeirdBoxModel再看看IEWeirdBoxModel的模型图：从上图可以看出：盒子的总宽度=width+margin；盒子的总高度=高度+边距；也就是说，宽度/高度包含填充和边框值。CSS中的box-sizing属性定义了引擎应该如何计算一个元素的总宽和总高语法box-sizing:content-box|border-box|inherit:content-box默认值，元素的宽/高notincludepadding,border,与标准盒模型一致border-box元素的width/height包含padding,border,与怪异盒模型一致inherit指定box-sizing属性的值，应该继承自parentelement回到上面的例子，设置box为border-box模型
盒子模型 此时可以发现盒子占用的宽度为200px本文由mdnicemulti发表-平台
