从0到1开启web前端学习之旅五

欢迎回到我们的Coding Time！！！ 本篇博客将为你把所有的CSS内容全部讲解完毕，上篇文章基本上已经把一般的内容讲完，这节课我们主要从CSS中更深入的部分开始讲起，那就是盒子模型，什么是盒子模型呢，听起来感觉优点怪怪的但是实际上他的命名是有他的意图的，之间我们讲过很多个标签，每个标签都有他独特的功能，有一些还附带样式。当你在一个html页面中写完众多标签之后通过浏览器打开该网页，你会发现每个标签都是按照特定的规则去显示出来的，有的独占一行，有的根据自身内容决定它所占据的空间。

其实当一个网页被浏览器打开的时候，浏览器会解释执行该网页，还有一步就是要把该网页渲染(换句俗话就是‘画’)出来，既然是要画出来！那么每个标签应该怎么画，位置在哪里，画多大，该标签距离其他标签的位置如何有无特殊要求，这个都需要经过精密的计算。

 

既然知道了这个过程，那么不得引出上述过程中很重要的一块理论知识，就是盒子模型，其实盒子模型就是用来描述一个标签的大小和它周边的标签应该和它保持多少距离的一个描述。

 

这里我先拿一个易碎物品的包装盒子举例子，如下图：

 

 

一个这样盒子我们把它分成几个区域 首先是易碎物品->内容区（content），充气塑料袋->内边距区（padding ），纸壳子->边框（border）。也就收一个盒子分成3个部分content、padding、border。但是对于一个盒子模型来说还需要再加上一个外边距区（margin），到此为止一个盒子模型的全体组成部分就已经水落石出了。

 

我们写的所有的标签，最终被渲染的浏览器上的时候其实都是一个一个的盒子模型，而且这个盒子模型我们是可以通过浏览器的调试工具来进行查看的。如下图：

 

 

浏览器效果：

 

调试工具效果：

 

上图左侧是该标签的样式代码，上图右侧就是该标签的盒子模型。

 

 

从我们的测试中可以看出盒子模型的的确确是真是存在的！ 当然网页渲染是一个和复杂的过程在后期的更博里有机会的画我们会深入进行讲解，本系列更博主要目的还是带领大家把所有的web前端HTML,CSS基础知识都搞定，达到能所见就能做出的效果。那后学内容请看视频讲解。

 

注！本期视频看完后我们会更新重要的课程，推出淘宝网页制作的免费全套课程，希望届时大家能把所有的前期基础知识点全部看完。坚持初心，方得始终！

 

http://v.youku.com/v_show/id_XMTYzMjQ3MDU5Ng==.html?from=s1.8-1-1.2

http://v.youku.com/v_show/id_XMTkyOTQyNTQ5Ng==.html?from=s1.8-1-1.2

http://v.youku.com/v_show/id_XMTYzMjc2MzM5Mg==.html?from=s1.8-1-1.2

http://v.youku.com/v_show/id_XMTkyOTcxNjg3Ng==.html?from=s1.8-1-1.2