47.尚硅谷_HTML&CSS基础_盒子模型的简介.avi原创

是上课，接下来我们来进入我们这个下一个这个知识点，也是比较重要的一个东西，叫做什么呢？诶叫做盒子模型，那这个是我们这个CSS里边最重要一个东西，换句话说，其实我们之前学的东西，你暂时理解的不是很清楚，其实都无所谓，只要你把合作模型理解了，往后东西其实都好办了啊，都好办了，哎好了，盒子模型啊，盒子模型也叫什么呀？也叫框模型啊，叫框模型，哪个框，一个木字旁就那个相框那个那个框啊，木字旁那个框啊，也叫框模型，以后你听到有人说盒子模型或者说和模型，或者说框模型，这都是什么呀？这都是一个意思啊，一个意思，英文叫什么呀？叫做box model啊box model盒子模型啊，盒子模型，那盒子模型是干嘛的呢？我们要先研究一下这什么呀，这个盒子它是什么东西啊，盒子什么东西，那我们来说。

这个盒子CSS在处理网页时，它认为什么呢？每个元素都包含在一个不可见的盒子里，换一句话说，我页面的每一个元素都是一个什么呀，都是一个盒子，那什么盒子呀，哎，都是一个这种什么呀，叫做矩形的盒子啊，矩形的盒子或者长方形或者什么呀，正方形啊，就这么一个矩形的盒子，每个元素都包含在一个矩形的盒子里，那它为什么要把这东西想象成盒子呢？诶，那我们想想他是不是因为爱吃韭菜盒子呀，应该跟这没关系是吧？诶，他也不是韭菜盒子是吧？诶那为什么要想象成盒子呢？那么说网页里边的我们一个最基本的功能就是对网页进行什么呀，进行布局，那什么叫网页进行布局啊，我网页里边举个例子，我网页里边可能有什么呀，哎，可能有这种，哎有这么一个banner，哎，可能下边有一个什么呀，有一个导航条，导航条可能下边我这有一个什么呀。

有一个主要内容，可能有一个内容区，这块可能有一个什么呀，有一个新闻栏，然后底边我可能有一个什么呀，有一个这个底部信息栏，你会发现我网页我是不是要给它分成这么一块一块的呀，那咱们想想，假如说我这个每一块，每一块它的这个形状它都不规则，我们这布局起来好不好布局，诶那我这是一个什么呀，这是一个三角形，这是一个什么呀，这是一个呀圆形，这是一个什么呀，这是一个平行四边形，这是一个什么呀，这是一个这个六边形，那你想想这种网页你要布局起来干嘛了，你是不是很恶心啊，哎，你这几何你还得过硬，不然你这网页你都写不出来对吧？所以干嘛？所以CS干脆咱们别捣乱了干嘛呢？所有的元素，任何一个元素都是一个什么呀，都是一个矩形啊，都是一个盒子，那都是盒子以后的好处就变成什么了，变成了如果我们想对网页布进行布局，就变成什么了，诶摆放盒子。

我想把这个东西摆放到这儿，我就把这个盒子干嘛呀设置到这个位置，我想把这个内容放在这儿，我就把它这个盒子干嘛呀摆放到这个位置啊，所以这是盒子模型的一个好处就是方便我们进行什么呀，布局的啊，就是布局的一定要记住了，所有的元素都是什么呀，都是盒子，比如说我这有什么呀，我这有个P元素，这个P元素是个什么呀？是个盒子，我这有个H1 h1是个什么呀？是个盒子啊，所有的都是盒子。再来看咱们拿一个网页来举例子，你你看这网页，这网页其实你看着这网页还算规整是吧？诶还在规整，那我们说了，实际上这个网页里边就是什么呀，就是一个一个的这种大盒子在套什么呀，小盒子，那怎么看呢？来点开我们这个fire bug，来选中我们这个来查看页面里边的元素，直接往这边找，你看我移到这儿，你发现什么了，它是不是给我圈出一框来啊，这个框就是这个元素整个占的一个位置，你看是不是一个矩形的一块，诶，那这也就是一个盒子，包括这个按。

是不是也个也是一个盒子呀，而且我这个按钮和我这个它实际上放在一个什么呀，是不是放到一个整个的一个大盒子里呀，哎，大盒子里包括往下找这些文章，你看它是不是都在一个矩形框里啊，哎，都在一个矩形框里啊，所以什么叫核模型，也就是说我的每一个元素，实际上它都是一个什么呀，都是一个盒子，哎，页面实际上就是什么呀，一个一个的大盒子去套什么呀，小盒子啊，小盒子好，这是我们说对盒子模型的一个简单的理解啊，想象成盒子，如果把所有元素都想成盒子，那么我们对网页的布局就相当于摆放盒子，我们只需要将什么呀，将相应的盒子摆放到网页中相应的位置，即可完成网页的一个布局，诶，那说到盒子了，那我们现在知道每个元素都是一个盒子了，那盒子它有什么，有什么特点呢？诶，那我们就要结合一下我们这个实际来说，所以你们学每一个东西的时候，一定要注意不要去脱离实际啊，我们来看一下我们现实生活里边的。

盒子，诶我这有这么一个图片来看，这是一个什么呀？这是一个纸盒子是吧？诶那我们说盒子它有什么特点，首先它是什么呀，它是矩形的对吧？哎，矩形的，然后呢，那这个玩意儿叫什么呀？这是不是有一个边啊，哎，每个盒子一定都有一个边块，没有边框那个叫啥呀？那那就不叫做不叫盒了是吧？没有没有边框是一个什么，变成一平面了是吧？每个盒子都会有一个什么呀，有一个这个边框啊，每一个盒子都有一个边框，边框我们叫什么呢？叫做一个borderder啊，就一个borderder，诶那我们说盒子边框里边这是什么东西，这里边我是不是我们盒子的一个内部呀，也就是说我们盒子里边，我首先你既然是个盒子，盒子里边一定是可以什么呀，放东西的了，诶，所以里边这部分我们叫什么呢？叫做盒子的一个内容区吧，盒子的一个内容区外边是一个边框，里边是一个什么呢？叫做一个内容区，诶，那好了，有内容区了，也就是我们盒。

里边是放东西的，那我们想想，我们往盒子里装东西的时候，我们那个东西它是不是严丝合缝的装在盒子里啊，这种情况很少，比如说你买个电视，那个电视会不会言色符号放在这盒子里啊，如果是那么放的话，很容易这个电视是不是就就碎了呀？所以干嘛呢，所有的盒子往往都是这么一个形状，干嘛呢？在盒子里边是不是都会有一个泡沫塑料啊，也就是说我们的这个东西它干嘛呀，它会放到这个部分，它会不会和我们这个盒子的边块直接接触，不会你会发现什么呀，我们这个东西和我们这个边块，它们之间是不是有一个距离啊，诶这个距离我们叫什么呢？叫做诶内边距啊，叫做内边距，这个距离叫一个内边距，这个这个位置叫什么呀？叫做内容区，而这个内容区和我们这个边块之间的距离叫什么呀？叫做内边距，最外层这块我们叫一个什么呀，这叫做边块啊，叫做边块我们的这个boen，然后再看那我们说了一个盒子，除了。

这几部分我们台应该有什么用，现在我们这种情况是一个盒子的情况，那我们有可能什么呀，我是不是有可能我有多个盒子呀，诶那我们说了，我这个多个盒子的摆放，我是摆放到一起，我还是干嘛呀，我还是中间隔着些距离，他们之间是不是会有一个。距离啊，这个距离叫什么呀？叫做外边距啊，外边距表示什么呢？我们这个盒子与其他盒子之间的什么呀？一个距离啊，一个距离，所以一个盒子的组成部分我们就出来了，叫什么呢？最里边是我们的什么呀？叫做内容区，内容区就是我们盒子什么呀？放东西的那块区域啊，放东西的那块区域最里边是内容区，然后内容区和边块之间有一个距离，这个距离叫什么呀？诶叫做内边距啊，内容区和边块的距离叫做一个内边距，然后内边距外边就是什么呀，我们这个边块啊，边块，边块在外边是什么呀？我们的这个外边距啊，外边距，所以一个盒子它都会有这么四个东西，第一个我们叫什么呀？叫做内容区啊，咱们是从里到外说的，最里边是一个什么呀，内容区我们英文叫做什么呀，Content啊content，然后内容区外边叫做什么呀，内边距我们叫一个什么呢。

Pading pading再往外我们是一个什么冰块，叫做一个border啊，Border border，再往外是我们的什么呀，外边距叫做一个呀，MARGIN2MARGIN一共分成这么一个四个部分啊四个部分那好，那现在我们来看这盒子模型，这是我们简单的画一个图，当然这个图其实呢，我选的不是特别好，咱们直接看什么呀，看我们这个文档里边这个啊，HTMRCSSCS3参考手册，HMRCSS，点开这个CSS往这找有一个什么呀，宽模型的一个概述，一点开它这里边直接给你列出来这么一个模型，诶这个整个就是一什么呀，一个大盒子，那你来看这一块就是什么呀。

就是我们这个盒子一个边框，哎边框里边这个虚线的部分就是我们盒子什么呀，内容区，换句话说内容区是干嘛的？哎，是放东西的，是装东西的，那我们这个内容区是干嘛的？我们说说我们一个元素里边是不是都有子元素啊，所以这个内容区是放我们这什么呀子元素的啊，子元素的内容区和边框之间有个距离叫什么呢？叫做哎，叫做内边距，我们的拍定，然后边框的外边有一个有一个什么呀，叫做marin，我们这个外边距啊外边距，所以这里边我们盒子模型都是由这几部分来构成的啊构成的好，那先把这几部分留一个印象啊，留一个印象我们先评一下。这是我们说的。