13.尚硅谷_css2.1_粘连布局.wmv原创

大家大家看看屏幕，那我们来讲我们今天的第一个技术点，好讲这个技术点之前给大家看一个项目。好，这是大家以后也会接触到这个项目啊。好，所有的这边我使用到的命令啊，以及我们一些工程化的配置，你们以后都会讲啊，我就先把这个项目打开来给大家去看一下。好，项目启动可能稍微有点慢。啊，你们之后要学noe是不是，那像现在我们用的所有的npi的一些管理的话，都是用什么，都是noe里面的东西，所以说什么学noe的时候啊，把把这些东西学学好啊，对于我们一个前端公司来说的话，你懂点后台终归是好的啊。OK，起的有点慢。

稍微等一下。好，我先把地址输进去，HTTP，好，Local host l。Chosd。哪个端口808。OK，应该起完了，你看这边打包已经做完了，好边已经做完了，那这是我们以后会涉及到的一个小项目，OK，呃，好点。看我来刷一下。好，刷一下我点开了之后，大家是不是看到一个遮罩，是不是看到一个遮罩之后需要大家去关注，关注一个东西，下面这个图标，好大家来看一下啊好，我来再来刷一下，好点完之后大家看，如果我把这边的文字全部干掉。

啊，我只写一点点这个文字，大家看这个图标是不是始终在这个位置没有动啊，是不是啊，它是靠这个内容撑开来的吗？并不是吧，好，再来看，好，我再来刷一遍，好，我再把这个遮照给打开来，好，我把这里面内容干嘛调整的多一点好。好，CTRLC好来做诶。不让我贴啊，CTRLC。真不让听。呀。好，慢点啊好，贴贴贴贴贴贴，我贴什么很多放在里面吧，这个字是变成什么越来越多啊，看一下这个底部是不是被这个字体给顶开来了，好，这是我们前端当中经常见到的一种布局形式，叫CSS stick foot，什么粘接布局，就是这个底部一开始的情况之下，如果你的内容，如果你的内容没有什么撑满整个屏幕，这个这个肤色干嘛永远在底部。

能明白吗？一旦你的内容充满整个失口了，这个负的跟着你的内容走，那大家看是不是现在现在就是这样的，而且这种什么这种布局我们经常见，像这种什么关闭按钮是不是都是这样的一啊你一个如果文章里面，比如说像我们现在这个，像我们现在这个场景里面，你是不是把这个遮罩给关掉啊，遮罩给关掉的话，如果你这个复制始终定位在我这个复制的底部的话，会不会跟这些文字重合啊，体验好不好不好吧，那可是随着文字越来越多的话，那怎么办？是不是应该要跟着你这个什么。跟着你这个文字走啊，可是一开始如果你没有那么多文字的时候，你把这个复制文字如果干嘛放在这边。丑不丑比较丑吧，就说没有文字的时候，是不是干嘛应该放在底部啊，能理解吗？好，这就是我们C一个CTRLC好。那来看一下什么叫CSS这个福特布局，好，我们来开始我们第二天的课程，好对零二好来看一下CS stick foot，好，来看一下什么是stick foot，经典的粘贴布局也叫粘贴布局，也有直接读它英文名字叫CSS的一个foot，懂不懂，不管你们听到什么名字啊，你得知道这就是我们待会要讲的粘贴布局，明白吧，而且这个布局，哎，经常也会被问到啊，OK，来看一下什么叫内内布局，我们有一块内容区域叫卖，是不是这里面是用来放内容的，当内容的高度足够长的时候，我们这个肤应该什么？

这个负载会跟在什么？呃，紧跟在负载后面的元素负的，哎，这是这句话是我写的吗？OK，我们说什么，当面的高度足够长的时候干嘛，我们这个应该干嘛，应该应该。

夫的应该紧跟在什么紧紧。啊，负的应该什么在紧跟在慢元素的后面嘛，不能解好，当慢元素比较短的时候，比如什么小于你屏幕屏幕的高度的时候，我们希望这个负的能够捏接在屏幕的底部，这个就是CSS这个负的知不道看两张图啊第一个。好，大家看这是我们的放大一点吧。好，OK，稍微给他说。OK，大家看这个是我们整个屏幕的一个。尺寸，红颜色的是我们整个屏幕的尺寸，能明白吗？当你里面这个麦的元素比屏幕还要还要高的时候，负者是不是一直在面的后面，是不是OK，再来看如果什么。

如果你什么你们这个慢元素比这个屏幕，屏幕什么高度比较小呢？这个负子是不是一直在底部啊，好记住这个就是CSS这个负的，那怎么去实现它呢？好我们来写一下。好，我把这个名字扣扣一下，好，CS stick，想想这个东西应该怎么做，有没有思路？好，之前告诉告诉大家，只要是比较奇怪的布局，基本上就会出现。马丁为。复制好来看一下，好，那写这个CS这个负的，如果你没有写过，你肯定不知道怎么写啊，这个是必然的，因为没有接触过，可是一旦这今天讲完之后，以后写CSS这个负责布局，我希望你们跟着套路走，不要跟着思路走了，懂不懂，我现在跟着思路，现在给你们讲一遍啊，好，那这个负责干嘛啊，这个布局的套路必须要有啊，那这个没有办法跟着思路走，先先什么按照这个套路来，它有一个包裹区域，包裹区域里面去给我放主体内容，好待会我来讲为什么要这么去做，A是不是好，这个里面是用来放什么的。

放主体内容的，比如说什么MMEM是不是啊，一个BR好走，你什么来一个三个是不是好，切记foot，照理来讲我这个负的是不是应该在这个面底下是不是好先。打完这三个R标签啊，也就这三面之后，我们现在就不要决定这个foot的位置啊，这个foot的位置切记不能放在外里面啊，也就是说不能放在这个man的下面啊，不能放在这一块啊，不能放在这一块好要放到哪诶，照理来讲的话，我们说这个福特的结构的话，应该也算我这个包裹区。呃，里面的一个元素嘛，所以说照理来讲，它是不是应该应该放在这个外部的内部啊啊，可是CSS结构物的布局它就不是这样的啊，切记它这个呃，元素的位置是有要求的啊，你这个foot必须给我放到。

外的外部啊，平时我们说什么必须要有个包裹区域，里面是放主体内容的，是不是外部呢？来一个F，好，这是真正放福特的地方，好，我来一个福特。好看一下样式怎么写，结构就是这样来的，包括区域，包括区域里面放一个主体内容，外部放好整里来一个style标签。好把给清掉好看点也给它清掉好，OK，首先我们来看应该是比较丑的是不是啊，那我们这个时候呢，我们不想把这个布局放在PC端，我们想放到什么移动端看怎么办？F12进来，F12进来之后，这边是不是有个按钮，好，这个按钮就是CH提供给我们什么移动端的一个调试器，懂不懂，点击这个按钮就会出来什么一些移动端的设备，IPHONE5啊，IPHONE4啊，什么IPHONE61都有是不是，可是你上来会发现这个字体比较小是不是啊，所以这边你要加一个面料标签啊，这个标签暂时我不给你们去讲，你们先加上去就可以了，懂不懂？以后我们会花一讲移动来时，我们会花一天的时间来讲这个美达标签啊，OK。

好，这个me标签怎么写？好，来个me好，Name等于什么呢？View put好，Content里面要写几个东西呢？Y等于D1D1D。De。Natural scale等于1.0，好，由SE-salla AB等于no，好，那这个东西是以后你们会干嘛经常看到的东西啊，可是暂时先不用管大家看，如果这个面料标全一写，我再来刷一下，发没发现这个字体就变得清晰了。好，里面的原理我们这块来讲涉及到像素啊，好像素在移动端呢，在其在我们前端的话是一个比较重要的概念，以后我们会花一天的时间来讲，这到底是什么，是什什么样的一个过程啊好，您首先要知道在移动端你一定要加上这个面料标签，好，那加完这个之后我们来看，好来看一下这个外是不是在这块啊，Foot是不是在这啊？好，先把foot的样式我们先来写一写。

好，一样，我们这个福特我们给个高度吧，福特是不是个ID啊，福特我们给个高度，Hat我们给一个50标尺，好，并且颜色我们给成生粉吧。好，呃，让它里面的文字居中，X等于。是不是垂直方向有居中怎么办，然后等于。然后它等于50好，所以你来看一下这个时候有没有居中好是不是就过来了，可是我们说一开始情况底下，你这个慢的内容是不是没有撑到我这个视口的一个大小，那它应该在底部，那怎么让它去底部。

定位定过去啊。可以使用定位吗？使用定位的话，我们另外一个需求怎么办？你得跟着内容跑啊，是不是用GS来控制了，好像并不是很好，是不是好怎么办？想想我能不能先把我这个外盘的高度撑到我的室的高度。用CS3能不能实现？用CSS怎么把这个外部的高度称之为四口的高度？怎么办？是不是把HT玻璃的高度一层一层的继承下来，继承到我整个是个螺是，那好做啊，怎么办？HT干嘛不把他们的高度全部给我？拉下来，然后呢，我这个web上面是不是这个玻璃呀，我这个web应该怎么办，是不是也是应该变成我们适合的包装，那是不是也来一个hat y。百分百好，我也给他一个背景，比如说这个背景我给成粉色，我们来看一下。

那是不是就过来了，好可是我们说你看现在是不是出了什么滚动条啊，好可是我说你这个麦里面内容现在是不是也没有生开啊，可是我这个是被我这个外给下去了，怎么让这个的上来，妈什么。Marin拓宝为多少负50PX，那它是不是就上来了？是不是好，这个时候我们这个福特这个位置是由谁来决定的。外来决定的吧，你这个麦里面的内容对负制会产生很多影响吗？来看一下，不管你这个麦里面内容怎么变好，只要你没有撑高我的视口的高度，你看这个负的动吗？不动吧，也就是说现在第一个需求我们有没有实现。我们说只要你们里面的内容没有撑满我的四骨的高度，福特永远在最底部，有没有实现啊，实现了吧，可是有些事情我没有做到，OK，我们来，我们来一个text等于center，好，那这边时候里面这个man的文本是会会居中啊，好，如果我里面这些内容变得越来越多。

祝你变得越来越多。大家看。有没有重叠到一块去呀，我这个粉色的区域是不是我外部的这个生粉区是不是我负责的，你这个man的内容是不是现在溢出啊。你看有实现我们第二个需求吗？没有，这是什么意思啊，也就是说我们外的高度，我们说负特的位置是不是只受外部的影响，也就是说我们外壳的最小高度应该为我的是个高度吧。能理解吗？外的最小高度是不是应该要为我们的四个波度，可是外随着随着它里面内容慢慢变多，应不应该被撑开？你有没有被撑开，被撑开之后，我这个负的是不是就跟着你的这个外部走了。

能理解吧，那怎么办？你能在这边把它的height给定定死吗？不能吧，它的最小高度是不是应该会百分大？也就是说干嘛我这里面的内容没有达到我视口高度的时候，你的最小高度就应该为我的视口高度。是不是这么理解，一旦我里面的内容越来越多了，问你啊，里面内容越来越多了，你这个外面的高度会不会被这个面给撑开了？因为你的最小高度为百分百吧，你最小为百分百，现在我里面卖的内容都要比市口来的高了，能不能把这个外包给撑开来，可以吧，来看一下，那是不是这样就撑开来了，你看现在有一件事情，我们用的现在这个负是不是会跟着里面这个内容好，内容变多，它是不是跟什么跟着什么，你看现在是不是内容还没挤到它，一旦挤到它了，那这个负子是不是就会跟着这些。

内容去跑啊，能理解吗？可是还有个事情，是不是还会有部分东西给冲掉？重叠多少？50PX吧，那怎么大。怎么让怎么让我麦里面的这些数据，就是麦里面的内容不跟我这个负去重叠啊。给它加个排定波程吧，排定波程指指干嘛只会绘制背景啊？会根据里面内容内容重叠吗？你们还能看到这个叠叠加的效果吗？看不到了吧，那怎么办？给我这个什么。外里面的什么，外里面的这个。Man是不是给他干嘛，来一个PA丁波，这个潘定波为多50PX，好之后你来看一下，说一下好来看这个时候你看还有重叠吗？其实我问你，其实整个foot跟men有没有区域重叠。

跟他哪一块区域重叠了，底部的拍重叠了，可是这块拍会绘制内容吗？不会，对用户体验没有什么影响，能明白吗？这个就是CSS客服的布局，看我们有没有实现好，我们把里面的内容变少一点。好，干掉。好，你看是不是永远在最底薄，好里面内容慢慢变多，教你慢慢变多，好那是不是就跟着我这个内容走。能不能理解啊，OK，那这是我们现在第一个的布局，好，也叫捏捏布局。