08.尚硅谷_css2.1_等高布局.wmv原创

好，刚刚只是做了一个小小的分享，是不是OK，好，刚刚说了N要经常去啊，那个火狐开发者平台啊，OK，然后我们来说马为负值，我们再来做一个应用，我们下课啊。好，我们来做个什么呢？尾等高布局，什么叫尾等高布局，我们可以来看一下我们现在这个圣杯布局，好像这个圣杯布局没有什么问题，是不是啊，来看一下。好，我们说我们这个圣杯布局，现在是不是所有的div我都给了高度啊，有没有给高度啊，他们。没有没有给高度啊，都没有给高度吧，高度是默认靠内容撑开来的，OK，来看我给高度。怎么给高度呢？比如说我给这个me。来一个H4H4吧，好，H是不是一个快计元素啊，那我这个时候的话，它是不是默认会换行的，所以说会被我这个H4撑得很高吧，领导来看一下。丑不丑巨丑吧，你看这边这边背景你到填充了，这边背景居然没有帮我填充，丑不丑，用户体验好不好不好，你是不是随便你哪一块内容变高了之后，你这个背景应该给我干嘛。

填充下来啊，能不能理解啊，好，那就是我们前端里面比较有名的叫尾等高布局，好什么叫微等高布局，我们看一下。好一零。唯等高布局为什么叫唯等高布局？只是模拟等高局吧，其实本质上它是等高吗？不等啊，等高，我这个拼音比较烂啊，为等高布局啊，还是那样不准凶我啊。好来，来一个div，外面来一个外啊，拼音比我更烂的在后面啊。张小飞的拼音比我还要烂，好，你们后面的老师拼音比我更烂啊。呃，叫什么left，好，再来一个。Right好，比如说现在我这个left在里面，我给他搞点东西，搞点事情啊B走，你好，来，Right来。

来一个比来就就就就好来看一下，这个时候应该是巨丑的吧，什么东西都没有吧，是不是啊，稍微写点样式吧，死掉，我给外面这个大的容器外。好，怎么办呢？我给他一个Y为700PX，我给他一个边框1PX的实现默认黑色吧，怎么让它居中啊？水平居中怎么办？马上下为零，左右凹凸OK。好，那什么时候马顶左右凹凸会失效啊？特征行为absolute，你看marin左右凹凸还还有用吗？默认会失效，浮动起来的时候。浮动，浮动的时候你看马丁左右凹凸还有作用吗？记住行为不是路的定位元素跟浮动元素，马丁左右凹凸会自动失效的，OK，好，那如果你是什么是一个标准的快捷元素，那马in主要都是没有问题的，明白吧，好，我们先忘记干了一件暴力的事情，干嘛把market给他清掉，Can也给他清掉，这叫什么CSS吧，CSS的样式重置吧，只不过我们这边做的比较简单嘛，之后我们会来说好朋来说一下这个东西应该怎么做好，那是不是就居中了？好，来看一下怎么办，它是不是700啊？

700就700呗，是不是我让你底下对好写CS的时候注意最好把你外层的这个选择题给我带着懂不懂，养成一个良好的习惯，而且多用class，少用did的话，最最好是最外一层你用D，你只要用了ID标明之后，那里面的所有的所有的模块最好用class对吧？好，这是一个嘛，比较好的一个编码的规范啊好来一个left，那left的底下，比如说我让这个Y为。

T为200PX，好，给他一个背景，Back one为世界上最美的颜色，走，你好，再来一个，还有什么？Right OK，来一个总共是700宽度，那我给个500是不是来一个低pink好走，你来看一下，那现在是不是就长成这样的，那他们去一行怎么办？是不是两个都得浮动啊，如果只浮动一个的话，会不会出问题啊，是不是会嵌进去的，好，那最好是两个都要浮动好，所以他也应该要。浮动一下是不是啊好，可是现在很明显，你看一浮动之后，你看浮动的元素还能撑开这个div的高度吗。怎么办？清除浮动吧，好，这边给清除浮动下个定义，虽然虽然说我们今天晚上不讲，可是先把这个定义给下，什么叫清除浮动，让浮动的子元素有能力去撑开负元素的高度，这叫清除浮动，能明白吗？你看我把这个什么，我把这个Y是稍微搞得大一点，750。

好，再看七百五之后，你看外面这个嘛，明显没有撑开来吧，是不是，你看我把它干嘛。来看一下我把这个外干嘛，来一个清除浮动，清除浮动的模板怎么写好，你先跟他打一个照面，你不知道什么意思是吧？C，肯定啊fix，虽然说你现在不知道什么意思，可是你知道先先这么去写就可以就行了，好不好好来一个。Room来一个room为一，OK，再来一个点clean fix来一个after元素，OK，空。肯定的空display。Block，然后呢？Clean with好，走你。

好，刷一下是不是还没用上去啊，你是不是你待会要清除浮动啊，是不是要让它的浮动子元素乘加它的高度啊，那我负元素上面就应该有个class叫做fix，那这个名字是干嘛随意你起啊，一般我们起叫能明白吧，起小微章行不行可以起邱海峰行不行可以，秋海峰太胖了，是不是好好走上来是不是干嘛撑开来了？好，这是不是干嘛，这就叫清除浮动，让浮动的子元素能撑开它负元素的高度，OK，好再来看，那现在是不是还是一样的。比较丑啊，我们说我们要实现什么样的。你你高度比较高的时候，你这边是不是得填充自己的背景上好，怎么办呢？其实很好做啊，我把这个还是还是回成700。好，怎么做呢？看一下好我先给什么，先给这两个元素都加pen。Penny，我加1000PX，好，下面我这个也加1000。

PX来看一下这个是不是撑的就比较高了，是不是，虽然说下面还是别脚的吧，可是我如果在这边划一刀。我问你这是不是一个等高布局啊，就在这一道上面，你看到的是不都是等高布局啊，就是哎，你虽然说我的高度比你高，可是我给你填充的背景吗？能明白吗？我们是不是就应该让你在这边截断。能理解吗？就是叫你干嘛文字最高的那个那个地方一定吗截断掉吧，怎么办？我们说overflo截断是不是超出你边界的我就要截断啊，那我把边界提上来是不是就可以了？能理解吗？来看现在我们的边界在哪？你看我现在为什么这个框能被撑那么高啊，就是因为你子元素的边界顶，顶上去的呗，顶开来的呗，是不是来看一下，如果我把你的妈。波负1000。

他的马波。也为负，以前一开始pen往外撑了，以前你用马把这个边界又干嘛收回去了，来看一下整你好。你们看，首先我们说Penny有没有被我这个边界给影响到，Penny是不是还是1万，我们说了market为负值，只影响边界了，看一下是不是只有边界上去了，来看我把这个字改成750。看这个边界是不是在这边，这个边界是靠谁来顶开来的。因为你一开始是不是在这边啊，你们一开始我说它的边界是不在这边啊，它的边界是不是在这边啊，通过判定波程为1000，把这个边界往下顶了1000，然后我通过many Mar波收回去了1000，那是不是我这个盒子的边界在这块，这个盒子的边界在这块，我之所以这个盒子能撑开来，是因为被我这个边界顶下来了。那不理解好这个时候怎么办，最后点是不是一个等号布局啊，看如果我把底下的元素。

我把底下元素再来复制几份，只要你没有达到我这个1000的这个高度，它就是一个。登高不学？能不能理解啊，可是这是真正的一个等高布局吗？是一个伪等高布局吧，其实底下是不是还是别角的好，那这个东西一般开发商我们也用的比较多，明白吗？还是使用到了马景维。负制。明天我们讲那些千奇百怪的布局形式，使用到的都是马丁为负值，只要你能看到一些有影响力的布局方案，你都会发现marketin韦负子的一个出现，就是说marketin韦负子的原理是什么？再来说一遍marketin韦负子它干嘛？我问你，刚刚我Penny变成1000了，他是不是称在边界啊？可是Penny本质上它有控制边界吗？没有，因为你pen定外面是我马in啊，你pen变长了，是不是我的马in就在你这个pen下面了，边界的控制还是根据什么马in来了，只不过你这个pen把我马in干嘛？

也撑下去了，能明白吗？说只要关系边界的，那都是marketin来定义的，懂不懂？而且我们刚刚也看到了，我们说如果我没有在这边overflow。我在这边没有over，大家看我现在只是把边界收回来吧，会影响你这个元素的布局以展现吗？只是收边界，Penny有被你收回来吗？没有，你的外是什么样？你的head是什么样？你的pen什么样？原来是什么样还是什么样？我只是动了monkey，能理解吗？好，原来你的位置在这一块，好，我把你的边界往后。推了500，那只是你的边界过来了，元素还在。这一块元素去哪，你得看它的left top偏移量才能让它走懂不懂，或者说你把这个什么。

或者说你这个给个不。其实袁术本身没有动，只是你袁术变啊。比如说我一开始在这边是这样的，你把这个market给个正值是干嘛，就会到后面去了，其实本质上这个元元素有没有发生位移啊，没有，只是你在前面给他加了mark和模型变大了而已，而且这个和模型没有填充任何背景跟边框，能理解吗？说位置去哪，你得看left，看top和模型长成什么样马。呃，不是marketing board能明白吗？这是它的和模型，懂吗？说你调整market不会动它位置的，能不能理解啊？OK，还有个事情，Left top，我们说坐标系是长什么样的，前端里面。Y轴是向下的，X轴是向右的，对不对，是说我们才有了往里扩跟往外，你如果是负值，那就是往外扩，如果是正值，那就是往里收，行不行啊，你看如果你是负值。

是不是在往外扩啊，如果你是正直，是不是在往里收啊，好，往外扩是啊，负值往里收是啊，正直OK，那这边说了一个什么好，我们看那这边是不是我们做了一个叫微等高布局啊好，那给我们的圣杯布局去使用这个微等高布局，CTRLCCTRLV。好，我们圣杯是不是现在就差尾等高？你看是不是现在干嘛巨丑啊，怎么办？想都别想了，上来干嘛还负责下面干嘛找到什么middle找到的。找到content的。Right，好，给他统一干嘛？诶，怎么又不给我提示啊啊。好，来这边怎么办？来一个pending button，我们刚给了1000吧，其实我们一般要给1万，你要是哪个页面的设计高度上面超过1万了啊，哥哥，你考虑一下你这个设计是不是错了，能明白吗？你要想你要让用户拖拖拖拖1万像素，那那我就没办法了，那是不是得疯了？好，那这边让他回去也要回去啊，1万好，这个时候整理。

好，等高不久没有出来。只是说你有什么溢出吧，怎么办？你的content要干嘛？是不是他整个内容去干嘛O可以的，好，只有你那现在就好了，现在不管你里面内容怎么变，如果里面内容变少一点。好，里面内容背少一点，那他就收回来了，OK，那这个时候不管你怎么填充，那这个背景都是给你带上的，知道好，这是我们的等高布局啊。OK，大家先。