12.尚硅谷_css2.1_复习.wmv原创

好，来，我们把昨天的东西稍微的去过一下啊，简要的过一下，我的复习的时间不会太长，只是帮你们去拎一拎啊好，第一天我们是不是讲了这么多东西啊，好，首先来看定位参照意识。包含块是不是，主要看包含块怎么去确定是不是啊，如果你是什么，如果你是相对定位，或者说是没有定位。好，诶不对，我说定位参照于谁来定位，只说包含块对吗？不对，还是得分定位的是不是OK，那可能昨天说的稍微有点笼统啊，这边稍微说细一点，相对定位称当于谁元素本来的位置，这个位置是不是在什么文档流里面的没有定位呢？没有定位怎么办？没有定位其实就是包含。能不能理解啊，是不是从它的负极这个pen定区域开始排列啊，是不是好pen定的边界开始排列吧？好，那占不占据它的判定区域啊。

没有定位的时候，它会不会占占用它的什么占用负元素的判定区域啊，不会吧，是从判定那个边界开始排吧，相当于是不在内容区里面是不是，那这个是包含关是没问题的。OK，然后呢，绝对定位呢。绝对定位，参照起来定位，这个也是包含。很快吧，是不是OK，然后还有个呢fix啊，我们叫什么固定定位呢。是不是参照一文中什么是口啊，OK，然后我们说其实决定它这个东西还比较多包含块，这个包含块怎么去确定，绝对定位盒子的包含块怎么确定。如果有，如果最近的祖先。

元素中存在定位元素，则。好，OK，则这个定位元素就是什么包含块，可不可以理解？如果没有呢？如果没有包含块是谁？包含块为初始包含块？OK，那什么是初始包含块？是一个四窗，不，不是四窗，怎么写视窗，哎，视觉窗口好，视窗大小的矩形等不等于，视窗不等于。

是窗OK，那这两个概念比较重要，是不是OK什么？我们说的这些值的默认值吧，Left right，默认值为多少？默认值为two是不是，是否可继承，有没有看？可不可以继承，他们这几个字能不能继承？不可继承吧，这两个值能不能继承？是什么？上N丁干嘛？看一眼。下一点。走。好，切记啊，你要把下面这个文档的位置看好，这是我们CSS的规范，那看到这个外好是否可继承。不可气什么，再看我们的hat。好，一边把这个CI加改成he heg h t t。

好，看是否可继承否吧，这是不是看的是吧？OK是吧，不可继承的吧？好，前面这几个都是不可继承的，基本上和模型的好像都是不可继承的，能明白吗？OK marin跟的问字为多少？不认为零呢。其实波的外置是有默认值的，可是有一件事情我们说什么？如果不存在什么board-T，如果不存在玻璃，有玻璃对说吗？你没有玻璃是不是，是不是相当于这个边框都没有啊？就是你要出现边框必须有两个什么必要条件码，一个边框的宽度，一个是什么以边框的形式，实线还是曲线码，能不能理讲缺一不可，懂吗？OK，那这是我们说第三点，好，然后我们说了百分比参照于谁，那这里面比较重要的是什么呢？好，Y是百分比参照于谁？

不应该是复原了吧，包含快的外是不是OK包含快的。Hatin。啊，马是谁？是不是还是包含快的啊，OK，写到后面去，OK呢？包含快的能理解好left top的百分比等于。看了吗？好，看一眼。看完之后印象要什么深刻一点了，好看一下来。好，Left，大家看走到底下百分比谁？是使用包含快宽度的百分比来描述对吧？能理解错呢？

OK。是不是使用包含块的高度啊，是不是啊来描述自己啊，是不是啊，学习CSS有个技巧，一开始大家肯定都是猜的，跟着自己的感觉走，我想他是怎么样的，他就应该是怎么样的，可是后来发现特别打脸，是不是啊？打脸之后怎么办？一定要去找到什么规范上面去看一眼，知不道那这都是学CS这个套路，一开始你去猜很正常，要一开始你觉得，哎，这个left的这个外干就应该跟着我的感觉走，应该是什么样的就是什么样，没问题，可是一旦你踩到坑了，记得去规范上面看一眼，我不要求你们干嘛，我不要求你们把规范上的所有的属性，把它的文档都看一眼，不现实啊。做项目的时候，写DEMO的时候，材到坑了过来看一眼，材料坑了，过来看一眼，懂不懂？那随着什么？随着你这个工作经验，或者你学习时间慢慢变长的话，你对属性的了解会越来越全，能明白吗？这是一个循序渐进的一个过程，不需要你一口气去把所有的属性全部吃下来，懂吧，OK。

好，我们刚刚说了left是谁，Left跟top吧，OK。Left的是是谁包含快的吧，好，Top呢，包含快的hat啊，这两个单独来记一记啊，OK，就这三样东西是不是好，那这些都是一些比较基础性的东西。好来看一下，然后我们说讲完这些东西之后，我们是不是又去讲什么讲了跟大家去聊一下地位跟浮动啊，是不是我们说这边还得提提醒一下大家什么呢？浮动这一块，浮动能不能提升成绩啊。能浮动提升提升半程，OK，什么时候需要考虑一个元素为两层啊。只有在浮动的时候，其他的时候你不要给我管一一个元素分两层，不管它分几层，它都是整个整个元素的提升，能明白吗？OK，那这边其实都是讲了一些什么比较基础的点，其实我们一上来是不是还讲了什么。

其实一上来讲了什么？S边，不过这是一个操作，懂不懂也不需要你们太太去复习，你们懂怎么操作就可以了，好吧，OK，然后后来讲完这些东西之后，是不是去做了一个三略布局啊，我们是不是做了好几个版本的三略布局啊，好，我们应该把这个三略布局，那么能能涉及到的东西全部设及到了吧？用定位做了，用浮动做了，用圣杯了，用双飞做了，是不是我们说三列布局，我们说它的一个需求是什么？首先我们说什么两边，两边固定当中。当中知识应是不是好，第一个需求，第二呢中间列，中间列要完整的显示是不是？第三个呢，中间列要要优先加载是不是OK，我问你用定位用浮动能不能实现三列布局啊，都可以，可是都有缺点是不是？我们说用定位也可以，什么要定位知道吗？定位实现三列布局，用浮动，用浮动实现三列布局都是可以的，可是我们不不推荐你白白吗？后来我们介绍了哪两个三列布局形式，圣杯。

跟什么双飞E是不是好，里面涉及到了比较一个比较什么细的重要点，什么marin为Mar加marin为负值，Marin为负值这一块，我们说你需要怎么去理解它，Marin负值，它做了什么。Marin为副词做了什么？将元素的什么边界干嘛？怎么办？如果是不是什么。如果是负值元。将元素的边界往。

往哪边？往里收好，这个跟我们这个坐标系没有关系，知白吧，马负值就是把边界往里收，知道马正值呢，那正值是不是干嘛将元素的边界啊。往外往外扩啊，能不能解啊，你看正直的时候，是不是元素两边就会多出来一块空白区域啊，是不是，可是我们说马in的调整干嘛，我们说马给的调整不影响元素的。不影响元素的。位置懂不懂好，它能不能影响元素的尺寸，呃，其实说影响的话，其实它是不被就在元素两边加了吗？啊，它也有影响元素的和模型嘛，本来market就是什么元素和模型上一个东西嘛，懂不懂可是复制的时候的话，我们更什么对接它去考虑它的个边界是往里搜了能明白，OK，好，这是我们说什么比较重要的七个点是不是那圣杯跟双杯的套路，我在这边就不提了，好不好，自己好好去整理一下，那后来我们又说了什么？

是不是又用马为负值去做了，什么叫为等高布局啊，为为等高布局很好做，用pen去把边界干嘛推出去，再用妈给把边界收回来，就是一个微等包，OK好第九呢，我们我们说什么？Fix的一一些FX1D fix的一些问题吧，我们说怎么使用绝对定位来模拟什么固定定位，套路是什么样的，想一想怎么使用绝对定位来模拟固定定位啊，绝对定位跟固定定位最大的区别在哪？

绝对定位跟固定定位最大的区别在哪？出现滚动条的时候，是不是出现滚动条的时候，绝对定位跟固定定位是不一样，你拖滚动条的时候，绝对定位的元素是会跑的。固定定位元素是不会跑的，就是因为他们两个参照物不一样，因为决定定位四兆与包含块的固定定位是参照源是口的，你做系统滚动条的时候视口会动吗？不会动，竖直方块动不动？它在动能明白吗？所以说我们怎么用绝定定位来模拟固体地吧，第一点禁止系统滚动条怎么办？S玻璃上面是不是就可以禁止掉了？第二步呢，将滚动条什么。将滚动条加给玻璃，你加给玻璃之后，你在玻璃身上拖滚动条，竖直光环能被影响到吗？因为滚动条只影响你里面的子元素吧，是不是啊，你初始光化是不是在玻璃外面的，它能被它能被影响到吗？影响不到能不能理解啊？OK，那第三步是什么？

其实就已经做完了，可是我们要稍微做一点优化的话，怎么办，让博得。让玻璃的尺寸干嘛变为？市口的。尺寸怎么做到它hat为百分百就可以了，懂不懂？那这些都是我们昨天讲的一些比较重要的东西，那每一个点在以后项目当中你们都会看见，而到时我们去讲的时候，我就不再单独给你们提出来了，只会给你们拎一下啊，我们这边使用到什么？呃，绝对定位来模拟功击定位，我们这边使用到什么三略马为复制的一些技巧，那到那个时候我希望你们就不要有太太大的疑惑了，懂不懂前期把这些技术点给搞搞清楚，OK，好呃，在上课之前的话，我看大家这个面板都没有调过来，这个面板应该干嘛？大家面板是不是还是那个黄颜色的比较伤眼睛啊，怎么办呢？好，大家看这边有个视图啊不，这边有个工具，工具这块有个叫视觉主题设置，是不是视觉主题设置这边有个高级设置，点开它，点开它之后把这个背景只改这个背景，其他你不要给我改，把这个背景点开来，点开来之后规定一个自定义颜色啊这个。

颜色就是这样的，好，你们可以截个屏。啊。能不能截屏好，把这个色调饱和度，亮度，红绿蓝的这是什么，这个值给我记下来。好。据眼科专家说，这是。这是最保护视力的一种颜色啊，是啊，不要敲代码，敲着敲着敲瞎了是不是？啊，就是你会发现很多程序员这个镜片都特别厚啊。

好有没有记好好记好之后，那这是要改的第一个地方，它的一个背景，其次找到这个element里面往下翻。找到一个叫什么叫一个硕这个什么叫什么M的什么硕士这个东西，那把它的这个背景也给我调成刚刚那个自定义颜色，那挑完这两个就可以了，那以后不管是写写代码还是去写代码还是代码，基本上都是这个颜色，明白吗？OK，把这两个点改了，只只改背景色，不要改他的前景色啊，OK，两个点。应该没问题吧，OK。