01.尚硅谷_css2.1_定位&盒模型相关.wmv原创

好，从现在开始，把SVN刚刚说的东西先给大家忘掉啊，你们抽时间自己再来好好的去看去，去梳理一下，首先问大家个东西。定位绝对定位，绝对定位是不是有参照物的，参照于谁？开启了定位的最近的那个组先元素嘛，就是最近的开启定位的组先元素，如果没有呢，没有就是你你的主线元素里面都没有开启定位，那是么意思？H没还是初始包含换。知不知道有有个东西叫初始不坏。OK，我们来看一下什么叫初始包含块。好，走你。好，对。对，零一好，那今天下午跟晚上的时间，以及明天上午的时间，我们对CR里面一些概念的话，要做一个深入的一个阐述啊，可能会可能会跟你们之前的认识可能会不一样，可是你要接触这个事情，慢慢把你的体系重新建立起来啊好，我们来看一下定位。

好呃，好久没写这是吧，我应该是好久没写了，OK，定位好，直接来个D吧，好，来一个ID吧，叫做test，好呃，来一个style标签好，来一个样式的一个清除马，给它干掉好，Pen也给它干掉好，给这个test来点尺寸吧，好，Y为100PX，嗯，Hat也为100PX background啊，世界上最美的颜色是不是走你？好，来看一下这个时候它在哪，这个时候是不是在这块，好再给它来点马丁。好，来个marin为100PX100PX走，你那是不是就下来了，好这个时候我们来看，首先我如果这个marin不给好。

好像我们说这个东西的定位，是不是就参照于我这个玻璃在定位啊。是不是来看一下啊，可是开发当中不要去这么做啊，我们给博干嘛来一个马30PX给他描一个框EPX的实心，好，然后呢，HT也也是这是在做测试的时候才能这么干啊，好，MONKEY30PX也给它来一个框EPX的实心。呃，框波的EPX的默认是不是就是黑色是不是啊，好，给他来一个深粉。好，这边给它换掉，给他换成热的好，这你看一下。哎，是不是就这样了，好像大家看它相当于谁的地方。还是玻璃吧，是不是把这个颜色换吗？换成邱海峰喜欢的一轮好走，你你看黄颜色的是不是玻璃啊，升粉这个是不是HTL，是不是还是参照于我这个。

玻璃的定位啊，其实你看你压根都没有指定它的P，它有定位起来吗。都没定位起来吧，我看一下啊，如果你的行为。要速度的，因为per这个属性比较重要，一般我们在钥匙里面给它顶航线，明白吗？那它让它的left为left为零，然后呢，Top也为零，我问你这个时候你看好黄颜色的是什么，玻璃深粉的是什么？它有参照于玻璃跟H定位吗？没有，它是不是好像参照于四口定位啊？是不是啊，好，这个概念也是错的，它不是称当视图定位，记住好，定位里面有个东西叫做初始啊。

包含快字写的丑，那看文档。好，这里。好，我来贴一个包含过来，好，什么叫包含快的概念，好，走你。交易包含块好，我们来看一下浮动元素的包含块，对于浮动元素来说，其包含块定义为最近的。会极主线元素，也就是说浮动的包含会是谁啊，就是他最近的那个会极负极。能不能理解好，这个比较简单，你不用管定位就比较复杂了，好根元素的包含块称为初始方块，什么叫根元素啊？看后面嘛，根元素就是。H708元素也是什么？可是有些浏览器当中会使用玻璃做的个元素，对不对啊，可是你得知道这个事情，根元素的包含块由用户代理创建，而且叫初始观块，在大多数浏览器中，初始包含块是一个视窗大小的。

矩形问你初始包含会等不等于思考。初始方向块是不是视口？不是，只不过我的初始方向块在尺寸以及位置上默认情况之下跟视口一样，可是是两个概念，分清楚什么是适口，什么是出始方向块，能理解吗？OK，我们说根元素的出方块是谁啊？根源素始方向块是谁？根元素的包含块是谁？初始包含快马怎么了？怎么得，是不是根元素的报告是初始包，这不刚刚讲了是不是啊，初始包含块是什么？是一个视窗大小的矩形，可是初始包含外等不等于，四孔不等于，明明白白两个概念，好，我们再来看好。对于一个非根元素，如果培性为什么relative或者什么starting就是什么相对定位或者没有定位的是不是包含快，则由最近的会计框好，后面几个不要看，什么表格啊，行行内啊不要看。

好，首先看这句话，如果是一个非根元素，然后是不什么study的包含快，由最近的快捷包。构成，也就是说你如果一个培类型为什么相对定位，或者什么没有定位的，那它的报含号是谁啊？它最近的那个会计数集可不可以理解啊？好，为什么不让你们去考虑表格单元啊？好，那科长问你，我们的布局叫什么布局啊？Div加CSS布局啊，是不是为什么要叫div加CSS，不叫span加CSS布局啊？因为我们整个规范里面建议就是用div来布局，Div身上在每个浏览器里面时间是比较统一的，而且div上的样式是比较干净的嘛。那么假，所以说才用did加CSS的布局这个命名来我们命名我们整个行业里面是吧，布局的规范明白吗？那上班同学说，哎，我非得用span加CS布局，我说你是不是傻。

是不是浏览器整个浏览器厂商维护的是不是就是didd加CS这个布局这个规范，所以说didd加C布局的时候的话，所有的一些布局的位置，以及他什么，呃，独占银行这些这些规矩是不是都是每个浏览器手上统一什么协商好的，你如果拿SPA来布局，在SPA上出了任何问题，如果浏览器早上时间不一样，那你是不是就要倒霉了。说学CS干嘛，规范怎么说你就怎么走。为什么叫div加CS的同学，就是因为div是个会计元素，会计元素在我整个浏览器里面干嘛？它的渲染的规范是比较统一的，每个浏览器厂商渲染都是按照按按照那一套，原来渲染懂不懂，内联元素，行内元素不一样，每家浏览器实现的时候都有自己的特点，懂吗？好，这是前端的一个复杂性在地方，所以说以后布局最起码外面的框子你要使用。Div，不要给我挑其他的元素，能明白吗？OK，那这一件事情OK啊，再来看好，如果这个主先元素是快子元素，那包含块则设置为该元素的内边距边边界，什么意思啊？就说你一个东西如果是相应对定位的，或者是没有对位的，它从哪边开始排列呀？

从它的包含块是什么。那边去开始排列能明白吗？我们是不是包含Y是个快子元素啊，它是不是有Y，有hat，有PI，有market啊好，我里面你的子元素从哪边开始排列啊，从你这个什么，你外面是不是排列啊，从排的这个点就从什么，其实就是什么，从我们内容区的这个点开始排列，能没理解？好这也是规范上面定义的，能明白吗？好，下面说如果这个主线元素是行列元素，不要给我考虑，我们不拿它来做数据懂不懂，而且你会发现如果是个行列元素的话，规则特别复杂，每家浏览器都没有按照这个规则去走，他们有自己的逻辑，懂吗？好，下面有叫程如果。没有主线元素的包含块为初始关块，刚刚我们说的是相对定位跟什么绝对定位，这个包含块是不是就是它的快速元素啊？好，如果你是一个非根的盆行，为什么？呃，不是root的包含过，是不是设置为最近的什么大这个值不为什么大就是平行值，不为斯大克的主线元素，这句话熟熟不熟啊？

一个是一个什么绝对定位的元素，它参照于什么？离它最近的开启了定位的主线元素吧，是不是就是这句话包含快设置为最近的per值，不是大克的主线元素啊，那不就是开启定位的主线元素吗？明白吗？说以后问你绝对定位参照于谁来定位，给它三个字包含换。能理解吗？好，只不过说我们要确定不一样的情况下，这个包含派到底是什么，是不是如果你的平行，为什么相对定位的跟没有定位的包含关，就是离你最近的那个什么。会计元素懂不懂，是不是有嵌套关系，那个会计元素啊，你如果是一个兄弟的话，是干嘛不算的吧。

这句话能不能理解？OK，如果你的定位是，呃，不是论啊，那就有点复杂了，那你是不是得找一下它的包含会是谁啊？好，包含什么？如果这个主线元素是会计元素，那包含块则设置为该元素的内边距变价，什么意思啊？就是我问你一个元素已经开始绝对定位了，而且它有没有开启定位的主元素。有没有有，如果这个元素是会计元素，那我这个定位从哪开始定。从这个元素的另一边去边界开始定能明白吗？好，如果一个决定定位的元素看到吗？压根就没有一个开启定位的组件元素，那我问你啊。那是它还是参照一包包含块来确定自己位置啊，只不过这个包含块是谁啊，初始包含块，初始包含块是什么。

一个视窗大小的矩形等于视窗吗？不等于，OK，那在这块我们稍微来捋一捋，好定位，定位里面其实除了绝对定位，其他的定位的形式好，Fix也不要考虑，Fix是其实参照于四方来定位的，懂不懂你说什么？如果你是相对定位或者是没有定位的，这个元素的包含块是谁？如果是相对定位或者没有定位的，它的包含块是谁？就是它那个直接负元素。能明白吗？好，如果你开启了，如果一个元素开启了相对定位，它乘到一谁来定位？包含快的定位，只不过在不同的条件下包含快不一样而已，是不是如果你有一个开启定位的一个负极了，问你这个包满盖是不是就可以指定成它的负极？如果你没有一个开启定位的负极，就是你的所有的主先元素里面都没有开启定位，包含方是谁啊？初始官方能不理解好不？快看我们这个DEMO。

那我问你text有没有开始定位？开启什么定位，绝对定位，它参照于谁来定位？包含是不是看对它的包含关的定位啊好，看一下text的包含关应该是谁，首先因为你有定位了，找一下它的主先元素里面有没有开启定位的。没有，那就应该找到初始包含块，初始包含块一开始的位置在哪？四场长有一个句型就在这，它是不是参照于我这个。看看是不是参照业务这个方法在定位啊，能不能理解啊，啊比如说我给他来个平移。你这个什么来一个。10PX，下面也来个10PX走你。那是不是就收不下来，讲能没讲OK，那这个东西之后我们还有用懂懂先把这个概念得知道什么是包含块，好其次好，我再来问大家问题。

CC。V02。定位。好，这里好定位水果这边搞得简单一点，好，这么上面也都不要了，这两个就不要了，好，他是不是开启一个定位啊，好，我这个马底给它开起来，好，这个偏移量我暂时不要。好，你是不是已经开始定位了，好来看一下，哎，他这边是不是有个一百一百的盲点啊，我问你left跟top的默认值是多少。Left跟top的默认值是零是不是啊？好，Left默认值为零，Top的默认值也是零。呃，来看一下教你，呃首先大家看这个是不是它有一个market啊，不给market，好首先看一下如果，呃，怎么说呢？好，我把这个left去掉，好首先上来大家看是不是left跟top值没有啊，大家说它的默认值是零是不是啊，好再来看，呃，如果我把这个什么life跟to这个值干嘛加上去吧，还好像默认值就是零吧。

是不是啊，因为你加不加零是不是都是一样的，好来看一下，如果我上面还有个课题div干嘛来一个ID叫什么？嗯，外吧，直接叫外婆啊好来个外，我给这个外干嘛。好，来一个外走，好，我给它来个尺寸，叫做deep pink，好走NY大家看好，首先我们有给他指定left跟托。好，大家看。这个粉红色的块是不是我们定位的那块，问你这个时候我们这个块是不是在定位了，而且要看它有定位的负极吗？有定位的主线元素吗。没有吧，应该称作于我们初始方块定位吧，初始到包的话，是不是一个四双大小的矩形啊，而且我们说left left通分默认是不是应该为零啊，那你这个时候粉红色的快音是不是应该顶在最上面？

他有顶在最上面吗？没有，切记的默认值是。Auto。来看一下。是不是都一样的？如果你left为零，Top也为零，应该去哪？叠到一块去了吧，好，切记这个值不是零，比如说这边我要告诉大家一个学习CS这个技巧，首先每一个重要的属性你得知道它的默认值是什么，其次每一个重要的属性你要知道它是否可继承，怎么看？好来看一下，好，这边给大家推荐一个，我们经常会取得一个站点叫NDN，这是没有网，是不是好，这是我们火国区维护的一个什么。API平台里面有着我们各式各样前端所需要的API都在这个里面，懂不懂OK，比如说每次你们要去干嘛，学习到的所有的属性，你要去ND上去看一眼，这个东西没有老，没有哪个老师会教你们，因为看一个API，只要只要你能干嘛，找到位置你就能看懂，而且讲API说实话，你们第一个阶段已经讲过API了，讲完API之后，这个API说实话你在项目当中不用去讲，自己去看。

能理解吗？而且这个工作量也是巨大的，你可能要看个一年，那里面内容太多了，等等有网的时候我会读，我会先带你们去看一眼，懂不懂规范，这个事情我之后也会讲，那首先大家知道你学习的每一个csi属性，只要对它有困惑的，到N阶上面就给我去看一眼，看两个值，首先它的默认是什么，其次。它是否可继承能明白吗？这两个东西比较重要，好比如说我们来说两个好，我们在这块我们刚才也讲了，我们说定位它是参照与包含化，绝对定位是它的参照物，是抱含快，其次left跟top的默认值是什么？好，我们再来说吧，好万S的默认值对多。

好零三，我们说一下这个外。好，我把这个东西直接贴过来了，Ctrl a ctrl c在这面，Ctrl a ctrl v找你好，现在我有一个test，呃，我有一个外，好这个给它干掉，OK，我有一个外，外的大小我稍微给大一点，有一个300 300好，整理这个干掉，底下我再来一个结构叫做什么EID，我这个东西什么来个ID叫做。OK。走，我来一下这个音呢，好，我这个音呢，我不给他指定宽度，我给它指指定什么高度为100PX，好给它一个其他的背景颜色为。PI，好问你，那这个时候是不是没有给他指定宽度，那宽度的默认值为多少？是不是拿到负极的百分百，是不是跟我们这个Y。为百分百的时候是一样的。

你那默认值就是这个百分百吗？不是默认值是OK。好，看一下刷一下，是不是上都是一样的，好，这个凹凸代表什么意思呢？大小默认值凹凸，比如说我现在给这个一呢，加一个什么，加一个Penny。上下为零左右，给个50PX，大家来看，如果你用的是凹，看一下最终长成什么样。好，关闭其他标签，呃，全部关了，这个泰尼是不是也会填充背景呢？来个market，好，大家看。最终你看两边有没有给你空出，慢进来好问你阴的宽度还是这个外的百分百吗？汽车宽就为造。300减去200吧，啊不，300减去100吧，因为你左右有50的money嘛，是不是，你看如果你说这个Y的默认值是百分百，那它应该怎么样，Y值的默认值百分百，这个百分百是参照于谁的。

记住，现在就统一是。包含快懂不懂，因为绝对定位使用的话，你这个百分百可能不是参照你负起的，是参照它包含快的能明白吗？好走你再来看，这个时候一样吗。一样吗？看你是不是告诉了浏览器，你的外必须得是你负极的百分百，那我就拿300下来吧，那这个马是不是就是这个300的两边能理解，如果你一开始使用的是一个默认子弹，它是怎么办的？比如说你什么什么都没写，他是不是从他的外里面抠掉了100给你。那么讲好，这是不一样的一个横模型，我们以后会学到，这个叫board books。这叫怪异和模型，明白默认情况之下就是一个怪异和模型，懂吗？OK，争议，好，那这边说了，好这边说了我们的什么，我们说我们left top的默认值为多少？O two的默认值为多少？O two好market的默认值为多少？

零。啊，记下好，这边稍微给大家说说。好，我们稍微来写一写啊。好对好有几个有有有几个参数，你们得知道，第一个，第一个我们说我们的。绝对定位元素绝对定位元素好参照。一来定位。包含快来定位，其实所有的定位都干嘛，只要你是定位元素，就是参照你的包含块，问题是你这个包含来怎么去确定，明白吗？好，第二点什么是。初始爆很快。好定位，定位参照于谁来定位？好第二个什么是初始板块，初始方块是一个视窗大的矩形，它不等于视窗对吧？好第三点，Left top。

还有什么？Bo默认值为多少？这个自我去看好。默认值都是凹好。Marin默认值是。Border问字为多少？中等大小，这个你们待会上安静去看，懂懂这几个东西的默认值，你得给我看清，不然你明天的课没办法上，等等好，还有个事情。

好，最后一个事情，百分比参照于谁，百分比签到一起，可是还有个事情你们得知道，好，我再来贴一个。好，这个课的这节课的最后一个点零四百分比好来看一下，好比如说我现在大家看我现在是不是有个外外是害的，都是等于380，好这样来好该光的我给他留着好，我给他一个monkey monkey定为100，给判定，判定为50好走你这个时候我底下干嘛外。为50%为。50%，10%判定为10%，好，这个50%是多少？

一百五派为50%多少马？10%为多少？判定10%多少五是不是好？进坑了来看一下。走，你来看好Y是根号的都是一百五乘150，这这有没有问题啊，你这个Y是根号的这种干嘛，比如说我把它改掉，我这个改成400，那你这边应该就是什么200，你看一百五乘以200，这没问题吧，其实看马景这个10%是拿着他原来原来马给的10%吗。不是，拿的是他的Y，是的10%，Penny为10%，拿的是他自己拍的10%吗？不是，拿的是什么Y10的10%，这个要给我搞搞清楚，能理解吗？就说marin跟pen的这个百分比参照的是谁的？

是你包含快的。外不是你包含快的market的pen能明白吗？好，这些细节问题在我们布局当中都很重要，一个东西没理解，你这个布局你干嘛转不过来，能明白吗？好，OK，好，那讲到这一块，好，我们第二节课结束，那这块大家得知道定位参照一定位left top的默认值以及market的默认值，以及这个百分比到底是怎么参照的，其实这些都是和模型上的东西懂懂，只不过你们要知道的更细一点了，好吧，OK。