50.尚硅谷_HTML&CSS基础_盒模型-内边距.avi原创

继续啊，那边块说完了，然后接下来我们来说，我们这个叫做一个呃，叫做一个这个内边内边距啊内编剧呢，我们也叫这个拍顶啊拍顶我还是先写这么一个东西啊，我们这来一个这个div，来一个class，我们叫做一个box啊box box1，然后来给它设置一个样式style，这来一个点一个BOX1还是Y，我们来一个200个像素，还也来一个200个，诶200个像素，然后来一个这个borderder borderder来一个十片，诶咱们先看看效果吧，这里边给它设置一个背景颜色background color单color，来个井号bma保存CTRL运行。诶现在我们来看这是一个什么呀，这是一个200乘200的一盒子吧，哎，因为什么呀，我只设置那内边距，是不是我只设置了个内容距，内边距啊，边框我们都没有设置啊，没有设置，那好，那现在我来看，我给他设置一个这个边框。

设置我们这个编块直接来一个borderder来什么呢？10PX的red来这么一个solid保存我们来看，现在一刷新走你诶那现在我问你这盒，这个盒子大小是多少，诶多少内容区是200，然后是不是各有十个像素的边框啊，所以现在是什么呀？诶220乘以二零吧，哎，所以注意我们设置边框的时候，会影响到我们整个盒子一个什么呀，大小，那这个大小我们叫一什么呀？叫做可见框啊，它可以看见这部分啊，叫一个可见框啊那现在呢，我么接着来说，接着来说什么呢？我们叫做一个内边距，内边距指什么呢？内边距指的是我们叫做什么呀？盒字的什么呀，内容区与我们这个盒子，哎，盒子边框之间距离啊，盒子这个，诶，边框之间的一个距离叫做什么呀？叫做这个内边距。

叫它英文叫什么呀？叫做什么呀？拍Ding啊叫做拍ing，那编剧英文叫做这个拍Ding，诶那我们说什么呢？我们这个一共有四个方向的什么呀？诶内边距为什么有四个方向的边距啊，我们说了盒子内容区与盒子边框之间的距离，那我有几个边框啊，是不是四个边框啊，哎，所以一定是有四个边距的哪四个呀，上边的个边距就是什么呀，我们内容区与上边框的一个呀距离右边的一个什么呀？内边距我们这个内容区与什么呀？右边边块一个内边距还有什么呀？下边还有什么呀，左边啊一共有四个这个内边距，我们可以什么呢？我们可以通过我们的什么呀？四个属性哪四个属性叫做一个pading paddin PA定一个top pading一个这个哎，Right，还有一个这个pading，一个bottom，还有一个叫做pading。

哎哎，Left，诶来干嘛呢？哎，来设置我们这个，诶四个方向的一个内边距啊来设置我们四个方向的边距，来那么直接来演示一下，我们先来干嘛呢？我们先来拍定一个top来什么呢？来一个100个像素，那这是设置一个什么呀？这是设置我们这个是不是上那边距啊，诶上那边距，那么说了，所谓的上那边距指的就是什么？指的就是我们内容区的上边距离，我们盒子的什么呀？上边块这个距离吧？哎，那我这加完了以后，我们来看什么效果啊，现在我们来看现现在这还是一个二百二乘以什么呀，二百二了啊，我们来看效果啊，我这一刷新来走，你发现什么了，发现整个盒子是不是变大了呀？哎，变大了，为什么？是不是我设置一个这个上那边距啊，那这那边距在哪块呢？诶实上是在这块啊。

这块会有一个100个像素的一个内边距，那注意了，这个内边距首先我们看到第一个特点叫内边距会不会影响我们这肯定块大小，诶会，所以注意我们就要说这边说一句叫什么呀，内边距会影响我们这个盒子一个可见块的一个大小，也就是说当你去操作内边距的时候，可能会导致我们盒子大小干嘛呀，是不是变大或者变小，哎，变大或者是变小啊pading会影响我们这个盒子的一个可见宽的一个大小，诶那我们现在看我们会发现，当我设置完pading以后。我这盒子确实变大了是吧，但是我发现这背景干嘛了呀，是不是也增加了呀，哎，也增加了，那这块我们来说一下背景是不是只会应用到我们这个内容去呀，不是啊，一定要注意背景元素的，这个背景会什么呢？会延伸到我们的什么呀？那编剧也就是说你所设置这些背景啊，背景图片也好，它会干嘛呀，它会延伸到那编剧，所以你会发现我这个内编剧的背景颜色和我们这个内容剧的背景颜色是不是一样的呀？哎，当是问题来了一样了，其实我们就不好办了，为啥不好办了呀，我哪个是内编剧，哪个是内容区，我是不是分不出来了呀？哎，分不来了，那所以我们这块希望能区分出我们的内容区，还有内边距，那这块要怎么区分呀？那我们想想，诶，那我们说了内容区是放东西的啦，而那编剧是不能放东西啊，诶，所以干嘛呢，我在盒子里写点东西，随便写一个ABC，这是一个子元素吧，那我ABC这三个字应该在哪？哎，是不是内容？

区里啊，所以相当于它是不是相当于我们这个内容区和我们这个，诶那边就是一个隔离啊，哎，来我一刷新来走你。诶，你会发现这明显是不是有一条这么一条线呀，当这条线是我画的是吧？这条线是我画的，诶那上边就是什么呀，上边就是我们这个内边距，而下边是不是就是我们这个内容剧啊，诶但是感觉呢，还不是很清楚是吧？诶那我们干脆这样想一招不这么写了来什么呢？Div点一个BOX2，我是不是在这个div里创建了一个子元素叫做box box2啊诶BOX2，那这里边呢，我先把这个那边就给它去掉，去掉以后呢么刷新，现在是不是又变成一个二百二乘以二百二了，好，那接下来呢，我们来写一个点一个BOX2，来一个Y100%，TT100%，现在我们说了，我这子元素的宽度和高度是不是跟它负元素一样啊，它负元素是多少？200，它是不是也是200呀，哎，那现在等于我这个子元素是把负元素给占满了呀，哎，给占满了啊，内容区都给占满了，然后呢，我们来这儿说一下。

创建一个这个子元素，BOX1占满我们这什么呀，BOX2啊，占满我们这个BOX2这来一个background ground呢，Color我来什么呢？来一个这个yellow，我这一保存咱们现在看，那你说我还能不能看见这个颜色了，哎，我一刷新走，你是不是都变成黄色了呀，为什么呀，因为紫元素是不是把我们这个负元素给它盖住了呀，说白了，现在我们在箱子里装了一个东西，这个东西干嘛呀，默认箱子是不是有多大，我这东西干嘛呀，就装着大把，哎，就变成多大个，所以这里边当我把这个盒子变成400了，我一刷新走，你是不是还是黄的呀？哎，我们这个紫元素会跟着负元素去去变啊去变好，那你整这玩意儿干嘛是吧，干嘛，那现在问题来了，我们现在这个子元素是把这个负元素给占满了呀，注意是把负元素哪占满了，是不是内容区占满了呀，它有没有占的面具啊，没有啊，我们说了子元素是在复元素什么呀，内容区里边的，所以现在我再给。

负元素设置PA定，那注意了，PA定有了，那你说我设置拍定，我子元素大小变不变，子元素大小是不会变的，所以我们会看到这么一个效果，我这一刷新走你。上边是不是出现了用了一个绿色的呀，绿色的是我们这个负元素的一个什么呀背景，而黄色是我那个子元素的吧，而这绿色的部分恰恰就是我们设置什么呀？诶内边距啊，这个就是内边距，而这个部分黄色部分就是什么呀？诶内容区啊，内容区通过这种方式我们可以干嘛呀，很清楚的看到我们这个内边距和这个内容区之间的一个什么呀，分界啊，分界这一块就是什么呀，内容区，而且我明显看到了，当我去修改以后，我这个内容区数明显不是我这个整个盒子是明显变大了呀，诶那现在我问你，我这个盒子大小是多少？诶这是一个200，这是一个什么呀，100，然后上下是一个什么呀，十诶什么呀，诶是不是三百二啊，高是一个320，而宽是不是还是我们那个二百二啊，哎220，所以注意啊，修改我们这个内边距会影响整个盒子一个大小，而我们这个拍ing top表示什么呀？叫做一个上内边距。我们这。

配容区和我什么呀，上边跨之间的一个什么呀，距离啊距离，那同理我们再来一个来什么呢？来一个PA定一个right，来一个100PX，这叫什么呀？是不是右那边距啊哎，设置我们这个右那边距，那所的右那边距就是我们这个内容区和我们这个什么呀，右边块电间距离吧，那我们说了，那这回会加在哪，是不是加这块啊哎，加这块啊，我这一刷新走你，诶是不是这块就是右那边距啊哎，这一块是我们这个，这是我们这个pading right啊paing right，那同理有right了，我们还有什么呀pading，哎，Bottom也来个100个像素拍定一个哎left的也来个100像素，现在我是不是加了四个方向的原距啊，保存我们再看一刷新走你，诶是不是这个效果呀，这是我们这个top，这是我们这个red，这是我们这个bottom，这是我们这个light啊，所以注意我们一共有四个方向的，这个那边距好。

那现在问你，我这个盒子现在多大了，多大了，这是100，这儿是200，这儿是100，然后边块是不是还有十啊，哎十，然后这加一块是不是正好420啊，现在我这就是一个420乘以什么呀？哎，420的一个盒子啊，420看420的盒子，所以这里边我们要说的一个什么呢？我们这个盒子的大小，盒子的这个大小由什么呢？由哎我们这个内容区，诶内边距和什么呀，和我们这个边框是不是共同决定啊，哎共同决定，那这里边我们还要说一个叫什么呢？盒子可见宽的一个什么呢？宽度可见宽的宽度是什么呀，等于多少，也就说我这个盒子一个整个的一个宽度，它应该是多少，诶那我们说是怎么算的呀？诶首先我们有一个包。

的包der一个left的一个什么呀？Weth叫什么呀？左边块的一什么呀，宽度再加上一加上一个我们这个拍定什么呀？哎，Left是不是左边内间距的一个宽度啊哎，大小啊，再加一谁呀？哎，Wise再加上一个什么呀，哎pading，哎，Right再加上一个我们这个什呀，哎，Border，哎，Right一个什么呀，外啊外所以注意我们整个一个可见块的宽度由这么几个属性决定，左边块的宽度加上一什么呀，左那边距加上一个内容区的一个什么呀，宽度加上一个右内边距的一个大小再加上一个什么呀，右边块的一个宽度，这是我们才是什么呀，才是我们盒子一个整个宽度啊，整个宽度哎，那所以如果你要想创建一个100个像素宽的一个盒子，你是不是得考虑这几个因素啊，这几个值加一块等于100才行吧，哎，你要是都得。

和100，那是不是就大了呀，哎，大了啊，所以注意这是我们说可见宽的一个宽度，那还有什么呀，可见宽的这个高度怎么算的呀，是不是一样的呀？哎，Border，一个top加上一个哎，一个加上一个哎，H he head再加上一个我们这个pading，哎，Pading bottom再加上一个我们这个哎，Bottom，哎所以注意啊，我们可见块的一个宽度和高度，他们这个公式实际上就是什么呀，就是把我这些边框啊，内边距啊，内容区的大小给它统通的干嘛呀，加到加到一起啊，加到一起一定要注意这个盒子的大小是由我们什么呀，整个这个诶内容区，还有我们这个内边距，还有我们这个边框共同决定的啊，共同决定的，所以现在我这个盒子是一个四百二乘以420，那假设我现在就需要一个什么呢？我就需要一个400乘以400的。

怎么办？我是把这多余的20给他减去啊，诶我从哪捡呀，哪捡都行，我可以不可以从边框捡呀？哎边框捡去好捡了，我把边框干嘛呀？哎把边框给它去了，我一保存，现在一刷新是不是就一个400乘以400的了，哎那如果说我不想去边框，那怎么办呀？哎，我是不是可以去我这个那边距啊，那边距我都变成多少啊？哎都变成90是不是都行了，哎都变成这个90，但是这好像还有点麻烦是吧？一保存一刷新。走，你这是不是也应该是一个400乘以400的呀，来来，我们来简单量一下。从头量到尾巴，这你看是不是400乘以400啊，哎，400乘以400啊，所以注意我们的一个什么呀，你要去调整盒子大小，你可以干嘛呀，你可以调整内容区，可以调整那边距，也可以调整什么呀，边块诶那我们刚才调整的是那边距，调整边块行不行？诶边块其实更简单了，边块改成什么呀？诶是不是都改成一百八就行了呀，保存这一刷新走，你也是一个什么呀，400乘以400的，只不过这是往里去挤了啊往里去挤了好，那这就是我们说的一个内边句给它改回来啊，内边句我们说完了，但是我们会发现什么呢？这内边距我这设置起来是不是有点麻烦呀？哎，我要设置一个内边距，我是不是得同时指定四个呀？哎，四个样式，那我们就想了，我能不能像我们这个包字一样，有一个什么呀，是不是简写属性啊，诶简写属性我们来说使用什么呢？使用我们这个拍顶，诶可以什么呢？可以同时设置我们这个四个边框是什么呀，也。

啊，规则和什么呢？和我们这个border west一致啊，和我们这个border一致，直接来一个拍顶拍ing，我现在来一个值，我来一什么呢？来一个100个像素，这表什么意思？哎，上下左右的那边距全都是什么呀，哎，全都是100，所以我一刷新是不是还是这个效果呀？哎，所以发现我写这么一个跟我写四个是不是效果一样啊，而且这种方式是不是更简单呀？哎更简单这是一个值的情况，还有什么呀，两个值我来一个拍顶，来一个100PS，再来一个200PS，这什么意思呀，上下100是不是左右200啊哎，上下100左右200，我这一刷新走你，诶上下100诶左右变成一个什么呀，200啊这么一个效果，两个值是上下，还有三个值拍定100PX 200PX，来一个300PX，这什么意思？哎，上边100下边300左右是不是。

200啊哎左右两百一保存走你这个效果啊哎，这是一个300，而这是200，这是什么呀？100啊是这么一个啊那如果四个指就什么呀？哎是不是顺时针呀，是上下左右了，哎上右下左啊100PX200PX300PX400PS表示什么呀？上边100诶右那边距200，下那边距300，左那边距400啊左边400，然后一刷新送你，诶是不是这么一个效果呀？哎通过这个内边距可以整个去影响我们整个一个盒子的一个大小啊大小好，那这个呢，是我们说的盒子里边的一个内边距，那这个内边距呢，比较比较简单啊叭较简单，一共是有四个方向，并且有一个简写属性，你只要知道我们这个内边距，它会影响到我们盒子一个什么呀，可见块的一个大小啊，这一块就OK了，还有一个你要注意我们的这个什么呀，元素子元素，它默认都是在哪啊。

是不是在内容区里啊，哎，在内容区里它不会去延伸到什么呀，我们这个内边距，除非你做一些特殊的事儿它才会出来啊，但现在我们先不管出来这种情况啊，一定要注意，我们的子元素默认都是在负元素的内容区啊，内容区好，这是我们说的一个内边距啊，来听一下。