尚硅谷前端基础 (48)

好，说完了，那编剧接下来我们再来说我们盒子里的剩下一个啊，我们零五叫做一个盒子模型，我们叫做一个外边距，呃，那外边距的话，从我们这个图上看的话，外边距就属于这个marin以外的了，所以外边距就不再属于我们这个，可见宽了，也就是说外边距其实它就不会再影响到我们盒子的大小，那它不会影响盒子大小，那它会影响什么呢？哎，我们说了盒子。模型主要是用来布局的，那除了大小以外，是不是还有盒子的一个一个位置啊，哎，盒子一个位置啊，我们还是先写一个div，点示一个BOXS1，基础样式呢，我们写上啊，直接来一个style标签，Style标签我们直接来一个点一个BOX1，然后Y是一个200 hi是一个百，然后background background背景颜色直接来一个B出来，然后把边框设置上，我们来一个这个十像素，然后来一个red，然后来一个solid，写这么一个哎，小的盒子啊，现在是一个，诶二百二乘以二百二这么一大小一个盒子，那接下来我们要说这个外边距啊，外距我们来说一下，外边距我们叫做一个margin啊margin，哎，首先我们来说一下外边距不会什么呢？哎，不会影响我们这个盒子，可见。

框的一个大小啊，可见框一个大小，但是什么呢？哎，但是我们这个外边距，哎，外边距哎会影响我们盒子的一个位置，说白了外边距是什么意思，外边距就是我们当前这个盒子和其他的盒子之间的一个距离啊，你差多远，这叫一个外边距啊，外边距所以啊外边距它不会影响可见框，但是它实际上会影响到什么呢？影响到我们盒子实际占地范围大小，实际占多大地儿，外边距会影响，但是这个这里边这个区域，外边距不会管啊，它只会管那个位置啊位置，那外边距是一个比较最麻烦的一个属性吧，在我们这个盒子模型里边最麻烦一个属性，因为你像borderer，像什么拍定都属于内部的，内部问题都比较好解决，但是margin就涉及到什么呢？和其他盒子之间的位置的一个关系，那这时候相对来说就会复杂一些。我们。

同样一共有四个方向的，外边距哪四个方向一样的啊，Marin Mar margin一个top，哎，然后margin一个这个right，然后还有一个margin一个bottom，还有我们叫做一个marin一个哎。

Left，哎，也是四个方向啊，四个方向top是上外边距，是我们上边和其他元素这间一个距离，Left是左外边距，是我们左边和其他元素的距离，下边是我们下外边距，是下边和其他元素的一个距离，然后right是我们右外边距，是我们右边和其他元素之间的一个距离啊这1.1定要注意，我们来演示一下我这一块，我给它先设置一个margin top，比如说marin top，我给它一个100，我们先想一下它应该是什么效果，我设置完100以后，也就说是上边和其他元素之间的一个距离，这个距离是100，那我设置完100以后，上边的距离是100，那这元素为了保证这距离，这元素应该往哪走？哎，元素是不是应该往下移啊，哎，往下移，所以这个时候我写一个100个像素的话，你会发现什么效果呢？我这元素往下挪了100，是不是这段距离是100啊，哎，这。

距离是100，所以这叫margin top叫做我们这个上外边距，哎上外边距我们如果什么呢？诶，设置一个这个正值，我们元素会什么呢？元素会向下移动啊，元素会向下移动，因为它让这段距离大嘛，这段距离越大，这元素是不是就越往下走啊，哎，所以就往下移动啊，这是上弯距，那同理，我这来一个左弯距margin left，我来一个100个像素，那怎么办了，那是不是这段距离是100啊，这段距离是100，是不是等于我元素往往右走了，哎，往右走了，所以life的我们叫什么呢？叫做一个左位边距，左边距设置一个这个正值。正直我们这个元素会什么呢？元素会向右移动啊，元素会向右移动，那这个是我们这两个东西啊，两个东西一个是margin top，哎，设置完值是往往下走，Margin left设置完值是往往往右走，对吧，左侧的是往往右走，上边是往下走，你就记住了，正直都是往相反方向走啊，Left就往往右走，Top就往下走啊是这么一个，然后再看啊，因为它设置是距离啊，所以肯定是相反方向再往下看，我们还有一个谁呢？还有一个叫margin bottom叫什么呀？下个边距margin bottom会是一个什么效果？

我也写一个100个像素，我们来看效果，有没有效果。没有效果啊，没有效果，所以这里边我们要说一个说一个事，说一个事儿，为什么没有效果呢？哎，注意了，我们元素在我们这个页面中是什么呢？是按照这个自左向右的顺序排列的顺序排列的，我们说了这跟我们这个书写习惯是一样的啊，也就是说元素会尽量的靠在我页面的左上角，它会尽量的往左上角去靠，是往左上，往往左上贴啊哎，往左上贴，所以啊，所以当我们啊，所以啊，默认情况下，在中国是吧，在我们这种自左向右书写的习惯的国家啊，自左向右啊，不是自左自左向右，自左向右的顺序排列的，所以默认情况下，如果我们设置的是左和上。

外边距则什么呢？则会将我们这什么呢？哎，将会移动我们这个元素自身啊，你设置是左上，它会让元度元素自身去移动，为什么呢？因为你左边上边你是默认就贴到最左最上啊，那现在你给左边设置一个距离，给上面设置一个距离，你是让它往往往右移往下移啊，哎，所以设置左上元素会移动自己，而什么呢？而设置什么呢？设置我们这个其他也就是我们这个下和什么呢？和这个右外边距会什么呢？会移动其他元素啊，会移动其他元素，所以说白了你就记住了，默认情况下左。

上都是移自己，而我们这个右还有下都是移别人，那右边现在它不可能有别的元素，所以右边我们也不需要考虑，我们只需要考虑下，所以为什么我们设置这个下外边距它没用，为什么？因为下是挤别人的，它不是让自己移动，它是挤别人，而它下边有没有别的东西，没有别的东西，所以这我们是不是看不出效果，哎，所以这里边我们先给它注掉，在下边呢，我再给它创建一个div，点一个box，我再给这个box啊来设置一个样式，我们直接来一个点一个box，点一个BOX2，我来一个200，来一个200BACKGROUND color background color，我们来一个yellow，然后这样吧，我直让他跟他一边大，我这来一个220，这也来一个两百二跟他一边大，那现在啊，我还是来一个margin bottom marin bottom，我们来一个100个像素，我们看效果，谁动它，诶是BOX2。

动boxb一动，没动没动，所以简单记的话，你就记住了，默认就是左margin left还有margin top，它是挤别人的，而我们的margin red，还有margin这个bottom，是不是margin top说错了啊，Margin top还有margin left是挤，是移动自己的，改变自己的位置，而我们这个margin bottom还有margin right是挤别人的啊，挤别人的，但是right我们这边上现在没有元素，没法演示，所以我们只说这个下啊，只说这个下，它是挤别人，不会挤，不会移动自己啊，不移动自己好，所以这里边我们的margin包叫做什么呢？叫做下位连距下位连设置一个这个正，哎，正。

下下的这个元素啊，下边的这个元素会什么呢？会会移动啊，会向下移动，所以下外边距就是挤别人了，Right，待会儿我们再去说，它会稍微有点特殊一点啊，所以这个是我们这三个方向是这么一个特点，然后换句话说，这里边我们这儿说的都是正值啊，说的都是正值啊，说的都是正值，那也就是意味着它是不是还可以指定负值啊，哎，指定负值，所以这里边我们说我们的margin也可以什么呢？也可以设置我们这个负值啊，负值如果是负值，则我们这个元素会什么呢？会向相反的方向移动，什么意思？上外边距看这。

都住了啊，我们上文句margin top margin top，我们来个100像素，这是一个正值，正值的元素是不是往下走啊，如果我给它负值，那正好反着就是往上走，哎，所以正值是往下走，那么负值就是往相反的方向走，同样我们来看一个我们这个margin left margin left，我来一个正值，正值是往右走啊，如果是负值，那就是往。左走啊，往左走这么一个效果，同样我们margin bottom margin bottom，我们的这个正值是把这个元素，诶让BOX2往往下走，如果我是负值，那就是BOX2往往上走，懂意思吧，正值往一个方向，负值往相反的方向移动啊，副值往相反方向移动，所以这1.1定要注意，那再来看我们的margin right margin right的话，这块其实你会发现我是写一个啊，我写一个100个像素，100个像素你看有没有用没用啊，我写零，我写零是不是依然没用啊，所以在这儿我们看上去好像这margin right就是一个废了的一个纸啊，就是一个废纸，好像就是没用，其实现在这就是没用啊，现在这就是没用，因为他是挤别人嘛，他右边是不是没有别人呀，所以挤不了，但是也不仅仅是因为这个，他现在你设置多少只他都没用啊，他都没用，为什么没用，待会儿我们再去说啊，待会再去说，现在你就。

记住了，现在默认情况下没用。哎，默认情况下，我们这个设置marin right，哎，它不会什么呢？不会产生任何效果啊，不会产生任何效果，你就记住就完事了啊，待会我们去说为什么，然后呢，这个是我们的margin啊，所以注意margin可以设置成负值啊，可以设置成负值，然后我们还要说一个我们这个margin的一个这个简写属性啊，简写属性就是什么呢？就是margin啊，就是margin，它可以什么呢？可以同时设置四个方向的外边距，这什么呢？它的，哎这个用法和什么呢？和拍定一样，也是上右下左，我就不演示了啊，简写水性叫margin，所以我直接写一个，我直接写一个margin 100个像素，那就是上右下左四个方向的外边距都是100啊，都是100，好，那这就是我margin margin我们再总结一下。

Marin它不会影响我们盒子可见框的大小，但是它会影响我们盒子一个位置，实际上你看啊，我们盒子的可见框就这么大个，但是我盒子占地面积是不是只有这么大个，不是，其实你会发现整个这块位置都被都被我们这个盒子占上了，哎，那那这块为什么占上了，因为这一块实际上属于margin的范畴啊，实际上属于margin范畴，也就是说margin虽然不影响我们盒子可见块大小，但是它会影响到我们盒子一个实际的大小啊，你说我们盒子实际占用网页空间的一个大小，所以注意啊，Marin它会什么呢？

哎，Margin它会影响到我们盒子实际占用我们这个空间的一个大小，也就说你设置margin大了以后，实际上我们元素所占的空间也就大了啊，所以我们可以通过margin来改变我们这个元素的一个位置，当然还有一些细节待会儿我们要去讨论，现在先自己尝试设置一下，暂时先这么记啊，Mar right现在没用啊，没用我们停一下。