html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素

目录

概述

在div+css中，了解块级元素和行内元素还是非常有必要的，比如：对行内元素使用width属性就会失效。虽然自己不是做前端的，但是，在项目中，曾经也弄过从前端布局，也吃过这方面的亏。今天，群里有朋友问起这个，就趁着学习一下，也算是查漏补缺吧，虽然，谈不上精通，但是了解，还是很有必要的。

盒子模型

css盒子模型分为两种，一种是遵循w3c标准的标准盒子模型，另外一种就是IE盒子模型。

标准盒子模型

IE盒子模型

通过上面两张图可以看出，两种盒子模型都包括padding，margin，border，content，但是ie盒子模型的content包括border和padding。

一个例子

一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px。

标准盒子模型

盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，

盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；

IE盒子模型

盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，

盒子的实际大小为：宽 200px、高 50px。

选择多了，就要比个哪个好？

当然是“标准 W3C 盒子模型”了。怎么样才算是选