27.尚硅谷_css3_复习.wmv原创

OK啊，我们上来先把前一天讲一个东西啊，昨天讲的东西稍微的过一下。OK啊，大家稍微回忆一下，昨天我们说了哪些比较重要的东西啊，其实昨昨天还是讲昨天，我们看昨天我们是不是只把这两块内容讲完了，是不是啊，可是里面涉及的点后来我看一下也蛮多的，而且我们做一些扩展，我们来看一下。得零二。大家想想第二天里面我们都讲一些什应该讲什么，对着看法，一开始肯定讲什么和模型的型，什么新增样式吧，是不是这个里面需要大家注意哪些东西？和木型的新增样式啊，第一个是波克斯S37AO是不是不吧。

Ado吧是吧，OK，那这一块的话，它有几个属性啊，一共。几个他比他跟那个是不是我们还有一个什么tax筛掉，是不是跟他比起来的话，他多了哪两属性，他这个有几个属性子，他有几个属性。他有四个吧，是不是我们说前前三个都是认识类型的。也就什么长长度类型的吧，是不是这三个长度类型分别代表什么。这个代表什么？偏移量是不是，X轴的偏移量是不是，如果是我们说，而且前端坐标系，哎讲过了，一定要记住前端坐标系这样的。

是不是OK，这个第一个参数是X轴的。饮料可正可负吧，是不是X轴的配饮料？偏偏移量，OK，第二个是外轴的偏移量。第三个认识呢，模糊程度是不是OK，模糊程度好，那还有一个值是什么值啊，Color类型的是不是，这就不说了，是什么阴影的，阴影颜色是不是啊，OK，那book比他要多几个，多一个还是多两个，多两个是不是OK一个前面是不是有关键字的是不是，这前面是不是都是有关键字的，OK，哪些关键字的。是不是也就是说这里面可以区分你是内阴影还是外阴影。

啊，你是内阴影还是外阴影，是不是属性是什么，一个是inec吧，要么就不写啊，其中默认好像是set是不是，你们可以看看啊，其实我们不写是不是就是一个什么外阴阳是不是OK，然后里面还多了一个什么值，多了一个认识值是不是认识值代表什么？阴影的面积是不是OK，也可以说阴影的尺寸吧，好，默认情况底下这个面积是不是跟你什么这个元素本身一样大，是不是OK啊把这些，把这些重点能回忆出来就可以了，OK，第二点我们讲了什么。倒影是不是我们说倒影是是不是C3的东西，不是我们说什么，它是YYK内核底下的是不是，那外科的内核底下我们还学了什么描边文字描边还有呢什么就是背景的一个什么可以叫背景镂空吧，是不是？

这是干嘛，让这个背景干嘛在文字外去干嘛做写是吧，不，不在文字内做写是吧，文字外把背景全部点掉吧，是不是OK，这是我们什么YK的内核里面我们学到三个东西是不是好，其实这个倒影这一块大家看有几个参数。啊，我们讲了两个是不是，一个是倒影的方向，一个是倒影的距离，其实它第三个值可以是一个渐变值，我们可以来看一看，好比如说昨天我们写了一个倒影啊，D03吧。来看一下昨天我们写过倒影在哪边？他把CTRLC直接应该把这张图也干嘛拎过来。

来看一下这个倒影的东西，是不是进个文件夹吧。啊，带渐变的倒影。OK，来看看。来看一下，现在我们是不是有一个。大家看就是有一个倒影啊，没有任何其他东西吧，OK，那这一块我们把这个东西稍微的给它变一变，我们这个识别不要了，一个是控制方向的，一个是控制什么。位置的吧，哦不不，一个控制方向，一个控制间隙吧，这个这条线是图片身上本身的线，懂吗？OK，它第三个参数可以是一个什么渐变吧，来看一下我们说写个渐变什么，哎，渐变怎么写的，大客光的什么image里面是不是有什么渐变的，是不是它OK只你推过来它的第三个参数可以是个渐变，看如果省略前面的参数行不行，OK，比如说我们让它从一个什么。

透明的界面吧，稍微好看一点，因为这是一个图嘛，是不是OK，比如说同什么rgba吧，是不是OK，比如说从零零。一是不是开始渐变，渐变到哪了？渐变到这0000吧，CTRLC键变到0000，看一下这样写对不对啊，你是不是要要是不是要有个逗号是不是，而且现在我们看有没有鉴别效果，有吗？没有吧，是不是啊，你看如果给个0PX总你看有没有。有没有渐面效果，是不是有这渐变效果了，只不过这个渐变效果，你看这个倒影现在是往左的吧，啊这个倒影往右。

你看这是默认情况，你看是不是从透明度一到透明度零的，是不一定看透明度一到。对面都零的，而我们的倒影最好是前面干嘛？你想一个倒影在水里面，是不是越远这个越模糊啊，是不是？那怎么办？方向改一改吧，怎么改方向90度是不是应该就是。诶。90度是一个什么方向？差不多吧，差了吧，那这个度数怎么调啊？需要算吗？要算干嘛？调一下就可以了。这个度数没有用上。在哪啊？

差不多应该是。看一下。还是下去了，走，你来看一下，是不是这个阴影的效果好一点，好像这样差不多吧，转过来吧，来这英雄就过来了。这是不是好一点负的。90度吧，是不是啊，OK，你看这种是不是就有一种水里倒你的效果了，是不是你可以稍微夸张一点，怎么办，让这个长一点呗，是不是，那你这边就占个想想应该怎么写怎么写，就稍微夸张一点了。对，这边我想来个负90度。这里来看一下。是不是就在哪怎么写可以让他前面是不是一开始就是什么点吧，开始做啊。

啊，可能是稍微就什么扩张点了吧，是不是有种在水里的感觉啊，OK，那这是什么到你身上，其实第三个像素可以是跟渐变的，而且当中这个能什么。不能省啊，这个特别死，明白吧，这理解，而且好像这个位置不能换吧，昨天我们是不是试过位置换了是不是也不行。就你。你看到底是没了啊，那这个API就比较死了啊，不是很友好，OK。好，这是我们讲什么倒影这块啊，记住倒影这边它还有一个什么渐变倒影，OK，好，这是我们讲的倒影，好，那第三点我们讲的什么，来看看比较重要的一些东西，其实讲完倒影的话，我们讲了什么says吧，这个就比较简单了啊，后来是不是讲了什么book s啊，OK，这book比较重要，我们写一写。Books代表什么？就是你给一个元素是不是设置的books，比如说books这代表什么？

代表什么？代表元素上什么设置的什么外和干么表示的是什么表示的是books的。尺寸懂不懂，一开始我们设置都是代表什么，肯定的不啊，你家拍你是往外扩的吧，这个时候你干嘛，这个时候你设置成box之后，这个的代表就是box分吧，如果说你这个开是200，我再给你来个pen为50，我问你现在肯为多少。肯定不。为多少？跟现在是200乘200，而且现在是我给了个是50，现在多。

100乘以100吗？是吧，除非你是你，除非如果你这这是什么。的是不是，那这个时候外跟的代表就是的尺寸吧，哦，这个时候问你，如果我外的。我拍你设置成十，是不是这个时候我问你整个多大。肯定的为多大？还不200乘以200吗？你这外开的设置就是。肯能不等等这个时候，如果你这两百两百设置是吗？不是不多。外两百两百三因为不到。100乘以100不是刚刚讲了吗？

这这能能理解。能不能理讲啊，你就记住了，反正book为什么那这个跟就代表这个一个或者代表寸懂吗？OK，一般只有会只会设置这两种盒子。好，这不啊，其实讲完不三之后的话，其实我们也做了一些扩展，是不是啊，第一个是我们说的什么层级上的一个问题，是不是我们说浮躁提升半成，是不是什么时候要去考虑元素分两层。只有在浮动的时候需要去考虑元素分量层，因为只有你元素是提半成的。啊，不只有你浮动是提半层的吗？是只有在浮动这个情况底下，你才需要去考虑元素分两层，上一层是一些文本相关的一些内容，下一层是和模型相关的一些内容。这怎么讲？其他情况底下，你需要去考虑元元素分两层吗？

你这层级都是一层一层提的，你需要去考虑吗？不需要去考虑懂不懂OK我么只有在浮动的情况下才需要考虑元素分两层是不是OK，我们说定位元素提不提升乘几定位元素提提几层，一层是不是定位元素都会提一什么，只不过我们说什么相对定位干嘛。会在文档流里什么有有残留，OK，其他的不会有残留的，懂吗？OK啊好，我们再来说，那说到这一块，我们说这个价喂。

一的时候，是不是这个乘积比他们俩都要高，也就是说这个Z加Z-1X为一，这个乘乘积上面这个这个乘积的维度跟他们这个成绩的维度一样吗？不一样，相当于你们这边怎么提都不会进位。都不会记，都不会比我这个Z-1X唯一来的懂，这怎么理解啊，Z-X跟Z-X区别懂不懂，这里面的乘积跟它毫无关系啊，懂吗？可说你ZZ杠应该是为负一的时候，是不是在它们俩下面。肯定在他们俩下面了，这个能不能理解，搞清楚Z-1X为一跟他们的一个区别啊，懂吗？OK啊，这边帮你们标记下一个Z杠为一的时候，还有么？一一杠X为二。负一的时候OK啊，比如这个是。这个是A吧。啊，这个是B吧啊，看一下为一的时候怎么都会比个嘛，怎么都会比A高，你大为负的时候怎么都会比A低。

啊，这个自己去理解一下，这是我们说的什么成交的事情吧，OK，后来我们又说一个什么。关于包含快的是不是，其实我们是是关于什么。来说一下，我们说什么是初始不含挂，和四川大小一样的矩形啊，和视窗大小、位置尺寸一样的矩形。是不是道理啊？OK，还有一件事情好，滚动系统滚动条会不会影响初始包含块的位置？

想想。滚动系统滚动条会不会影响数据包的位置啊，会啊，其实你滚系统滚动条就是拉往外走吗？懂不懂，OK，可是我们说干嘛，那我们问你怎么去。禁止系统滚动条怎么做播应该是先写HTL跟body干嘛？Has他们的hat必须得是百分百，是不一层层去拿为百分百，其次呢，O f floor1定要为hi什么是不是这样的静止系动默认滚动条吧，然后这里面还有些什么事情？怎么怎么解决IE6项固定固定定位失效的问题？

用绝对定位去模拟，用绝对定位来模拟固定定位是不是OK，那具体怎么实现？怎么用绝对定位来模拟固定定位？首先，禁止系统滚动条。是不是其次这第一步禁止系统滚动条，第二步呢，将滚动条干嘛。将滚动条作用在谁身上？作用在最外层的什么包裹去包器上，或者说我问你这个能不能在玻璃上，想一想滚动条有没有可能作用到玻璃身上？

昨天我们是把滚动条放到了一个最外层的包裹器的吗？那把这个滚动条放到玻璃上是不是一样的，我不用波口器啊，就是滚动条有没有机会出现在玻璃身上？你这玻璃身上滚头条会不会，会不会影响到数方块？也不会吗？你看咱们昨天是不是在这边做扩展的时候，只不过我们昨我们昨天做法是干嘛没有动玻璃。造了一个玻璃。是不是啊，你能不能把这个默认的滚动条放到玻璃上去啊，相当于没有什么外面这一层嘛，可不可以啊。也可以吗？懂吗？OK，这个思路是一样的啊，就你们以后看到的代码不可能跟我什么完全一模一样，可是思路肯定是一样的，懂吗？OK，嗯，系统滚断轴在H码的上一层啊。

是不是啊，OK，然后再来看好，那然后呢。然后干嘛，因为什么，因为移动什么，移动包裹器或者什么。身上的滚动条并不会影响什么。初始包含块的位置。是不是OK？所以干嘛，所以一个按照。换干嘛？按照素食吧，素食包的话，什么定位的元素就不会产生。

移动那不就是用什么决定定位来模拟了一下这个固定定位吗？是不是OK，所以这是我们讲的什么五个点OK，然后下午下午其实我们说的是什么，来看一下其实说了。边框图片是吧，OK，然后说的什么说了边框。图片说了背景说了渐变是不是OK，其实这个渐变其实跟这个边框图片啊，这个重要性没有什么背景这么重要，对吧，那这两个一自己去过过就可以了吧，一个是什么边框图片跟什么渐变是不这些都是一些什么？诶我觉得这里面没有什么需要大家注意注意的点，只要把思路理清楚，API熟一点就可以了，那可能我们在界面里面做的两个DEMO吧，一个放廊在一个什么。光方动画吧，啊，这里面可能稍微有一些小逻辑啊，就是做动画的小逻辑吧，啊这这种逻辑你们可以先自己先尝试着看能不能接受他啊，之后的逻辑要比这种逻辑要复杂个几百倍，能不理讲啊，OK，好，那最后一点我什么背景这一块，我们好要好好来说一下背景这一块啊，我们说分什么CSS2里面就已经定义的，或者说什么SS啊，三里面就已经定义了，是不是这个二跟三，我特意的强调这是级别，不是版本，对吧？OK，好，那CS没有版本的概念了，只有级别的概念，那CS2里面定的哪些？

定了哪些，定了五个吧，有background光的color，还有什么光的image，是不是还有background repeat，还有什么background，还有background attachment是不是OK，这几这几个属性每一个都给我记住啊，这个这个记住不行，好这个有没有什么需要注意的点？

啊，它其实就是一个点，干吗它会评估评估整个不的不不管怎样，他就是评估整个books是吧，OK，他呢。它呢，默认什么，默认什么，默认从哪开始绘制，默认从PA pen，默认从开始绘制，是不是从哪开始检查，从box开始检查。从开始检查是不是还需要注意，还需要注意注意一个什么点。CSS3中干嘛？有多倍镜是不是啊，OK，还有什么？

还有什么？Image还还有什么？这干嘛？默认绘制时干嘛？大小是自己的位图像素，是不是同志们默认绘制时尺寸是自己的位图像素？是不是就这么多点吧，应该没有了吧，这个什么，这个就是什么控制什么控制评估吗。是不是OK，那这个呢，哎，这个比较重要，控制什么，控制背景在什么，在背景区域中的什么位置，其实你看控制背景图片在背景区域中的位置啊，更什么形象一点，OK这里面要注意点，它可以是PX，也可以是百分比，是不是百分比的时候要需要大家切记点什么事情参照的是谁。

参照于。背景区域减去背景图片的位图像素是。是不是相当于这个百分比的，这个继续做其他应该是比较好理解。懂吗？OK，再来看这个呢，这个我们说很诡异吧，是不是OK，他有几个字两个，一个是是高，还有呢的OK，我们说如果是也比较好理解，这是个什么默认值是不？他就是干嘛，就跟我们平常看到这个什么背景图一样的什么就是背景图不会随着。

元素什么？其实是元素滚动条的滚动还是滚动，是不是滚动条的滚动啊。滚动啊，三个滚动OK，好这个呢。相当于这什么背景图干嘛背景图。铺在背景图，铺在四口中干嘛？固定定位了，相当于你视口里面，这个就是你的系统不能要动的时候，他动吗。也不动，经常拿它来做，做一张什么背景图的固定定位。这里面讲就你没有元素，只是一张背景图，能不能固定外。也可以back one attachment等于。Fix，这能能理解啊，OK，好，那这是我们讲的比较重要重要几个点吧。

然后这个里面呢，我们又说了什么。Background光的，Size光的，Orange background光的。K，是不是还有呢？还有一个白光的结节属性嘛，其实在C里面也有什么白光的结节属性，懂不懂，那这三个属性就比较简单了，对不对？只要你明白是要里面属性，这三个属性就比较简单了，是不是OK，那这个三属性我就直接贴过来了啊OK，一个是控制它的什么起始的剪切位置的，这是控制起始剪接位置啊，这是控制什么起始它位置位置的，OK back的size呢？它的大小的其实也就什么，你默认里面这几个点啊是吧，哪边绘制的，哪边剪裁的，这个尺寸是多少，是不是通过它好他们才来控制C这里面有什么新增了吧，那这个白size的时候需要注意一点，图片是自适应的。

这么讲是不是，所以说你想让这张图背景图片完全在我这个图完全占满我整个那个背景区域的话，两个值都得百分百是不是OK，那最后再来说一个点。第八个点不知道有没有忘，OK，如何实现一张图片的什么垂直垂平举中啊，经常被问到的一道面试题，方案应该有好多种，最优雅的我们是应该怎么做通过？什么我的个来吧，其实就是什么，首先得有一个容器区域吧，是不是OK，我们说在这个区域内部，你要做件什么事情。在这个区域，区域里面你要加一个元素，是不是这个元素干嘛？我们来看一下这个素到底是加在哪，我记得我在哪写的，我在哪写的。

周冬雨，是不是造音里面写的吧，是不是，你看我是不是body after一个是不是啊，其实就是就是这张代码是不是只有你把它直接接过来，好，这个可以不要，是不是这样他就能随便对住了，这里面的三个，这里面的每一行C声明你能省略吗？一行都不能省略啊，必须要这么写啊，我们来看一下这个阿尔法到底加给了谁啊？问，你玻璃去加一个阿布元素的话，是在这个玻璃的内部还是在这个玻璃的外部？啊，切记这个阿元素加上的是它的子元素，懂吗？并不是说加在玻璃的后面，不是的，是玻璃的最最紫元素的最最底下。就是他的最后一个资源说。这能不能讲好比说呢，就是加在它什么第一个元素，你们讲相当于是不是在我一个容器的，在我一个容器的内部，我先搞一个依赖的属性的一个什么元素，这个元素你的高度必须要占满我整个腹肌。

是不是，然后我这张图片就可以参照以这个元素去进行。进行什么位置上面个调整，只要你们的我回来都是没，那他们就按照我这个元素的最对中间去对齐，懂吗？就把我图片的最中心跟什么，跟我这个元素的最中心去对齐，那垂直上面不就已经居中了吗？你的高度是百分百的。懂吗？这个能不能理解啊，玻璃玻璃玻璃必须得是个区域啊，你的高度必须要撑开来，懂吗？OK。好，这是我们讲的一些复习的内容。