模型在一个HTML文档中，每个元素在页面上生成一个框。 因此，HTML页面实际上是由一堆框组成的。 默认情况下，每个框的边框是不可见的，背景是透明的。 每个框由四部分组成:外缘、边框、内缘和内容。 盒子模型的基本含义虽然浏览器不同，但是盒子模型就是由这四部分组成的。 标准盒子模型根据W3C规范，元素内容占用的空间由width属性设置，而内容附近的padding和border值是分开计算的；也就是标准模式下的盒子模型，盒子实际内容的宽度/高度=我们设定的宽度/高度；总框宽/高=宽/高+填充+边框+边距 标准的Box Model即Box Model在这种模式下，浏览器的宽度属性不是内容的宽度，而是内容的宽度、内边距和边框之和；也就是怪异模式下的盒子模型，盒子的(内容)宽度+填充+边框的边框宽度=我们设置的宽度(高度也一样)，盒子的总宽度/高度=宽度/高度+边距=内容区域的宽度/高度+填充+边框+边距。 IE盒子模型总结:标准盒子模型和IE盒子模型的区别在于宽度和高度的范围不同。 CSS3指定了框大小框大小:定义了用户代理应该如何计算一个元素的总宽度和高度。 盒子大小:内容盒；和高度分别应用于元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 框大小:边框-框；为元素设置的宽度和高度决定了元素的边界框。 也就是说，为元素指定的任何内部边距和边框都将在设置的宽度和高度内绘制。 内容的宽度和高度可以通过从设置的宽度和高度中分别减去边框和内边距来获得。 框大小:继承；指定应该从父元素继承框大小属性的值。 也就是说，box-sizing属性可以指定盒子模型的类型，content-box指定盒子模型是W3C(标准盒子模型)，border-box是IE盒子模型(怪异盒子模型)。 框的类型我们在CSS中广泛使用两种“框”——块框和行内框。 这两个框将在页面流和元素之间的关系方面显示不同的行为。 块盒盒子将在内联方向上扩展，并在该方向上占据父容器的所有可用空间，这在大多数情况下意味着盒子将与父容器一样宽，并且每个盒子将换行。宽度和高度属性可以发挥作用。填充、边距和边框会将其余元素从当前框中推开。内嵌框框不会换行。 宽度和高度属性将不起作用。 将应用垂直内边距、外边距和边框，但不会推开处于嵌入状态的剩余框。 将应用水平内边距、外边距和边框，并将推开处于嵌入状态的剩余框。 我们通过设置盒子的显示属性来控制盒子的外部显示类型，比如inline或block 例如:<！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta charset="UTF-8 " >& ltmeta name = " viewport " content = " width =设备宽度，initial-scale=1.0 " >& lttitle & gt文档& lt/title & gt；& ltstyle & gtdiv { height:50px；宽度:100px边框:1px纯黑；边距:1px填充:1px} span { height:100px；/*不起作用*/宽度:100px/*不行*/margin-top:20px；/*不行*/margin-bottom:20px；/*不起作用*/margin-left:10px；/* works */margin-right:10px；/* works */} & ltmeta name = " viewport " content = " width =设备宽度，initial-scale=1.0 " >& lttitle & gt文档& lt/title & gt；& ltstyle & gtdiv { width:30px；高度:30px显示:内嵌-块；背景色:黄色；} div:n-child(1){/*设置边框的宽度、样式和颜色*/ border: 1px纯黑；/*语法:& lt线条宽度& gt| | & lt线条样式& gt| | & ltcolor & gt*/} div:n-child(2){/*仅指定一侧边框*/ border-left: 1px纯黑；/*border:四边宽度样式color */} div:n-child(3){ border-width:1 px 2 px；边框样式:虚线双插图；/*语法:& lt线条样式& gt{1，4 } */} div:n-child(4){/*设置三个边时，左侧为红色，与第二个颜色相同*/border:1px solid；边框颜色:蓝色红色绿色；/*语法:& lt线条样式& gt{1，4 } */} div:n-child(5){/*设置圆角*/ border: 1px纯红；边框-半径:1px 5px 10px 15px/*从左上角开始，顺时针*/} & ltmeta name = " viewport " content = " width =设备宽度，initial-scale=1.0 " >& lttitle & gt文档& lt/title & gt；& ltstyle & gtdiv { display:inline-block；边框:1px纯黑；} div:n-child(2){ padding:30px 20px；} div:n-child(3){ padding-left:30px；} & lt/style & gt；& lt/head & gt；& ltbody & gt& ltdiv & gt没有内部边距