尚硅谷前端基础 (47)

好，接下来继续啊，接下来继续，那关于这盒子模型我们继续往下说，然后还是啊，我告诉一个有一个图我要跟你说一下，就是在我们的这个。呃，CSS在我们W3SCHOOL啊中文网站上有一个这个CSSCSS里边有一个叫做框模型概述，呃，别的我们不需要看，我们就看一下这图是吧，它这个图画的其实比较好，因为它是一个中文的嘛，对吧，你像这个整个这个实线，这就表示什么呢？表示我们盒子一个边块啊，每一个元素都会有这么一个啊边框等于盒子的一个最外边缘叫做borderer对吧？里边这个虚线部分你看叫做，诶它这么写是吧？这应该叫做内容区啊，叫做内容区它用什么呢？用had还有外来设置啊，Had还有外来设置，而我们这个内容区这个虚线和边框之间是不是有一个距离啊，诶这个距离我们叫做一个拍Ding啊，叫做一个拍Ding，所以接下来我们就要说一下这个拍Ding。

来新建一个文件，我们叫做一个零四，我们叫做一个盒子模型，盒子模型我们叫做一个拍点啊，叫做一个内内编剧。写个页面啊，还是在这儿，我们直接给它右键给它运行一下，把第一个关掉，嗯，创建一个div，我们先把这个基本结给它写出来啊，点一个BOX1，还是基本结构，我们给它一个内容区的一个大小，我们直接点一个box box1，然后来一个Y，是一个200HI，是一个200BACKGROUND color background，还是来一个井号BFA，然后给它设置一个边框，叫做一个border，来一个十像素，然后来一个orange，然后来一个solid的一个边框，诶大概是这么一个效果啊，那这个是我们的边框，然后这里边是我们的内容区啊内容区那这里边我们就要说一个东西了，说一个东西我们叫做内内编剧，内编剧我们叫做一个拍顶，叫做一个内边距，什么叫内边距呢？很简单，内容区和我们边框之间的一个距离是内边距啊。

内容区和边框之间的一个距离，现在我们的内边距是什么呢？是零，因为现在我的内边距和我的边框是紧紧的贴到一起的啊，紧紧贴到一起的，那现在我们说一下我们一共什么呢？一有四个方向的内边距分别是什么呢？分别是拍定top pading right，还有什么呢？还有我们叫做一个pading的一个bottom，还有一个叫做PA定left，还是按照上右下左写的啊，Pading的一个left啊，这是我们四个方向的top，上那边距right下那边距bottom，诶，Right右那边距，Bottom下那边距left的左那边距。我们这块我们先通过一个演示，我们先通过谁呢？通过pading top，也就是我们的这个上那边距来演示上那边距是什么玩意儿，也就是说我们内容去上边和上边块之间的一个距离，也就是说实际上就是。

这就是这个位置现在是不是零了，哎，我给你写一个，我来一个100像素，我们看效果这一保存，诶你发现什么了，诶整个这盒子是不是就被被拉长了，哎整个被拉长了，那实际上这段距离就是那个100啊，这段距离就是那个100个像素，那个内边距啊，那边距，但是这个时候其实你会发现一个效果，我们发现内边距首先有两个特点，第一个我们说了内边距的设置，内边距的设置会影响到我们这什么呢？会影响到我们盒子的大小，对吧？内边距的设置你会发现刚我设置完内边距以后，我整个盒子是不是变变长了，哎变长了，那现在它的这还是不是200了，就不是了，就变成300了，因为我这加了100嘛，对吧，整个盒子变长了，所以那边距的设置会影响盒子的一个大小，这个待会我们再说，现在我们先往下说啊，待会我们还要说一下这个东西，然后再来说我们的背景颜色，它默认情况下，诶就直接写吧。

背景颜色它会延伸到哪呢？延伸到我们这个内边距上，所以我背景颜色设置完了，不仅仅只有内容区有内编距上是不是也会有这个颜色呀？诶内编距同样也会有这个颜色，因为它也属于盒子内部啊，因为它也属于盒子内部，但是这个时候实际上就产生了一个问题，什么问题呢？内边距也这个颜色，我们的内容区也是这个颜色，那我们这儿在区分这个内容区和内边距的时候，是不是就不是那么明显呀？哎，那我们就想有没有什么方法能让我很容易的就区分出这个内容区，还有这个内边距呢？哎，那我们想一下它有什么区别。内容区内边距是内容区和边框间的距离。

而内容区是用来装内容的，所以如果我往这个div里我写个字，比如就写个ABC，或者写个hello，那这个hello是不是应该在内容区里？Hello既然在内容区里，那是不是我那个hello和上边的距离是不是就是内边距啊？哎，所以在这看着我写一个hello，一定注意文字什么也好，它都会在内容区中，而不会出现在内边剧中，所以你看我这hello现在所在位置，这儿就是内容区，而上边的距离就叫什么呢？内边距懂这意思吗？哎，所以我可以通过写个内容让它显示出来，当然这种方式可以，但是它也不够完美，所以我就想有一个更好的方式，那既然我的内容文字是在内容区里，那我这儿如果创建一个子元素，我叫一个inner，这个inner是它的子元素，那子元素是不是也应该在内容区里啊，哎，那此时此刻我干嘛呢？我直接给它点一个inner，我给他设置一个样式外。

再次呢，让他来一个100%，Height呢，我让他也来一个100%，也就是说我让这个inner和负元素一边宽一边高，那等于现在这个音呢，是把负元素给撑满了，哎，撑满了，注意是把哪撑满了，是把负元素的内容区撑满了，也就是说inner它会不会延伸到这个内边距上，哎，不会，然后干嘛呢？我给inner设置一个background color，我来什么呢？我来一个yellow，设置一个黄色，你看这个时候整个这个区域是不是就变黄了，那这个黄色区域就是什么呢？就是内容区，那待会儿我再来给他来设置内编距，那这个黄色会不会到内边距上，不会，因为这黄色是inner，因ner把内容区撑满了，他不会去称那边距，所以这个时候待会儿我们再看你就好看了，黄色区域就是内容区，那个绿色区域就是那编剧，所以这个时候我再来一个拍ing top你来看诶。

这是不是就清楚了，哎，这一块区域是我们的内边距，而这块区域是我们的内容区，而100像素哪是100，是不是就是这是100，哎，这是100，那现在我们这盒子变成多大了？哎，高度是不是就变成了一个就是这是200，这是200，这是100，那这整个是不是就是300啊，300上下十个像素，那是不是变成三百二了？哎，同样我还可以干嘛呢？我来一个pading left也来一个100像素，哎，左边再来一个，我来一个pading red也来个100像素，然后我再来一个pading bottom也来一个100像素，四个方向现在是不是100像素就都设置上了，哎，这是100，哎，这是100，这是100。这也是100，那现在我这盒子大了，中间是200对吧？哎，这还有十个像素的一个边框，这还有十个像素一个边框，那这个时候它是一个多少乘多少的，哎，就是一个，这是一个。

十加十二十，这是一个400，那是不是变成一个四百二乘以四百二这么一个和啊，哎，四百二乘以一个420，所以这个时候你会发现我们整个盒子大小是不是也受paon的一个影响，哎，PA的一个影响，所以这里边我们直接说一句话，其实这已经说完了啊，我们这里面直接给一个结论。我们这个一个盒子的这个可见框的大小，可见框大小它是由什么呢？由我们这个内容区内边距和什么呢？和我们这个边框共同决定啊，由我们这个内容区内边距和边框共同决定，所以在计算我们这个盒子大小时，需要什么呢？需要将这三个区域干嘛呀？

哎，加到一起计算，哎，所以这盒子多大，刚才我给你演示了，你需要把内容距的大小加上内边距的大小，再加上一个边框的小，加一块计算，那这里边我们提到一个概念叫可见框，什么叫可见框？可见框说的就是这部分，就是这个东西可见的部分就是属于我们盒子一个内部的一个区域，你可以看见的，当然还有不可见的框，不可见框我们待会儿要算成外边距，但是可见框就这三部分，哎框内容区，这那边距，还有一个内容区，他们三个部分构成了我们盒子一个可见框，因为对于盒子来说，只有这三部分是可见的，剩下的那个外边剧我们是。看不到的啊，所以提到一个新的概念叫可见框啊，可见框但是我们说了是不是就意味着我那盒子就占四百二乘以四百二这么大一块地儿，不是啊，并不是它只占这么大地儿，因为我们说可见块这么大，它还有不可见的部分呢，比如说这一块实际上也被这盒子占住了，那这一块大小由什么决定？那就是我们下边待会儿要说的那个外边距，但是现在你先知道可见框大小怎么算，所以以后我如果跟你说，我让你给我创建一个500乘以500的盒子，那这500乘以500是什么意思？说的是什么？说的是内容区加上内边距加上边框加一块是500，而不是说内容区是500，所以这里边一定要注意区分啊，一定要注意区分好，这个是我们说的内边距啊，内边距这个是我们分别设置四个方向。内边距除了。

这种方式我们还说一下我们的拍Ding，直接是一个拍定，拍定什么呢？拍Ding是我们这个内编距的一个简写属性，可以什么呢？可以同时指定我们这个四个方向的内边距，它的规则什么呢？规则和我们这个borderer wise一样一样啊，所以在这我们来演示一下，我直接来一个拍定，我写一什么呢？我写十，20 30 40，那这是一个什么效果，哎，这个效果就是上边是十，右边是20，下边是30，左边是40，同样是上右下左，如果我指定的是三个值，那就是哎，上边是十，哎，这右边是20，左边也是20，下边是一个30，那就是哎，上左右下，哎，如果我只指定两个值十二十，那就是上下是十，左右是20，如果指定一个。

的值，那就是上下左右都是，它跟我们这个boulder wise的规则是一样的啊，这个pading整体来说没什么可说的，你就记住了，PA定它和borderder和我们的count的内容区共同决定着盒子的，可见宽的一个大小就这么简单，那也就是说现在我们盒子内部的东西就给大家说完了，那接下来你自己来把这个拍掉，自己尝试写一下，感受一下这个拍顶啊，感受一下，我们先评一下。