19.尚硅谷_css3_扩展.wmv原创

好，我们来困难一个点看一下啊，这是同学给我。同学给了一个DEMO啊，我们来看一下好，是不是DIV1 div2div3，看DIV1是什么？Y100浮动起来了，颜色，我们说给个P是不是好记一点，然后P2定位起来了，给个d pink是不是DP3是一个yellow什么都没有是不是三个元素吧，来看一下，现在你看比如说这个我叫div。一是不是这个是DIV2。是不是这个我就不写了，好来看一下最终渲染成什么样子。再看诶。是不是渲成这个样子啊？第二，是不是干嘛被挤了出来啊，这是为什么啊，想想。能看懂吗？你看DIV1在这边，DIV2在这边，可是文字被挤了出来吗？是不是？OK，玻璃是不是干嘛有这么宽，是不是？DIV1DIV2DIV3在这边嘛，是吧，想想想这是为什么？首先问你浮动提提升几成，提升半成，那它到底占不占据文档的位置？

为什么在他有半层在文档这里面吗？是不是定位提几层，定位提不提，提一层，你写个行为相对定位，那他就得提一层懂不懂。提升成绩，只不过在文档里面有残余。它是提升层级的，可是在文档流里面有参与什么意思啊，相当于你一个元素相对起来了，文档流里面是有一个一模一样的副本在那边占据位置的，也就是说这个位置我要占住，其他人不能进来，这个位置不能帮我挤掉，可是我本身在文档流里面渲染吗？

我不，我跑上去选染，我去上层渲染懂吗？可是问你看现在是聘的跟高，我相对定位的层级是不是比你浮动的级来的高，那我是不是我就选什么身份吧。这能你讲，比如说你看我如果这个Z-1X我稍微低一点啊，这个我稍微做个测试啊，看一下Z杠一我给个负的。你看是不是就什么粉色是不是，可是我们现在看到的，我们说这个提升一层，这个提升半层都是不能跟零杠零杠1X去比的，懂不懂Z-1X为一题定要比你们俩都多。这理讲好，OK，可是为什么第二被挤出来了？是不是发现第二被挤了出来，为什么第二被挤出来了，浮动提升。半成是不给，四本本子给我四本本子不能给。

最好是这种比较方比较方的。OK，我们说现在我们是两个元素，是不是OK，记住一个元素分两层。一个元素都是分两层的，这是两个元素啊，一个是浮动的，一个是相对定位的，是不是在文档里里面都是有参与的，是不是，只不过浮动的提了半成，是不是这个元素提了。一层，可是在文档里面有没有残余啊，有残余整整一层都在这边，懂吗？现在他们俩是不是去抢同一个位置，是不是，你看本来我相对定位的东西在文档里面是有参与的，应该在后面的，因为是一个。先吧，是不是这样的，这是一个元素，这是个元素，这样排什么快计元素吗？因为你上面那个浮动起来吗？他要不要挤上去，要挤上去吧，怎么挤你浮动是不是提提了半层啊，那我是不是往上走半程，那你挤掉的时候是不是只能挤半层，也就说我相对定位那个东西的下半程要不要要不要上去啊。

下半要不上去，相对定位这个元素的下半要不上去，下半要不上去，这个100这给OK2层吗？是不在一起啊，下半要上去，本来你们俩是卡得好好的，两层在那边卡住，是不是两这边卡住吧，问题你不动，是不往前面提，提了半层啊，是不是下半身上去啊，要上去吧，下半身进去还留着吗？留了留了留了上半在外面吗？懂不懂，可是问题我们说你这个是不是上来，现在这里面有三层了，三层在一块的时候，他要要去做比较，你浮动提半层的嘛，渲染层面上面你浮动是不是只提半层啊，所以说我应该看到的是定定位的那个上半层吗？定位上半层是不是就是个嘛。

一个啊，这个定位的下半什么，上半场下半场上半什么是吧，下半层是和我型相关东西，上半层是文本相关的东西，懂吗？所以说你看到的是不是就是应该是我定位元素的那个和模型相关的颜色身份的，而且呢，下面是不是有文字在这边卡着呢。下不去嘛，你看是不是是不是就是我们这个是不是我们在效果第B是不是在这边卡着呢。懂吗？那这个粉色的快餐能上去吗？不，这个这个这个黄色的快餐还能上去吗？都已经卡住了，上面都已经三层了，还有还有复星让你钻吗？钻不进去了懂吗？可是你看。你看这个文本是不是在这个黄黄颜色块上面，为什么，因为你留下来的是啊，上半层的东西，你还有半层可以让我黄颜色这个区域干嘛。

卡卡住吗？懂不懂？那想想，如果我这个黄颜色这个区域它也有蚊子怎么办？看能不能被他挤一挤，看到一块去了吧，想想为什么。哦，OK，现在是不是你们俩又又挤到一块去了，我这个文本是不是相对地位的所应该在上面显示，第P2在上面显示吧，是不是三颜色换成干嘛，我不是黄颜什么字体颜色。肯定是二的在上面嘛。看见没有，所以说文档流里面长询挤肯定是要挤的，挤完之后我们在你层级懂不懂，因为你是相相对定位的，肯定比我在文档里面定位的，我的渲染在你上去懂不懂，这能理讲这能理解吗？

好，那既然已经说到这了，那我们再来说一点东西吧。好，我们来看一下，我们说什么零四再来一个扩展，这个扩展做一个什么扩展呢？啊就是。我们说这个啊，这个我得去整点东西啊，啊好久没讲了，看一下。OK fixed啊，我把这个东西给他给给给大家讲讲吧。然后把这个关掉。好，再来做个扩展。啊，这是什么东西呢？解决I6下固定定位失效的问题啊，来看一下I底下的固定定位会不会失效啊，这个参考都不看。

嗯。不看啊，我相信我应该是可以的啊Johnny啊，那看这个fix定位。好，你看这是不是一个固定定位很完美吧，是吧，你看test分型为什么fix的嘛，是不是滚动条，你看是不是在玻璃是不是高度为3000啊，那就应该出来系统滚动条吧，可是我这个元素是fix定位了吧，就没问题吧，可是来看一下我们IE中。打开找到IE6。好打开嘛。慢慢的来，慢慢的来。好，来看一下IE6IE老祖宗，好，CTRLB进来。看。还有用吗？啊，固定定位在PC端，在I还会知道，在移动端很多情况之下，固定定位都都是有问题的，懂不懂，那我们说怎么使用绝对定位来模拟固定定位。

啊，这是一个很重要的问题，怎么使用决定定位来模拟，现在是不是I6底下固定定位是会失效的，那这个这个能不能理解好，来看一下好，首先得知道这个问题，Fix的在IE底下有问题，其次fix在移动端的问题也蛮大的，懂吗？因为移动端的浏览器都比较大。Long。是不是刚我们刚刚讲过了，移动的浏览器是谁的操作系统的升级才升级的，所以一般都比较老，是不是好记住这个问题，好，我们再来看一个滚动条。什么省好？看这个滚动条到底在谁身上是不是好，我们先慢慢来，比如说干嘛。这是什么鬼啊，我写的。好，来看下这个滚动条，比如说一开始大家看我什么都没有，现在是不是只有一个太的太，你看高度是不是3000，肯定要比我屏幕的高度，比我这个页面这个整个容整个什么。文档的高度要来的高3000呢，是不是OK来看一下，首先我们来看。

OK，看我干点什么事情，是不是给HT来了一个马丁为三是吧？我问你，如果不这么写，爱表跟玻璃，来看一下，什么都没有吧？来看一下，这个时候是不是还是有滚动条的，可是这个滚动条在谁身上？来看一下如果什么都不写的高度维度。3000嘛，靠内容撑开来吗？波点呢，3000嘛是否波璃撑开来吧，是不是先我这个元素撑开波点，波点再去撑高。撑开H没有高度，都是靠撑开来的嘛，是不是宽度呢。因为你是会计元素嘛，你嘛宽度拿我负肌的百分百吗？是吧，是拿H的百分百八，H拿四的百分百吗？一层层继继承下来了，懂不懂，那这个时候看我干件事情，什么事情呢？我说H0玻璃干嘛，我把你的高度，首先如果我H的高度为百分，拿着你适的，而且你有三毛吗？颜色是一个。

拨打一实心的黑色看。是不是在这边粉红色是谁？粉红色是不是拿你H的80%啊，在你这个黑框的基础上再去乘以88%，拿到的是什么？我来个宾，亮眼一点走你。身份证是不是在这边？OK，那我问你滚动条出现在谁身上？有出现在么玻璃上吗？没有，系统默认的滚动条在文档身上。HT的上一层，我们称之为多门。啊，你也可以认为是窗口，反正肯定不在HTML跟玻璃上，懂吗？OK，好来看一下，那现在大家想，那我如果HTML olo为。什么意思？

呃，如果。也就是说我要把滚动要放到我自己身上，是不是这意思啊，我无会凹凸啊，也就说我HD干嘛，只要里面有元素干嘛。高度超过我了，那我就应干嘛出现滚动条，现在我是不是有一个元素高度已经超过了，那我就应该出现滚动条，滚动条就应该在我爱细胞身上。有变化吗？没有，这有作用吗？没有作用，这也是为什么不要在HT跟玻璃上面去写任何的CSS属性的样式。懂吗？OK，失效了吧？滚动量还是传给上一层了吧，是不是？那我说玻璃不服干嘛？玻璃over我要什么意思啊？滚动条干嘛放到我玻璃身上来，是不是看行不行，不行照样失效，能不讲，也就说如果你单独给H跟玻璃设置的话，起不起作用，不起作用滚动条全部给谁。

给窗口，也就给H的上一层，能不理解，除非你都行看滚动条在身上。玻璃身上。就是我的滚动条就在我玻璃身上有没讲，比如说你看我这边是不是干嘛，我说这个叫做SC。是不是干嘛不管怎么样都要出现滚动的只有你，你看他还在身上。系统上吧，也就是说滚动条有没有可能出现在I细胞元素身上，不可能，什么情况下都不可能出在A。HT身上怎么样才能把滚动条出现在玻璃身上？HT跟玻璃都有O属性，它才会让这个OA数据属性作用到这个玻璃身上，能不讲说最后的结论是什么？HT元素身上永远都不会出现滚动条，是不是OK？如果你HT跟波点当中只有一个O的属性，滚动条出现在HT方的上一层，我们称之为窗口。怎么样才能让滚动条出现在玻璃身上？XT玻璃同时有over的属性，才能让滚动条出现在。

玻璃身上这里么理讲OK，这可以理解吧，好可以理解，那就好做了，好，那这个给他干，这边一般我们什么，一般它成什么的，好，那这里面就出来一个很重要的事情了，这么禁止系统或者股东条。其实你随便在哪一层lo就可以了。是不是因为你不管哪一层的，这个公共危害的最终作用给谁的？给这个窗口的也给给上一的，如果那禁止系统过应该怎么办？跟玻璃随便哪个元素over为还就可以，就可以禁止系的默滚同条怎么讲？一般我们的写法是禁止系动默认不条做狠一点干嘛？

都是他的，都是他的也就什么。不会出现空头条，这三个元素谁身上都不会条，玻璃上不会还身上不会干嘛？窗口不会怎么办？拿一个元素来模拟。一般我们会这边有一个，你不是一个，这个是产生让要要让你产生滚动条的那个元素嘛，一般我们会最外层包一个啊，一般给ID叫做外盘，这是全局的，包括器。全局包括线，他用来模拟滚动条你什么，如果你这个时候想要有滚动条，这个滚动条就应该给谁，给外懂不懂，我让这个外干嘛，我走你看一下。OK，现在这个外啊。看不到这个外是不是我们说，哎，你如果想要这个外去模拟整个视口的话，你们的高度是不是都得一致，也就这个外的高度是不是应该跟跟什么。

他。跟分数一致吧，也就是说你这边拿下来都应该是百分百，妈，你需要吗？不要这个也不要，这个是百分百，这个孩子也应该是百分百才能拿到四口的，这个外法的高度才跟四口的高度一样是吧？这个玻璃我也不要了，这个玻璃我也不要了是吧？这边我来个玻璃1PX的实心走你。你看这是不是我们的第元素啊，你看这个滚动在谁身上。外婆身上，你看我给一个。数就在这个吗？我也不知道，也就是说我们把HTL玻璃干嘛高度把系统滚动条近使HT玻璃高度都变成四口的高度。是不是这个时候我们干嘛，我们做件事情就要禁止系统默认滚导，并且让这个外部去充当的时候。

是不是啊，这个时候所有的滚动是不是都在这个啊，外部身上，这能不能理解啊，这能不能理解啊，好，这个可以理解，我们再来讲件事情啊，也就是说这里面我们讲了两件很重要事情啊，一般我们写代码都会这么去做。怎么做？这叫静止系统，默认滚动条加让外盘去模拟思考懂吗？好，这是我们初始化画页面的时候，经常要去，要去什么做这件事情对不对？好，再来看刚刚我们说有个问题叫干嘛。有个问题，呃，是不是固定定位会失效啊，是不是好大想想既然固定定位失效，那是不是固定定位就没就没办法去用。是不是，那我想拿决定定位去模拟，你信不信？可以吧，而且我要问大家一个事情，现在啊，这个全部干掉CTRLC，我把这个东西干嘛切出来。

站长，OK，是不是他？是吧，这叫临时扩大。是不是OK，来看一下。拿到它的时候我们说嘛，现在我这个鬼子要在谁身上告诉我。我身上，我怎么划，我问你。这个滚动条的滑动还会不会影响初始过快？什么叫初始方法？什么叫初始方块？有有没有讲过初始包块的概念？什么是初始包含块？初始包含块是一个四川。四川大小的矩形跟四川有关系吗？没有，只是大小跟他一样而已，懂不懂，一开始的位置也是一而样，懂不懂我问你啊，为什么我们说决定定位，一个决定定位的元素，最终它为什么能滚呢？

来看一下嘛，我来写个什么。单网，CTRLCCTRLV网。绝对定位吧，只要你来看一下，比如说现在我有个泰，什么都不要，是不是我什么都不要。啊，就写个青春要匙的，我里面有个D，好周，你问你我这个现在干嘛，我把这个D写下啊，来个test走你。比如说他的Y思维的ID，听得Y思维。200P是吧？也为200PX是吧？Background pink，我让background，这为什么？

是不是left为零，Top为零，是不是我让系统出滚动条，系统滚动条我说有一个为3000PX，要要不滚动条。这个是不是肯定要出，要是滚动条的，我问你现在为什么这个绝对定位因素，最终随着我滚动条的移动，它也移动啊。我问你，首先这个元素是一个绝对定位，他去找包块是不是OK，找他的腹籍，不的是不，他的不坏是吗？玻璃它有开启定位吗？我们说test去找包含关，是找他离他最近的开启定位的组件元素吧。

是不是有吗？没有，那找谁找到初始。不快吗？初始包含会是一个四川大小的剧情，位置跟四川一样，在在我这边。是不是OK，那为什么我玩滚动条的时候，这个快会跟着一起走，说明初始方块的位置变了。是不这道理，我粉色的这个块是参照于我初始方去做定位的，去做布局的，为什么我划滚动条的时候，现在这个定位元素它好了。因为初始快跑了，所以他才跑。懂不懂，那也就是说现在其实初始方块已经跑到上面去了，四口在这边。所以说初始方会跟视口是同样的东西吗？不是，只是默认情况，就像初始方块的大小跟视口一样，位置跟视口一样而已，对不懂，一旦滑动系统滚动条动的是谁？

动的是初始方块，所有的元素都要跟着初始方块一块跑。懂吗？OK，那想一想，现在我们这边是不是做了个扩展，我们说现在我问你滚动条在谁身上。外部身上，那我问大家，现在我划这个滚动条初始关还动不动不动，只有这个外部底下的子元才会动。是不是我划这个滚动条能影响到我的处理八卦吗？不能吧，能不理解，那我现在有个元素在里面，是不是，比如说我这里面有个有一个元素叫做。叫做PI，是不是我要这个元素干嘛？我这个元素定位起来是不是行为。是不是OK 0top0是不是OK，然后怎么办？

宽高为200PX是不是，然后呢也为200PX，八个光的为PI是吧，一个元素就在这个里面。是不是它是什么定位的。决定位了是不是OK，看是不是固定。为什么他只认初始保养块？你看我的pink定位吗？外壳有定位吗？没有？玻璃有定位吗？没有，直接到数水管，看你划这个滚动条跟出水方块没有半毛钱关系。他动不动，动不动不动，是不是使用决定定位去模拟了固定定位，也就是说现在如果以后代码都是这么写，固定定位还有使用场景吗？还有吗？

我觉得定位都是固定定位。是不是你怎么画不能条我都不会动？能理解啊，这是使用决定定位模拟固定定的一种方式，在移动端经常用，对不对，这个必须要把它给理解了，这里面是就是很很多很多概念，滚动条怎么样才能产生，滚动条到底在谁身上啊，以及什么是初始方向块啊，滑系的滚动条才会动初始方向块，这个滚动条不会动到初始方向块啊，又因为我这个定位元素他干嘛参照就是数据包块啊，所以说干嘛。它就不会动了，懂不懂本质原因就是说你划这个滚动条不影响初始刮的位置，所以这个粉红色的块才不会动。懂不懂，一开始你们见到的所有东西为什么能动，就是因为干嘛滑滚动条的时候主板块动懂不懂？OK，这是用固定定位去啊，最后决定定位去模拟固定定位一种形式啊，这是能考上的，CS是里面比较深的一个东西，CS3是2.0里面比较深的东西，懂吗？OK。

好，那OK，我们讲了两个扩展。啊，第一个扩展是关于层级的啊，第二个扩展是关于什么数理方含块的懂不懂，那这两块内容是以后你们去，不管你们做什么开放啊，只要跟浏览器有关系，只要你写CS3样式懂吧，就应该需要去理解的最最基本的东西，懂不懂，什么是初始方盘啊，乘机到底是啊什么样的旁边。