尚硅谷前端基础 (112)

好，我们中间这部分班那就做完了啊，那这块做完了的话，嗯，其实还有一部分的话，就是我们这儿有一个这个东西，这个东西的话，其实它，呃，你可以说它不属于我们页面的任意一个部分，因为它实际上是用到了一个固定定位，这东西是干嘛的呢？如果你看我们原网页的话，其实哎，当然它太大了，看不见了啊，小一点的时候，这时候你会发现有这么一个东西，这个东西它实际上是在干嘛呀？哎，它是在固定我们页面的一个位置，它实际上是不动的啊，它实际上是不动的，所以这个时候，哎，我们要实现这个东西，其实。也很简单啊，也很简单，那这里边注意了这个东西的话，它的布局啊，它怎么写呀，其实很简单，就是这么一个框，这个框里边呢，我们给它设置一个，这个设一个大小啊，是一个大小固定了，然后里边设置图标字体，再设置个弹出层是不是就行了呀？哎，它本身比较简单，就是布局并不难，或者说我们之前写的东西跟这玩意儿都类似，所以这个布局我就不再去重重复的再写一遍了啊，我们主要讲一下我是如何能将这么一个东西给它定位到这个位置啊，定到这个位置，所以我们不从它里边的布局，我们不写了，我们就来写一下它的位置啊，那这里啊，我们来写一个东西啊，这这个它它不属于任意一部分，所以其实你写哪都行啊，我们直接在这写一个div div呢，我们直接来一个这个class啊class class我们叫做一个two top吧，诶to top我们叫去顶部对吧，或者叫back top，诶back top回到顶部，因为它主要的作用就是这个东西它的里面。

内容我们就不填了，我就写这么一个div，然后呢，在这里边我们来写一下，哎，我们这设置什么呢？哎，设置我们这个回到。哎，顶部的这个元素啊，这个元素，那这个我们叫做一个to top啊to top to top的话，我们就把宽度高度给它定下来，宽度是一个Y是一个Y是一个26啊，我们都量过了是吧外是一个26 head呢是一个206啊，Head是一个206，然后呢，我给它设置一个background color，井号BFA，其他的全都不写了啊，我就写这么一个东西，那写完了以后，这玩意儿跑哪去了，我们来看看啊，我们这刷新一下。

这儿没保存吗？保存一下，这也这跟着保存一下看看啊，诶现在等于说我们这东西是不是看不见呀，看不见我们来看一下啊，选中一下看它在哪了，Back top，呃，Back top，哦，Back top应该是这个类写错了，应该叫back top b back top，这个时候这东西是不是跑这儿来了，哎跑这儿来了，那很明显这东西不应该在这是应该在我们的页面的这个位置，哎，这个位置，那并且的话，它其实它是固定在这儿不动的，所以这个东西很显然我们应该给它开启一个固定定位，开启我们这个固定定位，我们直接来一个position，我们来一个fix啊可以进固定定位，那这个候它的特点就是不，它就在相当于相对于我们视口定位，你说这个时候它就不会跟随我们页面去滚动了啊，不会跟对面去滚动了，但是这里边我们还有一点需要注意它的位置，它的位置我们是需要给它定到这个位置啊，我们。

换一个颜色，我们看的清楚一点，换一个orange吧，Orange啊换一个颜色，现在在这儿呢，那我们实际的位置是不是应该是在这个位置，哎，那首先纵向的位置好定，纵向的话，我们直接给他一个bottom啊，给他一个bottom bottom比如说我来个100个像素啊，距离底部100个像素，那这样这个位置是不是定下来了，哎，那你可以，哎实际上我感觉这个位置，哎基本上差不多是吧，基本差不多这个位置，那假设我们说就是100个像素吧，这100可能稍微有点大，它可能实际上可能是50或者多少是吧，六七十的样子，我们改小一点，那不管怎么说，纵向这个位置是非常定的，但是我们麻烦在哪儿？麻烦的是我们这个横向水平方向的位置，水平方向我的这个元素是不是应该是定到这个位置，哎，定到这个位置啊，诶有同学说老师你这你这不有一个右侧一个距离吗？你把这距离量出来不就行了吗？哎，我能不能把这距离量出来，哎注意是不行的，为什么不行，你注意了我的。

这一块距离假如说啊，假如说现在我这量的一个距离是100，呃，是50，假如说是50，我就给他设置了一个margin right这个值，我就设置了一个50，这样写行不行，你想一下行不行。行不行，哎，很显然我写50是不行的，为什么？因为注意我们这个外围的是我们整个浏览器的那个包地那个窗口，而我们整个浏览器的包地的大小它是不确定的，也就是说我这个窗口有可能大有可能小，那多大多小的话，中间这块的大小我们这已经定了，就是一个1226就这么大个，而我们两边这块空白区域的大小他确不确定，注意它不确定，可能在有的浏浏览器里，它这个距离就大，有的浏览器里这个距离就要小，所以这个时候，比如说有浏览器里这个白边可能这么大，有浏览器这个白边可能什么呢？可能这么小，OK，那你设置一个right是50，那可能在这种浏览器里，它跟这儿呢，那在这个浏览器里可能就跑这儿来了，也就是说这样的话，我如果这直接写一个RA50，实际上它是不是会跟随着我们不同的浏览器它的大小。

也会改变呀，哎也会改变，所以那比如说啊，我们演示一下就知道了，比如说现在我们这个浏览器大小。现在它这一个大小，我们来看一下是一个这个86对吧，八十六八十六的话，我们的这个元素是一个26 26减86等于60，所以按道理讲，我这直接right也来一个60，诶你看这值设计的特别整是吧，特别整它就应该正好贴在这个位置，是不是正合适啊，哎，正合适贴到这个位置，但是注意诶你说老师这不挺好吗？注意啊，当我窗口大小改变的时候，你看这距离是不是大了，当我窗口大小变小的时候，这距离是不是又小了，哎又这这这这这这叫小了是吧？这个距离小了，这个是不是这个距离又变大了，所以你会发现我如果写直接写一个right这样去定位的话，行不行？很明显是不行的，你这么定位这个位置是不准的，窗口大小一变，这一块距离你是固定了，但是他们之间的距离你是确定不了，哎，你确定不了，哎呀怎么办呀，好烦是吧，哎，好烦，当然有GS。

字的话，其实我们写写两行GS可能就很容易的去给他搞定，但是现在我们所写的所有东西都是在没有GS的前提下去写的，所以这个时候我们也是要尝试着去把这个问题给它解决好，诶那我们来要怎么去解决这个问题，怎么解决这问题，那这里边注意了，我们就不能去写right，直接写一个right值了，因为这样的这个值是算不对的啊，是算不对的，那好我们回过头来接着说，那我们来说一下它这个定位啊，首先我们现在给这个backop开启了固定定位，那么固定定位它是相对于什么，相对于我们视口来进行定位的，对吧，它是相对于视口进行定位的，但是现在的问题是我视口的宽度是不固定的，那你现在看我视口就窄视口啊，我们说的是可视区域叫视口，对吧，现在我视口可能是这个宽度，但我一拖这视口是不是变窄了，我再一拖视口是不是就变宽了，哎，也就是说视口的宽度它是会。

发生改变的，所以这个时候如果我们直接这么写，它不对，它的位置会有问题啊，会有问题，那这个是候怎么写啊，这时候怎么写，诶那我们来说一下，我们在这把这red删掉啊，那这里边我们来说一下我们这一块布局啊，我们这块布局的一个等式，哎，布局的一个等式啊，我们就说我们这儿啊，我们这儿我们应该是什么，应该是一个这个life的，我们就说这几个影响布局的啊life的加上一个margin left margin left加上一个什么呢？加上一个right啊，我们就水平的啊，再加上一个什么呢？加上一个margin right啊，Marin right RI，再加上一个right，它应该等于的是我们包含块的一个什么呀，包含块的宽度，那在我们这儿来说就是等于视口的一个宽度，是这意思吧，哎，是这意思是等于视口宽度，所以这个时候如果你把right写死了的话，但是视口宽度是会变的，视口宽度越变它的位置。

这是不是这边的值就会发生发生变化呀，哎，所以这里边注意不能这么写啊，不能这么写，那这里边我为什么要把这等式列出来，那现在我们来看刚才我们什么情况，刚才我left的值我写没写啊，没写对吧？没写的话left的值是凹凸对吧？自动嘛啊Mar left是多少，Mar left也没写没写就是什么呀，就是零，Right写了我记得应该是个26对吧，26WHAT right写没写没写没写它的距离是一个什么呀，是个零，然后right的话，Right的话我们写没写，写了我写了一什么呢？写了一个60啊，写了一个60，然后他们加一块，应该是等于我们视口的宽度，视口宽度爱多少多少啊，不管它等于视口宽度，所以这个时候等于说我们的这个元素，它对于我们的什么呢？哎，那现在啊，我把60写上right是一个60 60，现在我的视口宽度就这么宽，所以这个距离是不是60啊，哎，这个距离是60，而这个距离。

什么这个距离由什么决定？这个距离由我们的margin left还有left是不是共同决定啊，那我们margin left设置是一个凹凸，所以这margin left设置零，所以就没有了，而我们的的设置的是一个凹凸，所以这块距离它是不是会自动调整以使这个等式满足啊，哎，所以当你窗口变大的时候，变大的时候这段距离是不变的，永远都是60，但是这一段距离是不是会变大呀？诶这块距离是变会变大的，所以这个时候它为了满足等式，我这个元素是不是固定在某个位置啊，不是，它会跟随你浏览器窗口的改变，是不是一块改变，哎，一块改变，所以这个时候我们不能这么写，这么写完了以后这位置就不对了啊，位置不对了那怎么办？诶看着啊，我这个时候right，我不这么写了，我写一个什么呢？我写一个50%的值，是一个50%，50%的是什么意思，这个是这个的意思非常简单，就是将我。

的这个值。将我们这个RI GT right值设置为我们这个视口什么呢？哎，视口的一个50%，视口宽度的50%，所以这个时候50%就是屏幕宽度的50%，所以这个时候你看跑哪去red就跑这儿来了，那也就是说这个线这条线因为right值嘛，对吧，右侧它这条线，这条线实际上就是我们整个市的中线50%嘛，诶这条线就是我整个视口的中线对吧？哎，中线，哎，那你说老师你这么写图什么呀？哎，图什么别着急啊，别着急，我们来看一下现在我们这个等式变成什么了。

变成什么了？现在我们left是不是还是凹凸margin left是不是零外还是二六，前边是不是都不变，唯有谁变了，唯有它现在变成了50%，视口宽度50%，那现在什么效果，现在无论你市口多宽多窄，那这个时候这玩意儿是不是都在中间这个位置，哎，它就不会跟着你屏幕的改变去动了，因为它永远都在中间，但是又产生了一个问题，现在是这是一个中线对吧？这是一个中线，我们这个整个宽度是一个多少来着，整个宽度是一个1226126，那等于这个是一个中线对吧，中线那这块应该是那个幺二六一半是多少啊，是612，是二六一十二六幺三对吧？这应该是613，这边的距离是613，是不是这边的距离也是613呀，我们就说中间这块啊，对吧，也是一百六一六百一十三，那现在我们想干嘛。

等等，我们是不是想把这个块儿给移到。移到这来，哎，也就是说我想把这个块给它移到这儿来，那注意了啊，那注意了，那我能怎么样给它移到这儿来。怎么样了，李老师？想一下怎没有移到这儿来，那我如果想把这个块我给它移到这儿来，那这个时候我是不是就应该给它设置一个life的值啊，哎，比如说我的life的值是这么大，我的life的值是这么大，那这个时候它是不是就跑这来了，S就跑这儿了，但是问题来了，这个life的值我能不能写。

不能写，我不能写，为什么不能写？因为现在这一块的位置是不确定啊，这一块的大小是不确定的，所以这个live值你要写死了，给你把right值写死了，效果是什么，效果是一样的，没有任何区别，所以注意life的值在这我不能写啊，Life值在这我我不能写，那好了，我现在问你，现在对于他来说，它的life的值是多少，Life的值是多少？Life的值现在是不是就正好是。是这个距离啊，哎，正好是这个距离，因为注意life我们是不是凹凸啊，它是自己计算的，所以它现在的left的值，实际的值一定是这段距离，懂这意思吧，一定是这段距离，那现在我希望live是多少？我希望live的值是不是是这一段距离啊？哎，这段距离这个是我的期望值，这个是我们目前的值，那我们来看看它差了多少，哎，差的是不是正好是我的这个这段距离。

是不是差的正好是这段距离，懂这意思吗？I段段距离，也就是说我只需要把这段距离给我现在的这个left值一加，它是不是就直接给你拱这边了？哎，就直接给你拱这边了，那现在问题来了，我怎么样能把这个距离给left加上？哎，还是那句话，我能不能设置left，不能设置left，因为left我就是要让它自动计算，你要一设置，我们就完全失去意义了啊，完全失意义了，所以现在我希望要调整一下left的值，我要让值干嘛？我要让left的值增加，增加，我总能增加，这动不了了，这已经写死了50%了，这就不能动了。那现在我要让left值增加，我怎么能让它增加？哎，那很简单，你要想让left增加，那你的办法你是不是就让这个margin left，或者是margin right值减小啊，现在这个等式平衡了，哎，这left等于是一个变量，如果你要想让它增加，那你等于这两个任。

这一个值减小了，它的值是不是就变大了？哎，你两个任意一个值减小，为了使等式满足，这个凹凸是不是就会变大呀？哎，所以这个时候我们如果想让left值增加，两种手段，一种是让margin left增大，还有一种是让margin right增大，懂这意思吧？哎，但是我们想一下margin left行不行？不是不是增大啊，是让margin left减小，Marin减小，因为比如说我这小一为了确保等式满足，它是不是得加一啊，哎，我这小十为了确保等式满足，它是不是得加十啊，哎，应该这个道理很简单，对吧，应该很好理解，所以这个时候我们如果想让它的值增大，我们的方法就是让这个margin left或者让margin right值减小，哎，所以你可以怎么写呢？比如说我写一个margin left margin left来，我来一个负100像素，那这个时候它的值减小了，这个值减小，我们那个life的值就会自动，什么增大啊，它会越来越大，我们这来一个200，它也会增大，但是其实你会发现我这增大完了以后，它没有任何变化，没有任何变化，为什么？为什么没有变化？因为什么margin left是或设置什么呢？设置一个左侧的一个边距，哎，我们的left呢，也是左侧的一个距离，那这个时候注意你用margin left，你设置了一个负值，你这设置负200那个left就得干嘛呢，就。

对，加200，但是位置为什么没有发生变化呢？我们来想一下margin left什么意思？Margin left这个值越大，元素是不是越往右移啊，这个值越小，元素是不是越往左移啊，哎，所以这个时候你设置一个负值，它按理说是不是应该往哪往左移200像素，但是注意了，它为了确保等式满足，它是不是会在这个left这加200啊，OK，你减200，我加200，那最后是不是没减一样啊，哎，没减一样，因为它们两个值的意思是一样的，你这减一个，这加一个元素的位置不会发生任何变化，所以注意这个时候我们不能调整margin left，我应该调什么呢？应该调整margin right，那这个时候同理，我给它设置成负十，我们那个live值就会加十，你看保存一下是往右移动十啊，我要设置负20，它就会干嘛呢？它就会加20，哎，我要负设置负100，它就会干嘛呢？它就会加100，你看这life的值是不是会增大呀？哎，你看我这RA值越小，它的life值。

越大，为什么？就是因为它要确保这个等式干嘛满足啊，需要等式满足，那RA的值越小，它的值越大，那这两个东西，那是不是就导致我们元素就往左移了，Left值越来越大，元素是不是越来越向左，诶越来越大就越来越向左，越来越大越来越向左，而right我们说了默认情况下它是影响别的元素，它不会影响自己的位置，所以这个时候这right你写完跟没写是一样的，对吧，只是写完它以后导致我们这个life的值增大了，懂这意思吗？哎，但是问题来了，那现在我们这live的值要增多大才能保证它在这个位置？

增多大呢？哎，那这个值是可算的啊，可算呢，怎么算，我们说了这条线是不是中线，哎，这条线是它的一个中线。这条线是它的一个中线，那我们要把这个元素是不是要移到移到这儿来啊，哎，移到这儿来，所以这个时候我要增大的距离是多少，哎，是多少，现在它的life值在这儿，我们要增大一个距离，正好是它的一半，一半再加上什么一半是不是再加上它自己的一个这个宽度，哎，它自己的宽度是一个二十六一半的话，刚才它整个宽度是幺二二六一半的话，我们算一下一半的话应该是一个，哎六啊六幺。613对吧，613 613再加上这个26它的宽度，那这应该是一个639，我要是没算错的话，我应该正好设置一个639就跑这儿来了，并且注意是负值啊，负值我们试试啊试试，我也不知道算没算错，我们试一下，我们直接来一个marin left margin left，我们这是一个639个像素预保存。

639保存一下这一块，看是不是贴这个边贴的死死呀，哎贴的死死的，那这个时候它的好处就是你这个窗口大小再怎么改变，会不会影响到它的位置，不会影响到它的位置啊，不影响它位置，那这个问题我们给他解决了啊，注意利用的什么原理，利用的就是我们这个等式啊，当然这个等式里边还有几个没体现出来borderder啊，那个拍顶没体现出来，但是我们主要说的是位置，所以内部那些我们就不说了，那这样的话，我们就可以把这个位置死死的固定在那儿了，那这块的话，可能对于很多同学你初学的话不太好理解，那不太好理解，我再简单说一下它的原理，首先的话，我这写了一个margin，写了一个RIGHT50 right50就是把它这个右边距设置成这个视口宽度50，那刚才我们看到效果是跑到这儿来了啊跑这来了，那我设置完这个50以后呢，注意了，我right是不是就有一个值了，哎，就有一个值了，有一个值以后，那注意它的这个life的值就是什么了，默认是凹凸。

所以这段距离实际上是由浏览器自动设置的，那由浏览器自动设置有什么好处？浏览器自动设置的话，那就意味着这段距离实际上浏览器就给我们算进来了，这段距离我们还用不用考虑了，就不用考虑了，懂意思吧？所以我们为什么要设置一个RA，就是为了什么呢？这段距离让浏览器自己算，所以这儿你也不一定非得是50%，只要是什么呢？只要写完了以后，这玩意儿能跑中跑里边来就行，不一定是微软50%，但是50%好算一点啊，好清楚一点对吧，好算一点，清楚一点，所以这个时候设置50%把它整这儿来了，然后这一段距离就是由浏览器自己去计算的，那至于它是多少我们就不管了，这段距离一定已经包含在那个left里边了，对吧，然后剩下的问题就是我们要增大那个left增大left增大增大多少，我们要增大的是我要把它这个left值数从这增大到这儿啊，那我们说了正好是它的一个一半的宽度加上视口啊一半的一个这个诶一。

半的这个视口的宽度，或者说这个屏幕的宽度，不是视口的宽度，就是我们中间这个容器的宽度，它的一半宽度加上一个我们这个元素的宽度，加上以后这个距离我只要给这个LEFT1加，这元素是不是自然而然就跑这来了，哎，但是问题是我们怎么把这距离给它加上，那就要看到这个等式了，我们刚才说了这个等式在这儿，如果你想给它加上怎么办呢？诶，现在等式满足了，你希望这个值增大，那就肯定你要把这里边的某一个值设置成负值，那比如说我就把它设成负值，那这样的话它变成负值了，我们要确保等式满足，是不是得有一个值？变大呀，那哪个值变大呀，哎，那毫无疑问，那就是我们那个凹凸那个值变大，那是不是就是left变大呀，哎，那left自然而然就变大了，那LEFT1变大元素是不是就挤过去了，哎，并且一挤过去那个位置一定是准确的啊，一定是准确的，哎，那为什么不给Mar left设置，刚才已经说了，因为这两个你设置完了，设置完了没用，它大了，它小了，位置又又拉回去了，所以我们这只能给red设置啊，只能给red设置好，这个呢，稍微的有那么一丢丢的一个难度，但是呢，也没那么难啊，转过个来啊，转一下想不起来了，回去看我们之前定位说那个布局，那个计算方式啊，一定要。

一定要写出来这个东西，这种技巧在我们的这个前端开发里面，布局里面用的是非常非常的多的啊，非常非常多的好，那么这块我们就写完了啊，当然这东西现在你看不出固定来，对吧，看不出固定的呢，我们给包呢设立一个高度。自带我给他设置一个高度是一个这个1000像素啊，1000像素能高一点，高一点就出现滚动条了，出现滚动条了，就能能看到它是不是固定在这个不动了，哎，固定在这儿不动这东西我们就已经完成了啊，但是当然里边那个布局我没有写啊，你自己写一下吧，我就不写了啊，跟什么其他的东西都都一样，咱们这儿就不耽误时间了，难点重点就是我怎么把它给定过来啊，怎么把它给补过来啊，好，我们来停一下。