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

那说完了这个内边距，我们的盒子模型还剩下最后一个，呃，503叫做一个这个哎，外编距啊外边距，那所谓的外编距我们来先是还是写成一个div，点一个这个box啊，创建一个盒子，然后写个样式style，这来一个什么呢？点一个box来一个来一个200个像素hat也来一个200个像素background color来个这个井号BF，诶啊，咱们还让它叫叫BOX1吧，这咱们好区分一下啊BOX1啊，BOX1有了以后呢，我们还是给它设置一个包ER一个像，诶十个像素吧，十个像素，然后来一个solid力，然后来一个red保存，然后CTRL1运行，诶是这么一个，还是我们这个200乘以200，但是加上边框以后，变成了一个220乘以220220乘以二零，那好，那内边距我们说了是什么呀，使我们这个内容区和我们这个边块之间一个距离。那接下来我。

来说什么呀，外边距啊，外边距，外边距指什么呢？外边距指的是我们这个盒子呃，与什么呀，与其他哎盒子干嘛呀？哎之间的一个距离，我们这盒子与盒子与其他盒子之间的距离啊外边距指的是什么呢？我们这个盒子或者说叫什么呀，当前盒子与其他盒子之间一个距离，它并不它属不属于我们什么呀，它不会首先肯定的是它都在边框以外了吧，它会不会影响可见框大小，哎，不会影响我们这个可见框的大小，也就是说你这个你这个外边距设置的再大，这个盒子大小干嘛呀，它也不会变啊，不会影响我们盒子可见块大小，而会什么呢？而是会影响到我们这个盒子什么呀？哎，位置啊，盒子的位置说。

说白了，通过外边距我们可以去调整我们盒子的一个位置啊位置，那这里边我们来说外边距和我们这边距类似，同样我们有什么呀，盒子有什么呀？有四个哎四个方向的外边距，四个方向外边距哪四个方向？诶外边距我们叫Mar gn啊margin margin一个top，哎，Margin一个right，哎，Marin一个这个哎，Bottom，还有一个我们这个margin一个叫一个left啊同样的这个四个方向，那注意了，我们来演示一下，比如说拿个拿给谁呢？拿我们这个margin top举例子啊，那注意了，我直接来一个margin top，这表示什么呀？上外边距我来什么呢？来一个100个像素，这个我们叫一个什么呢？叫做设置我们这个BOX1的一个上外边距，那什么叫上外边距，哎，就是什么呀，我们这个盒子的上边块。

和什么呢？和其他和子的什么呀，距离啊，上外边缘块和盒子的和其他的盒子一个距离，那我们来看上边块是谁呀，是不是就这玩意儿啊，那和其他盒子，那对于我们这个div来说，它其他盒子是谁呀？哎，它其实什么呀，它的负元素有一个什么呀，有一个body，那实际上就是指我们这个元素和我们这个body之间一个距离，我设一个什么呢？设置了一个100个像素，也就是说我们这个盒子应该距离其他元素是不是要有100个100个像素一个距离啊，所以你看我设置完了，一刷新走，你干完了，哎，是不是往下走了100个像素啊，哎，往下走了一个半像素啊，所以注意上外边距是上边一段距离，那这段距离就是什么呀，100个像素啊，100个像素叫做一个margin，哎，Top啊，Mar top，那同理，我再来一个，来一什么呢？来一个这个margin left marin left叫一个什么呀？叫做一个左外边距啊，叫做一个左边距，左外边。

距我来个什么呢？我也来一个100个像素，这表示什么呀？是不是距离左边100个像素啊，那应该怎么办？是不是这一段距离是100个像素啊，所以我整个圆素干嘛呀，是不是该要向右移动啊哎，向右移动我这一刷新来走你完了是不是向右移个200呀？哎，所以注意啊，我们这里边这是一个上外边距，这是一什么呀？左边距这个等于什么呀，这段距离是100啊，这段距离是100啊上位距还有一个左边距，那接下来看，那我们说还有得有什么呀，是不是又还有这个下呀，哎，设置我们这个又和什么呀，下外边句直接来一个，直接来什么呢？Marin一个什么呀，Marin一个，这个right也来什么呢？来一个100个像素保存，我们来看效果啊，我们来看看，诶你说它有没有什么变化，右边100个右边，首先第一个问题，右边的边跟哪呢？边是不是跟这儿呢呀，这距离干嘛了。

是不是已经远远大于100了呀，哎，远远大于100了，所以我这一刷新走你有没有变化，哎，没有变化，所以注意这个外边距你可以理解为成什么呢？它是一个最小值啊，最小值是100，而我们这段距离这个码了，是不是已经满足100了呀，所以它还动不动了，哎，不动了啊，所以这块注意它是不动的，包括我们这来什么呢？来一个marin包包臀，我们一刷新走你是不是也不动啊，哎，下边也是远远的去大于这个距离了啊，远远大于这个距离了，而且这里边我们要说一下啊，我们说一下什么呢？由于由于我们这个页面中的这个元素都干嘛呀，都是靠左摆放的，什么叫靠左摆放呀，我这来一个div的上来上上来是不是贴左边啊，往左往上摆吧，哎，靠左靠上摆的啊，靠左靠上摆，它都会尽量往左往上去摆放，所以这边注意。

所以注意，当我们设置什么呢叫做上和左外边距时，会什么呢？哎，会导致我们这个什么呀，哎，盒子自身的这个位置干嘛呢，发生改变什么意思呀，本来我这盒子是不是靠左靠上的呀，你要想设置一个上外边距，设置一个左边距，我这盒子是不是得得得往下挪，往往右挪呀，哎所以注意，如果设置的是左或者上，它会改变什么呀，我们盒子的自身位置而什么呢？而如果，而如果是设置什么呢？设置这个右和什么呀，和下外边距会什么呢？会改变其他盒子的什么呀，位置啊，会改变其他盒子位置什么意思？来，我把这个margin bottom呀，我给它去掉，我先。

不设置啊，来我这来一什么呢？来一个box box2 box2，我写一个样式，点一个BOX2，然后我这来一个来一个这个100个像素hat来一个100个像素，然后来一个back color来什么的，来一个yellow黄色背景保存我这一刷新走，你现在他俩是不是挨着呀，哎，紧紧挨在一起，他们是咱们这样让它大一点，来什么呢？来一个200，来一个200保存一张新，是不是紧紧挨在一起呢？那注意了，那现在干嘛呢？我给上边的元素设置一个marin bottom来一个100个像素，我是不是给它设置了一个100个像素的一个微问距啊，哎，而且是一个什么呀，下Y边距，那问你我这个元素动不动，哎，它不动他要干嘛呀，它会往下挤谁呀，Box字啊，它会往下挤box括字，所以注意你如果设置的是上外边距或者是什么呀，左那边距，它会改变我们原来颜色的什么呀位置，如果你设置是右外边距或者什么呀，下外边距，它会。

干嘛呀，他会挤别人能理解吧，因为他默认是贴着贴着左，诶贴着左来了啊，贴着左来了啊，所以一定要注意啊，诶就跟什么呀，就跟我们这个我战队一样，战队一样，是不是都是以前面那个人为准呀，哎，我前面的人说干嘛呀，你离我远点，那我干嘛呀，我是不往后退啊，那我我需要干嘛，我需要跟后边人说，那我我想离我后边人离我远点，我能不能往前去啊，往前去是不是就回去了，我得我得挤我后边人，我说干嘛呀，你往后去点，所以这个外边距就什么呀，左边的右边的左这个什么呀，上边的还有左边的是改变自身位置，右边的还有下边的改变什么呀，其他人啊，是挤其他人的位置啊，所以注意我们这个外边距会影响我们元素一个位置，其实呢，我们设置外边距同时就就相当于干嘛了呀，就相当于扩大了我们元素的一个什么呀，实际的一个占页面的一个大小，对吧？你看我这块是不是外边距啊，这块是不是也外边距啊，这块是不是也外边距啊，当我设置一个外边距以后，你看其他元素还过得来，过不来了，哎，过不。

就像我这画了一个圈儿是吧，跟那个什么呀，孙悟空给的那个唐僧画那个圈儿一样，我画一圈以后干嘛呀？哎，谁都别过来是吧？诶这块地儿是我的了，虽然我没有占，但是这块地干嘛呀，它是你需要给我保持这个距离啊，叫做一个外边距啊，叫做个外边距，好，这也是我们说的这个外边距，咱们简单的说了一下，简单说了一下，然后呢，咱们再来说一个问题啊，外边距我先都给它去掉一个，不写，这里边说一下我们外边距还有一种特殊情况，什么特殊情况呢，保存，现在一刷新，诶回来了，现在是不是又紧紧提到一起了呀，诶我们说了外边距，我们这来一个什么呢？来一个marin，咱们拿这个left举例子，我来一什么呢？100个像素，我这是一个什么呀？诶我这一刷新是往左一摆呀，我们说设置左这是上边会影响我们这个元素的位置，那现在我们来说一下我这是一个什么呀，正值，那注意我要说些什么呢？我们那个外边距也可以指定为一个复值啊复值，那复值什么效果呀，那现在来。

来看我这是一个正直，是一个正直，正直的时候他干嘛了，我这元素往哪走了，是不是往右移动了，哎，正直的时候往右移动了，那我这如果是负值呢，负值呢，那正值往右移动，负值就干嘛呀，是不是往反方向移动了，如果我们这个什么呀，外边距设置的是什么呀，负值则我们这个元素会什么呀，会向我们这个反反方向干嘛呀移动啊反方移动，我这一刷新来走你干嘛了，是不是进去一不得啊，诶我再来点，我来什么呢？负一百五一保存走，你是不是又进去了呀？哎，又进去了，可以把我们这元素往反方向移动，还有什么呀，我们还可以用一个margin top marin top来什么呢？来一个负100个像素，我一保存一刷新走，你是往上走了呀，哎，往上走了啊，所以注意可以指定负值，甚至我可以干嘛呢，我。

来个margin bottom，我来什么呢？负100个像素，那我问你了，首先我们来说我这个元素动不动了，我们说了下外边距是不会影响其他元素啊，诶不是不会影响自身是吧？会影响什么呀，其他元素我们来看效果啊，一刷新走，你是不是下边这上来了，哎，下边上来啊，所以注意这个副边距黑马呀，这个外边距我可以指定一个负值，负值干嘛呢？会使我这个元素向反方向移动，也就说正值的时候向右，我负值干嘛就向左，正值的时候向下或负值干嘛呀，就向上啊，就向上可以指定这个负值啊，这个负值呢，我们以后会说到一些这种比较稍微高级一点的技巧，我们会用到这个负值，但是现在呢，暂时我们先用不到，但是你要了解一下，它可以用什么呀，可以用赋值啊，可以用赋值，这是一个，然后不要回来，回来以后，然后我们来接着来说再注意啊，可能刚才有同学发现一个问题，当我这个marin top的时候，Margin bottom的时候，我设置一个赋值以后，我们发现什么呀，下边元素是往上挪了呀。

哎，往上挪了啊，但是我们之前说了，我们说了这两个是不是都是块元素，块元素是不是应该独占一行啊，对吧，这两个跨元素，那问题来了，这下边这个怎么拱上来，那拱上了以后还算不算独占银行了呀，算不算独占银行了？算啊，这个并不影响我们那个那个规则，我们说什么呀，虽然拱上来这俩相当于干嘛呀，重叠了，哎后边的元素是把前边元素给它盖上了，哎，两行落在了什么呀，一起了啊，落在一起了，所以这个并不明，不并不违反我们那个横模型啊，它只是重叠了啊，只重叠了，好这也是我们说的一个margin bottom啊，它可以使用一个正值，还可以使用什么呀，负值，诶还有一个特殊值marin还可以设置，为什么呢？设置为凹凸啊，设置为这个凹凸，那注意凹凸值，诶一般诶只对我们什么呀，诶只。

设置给我们那个什么呀，水平方向的什么呀？啊这什么叫水平方向啊，哎是不是左边还有右边啊哎也就是凹值，我一该只设置给left或者这个margin left或者margin right一般不给什么呀，垂直方向设，因为垂直方向设置干嘛呢？它默认你设置完就跟设置零是一样的啊垂直方向没有意义，我们一般跟水平方向设置，那我们来看什么效果啊，什么效果我来什么呢？Mar这一个left来什么呢？叫做一个auto凸凹凸什么意思呀，是不是自动啊，哎自动来我这一刷新走你干嘛了，是不是最大了，哎最大了啊所以注意我们说如果什么呢，如果指指定我们这个什么呀，左外边距或什么呢？或右外边距的这个marin，为什么呢？为这个凹凸诶。

只指定一个啊则什么呢？则会将这个，诶外边距干嘛呢，设置为最大值，什么叫最大值，你这东西能设置多大干嘛呀，你就设置多大，它是不是一直设置到边上来了，哎能设置多大你就设置多大啊这是我们说这个哎凹度，那如果干嘛呢，我干嘛呢，我将这个。Right设置为auto marin right设置为auto，我这一保存，咱们来看一刷新走你它其实没有变化是吧？相信什么呀，是不是将这个右边距设置什么呀，最大啊，这个右外边距设置为这个最大啊，然后说还有什么呢？我再来一个，我要说margin top呢，Marin top呢。诶我这一刷新走你有变化吗？没有变化啊，所以注意垂直方向外边距，如果设置为凹凸，它就是什么呀？诶就是零啊就是零，我给你设置啊就是零啊，所以注意垂直方向外边距如果设置为什么呢？设置为这个凹凸，则这个什么呀？诶外边距默认就是什么呀，就是零啊就是零，诶那说这个啊用好像用处它是不是也不大呀，但是有一个特点我们要说了，诶我可以干嘛呢？将我们这个margin left和marin right我干嘛呢？

是不是一起设置为凹凸啊，我们说了，如果单独设置marin left为凹凸，是不是left最大呀？单独设置right为凹凸，那是不是right最大呀？那问题来了，现在两个都是凹凸，那它是怎么设置的？诶我们来说一下，咱们想想那这东西，那你把左边设最大，那右边是不是没意义了呀？把右边设大是不是左边也没意义了呀？那他是怎么来的呢？哎，俩人谁也别打架干嘛呢？一人一半啊，一人一半哎如果什么呢？如果将我们这个left的和这个right同时设置为什么呢？设置为凹凸则会什么呢？将我们这个两侧的外边距设置为什么呀？叫做相同的值啊，如果将left和right同时设置为凹度，则会将两侧的外围距设置为相同的值，那这应该是什么效果呀？诶，那我们想想，假如说我旁边这一个人，这一人。

我这外边距，我设置一个凹凸干嘛呀？我说我是不是把这个外边距设成相同的值啊，我说你离我100米，你离我100米，那我正好干嘛呀，我是不是正好在两个人的中间啊，那同样我这个元素的左右外边距相同，那我们想想我这元素应该干嘛了？诶干嘛了？是不是在我们这个负元素中就水平居中了呀？为什么居中了？因为这边距离是相等的，这边这两个距离是不是相等的呀？两个距离相等，它是不是就居中了呀？哎，居中了啊所以注意，如果将left和right同时设置为凹，则会将两侧变问句设置为什么呀，设置为相同的值，所以什么呢？诶，那就可以使什么呀，使我们这个元素自动在我们什么呀负元素中居中啊居中所以什么呢？哎，所以我们经常将什么呀左右外边距设置为什么呀设置为凹凸一。

A，十子元素在我们这个负元素中水平居中，这能理解了吗？哎，你不得知道它能居中，你要知道它原理什么原理，它你设置为都设置为凹凸，它会干嘛呀？它会自动将两侧外面距设置什么呀，设置成一样的值，那这样就干嘛了，就居中了啊，就居中了叫做一个哎，Margin这个left or right都设为凹凸啊，但是这块注意啊，我们说的副值还有凹凸只适用于我们那个外边距，换句话说内编距行不行不行啊，内编剧不行，只能是一个正直啊，那编剧只能是正治啊好，那这个外编剧我们看完了，那接下来我们再说，那还是这个问题，它有没有简写属性啊？哎，外边距同样什么呀，同样可以使用我们这个简写属性什么呢？就叫marin啊，可以什么呢？同时设置我们这个四个方向的微问语，直接来举例子，我来这。

来什么呀？来一个10PX，来一个20PX，来一个30P，来一个40PX，是不是四个方向，那这表示什么呀？上边十哎，右边20，下边30，左边40啊左边40，我一刷新走你但是看不出来，我们只能看到什么呀，诶右边看不出来是吧？剩下的都能看出来，因为有对比，如果右边有一个元素就能看出来，但是现在看不出来啊，现在看不出来，但是你看这这就是十，这应该是20，这是30，这是什么呀？40规则和什么呀？和我们这个拍定是不是一样啊？哎，规则和我们这个拍定一样，这都是什么呀？是不是都是顺时针的呀？四个值就是什么呀，上右下左三个值呢。

上左右下，哎，然后两个值什么呀？哎，上下左右一个值，哎就是四个方向都是十像素啊，都是十像素，或者我们经常会看到什么写呢，这么写的来一什么呢？零哎然后来一个什么呢？凹凸，那这什么意思呀？哎，上下是零，左右是什么呀？凹吐左右凹吐，那我们说了什么效果，是不是有居中了呀，还有居中了啊所以注意诶，我们可以使用这个来设置我们这个元素的一个居中啊marin marin的规则和我们这个pon规则是一样的，都可以指定四个方向啊，两个值的情况，三个值的情况，四个值情况，你都要给它区分清楚啊，区分清楚好，这个是我们说这个marin，你要搞清楚我们这个marin它的作用，它可以去调整我们元素的一个位置啊，调整我们元素的一个位置，好，那这里边呢，我们先来评一。