阅读 178

06.CSS盒子模型

06.CSS盒子模型

一.理解css盒子模型

HTML中的每一个元素都可以看做是一个盒子

image-20210504214355636

HTML中的每一个元素都可以看做是一个盒子,如右下图所示,可以具备这4个属性

image-20210504215308957

在浏览器中检查元素可得到下图:

image-20210504215444086

二.标准盒子模型

image-20210505201724615

从上图可以看到标准,W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

w3c中的盒子模型的宽:包括margin+border+padding+width;

width:margin2+border2+padding*2+width;

height:margin2+border2+padding*2+height;

三.IE盒子模型(怪异盒子模型)

IE盒子模型

四.CSS盒子和IE盒子区别

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

网页中的盒子模型;我们常常要控制盒子模型的宽度width:

w3c中的盒子模型的宽:包括margin+border+padding+width;

width:margin2+border2+padding*2+width;

height:margin2+border2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性;

例如一个盒子模型如下:margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释,那么这个盒子模型占用的

宽度为:202+102+10*2+200=280px;

高度:202+102+20*2+50=130px;

盒子的实际宽度大小为:102+102+200=240px;

实际高度:102+102+50=90px;

用ie的盒子模型解释 :盒子在网页中占据的大小为202+200=240px; 高:202+50=90px;

盒子的实际大小为:宽度:200px, 高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型

五.box-sizing属性

  • box-sizing用来设置盒子模型中宽高的行为
    • content-box:padding、border都布置在width、height外边
    • border-box:adding、border都布置在width、height里边

5.1 box-sizing: content-box;

image-20210506011237752

  • 元素的实际占用宽度 = border + padding + width
  • 元素的实际占用高度 = border + padding + height

5.2 box-sizing: border-box;

image-20210506011433593

  • 元素的实际占用宽度 = width
  • 元素的实际占用高度 = height

5.3 盒子模型

image-20210506011514903

文章分类
前端
文章标签