padding设置两个值什么的

好，那我们讲完判定了之后啊，接下来的话我们就讲另外一个小的字典，叫编剧，就是边框，哦，不叫编剧啊，叫边框。我们这样给他讲盒子的时候，我们说，哎，你生活中的这个盒子，你看这盒子里面是不是有这种小的这种边框，这个盒子本身是有一定的厚度的，你可以这样理解，明白吗？好，那我们再有了他的话，那我们这个 网页里面的盒子，他也是有这种什么边框的，边框有三要素，哪三个要素呢？就是颜色、粗细以及形状，就是 这个颜色这个和这个边框他到底有多厚，或者说你理解多粗，那就用这一个什么像素来表示他的这个线的形状，你是实现虚线还是点线啊？ 你知道这个什么呢？这个线的颜色我们应该设置好，明白吗？好，那大家需要注意一下啊，一般来说我们就只有实线跟这一个什么虚线，一般用的比较多，他没有太多的兼容性 问题，在各大浏览器上展示的效果一致，其他的这一线啊，你其实基本上也用不到啊。那这边知道了之后呢，我们在这边就去写我们网页里面的盒子啊，网页里面的盒子的话，那我们就是找到这个什么 b o r d r body， 哎，这个是七啊， 好，找到了之后接下来的话呢，我们在这边把做好，做好了之后，然后在这边 大家看这样做好了之后啊，我先这一些东西我就写的少一点啊，我先不给大家盘点啊，因为我们单独只是学这个波的，那我们就写一个波的好波的怎么写呢？好，大家看一个像素，然后的话在这边我给他加一个 blck， 一个黑色的边框啊，大家看通过波的你就可以， 是不是？那我们刚刚说了的这个 beyond 啊，还有什么，还有三要素啊？那三要素呢？我们刚给他说了的这个粗细，然后形状以及他的这个颜色。好，这样做好了之后，接下来的话，我们去看一下 这里面大家可以看到的这个盒子，大家现在看这个盒子，你看我放大一点看啊，大家看这个盒子是有边框的，就黑色的这个边框，他是围绕着这个什么盒子周围的，明白吗？好，那这个呢？就是我们所说的边框，但我们右键审查元素的时候，大家可以看得到这个盒子，你看他是一 一百，他有一个波的，但是他的判定是没有的，因为我没有设判定吗？那你说我想设一个判定可不可以呢？那这边你设一个判定，然后的话是十像素的判定，那这个时候大家可以看一下这个盒子，你看现在内容的话是什么？一百判定的话上下左右全部都是十个像素拨的上下左右是不是 也是十个变。大家看现在这个内容，他相较于盒子本身，他是会有一定的这个什么空隙的，这个空隙是由填充产生的吧？ 并且大家可以看得到我们的盘点，刚刚给大家讲过，盘点是外扩的吧？就你加盘点了之后，这个盒子本身会向外扩充，然后大家看加拨的了之后，这个盒子是不是也向外扩充了？所以说这一个 加攀顶加波的的这个盒子，他在页面上实际所占据的距离，这就等于什么？左边的这一个边框加左边的攀顶，然后加上内容本身的这个宽，加右边的这个攀顶，加右边的这个什么波的，然后组成的他实际所占一个宽度吧？ 好，这个大家要会看啊，就是现在这个盒子，就这个盒子，他所占据的这个实际的这个宽度实际的高度，那你应该会计算了他所占据了实际的这个 实际的这个宽度，他应该是等于什么？等于这个波的的这个什么 b o r、 d， 二要 e、 f 的这个宽度，加上这个什么，加上这个我们的这个潘丁，然后杠奈夫的，然后加上这个什么，加上本身的 w i d t h， 然后加上这个什么 盘点的什么 rat， 然后再加上这一个什么我的 rat。 好，然后等于他，那对于我们现在看到的这个他就是不是等于什么？等于我们一加上十，然后加上一百，然后再加上十，然后再加上一，然后应该是一等于一百二十二， 是不是等于这样的一个像素的大小？好，那这时候他实际的这个什么实际的这个高度， 实际的这个高度啊，高度的话是不是也要等于我们的这个 什么 be 啊？第一啊，就是上面啊拨的拖把，然后的话加上哪一个呢？加上我们的判定 刚拓破，然后再加上我们的 h i t ht ht， 加上内容的这个高度，然后再加上这个潘丁什么这一个 b o t t om， 然后再加上这个 b o r d r， 然后杠 b o 波特姆的这个好，然后做出来的话，这个的话是不是也是等于一加上我们的十，然后加上我们的一百，然后加上十，再加上什么一，也是等于一百二十二个什么像素知道吗？这个呢，就是 我们通过这边也可以看得出来啊，就你要会看这个盒子的模型，同时你也要会什么，自己把这个他所占用的框框的大小要把它理解出来，为什么 要把盒子的模型宽告，要实际的要把它理解出来呢？到时我们根据设计稿去做还原的时候，那你就相当于是一个设计师，你要把这一些盒子合理的把它编排在页面上，你到时候如果这个实际所占用的大小没有写对的话，那排版是不是就不正确了？ 好，这个呢就是我们给大家讲的这一个什么波的外扩啊， 计算盒子。好，这个拨的在这边就可以把这个计算出来了，计算出来了之后大家需要注意一下啊，我们现在是拨的设置的时候，我们是通过这个三要素的方式直接 这样射，除了这样射还有什么方式射呢？其实还有别的方式可以设置这一个，这一个，他的这一个 boos 的啊，哎，这个 好，那我们在这边再还给他讲一下，还有另外的这个写法，拨的就拨的，还不光只有这种写法，还有很多其他的写法。好，还有什么样的写法呢？好，我们拿过来好拨了，除了这样去写，那我们还可以干嘛呢？还可以这样去写啊，如果我们要单独设置的框啊，叫拨的外式 好，这样可以设好两个像素。好，你看我在这里面我是单独设置了这个盒子的，这个什么宽，明白，然后还可以播设置波的时代，波的时代的话，例如我们给他写一个什么虚线好，还有一个波的什么卡了， 好，波的卡了啊，波的 c o 好，波的卡了，然后我们再给他一个什么，给他一个， 我们给他这个石榴金字的颜色啊，以前我们一直写的那个就是英语拼音啊，你也可以写这种石榴金字。好，来看。现在这里面我们是把 把上面的这个什么，上面的这个三要素什么拆开来写了吧。啊？这个是将上面的三要素啊，上面的这种合并写的什么合并写的这个 三要素啊？分开什么分开写，明白。好，这样写好了之后，然后我们在这边再去看一下，大家看这个盒子他也是干嘛？你看 这个盒子是不是也可以看得到他有一个边框，并且他是什么？他是这个绿色的，并且大家可以看盒子的边框，他是有盖住这个什么背景色的吧？看到，明白吗？你看有虚线的方式，你看明显可以看到这一个边框的颜色，是盖住了这个什么背景色的，明白吗？好，这个知道到啊， 好，所以说呢，这个边框可以分开这样去写，那除了这样写还有什么写法呢？还有写法，还有一种写法是我们可以单独的。什么可以单独的啊？ 定义这个抹条边框啊，抹条边框的这个什么这个抹条边框啊，就是这边框，我们现在是统一设置了四条编码，他也可以和什么可以类似，和这个什么盘点一样 进行什么进行这一个什么上右下左的设置啊，上右下左的设置就是单独设置模一跳，明白吗？好，那我们把复制分出来， 复制好了之后，然后在这边做好，做好了之后呢？好，那你看我现在把这些都不要。 好，那我现在就说这个盒子我把它显示出来啊，显示出来之后再看，现在这个盒子就长这里。如果我说我只想设置它的上边怎么设置呢？啊？那就是设置上面的话，那我们就在这边就是拨的 top， 然后这样设置。那拨的拓谱设置怎么设置呢？那我给他设置成两像素的，然后这 一个什么虚线，然后的话这个是深什么颜色呢？好，深，深这一个啊，这个绿色啊，大家看，现在这里面设置好了之后，我们在这边再去刷新一下，大家可以看得到。我放大一点啊，大家看，只有上面才有这条什么虚线， 这个右边，左边，下面什么全部都没有了，明白吗？好，这是上，那我除了是上的话，我也开始说是什么右，那就是拨的什么 rat， 然后给三项数的这个什么这个实线，然后给上一个什么，给上一个， 给上一个其他的颜色啊，好，然后或者平格。好，这样做好了之后，大家看，我在这边再刷新一下，大家看这个右侧他是不是也出现了一条边框了？ 下面和左边没有那同样的方式，那你应该会用了然后拨的什么拨什么的方式，然后给他什么这一个四个像素，然后这个说你的啊，这随便你， 你自己去试啊。好，然后的话这个不落蓝色。好，大家看，做好了之后，接下来在这边再刷新一下，你看这里面是不是有个颜色了，然后最后还一条，再再一个的话就是左边还没给他封边，然后的话就是剥的什么大夫的，然后在这边做好，不信大家看啊，我们的这个艾地液它是自动的，帮我们去 有这个代码的提示，你用他的代码提示该写好就行啊，那这样做好了之后不能耐腐的，然后在这边我们去写好，写的时候，然后我们在这边 好用这个颜色，那我们给他五个像素啊，然后这个双立的啊，然后这样写好了之后，大家看我在这边再刷一下这个颜色，大家看这个是不是也有颜色了？ 好，那我们可以通过右键审查元素的方式去看这个盒子模型啊，大家看这边你要会看到的盒子，你看他的左边跟右边，是不是左边的边框是五项数，右边的边框是三项数。并且大家看 一旦当我的鼠标选中这个的时候啊，选中这个盒子的时候，你看一选中这个盒子，你看他这边会有一个什么类似这种底纹，就是让你看出来我是选的这里，明白吗？这是方便之后调试的。好吧， 好，那最后大家需要注意一下啊，就是在我们写这一个边框三要素的时候，他是没有严格的顺序要求的，就说这一个粗线以及形状颜色，我是可以调换顺序的。好，在这边大家需要注意啊，注意就是在写这个什么边框三要素的时候啊， 三要素的时候是没有什么没有顺序上来什么呃，要求的，但是啊建议还是什么，还是写这个什么这个粗细，然后这个什么形践行啊 和这个什么颜色。好，就说我不这样写，我就把这五项数硬要写在什么，要写在后面，我硬要把这一个写在什么？写在这里，能不能写呢？你看下面的这两个，明显跟标准的写法是不一样，那这个时候能不能出效果来？好，然后在这边我们刷新一下，大家看 这时候出来效果是不是还是一模一样的哦？缩小一点点啊，大一点点看，再看这出来效果是不是一样的，但是你要不要这样写呢？那下面这种写法是什么？不建议的写法啊？ 可以这样写，但是不建议这样写，还是习惯了，我们习惯是什么？粗细，然后形状和这个颜色。 好，那除了这种写法的话，还有一种写法，还有一种写法是什么？是我们可以把某一条边的这个三要素干嘛呢？把它拆开写啊？最后还有一种写法，就是我们可以啊， 将我条边的这个什么三要素干嘛拆开写，明白吗？啊，这个也很好理解的啊， 好，拆开写是什么个意思呢？好，大家看我们这颜色拨到唾沫的时候，我们就可以这样写时像素，然后缩腻的，然后什么 red 啊，这就不用 red 了啊，这个是吧？好，那来的。 好，大家看现在这个里它上面是不是有一个边框？好，那这个边框的话，我可以这种方式的话，我也可以把它拆成三要素，明白吗？那就是波的拓谱的这个什么， 然后的话这边是不是设置好？宽的话是什么？十个像素，那拨的拓谱的这个什么 style， 然后的话我给他设成实线，然后拨的拓谱的这个什么卡了，然后我给他设置什么呢？他的这个 颜色。好，我就把这个颜色拿过来来看这个写法下面是相当于是拆开写，跟上面这种写法是什么是一样的。好，这样做好了之后再看出现效果是不是一模一样，他不会发生任何的变化， 这个能理解了吧？所以说的话，那我们的边框那这个拨的他是不是其实有，其实现在存在什么？存在多种写法了？ 那多种写法的话，那第一种写法最为简单就是什么？就是你直接上来就是拨的，然后这个的话做操作的话，他是不是就四条边全部都是什么一样的大？你可以把它分开写，是不是？也可以，然后你接你设置某一条边，或者说某一条边的话分开写都行，好吧？好，这个呢就是。

要解决这个问题，可以有三种方式，第一种就是不用找类编剧，用 taxi intent 文本缩进的方式，物色像素保存， 现在就是二百二乘五十，和设计稿是一样的，虽然可以实现效果，但我们不建议这样设置 tax indent 这个属性，它主要是用于段落缩进的，用在这里是不合适的。而且如果有一天让你设置右边边距呢？或者设置上边边距呢，是不是就不行了？所以我们不推荐这种方式，还是应该用 pandy， 但这样会导致元素变宽。 如果要这样用的话，我们就必须计算一下这个 vs， 在它的基础上减去盘底，如果有波段的话，还应该减去波段，这里就应该是二百二减五十一百七， 这样加上判定之后总宽度还是二百二，我转来看一下没问题吧，但这样做的话，每次都需要我们计算一下宽度和高度，总宽高减去判定减去 boder 还是有点不太方便。当然以前的话只能用这种计算方式，但有了 cs 十三之后 就有了第三种方式。至于 c s s 三，我会专门花一部分时间来讲，涉及到的东西还是比较多的。这里我们就来简单用一个 c s 三属性叫 boxizen， 它可以有两个曲子，一个 bottle box， 一个 content box， 这两个熟悉版前面讲过的边框和内容和默认字就是 content box， 也就是默认情况下，我们这里设置的宽高就是设置的内容和宽高。现在我们把它改成 board box， 就表示这里设置的宽高，设置的是边框和宽高，他会根据波段和判定宽度自动计算内容和宽度，这里我们还是改成二百二，保存来看一下 没问题吧？总观还是二百二，来看核模型那种区域就自动压缩到了一百七，这样我们写样式就不用再考虑 pand 和 body 的影响了。你看我再给大家一个边框， 无像素虚线 desk 红色，保存总宽还是二百二，内容和就被加速到了一百六乘四十，当然这样改了之后行高就需要我们计算了，要改成和内容和高度一样， 四十像素。 ok， 现在我把页面放大一点，你注意看背景颜色，灰色不太明显，对吧？我们来改一下，改成 green 再来看，可以看到背景颜色默认覆盖的是边框后，这个也是可以改的，可以通过 bank ground 可以改， 它有三个曲子， bottle box， 表示背景颜色的覆盖范围是边框盒，这也是默认字。然后还有内容盒以及填充盒，我们就改成填充盒吧，保存看到了吗？边框是没有背景颜色的，只有填充区域有，然后我们再改成内容盒试一下，就只有内容区域有背景颜色了。

好，接下来呢，咱们来带同学们去学习内编剧拍领的相关内容，那首先啊，咱们的内编剧拍领呢，他所对应的作用呢，是用来设置边框与内容之间的距离， 说白了就是用于控制那一层减震的泡沫，它的厚度呢到底是多少？那么咱们如果想去设置盒子边框与内容之间的距离呢，咱们可以直接使用属性名叫做拍丁来去设置， 只不过咱们拍点这个属性呢，他所对应的取值啊，其实有多种写法，咱们可以写上一个值，两 两个值，三个值，四个值呢，完全都是可以的。那么咱们拍顶的不同取值各自表示什么样的含义呢？哎，那这里老师就来带着 同学们通过代码的形式来演示一下，那么在这里呢，老师准备好了一个案例，案例的结构呢是写了一个 div 放在这，他是咱们所要演示的盒子， 然后在这盒子里面呢，咱们写了一段文本，用于表示当前盒子的内容，而且呢咱们给当前的盒子设置了宽高为一百乘以一百，并且为了同学们看的方便，给他加了一个背景，颜色为粉色， 而且为了对比出拍顶的位置呢，老师还给他写了一个 epx， 实现黑色的边框。那么最后的效果呢，就是浏览器所展示的结果，那么咱们如果直接看浏览器所展示的结果呢，咱们其实也可以非常清晰的看到。咱们 多人来说，边框与咱们内部的内容之间呢，其实是紧贴着的，当然因为每个文字都是不一样的，咱们直接去观察，可能看的比较麻烦一点， 那这个时候呢，咱们可以借助于浏览器帮咱们描绘好的盒子模型的示意图，来去更加清晰的观察，咱们可以直接右击检查，然后呢鼠标来点一下当前的 div， 哎，咱们很明显的看得到我们的一白，一白是咱们的内容区域的大小，而咱们四周呢，有一圈 eps 的边框在四周， 那同学们会发现，默认来说呢，咱们边框和内容之间是紧贴着的，咱们中间没有设置拍钉，对于 div 来说是不存在的。那现在呢，咱们模拟一下网页中 实际的场景，比如说咱们想让我们当前盒子的边框和内容之间呢，空出一点距离出来，不要贴的这么近，那咱们可以怎么去完成呢？哎， 那首先咱们就来带同学们去认识一下，咱们对于拍顶所对应的曲直是什么样子的，那对于咱们拍顶来说呢，他是可以写这么几种常见的情况的，可以是一个直，两个直，三个直和四个直， 我们分别来演示一下，首先咱们写上一个值的情况， pady 放在这写上一个取值，比如说十 p x。 那么当咱们写完之后，我们来看盒子有什么变化哦，此时咱们来去刷新，哎，很明显会发现，本来咱们的内容和盒子的四周是贴 是的，但现在呢，我们的边框和盒子内容之间有了一定的距离，而这个距离呢，就是咱们刚才所设置的派丁所决定的。而且我们来看一下咱们所设置的时，到底是给哪一个部分设置的哦，咱们来看盒子模型， 我们会发现我们当前所设置的十呢，最后所显示的结果是给当前盒子的上右下左四个方向都设置了十 ps 的拍顶， 换言之就是一个取值，它相等于设置了四个方向好，演示完了一个取值之后，那接下来老师来带同学们演示两个取值的情况，那老师写上十 ps 空格二十 ps 写上两个取值来看这边盒子有 怎么变化哦，此时咱们来去刷新哎，很明显咱们会发现当前盒子呢又变化了，只不过上下没变，左右呢变得更加宽一点了。那为了同学们看的清楚一点，咱们来看盒子模型哦， 咱们会发现咱们所设置的第一个取值十，其实是给咱们上下两个方向所设置的，然后咱们第二个取值二十，他设置的是左右二十 ps 的拍领。 那通过这个例子，咱们会发现两个曲直，第一个表示上下，第二个曲直表示左右。好，还没有结束哦，咱们还有三个曲直的情况，那咱们写上派丁十 px 二十 px 三十 px 放在这，那此时咱们同样来去刷新哎，很明显会发现咱们当前的盒子呢，下部分变得更加空一点了。咱们来看盒子模型哦，我们会发现十给了上边第二个值二十给了左右， 第三个值三十给了下，那么他各自的效果就是，先是上，第二个值是左右，第三个值是下， 而且还没有结束哦，咱们可以给他四个值的情况，那咱们写上派丁十 px 二十 px， 三十 px 四十 px 放在这，那写完之后，咱们来去刷新哎，左侧呢又空的多一点了。咱们来看盒子模型哦， 会发现第一个表示上，第二个表示右，第三个表示下，第四个表示左上右下左这么一个结果。 好，说到这里呢，咱们其实已经带着同学们去调试了一下怎么拍的，四种不同的曲质情况，各自表示什么样的意思？ 效果呢？同学们已经看到了，但是有同学可能会说，老师，咱们这个结果固然是可以通过调试工具来看到的，但是如果咱们不使用调试工具挨个去记，有一点麻烦呀， 有没有一些记忆方法，让咱们能快速的记忆到他的取值效果是什么样子的呢？哎，同学们不用担心，这里呢，老师给同学们罗列出了一个拍顶负值的记忆规则，他的规则其实是 默认先从上开始负值，然后顺时针负值，如果没有负值的会怎么办呢？浏览器会让他看对面的形式。 那给同学们演示一下哦，比如说咱们两个值的情况，十和二十，那咱们刚才说过，他优先先从上开始负值给十，再顺时针负值，顺时针负值就轮到了咱们的右，给他一个二十， 那我只有两个值啊，复制到右就结束了，下边和左边没有，怎么怎么办呢？哎，看对面的下边看上面，对面的就是十，而左边看右边，对面的就是咱们的二十，结果就是第一个值 上下第二个值左右是这么得来的，咱们来去刷新完全是没有问题的。好，那咱们再给同学们演示三个值的情况，那首先第一个值给上，然后顺时针走，轮到了右，给他一个二十， 然后呢，暂时轮到了下，咱们给他三十，然后只有三个值，左边没有负值，怎么办呢？哎，咱们来看对面的，那对面是二十，他也是二十， 结果就是第一个是上，第二个是左右，第三个是下，咱们来去刷新，结果也是和咱们分析的一样的，所以呢，同学们在之后记忆派定的曲制规则的时候呢，没有必要死记硬背，咱们只要把这个记忆规则呢给 记住就可以了。好，说到这里呢，咱们就带同学们介绍完了拍定的几个常见的曲子类型。 那么咱们在实际开发的时候呢，除了会使用拍丁的四种不同的曲子之外呢，咱们还可能会有这么一个场景， 咱们刚才呢是给盒子的四个方向都设置了拍顶，但如果此时咱们只想给当前盒子的某一个单个方向设置拍顶，怎么能怎么做呢？ 哎，那接下来咱们就来带同学们学习一下拍顶的当方向曲直如何去设置哦，好，那这里呢，咱们已经给同学们准备好了拍顶当方向曲直的相关写法，那么咱们如果想给盒子的某一个方向单独设置拍顶那边 句呢，咱们的属性名可以写成 pady 杠，加上咱们的方位名词即可。然后他的属性值呢，就是常见的数字加 px 呢就可以了。那这里咱们给同学们演示一下哦， 比如说老师现在想给当前的盒子只设置上方向的 pady， 那咱们怎么写？同学们知道吗？哎，咱们可以写成 pading 上叫做杠 top， 我们给他写上数字二十 p x 就行了。 那咱们写完之后，我们来去刷新，哎，咱们当前盒子和内容之间上边就空出了二十 ps 的拍顶，咱们在盒子模型中看的也非常的清晰。那同样的，我们如果想给当前的盒子设置 左边的 pady， 咱们可以怎么改呢？哎，咱们可以把 top 改成左 rap 就可以了，洗完之后咱们来去刷新，现在呢就变成了左边是奥数 ps 的 pard， 在盒子模型中看起来也非常的清晰了。 好，说到这里呢，咱们去大同学们介绍了几个拍定的常见取值情况，以及拍定的单方向的设置。 那最后呢，咱们来带同学们进入小街环节。首先第一个问题，咱们如果想给盒子设置四周二十 ps 的内编剧，咱们 可以通过什么样的属性来去设置呢？对的，咱们先给盒子四周设置二十 pspard， 咱们可以直接写上 排丁冒号二十 ps 呢就可以了，一个值呢就表示同时设置四个方向的取值。 好。第二个问题，咱们如果想给盒子设置上下二十 ps 左右三十 ps 的内编剧，咱们可以通过什么样的属性来去设置呢？ 哎，对的，咱们可以给他设置拍丁二十 ps 空格三十 ps。 咱们刚才说过两个值的情况，第一个表示上下，第二个表示左右的效果好。 第三个问题，咱们如果想给盒子只设置左侧五十 ps 的，那编剧咱们可以通过什么样的属性来去设置呢？哎，对的，咱们先给盒 盒子只有左侧设置五十 ps 的那边去，咱们可以设置 pid 杠 like 之为五十 ps 呢就可以了，那这是盒子 pid 的单方向设置。好，说到这里呢，咱们就把同学们介绍完了 pid 的一些常见取值情况。

alliance items 和 alliance self 这两个属性的作用是控制元素在交叉轴上的对齐方式，区别是 alliance items 在负容器上设置， alliance self 在容器中子项上设置，在负容器上设置一下 alliance items 直设置为 center， 可以看到每个子项垂直居中对齐了。在这个实例中，交叉轴从上到下，所以是垂直居中对齐，直设置为 start， 可以看到每个子项垂直顶部对齐了。因为交叉轴从上到下，起点在顶端直设置为 on， 可以看到每个子项 垂直底部对齐了。因为交叉轴从上到下，终点在底部，这个时候容器内子向是统一底部对齐的。如果想单独设置某个子向的对齐方式，可以在选择的子向上设置下 align self， 比如设置为三特， 这时候可以看到第三个子像是垂直居中对齐的。以上就是 alarineidoms 和 aline sef 两个属性的简单介绍。

接下来我们学习一下内编剧和外编剧，我们先看内编剧，什么是内编剧啊？通过拍定这个属性啊，我们可以设置内编剧，内编剧是指边框与内容之间的距离， 通常那边句分成四个属相，有上那边句、下那边句、左那边句和右那边句。这里注意一下，后面跟几个数值表示的意思是不一样的。拍顶，如果后面跟一个数值的话，比如拍顶三 ps， 那么就表示他上边句，下边句，左边句，右边句都是三像素。 如果是两个指的话，如泰定三 ps 五 ps， 那就是上下是三像素，左右是五像素，那么这里还有三个指和四个指，我们分别看一下他的代码。拿我刚才这个例子来说，我这个 div 啊，宽高各一百，我这写成五百 啊，我们看下效果之后，我添加内编剧啊，拍定，拍定 top， 比如说我写一百。 ps， 好，大家注意啊，我这个盒子当我 ctrl s 保存的时候，大家会发现一二三这个内容到上面这个距离 就是拍顶 top， 那么有一百像素，但是你会发现我整个盒子的高度啊变了，那此时盒子的高度应该是多少呢？我们可以检查一下，找到我这个核模型，大家会发现 这个五百乘五百啊，实际上还是我这个盒子原始的宽高，但是呢，他的高度加了一百是因为他有了个拍钉 top 值，这顶上写的是一百，所以此时他盒子的高度啊就变成了六百 ps， 但是我还是想让这个盒子是五百的高，怎么办呢？我这里需要人为的计算啊，来他减去一百，就是高度是四百，这样的话，我的文字啊还是依然是上边距啊，上那边距还是一百 ps， 但是我盒子高度就是四百 ps， 那这是拍钉，套房桶里我们还有拍钉 like， 比如说一百 ps， 这样的话，他的宽度啊也会变成六百，我们还得手动的减去一百， 这样才能保持原来的盒子大小。这是上左边距啊，那么还有 rat， 比如说一百 ps， 哎，大家也会发现啊，盒子又被称出来一百，哎，还有八层。那么这四种写法有一种方 方式是简写啊，我们可以直接写拍的，这里面可以跟四个参数，第一个参数，比如说是一百 ps， 那就是上边句一百 ps， 我这里为了方便看，我写上二百 ps 啊，他的顺序是上右下左，上边距是二百 ps， 右边距离是二百 ps， 下边距比如说一百，左边距是五十。 好，我们保存一下，看一下我一二三的位置，这时他距离左边这个位置就是五十距离，上面这个是二百，这是他的右边距，这是他的下边距。我们可以审查一下他的 盒子和模型，大家注意看啊，我现在的位置，当我鼠标移到这个 四百乘四百的盒子上啊，我截个图，那么此时这的距离啊，就是五十， 这的距离呢是二百，而上面的距离呢也是二百，下面的距离是一百啊，这就是他的上下左右的边距。当然我这个有滚动条啊，所以上面那个部分刚才隐藏了，隐藏了一半啊，那么这就是那边距。 除了四个参数呢，我们还可以简写成两个参数或者一个参数，比如说我写十 px， 如果是一个值的话啊，他就是对上下左右都是十 px 啊，我们可以检查一下，找到我的和平。哎，上下左右各是十 ps， 这是一个参数，如果是两个参数， 如说二十 ps， 二十 ps， 那么第一个参数代表上下，第二个参数代表左右，也就是上下左右各二十， 或者我可以写上下是二十，左右是一百，然后保存一下，检查一下他的和模型， 我会发现啊，上下是二十，左右是一百。接下来我们看一下什么是外边句啊，那边句用拍挺，那么外面句啊，他的英文是 mat， 而且属性啊，用于设置外面距。设置外面距会在元素之间啊，创建所谓的空白，这段空白啊，通常不能放置其他内容， 他的用法跟拍顶啊非常的类似，取值顺序啊，也跟内编剧啊相同，有 montoprowit， 八筒，还有 rap。 如果是四个参数的呢， 就代表了上边句，右边句，下边句，左边句。那我看一眼，之前我现在有一个 div， 这个盒子我再创建一个 div 啊，我把之前那个 div 盒子起名叫 box 一，这个叫 box 二。 好，这块用我的类名选择器。 box 一是 box 一是四百和四百啊， box 一是四百宽四百高的。我先摆那面具，先注视此时这个盒子啊，就是四百乘四百了。梦里我再来个 爆三，宽两百，高两百来个。背景颜色是红色，这两个 div 啊，已经显示出来了， 我可以设置啊外编剧，比如说 marj 八十 ps， 此时你会发现啊， 如果 box 一设置底外编剧的话，那么红色的盒子相当于往下移了十像素。同理，如果不设置 box 一的底编剧，我也可以设置 boss 二的妈巾套 十 ps 依然是有用的。那么也可以设置 boss e margle 一百 ps， 他就相当于往右移了一百像素，距离浏览器的左边往右移一百像素。 mogel f 啊， 我也可以设置抹纸，通过四个参数写啊，上编句，上外编句，右边句， 下面句，比如说是三百 ps， 左边句五百 ps， 我们可以看一眼，此时他位于页面中啊， 这是上外边距，这是左外边距，而我右面这个啊，是右外边距，下下外边距， 这就是嘛，姐啊，这就是我们的外编剧，我们可以审查一下这个大盒子 box 一， 我们可以看到，此时啊，他的外面距，上是一百，左是五百，下是三百，右是一百。

浮动属性默认情况下会儿级元素从上到下排列，如果想改成从左到右或从右到左，可以设置一下 flow 的属性，先把值设置成 left， left 是从左到右排列，再把值改成 right， write 是从右到左排列。如果想轻松浮动，可以设置一下 clear 属性，直设置为 boss。 以上就是浮动属性的简单介绍。

那在了解了这样的一个核模型的四层结构之后呢，我们就要开始来学习一下怎么去设置这每个层的这样的一个尺寸，让它产生一个效果 啊。这里呢我们要先说一下，就是我们这个演示过程中啊，主要就是以这个会计元素作为一个演示，因为虽然所有的这个标签，这个 html 元素标签，他都遵循和模型的这样四层的一个结构这样的一个模式， 但是呢由于行内元素啊，他自己有个特殊性嘛，然后呢就是你在设置这些东西的时候，他可能就是表现的不那么明显，所以呢我们用这个会计元素就非常的明显，非常的直观。然后呢就是后面也会跟大家去提一下这个 行内元素，他去设置这些东西的时候啊，大概是一个怎么样的一些不一样的一个情况。那合模型呢，总共有四层，但是其实 其中一层的设置呢，我们之前已经学习过怎么去设置了，就是这个包的就是边框这一层，那我们可以看到这样的一个代码，我们可以 把这个放大一点啊，那其实这个代码中呢，我们就已经设置了这样一个 parent class with parent 这样一个元素的一个边框的一个效果。那这个边框呢就是我们在核模型里面介绍的这个边框层， 这个边框层呢也是核模型的这四个层里面唯一有样式的那一层。那另外三层，像这个 magic 外编剧、 petting 内编剧，还有这个 content 这个内容区域，那其实这三层呢都是没有样式的，你像 margin 和 padding 呢，是非常明显的，它就是一个空间，一个距离的一个作用，它就是为了产生距离，产生间隙。那 content 这个区域呢？可能有些同学会觉 会有点奇怪，因为我们之前介绍过那个背景颜色，对吧？其实有些同学会认为背景颜色可能就是 continent 的它的一种样式。背景颜色这个东西呢，其实准确来说它是一个背景当中的一种， 因为我们这个盒子啊，它是可以设置背景的，那背景的这个区域呢，它其实覆盖范围是可以改变的， 你也可以只覆盖这个框团的区域，也可以包含比如说整个包的这个区域。背景这个东西，它不仅仅可以设置颜色，也可以设置图片，可以设置渐变颜色等等。这个东西呢，它不能算是某个这样的某个层的它自己的一个样式。那我们这个 背景啊，这个背景的这个范围的覆盖啊，我们可以来看一下，他是通过哪个属性来设置的呢？他是通过这样的一个属性叫做 background clip 啊， background clip， 那他的一个默认值呢？就是这个 border box， 我们可以看到啊，这个黑色的，半透明的黑色的色块，其实就是这个背景区域所覆盖的范围。那其实说覆盖呢，其实不太准确，应该正常来讲，他既然是背景的话，他其实应该是被这个 上面的这些层给覆盖住的，那我们这里呢，是作为演示啊，所以让他在上面这样子看起来更明显，更直观一点。那所以他默认的情况下呢，这个背景的这个区域，背景的区域他是覆盖到 这个边框这个区域开始到内部的所有的这个区域，也就是说其实我们如果是按默认的状态去设置一个元素的这个背景的话，他的一个范围，边框的这个宽度的范围都包括在 内，也就是边框都是盖在这个背景上的背景的这个区域上的，那如果我们设置成这个 padding books， 那么他只会 只会从这个边框内开始，也就是这个整个的 padding 内编剧的区域开始，然后再包含这个内部的内容区 content 这个区域，那最小的呢，肯定就是这个 content books 啊，它只包含 这个内容区啊，所以这个背景的区域呢，是可以通过这三个值来进行调整的，让这个背景的区域呢，覆盖的范围不一样。 那接下来呢，我们就来先看一下啊，这个 margin 和 padding 是如何去设置的，然后我们顺便试一下这个 background clip 这样的一个属性的作用。那这个 margin 和 padding 呢，它的设置其实跟我们之前讲过的那种 拆分的属性的设置是一样的，它可以设置一个值，两个值、三个值和四个值，因为其实我们可以看到它这种都是四个方向的嘛，对吧？它这个外边距上面、下面、左边、右边，它都是有四个方向的，内边距也是一样的，跟这个边框是一样的， 都是有四个方向的。那所以呢，其实我们可以非常简单的用我们之前学过的这种逻辑来进行设置，那我们这里呢？呃，先给这个这里设置一个 子元素，那我们子元素呢，我们叫 class， 我们就叫做他叫做 child 吧， 然后我们这里把它放大一点啊，再放大一点，那这里呢，我们已经设置这个 parent 这样的一个样式，那 parent 这个类呢？它这里因为设置了这个宽度嘛，然后设置了它的这个颜， 所以呢他我们这里能看到他，因为这样的话呢，就相当于我们设置了一个核模型当中的就只设置了这样的一个边框这一层，那边框这一层他有宽度了，那是不是他我们就能看到他了？那接下来呢，我们就去设置一下这个紫元素啊， class child， 那这个紫元素呢，我们给他设置一个宽度一百 px， 然后高哦高度一百 px 宽，宽度也是一百 px 吧。然后呢我们也给他去设置一个边框吧，边框叫做 我的，我们给他设计个绿色的边框吧，那看到这样的一个效果之后呢，我们要开始去设置这样的一个外编剧啊，我们先试一下这个外编剧，那外编剧的话呢是 margin， 对吧？那这个 mlg 的话呢，也是我们刚才说的，他可以设置一个值，两个值、三个值和四个值，那四个值的话呢，肯定就是上右下左这样的一个逻辑，那一个值的话呢，就四个边的这个宽度都是一样的，就是这个外边距的宽度，那比如说我们设置一个十 x， 哎，你会发现他这个东西就会被撑开了啊，撑开了，因为复元素啊，复元素他他在没有设置这个具体的某一个具体的数值的时候，他是会， 他是会被这个内部的这个子元素内容给撑开的嘛。那我们这个宽度的这个 fit content 设置呢，其实就是为了让这个复元素的宽度跟随这个内部元素的这样的一个整体的一个宽度， 看到这个马卷这样已经起效果了，我们就看到他四个方向都是一样的这样一个宽度给撑出来，对不对？那假如说我们设两个值，比如说我们设成不一样的，那这里就是前面这个是上下， 后面这个是左右，这个逻辑我想大家现在应该还是记得的，对吧？然后我们再设置三个值，对吧？第一个肯定是上，然后对应最后一个是下，然后中间这个呢，就是左右四个值的话呢，那就是 这样的一个关系啊，上右下左，你可以对应看一下，他是不是上最少，然后左边这个最最最大啊，一百 px， 是不是他就呈现这样的一个状态，对吧？所以这个 margin 的话呢，他就是这样的一个逻辑啊，包括 padding 其实也是这样的。然后呢，其实你可以单独去设置某一边吗？ 比如说麻君 top， 我们给他设置一个三十 px， 那你这里的话呢，就相当于把前面这里的设置给覆盖了嘛，对吧？所以他这里就变变大了一些啊，这空间就变大了一些。然后这个麻君呢，其实还有个很 特别的用法，就是假如说啊，我们这里啊，我们这里只留这样一个 magic top， 假如说你给他一个负值，他其实是会产生一个 这样的一个反方向的移动的这样一个效果，一般来讲我们也很少用，但是呢，大家需要知道有这样的一种用法，那 padding 的话呢，我们就更容易了解了啊，知道了 margin 其实用 padding 就非常简单了，比如说我们这个，呃 margin， 我们还给他先设一个简单的 margin 出来是 px， 然后我们 padding， 而是二十，然后二十的话呢，我们这里要给他去设计一个呃，这样一个 background color， 然后设计一个 blue 吧， 我们要通过这个这个东西啊，来看一下他这个 padding 的一个区域的一个效果。那我们这里呢，我们刚才讲了，他这里 background clip 这个属性的，他默认是 board box， 那这样的话呢，我们 是看不出来这个 padding 的效果的，除非我们在里面去放一个文字，这样我们是能看得出来，对吧？但是呢，如果我们可以用这个 background color 把它这个改一下，其实我们也能让他看出来，直接看出来这个 pad padding 的效果， background clip 我们就改成这 content box， 哎，你就看到了这样的一个区域就变成了这么小啊，他这个背景颜色呢，就只作用于这样的一个内容区域了。然后呢 padding 也是一样，我们可以去单独的去给他设置 某一个，比如说 pad in top， 我们来一个一百 p x， 哎，他就会变成这样的一个效果啊，他就这个距离就会变得很高啊。 pad 这个属性的话呢，也同样啊，跟着 mojing 一样，他一到四个值也是可以设置的。我这里呢就不重复演示了，大家自己呢可以去试一下。

大家用过这三个样式吗？他们都是跟文字方向有关系的，比方说前两个哈，正常情况下呢，他就设置宽高的，先把这三个注视掉，然后呢高度三十，大概就是这么一个文字，但是呢，如果我们加上这个文字的方向来听不懂， 大概就变成这样了，他还是保持了宽度是六十，但是呢，如果我们用换了这两个属性，我们来试一下啊， 大家看他就变成了高度是六十，宽度是三十，就是他随着文字的方向改变了，然后呢我们再来看这个拍定 vlog， 正常的情况下我们是用拍顶就可以了，他只是来设置文字的这个上下的拍顶，比如说我们现在上下都设置为实拍顶，大家看现在是这样的，但是呢，如果我们把它旋转，他就变 成了相对于文字来说是左右的排顶，如果我们改用排顶 vlog 来看，它永远是相对于文字来说是上下的，我们把它再注视掉还是上下？

你想知道如何提升网站的高级感吗？想要让网页看起来更专业，更有吸引力吗？那就需要通过合理设置内编剧和外编剧调整空间来增强美观与整洁，从而提高页面的空气感和层次感。 这里不止聊科技，更能探索新天地。大家好，欢迎来到潮趣科技一本，今天我们来讲解一下他电影和茅台镇的区别和如何调整模块间距。这两种间距对于网站非常重要，有三种不同的方法来控制间距。一种方法是选中整个区块， 然后在左侧栏的布局的高度这里这里有调节的选项，我们可以在这里来调节整个区块的高度。然后还可以在这里直接拖动滑块来更改数值，使整个区块变大或变小，调整至合适的高度即可。 现在我们向下滚动并选中另外这个区块，用这个区块来讲解另一种方法，选中这个区块后，在高级选项中，这里有一个吗？正的选项， martin。 其实这里就是这个框的外部间距，在这里有八十像素的空间来作为模块键的距离。然后底部这里也有数值，也是有八十像素的空间。如果我们在编剧这里没有数值， 假设这里的编剧为零的话，他会使得两个模块的距离太近，看起来拥挤，也会使得网站看起来不专业。如果我们反过来设置一个大数值，这会看起来很奇怪，因为两个模块之间的空间过大了，所以还是保持在八十像素会合适一点。 如果我们向下滚动到 contact 这个模块，点击选中这个部分，并同样转到高级选项，我们可以看到吗？正中没有任何数值，所以证明这里没有间距。因为上面的模块我们已经设置了八十像素的间距， 所以这个模块不需要任何的间距了，但我们可以看到它这里有 partying， 分别为一百和两百的数值。那么妈镇间距和 partying 间距又有什么区别呢？ 毛枕是外部的间距，而 pad 是区块内部的间距，或是这个蓝色框内部的间距。所以如果我们将边距更改为两百，我们可以看到外部的间距发生了变化，并且同时在底部也添加了更多的空间， 但内部的间距是没有任何的变化的。如果我们把吗阵返回到零，我们在这个时候就能看到间距已经从顶部焊底部中被删除了， 但还是不会影响到内部的间距。如果我们想设置内部的间距，那我们就得更改帕丁的数值，所以帕丁是内部的间距。假设如果我们把内部间距都调整为零的话， 那这样看起来就挺糟糕的，因为没有足够的空间进行留白，没有足够的呼吸空间，我们可以通过按组合健康出口加字来返回上一步。我们现在就可以看到顶部一百焊底部两百，会让画面看起来好很多，所以这就是麻震撼 他定之间的区别。再次提醒一下吗？正就是外部间距，而他定就是内部间距。我们所选中的每一个模块都有他自己不同的间距设置。我们可以点击这几个字的部分转到高级选项，我们也是同样可以看到他有自己的内部和外部编剧的， 所以如果我们想在这两个文本之间添加更多的空间，但在这个地方我们使用哪种间距呢？其实麻疹还是派定都是可以，在这里没有很大的区别，看起来都是同样的结果，因为我们只是想改动两个文本之间的距离，只要能达到我们想要的效果就行。假设我们来调整派定内部间距， 我只在底部输入数值，但是我们却可以看到这个地方的上下左右都增加了间距，因为他们现在是锁定状态，数值是链接起来的。所以我们返回上一步，点击一下这个小锁来解开锁定，然后只在底部的框中输入数值，这样子就只允许我们更改底 部的词，而顶部焊左右的间距是不会变化的。以上就是如何调整模块间距的方法以及麻震焊帕丁的区别解释。如果你还有任何问题，我将非常乐意为你解答。感谢您的观看，我们下期再见。

接着我们来看一个百分比句子， west hat， pending， margin， 它们都可以百分比句子 来试试看，把它的 ys 改成百分之三十也是可以的。那既然是百分比，它是谁的百分比呢？是相对于谁的累计比？这里的 ys， pandy margin 没有 head 害的不一样，它们的百分比相对的都是包含块的宽度。 来看一下这里的包含块宽度是五百，对吧？他的百分之三十应该就是一百五，来看恶魔性宽度就刚好一百五。现在我把复原数的高度改一下，改成八百像素，然后我们来给他一个判定特 百分之十，这个潘金托是多少呢？八百像素的百分之十八十像素吗？当然不是，一定要注意刚刚这句话，这里的百分比他相对的是半块的宽度，和高度没有任何关系，所以这里是宽度五百像素的百分之 应该是五十像素。来看一下横模型没问题吧。 ok， 我们再来看害的百分比，这就分两种情况了，如果八万块的宽度不是凹凸， 那么他就是相对于包含块高度来试一下，先把判定去掉，包含块的高度现在是固定的，对吧？八百像素不是凹凸，然后我们给指元素的高度设置百分之三十有效，对吧？他内容都溢出了，你看我继续来加，都是有效的。但如果包含块的高度是凹凸就麻烦了， 看这里垂直方向的凹凸，他表示自适应那种高度，也就是自适应子元素高度。我们的子元素又设置百分比，子元素的高度要相对于包含块的高度，包含块高度又要适应子元素高度，这不就是寄生蛋问题吗？复元素高度要依赖子元素，子元素高度要依赖复元素可能就乱套了，你看我把复元素的还得去掉， 现在他就是凹凸了，对吧？再来看字眼数，现在他的 hat 我们再怎么设置百分比都是无效的，看到了吗？没有任何效果。 ok， 来记一下，如果包含过的高度是凹凸，百分比无效。