上篇文章总结了块级元素和行内元素
这篇文章总结了有关盒子模型的知识，助于梳理知识
首先，什么是盒子模型我们知道，html文档中，基本上每个元素都可以看作一个盒子，我们称之为盒子模型。
盒子模型的组成盒子模型包含四个重要的部分：content(width、height):盒子内容宽高padding:内边距(填充)border:边框margin:外边距
重点：对于盒子来说，设置的宽高和真实占有宽高是不一样的如图（一般我们以标准盒子模型为主学习）
在标准盒子模型中,我们用css属性中的设置width,height其实是内容content的宽高，如果增加边距和边框将会增加盒子的宽度（也就是说,如果padding,margin,border都为0的话，盒子真实占有宽度和内容宽度是一样的）。在IE盒子模型中,我们设置的width、height指的是盒子真实占有宽高,即如content+border+padding的宽高。
PS：在浏览器，有一些元素有着默认的设置margin,padding,border,这也是我们写css时一般加入*{margin:0;padding:0}重置样式的原因。
注意,盒子模型是立体的，即组成盒子的每个部分有着各自的层次border----->content+padding----->background-image----->background-color----->margin 如下图：
即：第1层：盒子的边框(border)，第2层：元素的内容(content)、内边距(padding)第3层：背景图(background-image)第4层：背景色(background-color)第5层：盒子的外边距(margin)
那么这些层级有什么用呢？通过这些层级显示，我们可以知道优先级的问题：比如同时设置背景图和背景色时，背景图将会在背景色上方显示
原情况（有背景图无背景色）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box { width:400px; height: 200px; margin:100px auto; background-image: url(1.jpg); /*background-color: gray;*/ } </style> </head> <body> <div class="box"> </div> </body> </html>效果图：
没有背景图只有背景色时：
有背景图有背景色时：
背景色被背景图直接覆盖了。
如何查看网页中的元素的盒子具体情况？？此处以chrome浏览器为例，其他浏览器大同小异：使用F12查看网页源代码，选择一个元素，点击右边界面的'Computed'选项卡即可：
参考文章：
CSS盒模型详解（图文教程）
深入理解css盒子模型
CSS学习笔记——盒模型，块级元素和行内元素的区别和特性
转载于:https://www.cnblogs.com/lyxuefeng/p/9152849.html
相关资源：JAVA上百实例源码以及开源项目