css去除两个标记间隙的方法

hello， 小 伙伴们好，刚才啊，同学们去练习的时候反馈了有两个问题，好，我们来分别给同学们去解释一下。首先第一个问题，有的小伙伴说啊，哎，老师，我在给这个盒子加 fix 的 时候有点问题啊， 我不但是给他加了 fix 的， 我还给他加了一个位置，比如说我给他加了一个 position center center， 当我保存完之后，我发现，哎，我的图片怎么跑到这来了呀？他也没有在这个盒子水平居中吹着居中啊，这个是啥情况呀？ 哎，问的非常好，鼓励鼓励，给你鼓掌一下啊，发现问题了，这个呢，就是我跟小伙伴要说的这个 fix 的， 他是相对于谁来说，他并不是相对于当前的元素来说的，因为他是针对于我们当前的市口。 什么叫市口啊？就拿着我们这个页面来说，这部分就叫做市口，也就说这个页面中可以看到的部分， 当我们给我们这个背景图片加了 attachment fix 的 时候，这个图片啊，它首先会跑到这个来，你看是不是正好在我当前这个浏览器的水平居中，垂直居中的位置上去，它是相对于这个位置 来做固定的，你看现在呢，我拉动呃滚动条的时候，你会发现看到没有，哎，这个图片是定到这个位置来，如果我的浏览器变大了，它的位置啊，它其实是跑到这来了，它其实这个图片跑到这来了， 而我当前的市口呢，就是这个了，从这边到这边也说浏览器可以看到的这个区域，我们称之为市口，所以小伙伴明白了吗？如果我给我这个盒子添加了 fixed， 则它是相对于当前市口的，我给你记录下来啊， 相对于当前市口也说浏览器可以看到的这块区域，市口啊，不一定是多大，就是看看你这个浏览器显示多大的区域，这块就叫做市口了，是相对于他来说的，你看我浏览器变小啊，哎，我再小一丢丢， 从小从小发现没有，这图片是不是跟着我这个当前的市口这块区域来进行变化的， 明白了吗？啊，所以说在呃要加的时候呢，要注意一下啊，简单来说啊，就是我们这个啊，它上面的 fixed 呢，它并不是针对于当前元素，而是相对于市口来进行移动位置。好吧，啊，这个要小心， 这样给小伙伴们解决了第一个问题。好了，还有第二个问题，有的小伙伴就说了啊，老师，嗯，你看看我的背景啊，你看一行一行一行的写好麻烦呀，有没有一种简单的方法呢？ 我每次加背景定位还得 background position， 加背景固定还得 attachment， 能不能像我们的字体那样啊， font greek style 呀， font greek size 呀，我一行就可以给它写完， 那答案肯定是可以的喽。好，这就是这节课我给小伙伴们解决的第二个问题了，能不能采取一种简写的形式，可以 在我们背景啊有一种符合性的写法，这个也是在我们开发中最为常用的一种写法，我们可以把颜色，图片重复等等这些属性啊，写到一行里面，记住它的属性名叫做 background， 就 不要再加杠了， 后面就可以写相应的属性值喽。注意这些值啊，跟顺序是没有关系的，你比如说我把固定写在最前面也没问题，把图片写到最后面也中， 但是呢，有一点需要注意，就是位置和尺寸，如果你都要写的话，一定要加一个斜杠啊，这样才是一个完整的写法，这样写起来就比刚才的更简单了。好，我给同学们去演示一下啊。好，小伙伴注意来看，那咱们呀。嗯，背景颜色注视起来，背景图片注视起来， 你注视我，注视他，注视你，我，他都没了。好，接下来的话，我就可以给他写我们的符合写法，一句话搞定，它的名字叫做 background。 哎，这么写法里面可以写若干东西，他肯定会有提示，你可以接受一下。看到没有，背的颜色是 pink， 图片也放进来了，我不重复 center center 啊，水平居中，垂直居中，然后呢，我给他缩放为三百像素了，写完之后小伙伴保存一下，走着， 看到没有也能够看到，你看是水平居中，垂直居中吧。啊，然后图片缩分为三百像素了，我改个二百你看看。二百啊， 走，数据变小了呀。嗯，图片和颜色都有了啊，我没有加 fix 的 啊，如果你加了 fix 的 话，呃，它就跑到我们可视区域。再说一遍，可视区域是这块，你浏览器能够看到这块区域，你加了 center center 啊，加了 fix 它就跑到这来了。我给你验证一下 啊， fix 加到哪里都行啊，比如说我加在 northrop 的 后面， fixed 好 卡，加次保存，走着。喏，是不是跑到我们这个位置来了，所以在这儿我就先不加了好吗？好的，那这样的话就是我们背景的复合性写法，也是我们开发中最为常用的。 好简单，小结一下，刚才啊，我解决了两个问题，第一个 fix， 它呢是相对于当前市口来说的，它并不是针对于当前我这个盒子来说。 好。第二个问题，哎，我们的复合性写法，它是通过 background 这个属性名来进行定义的，值呢，你可以写进去，中间用空格隔开它们没有先后顺序，但是要求必须是背景位置和背景缩放，用斜杠隔开，有时候老师我就不斜杠，我就这样，你 ctrl 加四保存，它就不出来， 看到没有，他他他程序比人靠谱啊，他就按照规定必须这么去写，明白了吗？好了，那这样的话我们背景就讲解完毕了，接下来我们去做一个比较好玩的综合案例。 上节课我说背景固定有一个很好用的叫视差滚动效果，现在我就要给小伙伴们去做一下，做一个视差滚动的效果。好了，我们先来看一看我做完之后是什么样子的好吗？来，我们看看我们做完之后的样子，打开。 生活总是非常的忙碌，但是有时候我们也需要静下心来，去看一看落日的夕阳， 去看一看山水湖色，去看一看广阔蓝海，去看一看白雪蓝天。当我们看完之后，我们有时候也会发现，生活原来也是如此的美好。 好，小伙伴看好了吗？这个效果是不是非常的好玩呀？刚开始啊，是这样的一张背景图片，那当我滚动的时候，哎，发现换成了另外一张图片，再滚动又换成了第三幅，再滚动换成了第四幅，这种效果呢就称之为视差滚动， 看上去图片一副换一副，这种效果啊，好了，那这个效果是怎么做的呢？其实这个效果最核心的就是利用了背景图片的固定， 我在页面滚动的时候，其实图是不动的，所以说就看到了四张图片来回切换了，非常有意思，对不对？好了，那接下来我们把这个案例写一写，看一看这个案例啊，到底怎么去做，还是按照我们以前的步骤，分成三大步，第一，整体来看，应该怎么做，第二，细节怎么实现，第三步，写代码。 好，我们整体来看，呃，其实这个案例啊，整体分成了四个大盒子，哎，这是第一大个盒子， 当前盒子就这样，给他一张背景图片就行了，看好没有？好，然后呢，再往下走，其实呢，是有第二个大盒子，这个 山水湖色就是我们的第二个大的盒子喽。好，再往下走，是第三个大的盒子，还有四个盒子，所以说啊，其实你看我这有滚动条的，我在拉动的时候啊，其实这四个盒子是在滚动，只不过背景图片是固定的，所以说看起来是这个效果有意思吧。 好了，那整体分析完了，接下来我们再看细节，那每一个盒子又怎么划分呢？好，来看啊，这是这个大盒子， 刚才我们说过，先给一张大的背景图片，采取的是固定定位。好，紧跟着上面还有一个盒子，这个盒子啊，就是宽度是百分之百宽，高度，给一个高度里面写文字就行了。然后这呢，我们给一个大的标题， 作为当前屏幕的标题就行了，然后这个文字中间有个距离，是不是通过我们的 letter spacing 来实现的啊，那，那你第一瓶会了，剩下的是不是每一瓶都是这么个做法，每一瓶都是上面一个盒子，下面一个标题就行了。 好了，结构清晰了吗？那接下来我就要带着小伙伴们，咱们手敲实现这个效果来，这种效果我们称之为视差滚动。好了，那怎么做呢？我们一步一步来保存一下，然后呢，右击我打开一下啊， 好，这是我们要做的效果，这是已经做完的，这是我们要做的啊，我把我整个浏览器也放大吧。好了，那我们先准备好样式啊，厨师的样式还要准备的，还记得吗？星 马振领拍定领，我还要准备一个叫什么呢？对了， box 杠 sizing 包着杠 box， 这样我们加了边框，加了内边距就不会撑大我们的盒子了，这是第一步准备的。好，紧跟着我们要准备我们的下面的内容了啊，我们说了是要准备四个大盒子，对不对？哎，然后呢，我们叫做写上啊，第一瓶， 他还有第二瓶，第三瓶和第四瓶啊，没有关系，因为它结构是一样的，我们只需要做第一瓶做出来，首先有一个超大的盒子，假设我叫做 section section 啊， ok， 呃，起个名字叫做 class， 等于 s e c t i o n section e 这是多文，我们的第一屏，按照刚才我们的分析啊，来我们看看啊，这是第一大屏，然后里面分成了，这是上面一个盒子， 这是一个标题，是不是上下两部分里面再分上下？好，先把结构写完里面啊，再写上面一部分，我们叫做点 c o n t n t content。 好，然后呢，下面再准备一个标题啊，这个我用 h 一 也行， h 二也可以，我用 h 二吧。好，保存一下啊，第一个叫什么呢？叫做落日夕阳。好，这样的话我们这个大盒子里面就包含了两个小盒子了，做一做记得预览一下喏。已经有了， 只不过上面的盒子还没有写样式啊。没有关系，我们一步一步的来。好，那在这里呢，我们先解决一个问题，同学们要注意，因为我想让每一屏都要和当前的屏幕一样大，所以我教给小伙伴们一个小技巧啊，是这么写 a t m r 哦啊，逗号 body 然后宽度是百分之百啊，高度是百分之百这句话是要去写上去的，这样的话让我 body 和 h 码就和我当前屏幕一样大了。如果我不写这句话你不要以为我们的 body 就是 和屏幕一样大。这个并不是的啊， 我给你验证一下。来我给你先注视一下啊。保存，我们先看一看啊。好，右击检查，你来看看你的 body 多大啊，我点击它我点的 body 看到没有 这个包的呀，这个蓝色区域就是包的大小了，因为我们想我们每一瓶啊都要和哎格式区一样大，应该这么大才对，但是当前的包的就这么一点，明白了吧。好，我选 atm 啊，你看 atm 也这么大，所以他们两个默认的就是你有多少内容我就多大， 但是呢，我就想让包的和 atm 要把整屏占满才行，因为我一会我要放图片，所以你就写上这句话就行了。好吧好，我解开你再来看一看。 ok， 现在我再来给你们去展示一下。现在啊，保存，你看我在选 h 毛，发现没有，就和我当前的这个屏幕是不一样大了呀，啊， 然后呢？点一下 body 喏，是不也一样了？哎，因为我后面需要明白不跟注示一下啊，写上这句话的意思是让 body 和 html 元素和当前，嗯，可知区一样大 啊，这个我们说了，还记不记得格式区刚才说过了，是不这一块就是格式区啊，我要这么大才行，这样才能占满整个屏幕，好了吗？好了，这样写完之后呢，注意啊，我们的第一屏鼠标放上去，哎，看到没有，我们的第一屏宽度 确实一样，呃，和那个保底 h 码一样大了，但是高度还不对，高度是多少呢？哎，高度也要使用百分之百， 这样我整个百分之百了，我说才能放背景图片，要不然我背景图片只在这么点里面去显示了，明白吗？所以说我们可以给我们的这个 section 啊来进行添加啊，他的标签叫 section， 那 我们可以这么写 section 哎，我写我用那个属性选择器吧啊，然后用的是 class 间等于也行，星等于也行。 section 宽度是百分之百，高度百分之百。对，我就这么去写，看明白没有？以三十开头的，因为我是第一瓶叫 section 一， 我第二瓶叫 section 二，明白了吧，所以说它宽度高度都要百分之百，这样保存一下，同学们再来看， 打开我们这个，再选择我们的 section 一， 有点意思，这样的话，我是不是我的宽度和高度就和当前屏幕一样大了，那这么的大我就可以往里面丢图片了， 明白吗？哎，来，我们来练习一下啊，接下来我要去丢图片喽，点 section s e c t r o n e 啊，第一屏我要丢背景图片 background， 这次我们用，呃，符合性写法啊， background 好， 然后颜色不需要，我写的是 u r l u r l 呃， no repeat center center cover 没问题，我只有路径不对而已，我把路径改一改啊，多利用提示是个好方法。点杠，我提前给同学们准备好了啊，找图片花了我好久。背景一点 g p g 看明白没有？背景一点 g p g 好 了，然后呢？ no 杠 repeat 整个呃，在我整个页面的水平居中，垂直居中显示，然后呢， cover 盖满整个屏幕。走着来，我们来看看我们的效果。 关掉有了吗？哎，这幅美丽的图片就可以显示到这一屏了，这是第一屏，咱们只做第一屏就行好吗？好了，做完之后呢，接下来我需要去在上边时候准备这么大的一个盒子呀，里面放文字和段落就行了， 同时里面这一些还有一个内边句，哎，让我们控制一下。所以说接下来我们再做这上面这个盒子啊，上面的盒子叫什么名字？叫做 content 对 不对？ content 啊啊，你就不用写三个深意里面的 content 了，因为下面所有盒子的 content 都是一样的，所以你可以直接写 content， 明白不？啊？不用写三乘一了，因为三乘二，三乘三里面所有的都是通用的啊，所以说直接写 content 的 啊，它的宽度不用考虑是百分之百，要和父亲一样宽。高度，哎，我可以设为百分之三十。 百分之三十啊，高度是可以设为百分比的，占父亲的多少？然后呢？ bgc 来我这个背景颜色啊。 background 二 dba 我 用是一个黑色啊，黑色怎么写是零， 这有提示。零零零一点五啊。嗯，这个呢不要是点五了。这个呢我可以一个点九。好，这样的话我这个盒子 content 的 盒子就应该能看见了。来看看有没有看看我们的。哎，是不是已经有了， 比我们这个更高一些对不对？哎所以说我可以把它再调小一点啊。好，我调小一点，我这样调成百分之二十五就可以了，哎。二十五稍微小一点保存。现在我们再来看我们的 哎现在的大小差不多了，看到没有大差不多啊，稍微有点变化是因为没有滚动条的原因，不要着急啊，一点一点来，然后里面就可以放文字放段落喽。啊文字我可以直接复制过来哎，选中它 ctrl 加 c 复制一份，然后呢到我们这个里面去粘贴一下啊，注意啊，是在刚才的里面，不要写错了。 ctrl 加 v 粘过来。 嗯 ctrl 加四保存。然后呢这个呢我 ctrl 加 x 加一个 p， ctrl 加 v 粘过来再保存。下面等着它有提示啊。走，还会有啊走，然后到助理的啊这儿加上去啊。好保存一下， 然后这个呢给你删掉这个风景读好再加上一个 p 标签， ctrl v 粘过来，格式稍微调一下啊。 哎哎，强迫症啊，必须要给你调准啊。好了，现在的话就可以加了几个段落了，有了吗？剁一剁预览一下啊，我们看一看。其实有了，你看不见，因为这个字啊 是黑色的，现在我需要给它改成白色，然后改点行高，所以说那我们找到我们这个 content 的 颜色 color 改成一个白色， 白色是警号 fff 常用的白色，然后行高给成一个三十 p x， 然后字体大小放在 size， 我 给个十六 p x 就 行了。保存，小伙伴再来看。嗯，这几个我就不要了，直接打开它。 哎，你看我们这个是不是差不多出来了，只不过需要做的就是像他这个样子，是不是给他加上一个内边句啊啊，这样的话上面好看，左边也好看，所以我们给他加一个内边句，内边句我们给他加上一个 padding， 还记得吧，我直接来个二十 p x 就 行了。保存，我们再来看看我们的。 哎，这个效果差不多是不是能看到了。能能，是不是啊，我们稍微小了一些啊，你可以在根据你的情况需要调大调小都可以啊，比如说我这调个二十五三十之类的都行。好吧，这样的话我们上面这个盒子就搞定了。 接下来做的是不是这个落日夕阳这一部分？落日夕阳要到这个地方的位置来，文字要大一点儿，然后呢变成白色，不加粗，所以说我可以这么去做。注意这个呢，我都是给 content 来写的，因为这些都是字体相关系的，所以说我这里边的 p 也都会继承过来的，没有关系好吗。 那接下来我们可以做 hr 喽， hr 属于这个 section 盒子里面的啊啊，你也不要写 section 一 里面的 h 二，因为还有 section 二呢，第二篇里面的 h 二样式都是通用的，所以说呢，我们可以这么去写啊。呃，也可以叫做它里面的 h 二，或者你给他起个类名都可以啊， 来它里面的 h r 给它写上一个，这么写没问题的啊。呃， h r 里面首先是 t s l s t 水平居中，然后 font 杠 weight 改成四百，我不加粗然后 font size 我 改成一个八十 p x 看看好不好看，保存同学们看啊， 这句话的意思是把这个选择器选出来，它里面的 h r 这么写没问题啊，选择它喏。路尔西阳是不是也有了？呦，有点大呀， 那我们再把它改小一点，然后往下走一走。你像让 hr 往下走一走，是不是给他加上一个什么啊？加麻志刚 top 让他往下走一走就行了对不对？所以说我可以这么去做啊啊，这个八十有点大，所以我改成一个六十好，然后呢，再加上个麻志刚 top 我 改成一个二百 p x 啊，往下走一走还需要做的呢，就是让它的之间距离大一点啊，还记得不记得这个单词 letter spacing 我 改成个十 p x 好， 这样的话就可以让字和字之间的距离大一丢丢喽。打开喏是不是就看见了哦，颜色改成白色啊，忘了改白色好，现在 color 还是警号 f f f。 那 这样的话我们 h 二就给它做完了。嗯，结束了，欧了。所以说刚才我们做的是给这一屏啊，添加了一个上面一个盒子，上面盒子呢放断了就行了，然后给上面的盒子加个背景丝啊，加个排垫纸挤过去 啊，然后下面这个呢是 h 二 h 二呢离上面远一丢丢，所以是 mark 这个 top 给文字改改颜色，改个大小，改改间距就行了。这是一个盒子做法，剩下的你懂吗？我应该怎么做 哎，剩下的是吧，样式写完了，剩下就是复制就行了。这是 section e 加 c 到这里去啊，然后我准备我的第二瓶第第二瓶，哎，你看是不是有提示了，我可以直接接受就行了。 等着啊，接受再等着啊，接受好，第三瓶也有接受， 接受第四瓶再等着，接受好没了，四瓶正好，哈哈哈，卡尔加斯保存啊，我接受完了，因因为我们只需要做了第一瓶，我们的 ai 啊，就能够推断出来，你应该下面应该是一样的，所以我做完了卡尔加斯保存。小伙伴先看效果啊， 这是第一屏，你看现在有滚动条了，往下走，第二屏，第三屏，第四屏有点意思，太棒了，现在缺的就是什么了， 添加背景图片呀。所以说我们做背景图片啊，好，往上走一走，这是 section 一， 你看啊，我也利用提示你信不信。等着，我有 section 二， section 二 section 三，接受 section 三，还有一个等着出来出来 亲，出来啊，这么不给面子，我按下回车出来，哎，终于出来了，厉不厉害。背个一，背个二背个三，背个四，没问题，我的图片就是这么准备的，有点意思。 ctrl 加四保存，小伙伴见证奇迹的时刻走着。第一屏， 第二瓶，第三瓶第四瓶。哈哈哈，是不是基本上就帮我们去生成了呀，非常快捷，还是那句话，有了 ai 我 们只需要做第一部分就是做了个打样，剩下的代码可以帮我们快速去生成。我们需要做的是不就把里面的文字换一换呀？我先大概换一换文字啊， 然后需要做的就是第一个呢叫做落日夕阳，第二个呢叫做山水湖色啊，山水湖色我就只把标题换了，其他的文字小伙伴们可以自己去换啊，还有一个是广阔蓝海， 还有最后一个是白雪蓝天。好， ctrl 加四保存。我们先看看文字，落日夕阳，山水湖色、广阔蓝海，白雪蓝天，有点意思。这样呢，我们把大概的结构就布局完了，但是 怎么才能像他这样做出这种效果来呢？用什么了？也是我讲这个案例最核心的一部分。 对了，背景固定，用 fixed 把它固定起来，我们这个案例就做完了。所以最后我们只需要加一句话，往上走，往上走，走啊，慢慢来，找到 section 一， 然后随便找个位置，我们说了顺序无关，加上 fixed 好， 它再往下面要不要加？要要加啊，下边同样道理也是要加的，所以说你把光标定过来，它都会有相应的提示啊，你看 fixed， fixed， 所以 我接受一下，全部都加上，加一次保存， 有点意思，美不美？就问你美不美？ 好啦，那这个效果我们是不就给同学们去做完毕啦，有抽象感吗？是不是非常好玩呀？好啦，那接下来我们小节一下刚才我们做的这个案例 啊。这个案例呢，首先第一个，我们先看样式啊，我们把它做了一个清零处理，同时呢又把所有的盒子模型改成了我们的 border box， 这样刚才我去加了判定者也不会撑大我们的盒子。 第二个，有一步非常重要，想做我们当前这个案例，这个也是我们一个比较通用的写法，以后你再想做这种全屏图片的案例了。呃，这句 css 也是要写的，就是让我们的 atm 和 body 呀，和我们整个科室区域一样大 啊。这句话是要写的，因为 atm 也好，包的也好，默认的就是你有多少内容我就多大，但是现在呢，我们想让它和整个浏览器一样大，就是宽是百分之百，高是百分之百。好， atm 包的改过来了，接下来我就可以改里面所有的 section 盒子，你把它呢也改成，嗯，和整个格式区一样大， 因为我改成一样大的目的就是我让我整个图片要铺满整个页面。好，写完之后呢，接下来就是给每一个三个选项，指定背景图片不平铺啊啊，然后呢，再让他调一下位置， 注意这个用的是符合性的写法啊，它们中间用空格隔开就可以了。好，里面呢都是一些小细节了，比如说啊，我们整个页面呢，上边有一个盒子， 下面是一个标题，某某标题上面盒子呢宽度是百分之百，高度我改了个百分之二十五啊，在这里你也可以根据呃测量的高度去量也行。给了个背景白透明，同时啊，哎，也让里面所有的文字啊改了个行高，为了好看一些，我给他加了一个牌顶，因为上面已经有包的 box 了，所以说加了牌顶也不会撑大盒子没有关系。 好，那下面的 hr 呢，哎，我们就让它居中对齐啊，改一下字间距啊啊，调调位置就可以了，所以整个页面我们就做完毕喽。哎呀，还是非常有成就感的，接下来小伙伴们去可以尝试尝试把我们这个漂亮的页面去实现一下吧。

今天讲一下咱们弹性合肢布局的基础使用方法，那我现在在页面上准备了一个页面结构，就是一个负合着，下边有三个止合着，然后我分别也给他们设置了宽高。那先去页面上去看一下咱们的页面是什么样的 发现，然后这个灰色的是咱们的复合着，下边是咱们三个纸盒子，那如果说现在我想让这三个纸盒子横向的均匀的分布在咱们的复合里面，那咱们可以使用浮动 float， 这样盒子就横向分布在咱们的复元素里面了。但是如果想让它均匀的有间隙的去分布的话，咱们是要去测量它的尺寸的，然后再计算它们之间的间距。那现在咱们就不用 这种方法了，因为这种方法有可能会遇到空间挤占，还要给他清除浮动。那咱们就引入了这个弹性盒子布局， 弹性合资布局直接在这里写 display， 那 这个弹性合资布局就已经完成了，去页面看一下刷新，它也实现了在咱们复合式里横向布局的这个样式。

大家好，我是清新，今天给大家分享前端必会的三种 css 布局技术，第一种是这种左右两列式的布局，第二种是这种一行三列或四列的布局，第三种是这种一行多列或者多行多列的布局。那么接下来我们可以看一下京东商城的网页框架结果它是如何搭建的， 我们来看一下啊，一般网站的头部都是通蓝的啊，那么京东也是通蓝的，那么他整个网页的主体部分啊，他其实是放在这么大的一个盒子当中，然后这个盒子设置在水平发现居中，那么接下来的内容就是在这个盒子里面来进行布局，所以我们来看一下这个里面是怎么布局的。 那么首先我们来看第一个板块，他是一行四列的布局，第二个是属于一行多列的，第三个板块是属于左右两列式布局，那么第四个板块也是一行多列，那么第五个板块也是一行四列的布局， 那么后面的话都是这种多行多列的布局。我们来看一下啊，所以说整个这个网页的框架结构啊，用到的就是我们今天要给大家分享的这三种布局方式， 所以只要你掌握了这三种布局方式，那么搭建一个完整的网页框架肯定是一点问题都没有的。那么接下来我们就开始写代码。好，首先我们来回到我们的 vs 扣的开发工具，首先下来我们来新建一个网页文件，我们来给他取个名字啊，叫做前端必会的三种 css 布局技术。点， stm 回车。好，那么接下来我们按住 sift 键感单号回车调出我们这个网页的框架，那么同样的我们也需要把这个标题给他设置好，好，我们来给他设置下标题， ctrl 加是保存。 那么接下来我们来看一下我们要做什么啊？我们刚才说了，我们一个网站的他的主体部分是放在这么大的一个盒子当中， 然后在这个盒子里面进行布局，那么我们一般的网页的这个宽的吗？这个宽度是一千二百八十，那么我们这里为了给大家方便的话，我们把它缩小到一千啊这样一个区块里面，所以首先我们要构建这么一个大的盒子，用来做我们的容器。好，我们来构建一下， 点上，哎呀，好，容器的意思啊。好，然后我们来给他添加我们的样式，太太太杠，四二三四。 好，那么接下来我们来给他添加我们的样式宽度啊，我们来给他加上一个宽度，一千，然后我们来 给他加上一个高度啊，当然这个高度他正常是随着内容自动而往下撑的。这里为了给他看效果，我们给他加一下啊，到时候后面我们把它删除掉就可以了。然后我们来给他加上一个边框，我们来看一下效果。 coms 加是保存，然后我们的右击啊在浏览器当中来打开看一下。 好，那么这样一个长方形的区块构建好了，那么这个时候大家看他与上面和左边有这样一个间距，那么这个间距我们可以审查来看一下啊， 我们来选中我们的玻璃就可以看到，其实大家看这玻璃有默认的八相处的外边距，那么这个间距就是浏览器在最开始变异的时候， 我们这个波点默认自带的外边局造成的，所以我们不需要，不需要我们就把它给干掉，好抗拆架是保存，那么这个时候间距就没有了，那么接下来我们这边需要把这个盒子设置在水平方向居中的位置显， 我们可以看一下，妈，给给大家上一个上三十像素的外编剧，左右外编剧自动相等，那么下外编剧为零， ct 加是保存，我们来看一下大上外编剧，三十像素左右自动相等，水平居中啊，下外编剧不需要零， 好，我们接着往下看，那么首先我们要构建第一个部分，这样一个左右两列式的布局，那么这样一个结构，我们来看一下啊， 他其实是在外面啊，构建了这么大的一个盒子，然后在这个盒子里面再构建的左边这个红色的盒，右边这个黄色的盒子啊，所以是构建一个大的盒子，里面放两个小盒子。好，所以我们来看一下啊， 好，我们来给他取个名字叫 column c o r u m m， 这个什么意思啊？啊，这是我们的列的意思啊，好，我们这里是两列， 是的，所以我们给他取个名扣二，好，然后他里面要有两个，是不是一个左边和一个右边的盒子，所以点敲了门 啊。 c o r u m m 二杠一，好，我们来把它复制一份。二杠二， come， 加是保存好，接下来我们来给他添加样式啊，我们先给他最外面的那个盒子加加上一个边框，看看效果， 我们给他加个黑色的吧，看着加是保存啊，大家看一下啊，当然他里面还没有高度，所以啥也看不到，只能看着几个黑框框在那里。 好，那么接下来我们来给他里面杠点上，敲了门，二杠一，我们给他加上一个宽度七百，加上一个高 三百，再给他加上一个背景颜色红色， ctrl 加是保存好，再一个红色的区块就出来了，那么接下来我们来构建他的第二个部分，第二个里面的小盒子啊， 好啊，然后这里我们来看，总共宽度是一千，减掉七百，还剩三百，还要留下空隙，所以这里是二百八， 然后这个颜色我们把它改了，改成什么？改成黄色椰蓉，看，这家是保存，保存之后我们来看一下它整个就是外面这个大的盒子，是吧？这个黑色的边框包裹着两个盒子，红色的和黄色的， 那么接下来我们要让这个盒子怎么样？在水平局中啊，在水平，一个在左，一个在右显示，所以在左边的这个盒子我们给他加上一个左浮动，看此啊好，到了加完之后，这个黄色的不见了啊，这个黄色的盒子是因为什么被这个红色的盒子盖住， 有时候加了浮动之后，这个盒子就相当于飘起来了，他不占空间，所以下面这个盒子就把那个什么下面的盒子就缩到里面去，看不到了啊，所以同样的，我们这个盒子我们要让他往右边显示，我们可以给他加上一个什么右浮动。 read， 好看，这家是保存，保存照，大家看到没有？就在这里了，但是我们加完之后啊，这个效果是实现，但是他外面这个盒子，这个黑色的盒子是不是被塌陷了呀？ 啊，这就是因为加了浮动之后啊，这两个盒子相当于飘起来，没有占任何的空间，所以外面这个大的盒子就相当于没有高度了，他就被塌陷了，那么如果我们往后面再写内容的话，他就也会缩到里面去，那这样肯定是不行的，所以我们需要清除浮动，那么接下来看一下我们怎么清除浮动， 大家看啊，这里非常的重要，我们来看这是左浮动的盒子，这是右浮动的盒子，是因为这两个盒子的 浮动问题造成的塌陷，所以我们需要在他们的后面加上一个清除浮动的样式啊，我们来看一下怎么加，我们给他一个颗粒啊，构建这样一个颗粒，这样一个 diy 啊，这个怎么 diy？ 主要是用来清除我们的浮动的。好，所以我们来看一下点上颗粒 大括号颗粒是什么意思？清除浮动的意思。好，我们来看一下，比如说我们来清除一下左浮动， 这个什么意思？就是这个盒子啊，他在清除浮动的时候，这个清除左，大家看他只能清除他前面的盒子因为左右浮动造成的塌陷问题，他是不能清除他后面的盒子 造成的塌陷问题啊，等一下我们给大家演示。好，我们先给他加上一个清除左幅的，我们来看一下。好，清除的来看一下是不是也 ok 了呀？是不是 ok， 但是我 说了，好像我们只要清除左浮动就好了，他右边这个盒子右浮动造成的塌陷问题好像不需要清楚啊，我们来看一下啊，如果我把这个盒子的高度改成一百， 我们来看一下他会有什么问题，大家看到没有？是不是还有这个塌陷问题啊？那是因为我们给他盒子加的高度是一样的，所以正常情况之下的话，我们是应该左右浮动都要清楚的，如果我这里只清楚右浮动， 好像看上去也没有问题，是不是如果我把右边这个盒子也改矮一点呢？那么他也会出现那个问题，所以正常情况下我们是要清除什么啊？这个盒子前面的这把盒子因为左右浮动 给外面这个盒子造成的差塌陷问题，所以我们应该是 boss， 也就是说他前面只要有左浮动和右浮动都清楚掉， 所以是清除左右浮动，这样子大家看一下啊，就没有问题了。好， ok 了，这当然我们把这里先还原一下啊。好，我们刚才说了清除浮动这个颗粒为什么要写在最后面，是因为他只能清除他前面的盒子因为左右浮动而造成外面这个盒子塌陷的问题，他并不能清除他后面的盒子因为怎么样浮动而造成的塌陷问题。 所以我们比如说我们把这个盒子再复制一份，复制好了之后我们来看一下，你看到没有？这个是不是这个盒子的高度是不是还是这样的，并没有随着后面的内容来撑开 啊？所以我们一般清楚浮动的时候啊，我们一般是写在最后面啊，是必须写在最后面啊，不是一般， ok， 好，那么这样就没有问题了，那么 ok 了之后，我们接 接下来我们就要看我们的这种一行三列或者四列的这种布局了，我们来看一下啊，那么同样的这种一行三列的这种布局，他也是在外面构建了一个大盒子，然后在这个盒子里面构建了三个小盒子，然后再把它排在一排，这样显示，所以同样的我们来构建吧。 扣了吗？ c o r u m m， 好，这里是三是吧？好，然后点上 c o r u m m 三杠一，我们来复制三份吧，按住 alt 键和 c 不正向下的箭头就可以复制了。好，我们来啊， 这里来三炕在家是保存，保存之后，当然这里什么效果也看不到。我们同样的来先给他加点样式吧， 给他一个三啊，我们也给他加上一个边框来看一下，我们给他加上一个两项 蓝色的边框吧，看着加是保存，同样的看到的，这里有个啊，边框线。好，我们接着往下看三，下面的杠可入三杠一，第一个盒子， 好，同样的我们给他加上一点宽度吧。 iwy 四，我们来给他一个二百， 然后同样的我们给他加上一个高度三百，好，给他加上一个背景颜色，看着加是保存好出来了，我们来构建我们的第二个盒子 里面的第二个啊，好，同样的我们给他改成什么？我们改，改成四百，把这个颜色也给他改 改一下，我给他改个这个颜色吧。好，然后我们来看一下第三个， 好，我们来看一下啊，那么我们来看两百加四百就是六百，六百加四百就正好是一千，然后我们来看一下，总共这里是一千，然后这里要有间距二十像素，这里也有二十像素，是吧？所以我们要干嘛？我们总共只有九百六，九百六的话，那这里只有三百六了， 好，这样子啊，然后我们把这个改掉，把这颜色改了， 改个紫色的吧，看这驾驶保存，那么这三个盒子从上往下排列，当然我们要把它变成水平的，我们有两种方法，第一种就是给他们分别加左幅， 好，我们来看一下，比如说给他加上一个 flow 成，大夫吃给他也加上一个 flow 成，嗯， 来不成？然后给他也加上一个 float， 来不成？看成家是保存，大家看一下是不是 ok 了。那么接下来我们要产生空隙的话，我们可以给中间这个盒子加上左右二十像素的，外边去就可以了，马给上下为零，左右二十。 好啊，当然他挤不下去是因为外面这个盒子造成的啊，你看到没有？就外面我们给他加的掩饰是吧？比如说我把这个蓝色的这个边框干掉，因为外面这个盒占了空间吗？占了两箱数，他只要多一点点他都放不下，是吧？ 好，那么接下来我们来看一下，我们如果把这个把这不注视掉，我们来看第二种方式，他有什么好处啊？第二 种方式我们是第一个加左浮动往左，第二个也加左浮动往左，然后然后第三个盒子我们加什么不加左浮动，我们加右浮动，也就是说前面两个盒子往左，后面一个盒子往右，然后我们给中间这个盒子加上左边二十像素的外边去就可以了。 再看你们同样达到了这个效果，但是他并不会因为这里有两项数的这个边框而造成他掉下来，是因为他这里还有二十像素的这个空间可以容你怎么样？对啊，作为弹性是吧？伸缩自己去那个啊，好，这就是这种布局的方式，他有一个好处啊，就在这里。好， 那么 ok 的时候，同样的我们要清楚他们三个因为浮动造成的塌陷问题。好，当然我们要清楚浮动很简单，我们也可以把这个直接复制放到 这个位置就可以了啊。当然接下来我们来给大家讲第二种清除浮动的方式，我们就不这样加了啊。好，我们来看一下怎么加。先认真看代码，最后我再给大家讲原理，我们给大家定一个清除浮动的样式颗粒， 这个是冒号，阿富特大挂号。好，这是一个样式啊，然后这个冒号阿富特就是在他的后面。啊，什么意思？现在也不需要懂，等下再说吧。好，我们来 continent。 好，我们先里面加个一一一啊， 好，这些带吗？先，都不需要动啊。好，我们先写完了再说。可丽儿，这个，这个动是不是好不好使？好，那么这是一个典型的清除浮动的这样一个样式，它是利用我们的尾元素来写的，然后我们把这个样式放在哪里？哈？ 把这样式放在他上面，因为我们要清楚他里面的内容，是吧？因为浮动给他造成的这个塌陷问题。好，所以我们来看一下，我们保存之后我们来看一下效果就可以了。啊，好，当我给他加了这个样式之后，大家有没有看到这个地方有个一一就出来了。好，我们来这里审查元素，我们来看一下。 好，我们来看一看，看这里啊，好，到底有没有发现这个冒号阿富特看到没有？是不是在这个位置看到没有？我们点击他的手是不是在这里看到？好，现在一定要注意啊，这个冒号阿富特 就相当于是在这个 div 的最后面创建的一个委员数。什么叫委员数？我们正常的元素是不是他有标签名呀？对吧？啊？这个委员数呢？他具备了这些标签的所有特 行，但是他没有名字啊，就这个意思。好，然后我们来下这个 content， 这里面是什么？这个一一就是相当于这个元素标签里面的内容，比如说我们现在写了个 p 标签，我打了个 ss 或者打了个一一啊，他就相当于这个中间这个内容。好， 然后我们来看一下，我们一定要把它设置为会计元素，他才可以清除浮动啊，我们来看一下就是不是真的是会计元素，我们给他加个背景颜色，红色，你看到他是不是？ 他其实就相当于是在这个最后面加了一个委员数，然后这个委员数的话，第一他的内容我们不需要，我们只是用他来清除浮动而已，不要跟这个一样，只是我们这样加在结构里面看起来不好看， 是吧？第二个就我们一定要把它转回快局才可以啊，大家看看看一下，然后在他身上加上一个颗粒 boss， 清除左右浮动这样样式就可以了。好， 这个地方大家一定要理解啊，其实他跟这个是一样的原理，无非他就是用委元素来在这个后面加好，但是这里有怎么样？有一个非常重要的就是他一定要把它转换为一个会计元素啊，因为他默认的是属于行内元素。 好，如果我大家看一下，如果我把这个注视掉，你看他就达不到清楚的效果了，你看这个是不是？好，所以这里他一定要注意了啊。 好，那么接下来我们要给他添加上外编剧二十像素与上面产生空隙，然后最外面这个盒子加上一个 money 杠 top 二十像素， 那么这样就没有问题了。那么三列是一行三列的布局，我们也做完了，接下来我们来看这个一行多列或者多行多列的布局，那么 像这种一行多列或者多行多列的布局，我们来看一下京东啊，它主要是用来做我们这种产品列表的样式来进行，是吧？来进行使用的，所以一般情况之下，我们都是用我们的幼儿无需列表来进行构建 好，所以同样的，我们在这里面也要构建一个大盒子，然后在这个大盒子里面利用我们的幼儿五系列表来构建我们这样一个多行多列的效果。好，所以我们接着往下看， 那么接下来我们来构建一个多行多列的 c cloud， cloud， 是吧？ curumm， 好，我们杠 m 吧。好， 这个啊就代表多的意思，多行多列的意思。好，然后里面我们可以用我们的 u r 标签， u r 五系列表标签，我们来乘以十。啊，好，大家看一下啊，这是一个快捷的方式，我再我再说一下， ur 这个监控号 代表它里面的紫元是，紫元是谁？是 r i， r i 出现几十，十四就乘以十，然后回车就可以了。好，看，车加 s 保存，保存之后你看到的就是这样一个简单的效果，那么接下来我们同样的给他接怎么加上一些边框来看一下效果啊？好，靠，热门 杠昂，大括号啊，我们同样的加上一个边框吧，我们也给他加上一个两项数，加上一个蓝色的边框。 好，这里看到了这样一个大的边框了啊，外面的盒子，好，然后我们来给我们的点上，我们的后门下面的 ur 也加上一个啊，我们加个背景颜色吧。 加个什么背景颜色？加个这个颜色的吧，好，看到了吧？好，然后我们来给我们的点，上课了们 下面的幼儿下面啊，哎，我们也给他加上一个边框来看一下效果啊。好， 那么这样子大家看到没有？这就是我们最开始构建的这样一个最原始的这样一个框架结构，那么接下来我们一步一步来调，首先大家看一下他与这个上面和这个下面有空隙，还有这个地方与这个 li 之间也有空隙，是吧？ 所以我们来看一下这个空隙是怎么造成的啊？首先我们来审查元素来看一下，选中这个幼儿，然后我们往下拖，看一下他这个幼儿的和模型，我们来看一下他是不是有默认的十六像素的外边距和四十像素的内边距，所以我们不需要，不需要我们也要把它给干掉。 好，所以我们可以在这里直接逗号幼儿把他的外边就干掉，然后我们同样的把那边就也加进去啊，零啊，当然他这里是零的时候，这个单位 可以写也可以不写啊，这个无所谓的。然后我们幼儿的前面还有这个小点点，我们这个小点点也不需要，我们也要把它给干掉， 嗯，把小小心写错了啊，有儿大括号，我们给他怎么样？把那个点点干掉是不是？ 好，那么这样就把这个前面的点点干掉了，干掉完了之后再看他就缩成一坨了，是吧？那么接下来我们要构建这样一个效果的话，那这里的每一个小区块其实就是一个二哎，所以我们要给每一个二加怎么添加宽度？高度，好，然后我们来看一下怎么添加宽度啊？高度 来呗，我们来给他添加一个宽度一百九，添加一个高度两百。然后我们看车驾驶室看一下，大家看一下，从上往下进行排着，那接下来我们要 他在水平方向排着，很简单，我们只要给他加上一个不落成，带不走，左不动，大家看一下啊，分分钟就上来了啊，当然因为他现在问题，他这个蓝色的盒子又不见了，是吧？好，然后我们每个盒子之间他是有一定的空隙的，我们来看一下啊，我们来给他加上一个 m， 咱把上下左右为五像素看是加是保存就可以了啊。那么上下左右为五像素相当于他的宽度是多少？宽度就是两百了，总共是一千，对吧？一个是两百，总共就给放五个盒子是吧？正好就可以放下。他这里放不下的原因是因为我们给外面这些盒子加了一个两相处的边框啊， 好，所以放不下。还有一个就这个盒子本身他有边框，又多了两箱，所以也放不下，所以我们要做的，我们可以把它加上一个背景颜色，看他这样式，然后呢我们把这个边框线注释， 那这样就正好可以放下了啊，大家可以看一下。 ok 了之后我们同样的也要解决这个浮动造成的塌陷问题。好，我们来看一下，我们说的是因为二挨家的浮动所以造成塌陷问题，所以我们要解决他的浮动问题，我们就在这里加上那个清除浮动的样式。 好，大家看一下这样子是不是整个浮动就清除掉了？那么清除掉了之后，这个整个的区块与上面也有二十相似的间距，我们可以给谁加？我们可以给最外面的这个盒子加就可以了，所以我们可以给他加上一个马，给你干 top 二十像素， 大家看一下，这样子就没有问题了。好，那么接下来我们把我们不需要用的辅助线全部给干掉啊，我们前期将辅助线都是为了让大家能够更清楚的看到它本身的一个结构，或者说 做到当前我们需要展示的效果。好，我们从上往下开始一个一个，第一个我们说这个高度要不要，不要高度，我们最开始是为了给大家演示效果看的，所以干掉，不要，干掉完高度之后，哎，这样子就没问题了。第二个这个外面的这个边框线也不需要，也要干掉。好，这个效果没问题。 好，接下来我们来接着往下看这个外面这里也有一个边框，也不需要干掉，然后这里三裂，是吧？一行三裂的这个地方也有一个边框，我们也不需要，我们也把它给干掉。 那最后就是这里了。好，这里我们来看一下，这个 u r 加了一个背景颜色，我们也不需要 好，那么整体的这样一个，你看我们这样一个布局的这样一个效果就出来了，就是外面一个大的盒子包裹着在水平居中，然后左右两列式，一行三列式，说一行多列或者多行多列的这 一个效果。啊，好，那么今天这一节课我们就给大家讲到这里啊，这个知识点是非常重要的啊，那么整个网站的框架结果，不管 任何一个网站，他基本上都是有这三种啊，硬结构来构成的啊。好吧，那我讲的可以的同学啊，可以点击关注啊，关注一下我，或者给我点个赞。

各位学前端的同学，我们经常会遇到这样一个问题，想做一个动态颜色切换或者字号调整的功能。以往我们都需要像这样子，在模板里写一堆难看的 style 对 象，或者手动操作 dom 的 style 点 set property html 结构里全是这种内连的样式， 不仅难看，而且难以维护。那有没有更好的方式呢？其实在 view 三中， css 也是可以直接绑定样式，然后直接在 style 标签里面呢。像这样子写 js 变量名， 内部会利用 c s s 变量动态的帮你做好同步。这样做的好处是显而易见的，样式归样式，逻辑归逻辑，你的模板也瞬间变得干干净净了。除了支持这种基础属性的动态同步，它还支持复杂表达式与自创拼接。比如说， 你可以像这样子在 j s 里面呢，通过 computer 拼凑出任何复杂的 c s s 自创，比如说渐变色，计算号的宽度，甚至是图片 u i l。 然后在 c s s 里面呢，直接引用。这样一来，无论多复杂的动态动效，你都能在熟悉的代码区域里面游刃有余的完成。总结而言，就是 j s 控制逻辑 c s s 通过 v band 去连接这种逻辑，实现动态样式的一个效果。现在你学会这种用法了吗？关注我，每天一个编程小技巧！

做移动端开发，是不是总被屏幕适配搞妈？心态？刘海、屏党、内容虚拟建团按钮，同一套代码在不同手机上惨不忍睹？ 别慌，今天两个适配王炸帮你搞定所有移动端内容区大小问题，新手也能直接上手。第一个神器， safe area inside， 专门搞定义型屏安全区，它有四个指， top、 bottom left、 right， 对 应屏幕四周的非安全区域距离。 比如给页面主体加这两行代码，不管是 iphone 的 灵动导，还是安卓的虚拟导航栏，都能精准避开内容不被遮挡。 第二个神器， d v w d v h， 它们表示当前浏览器动态适口大小，当软键盘跳出几站屏幕时，它们的值就会动态改变，比 p x ray 更灵活。最绝的是两者搭配使用，比如做一个全屏弹窗， 用 d v w d v h 控制整体大小，再用 safari area 设置预留安全，编剧 一行代码都不浪费。记住， safari 管安全， d v w d v h 管占比，两者结合，移动端适配效率翻倍！

那另外一个就是它也可以通过这个 top right bottom left 进行偏移，比如说我现在想让它偏到右上角，就是 top 就是 零，然后啊，咱们 right 也是零， 现在去看一下刷新，它就跑到最右边来了， 因为我选择的是下边的两个实判，所以他是两个实判都移动过来了，我再加上 n t h 拆，哦，等咱们给第一个设置， 那第二个他就又占据了咱们第一个让出来的这个位置。那另外一个咱们演示一下，如果说他的复合值不加定位，看看他是以谁为参照物的。 刷新他就跑到了咱们整个窗口的右上角，就是以人四口为参照物。那不管是绝对定位还是相对定位，咱们这个 都是支持复制的。比如说我在这里写负十 x， 他 会向上偏移，并且超出咱们这个复合着十 x 刷新看到了吧，他就已经超出出去了。好，截图保存。

像纯 c、 s、 s、 r 其实是可以实现像这样的轮播图的，轮播图的本质其实就是一个滑动吸附效果，这个滑动吸附效果呢，还可能会出现在其他地方，比如像这个网页的横向滚动，对吧？它也可以有滑动吸附，你看滑到这一松手，对吧？吸附了， 而且像这种做法啊，它是不需要一行 gs 代码的，就纯 c、 s 就 能写几行代码就搞定了。那具体怎么做呢？首先呢，你需要找到这个滑动的容器啊，比如这里的一个容器，那么你先找到它，给这个容器加上一个属性啊，叫做滚动吸附类型，这里呢有两个参数，一个参数呢是 x， 表示说吸附的方向是横向的， 那么自然而然传递的 y 呢就是横向的。然后第二个呢是吸附的类型，这里呢我传递的是 manditory， 这啥意思呢？它表示说强制吸附，那 有没有别的内想呢？也有啊，我们一会呢会说到。什么叫强制吸附呢？指的是他不能有中间状态，比方说这个二，我慢慢的滑滑到这个位置，就是个中间状态，是吧？那么强制吸附呢，是要求不能有中间状态的，只要你一松手，他必须要做出抉择，要么往左，要么往右，给我过去，然后这里我一松手，你看 过去了，是吧？好，这是它的吸附方式，除了设置这个容器的这个属性之外呢，你还要去设置一下它的紫元素的一些属性啊，像这个 item， 它紫元素，它有两个属性需要设置，第一个呢是 scroll snap align， 那 这个属性呢，它有三个取值，一个是 start， 一个是 end， 一个是 center。 其实目前呢，我这个例子里边取哪个值效果都是完全一样的，因为我这里宽度是百分之百，但是我只要把宽度一改，你就看得非常清楚了，比方改成百分之六十的宽度，你看一下现在呢，我设置的是什么 center。 那 么这样子一来的话，你看我现在吸附 这个二，注意这个二啊，现在我一松手，你看它就吸附在中间了，能看懂吧？那有些眼尖的同学说，袁老师，你刚才的一没有吸附到中间啊，那是因为这个一左边没有了，它吸附不了中间，那左边没东西了呀。 那二可以看得很清楚啊，它是吸附在中间的，那如果说你调整为 start 的 话，那么它就吸附在起始位置，你看 滑动到这，放手，你看吸附在骑士位置啊。呃，这个骑士位置，注意啊，它是个逻辑方向，它不一定是左边啊。那要看你的网页是如何排列的，比如说你的网页是从左往右排列的，那么它就在左边。你的网页如果说是从右往左排列的呢，它的其实位置就在右边， 它是个逻辑方向，那么自然而然，这个 end 呢，它就是吸附到结束位置了。所以说，你看这个 css 呢，你不能说它完全没逻辑啊，它还是有一些逻辑的啊。如果说我的短视频都对你有帮助的话， 我强烈建议你啊，一定要来看一看我的大师课。大师课是完全免费的啊，领取完事了，因为这短视频吧，受这个环境的限制，我只能讲一些轻量的， 简短的，一些零散的知识点，而且是非常独立的。你看我每个短视频呢，知识没有连贯性，有连贯性的话就没人看了，所以说讲不了那些比较重的知识， 但是前端你要掌心，你要打开职业发展的空间，是必须要那些厚重的成体系的核心知识才行。短视频确实讲不了啊，所以说我都把它安排在咱们的大师课里面了。同样的是完全免费的啊，在大师课里边我就可以完全放开膀子干了，我就不在乎什么播放时长啊， 视频体量啊，该讲哪些哪些对同学们是最有帮助的，最能够掌心的我都把它塞进去了，全程干货。一节课呢，基本上都是一个小时打底，有没有难度，学习时间长不长长，但是正是这些厚重的知识才能够真正的帮助你解决你职业生涯的大问题。 你想要拿好装备，你就必须要打大 boss， 是 这个道理吧。而且你把大师课学完之后啊，无论是你的笔面试还是将来的跳槽，掌心这个大师课都能够发挥持久且重要的作用。关键这个课呢，目前可以免费领啊。怎么领？再打开账号主页，点击头像进入账号主页，根据提示领取，完事了。 好的，说回来啊，刚讲到哪了啊？说这啊，这个 always 什么意思呢？就是吸附停止，当你把吸附停止设为 always 过后呢，它会在你滑动的中间停止。这啥意思呢？我给你注视下。你明白了啊，我现在不写这句话，你看一下啊，我们把它改回去百分之百。好，你看一下啊，现在我们划的很快，刷哎，划错方向了是吧，再来刷。 所以跳过二直到三了对吧？再来刷就跳过二，直接到一了，像你划的很快，划的很多的时候呢，中间的状态呢，就会被跳过，如果说你加上这个始终停止呢，他就不会跳过，就这么简单再来一次啊刷，你看刷刷 刷，他就会停在中间状态，但是如果说你划的太快了也不行啊，划的太快了过后他就会认为你就是想跳过你。像这里划的太快的话也不行啊，他是有这么一个停止功能啊，这是横向的。那么中向的其实是一样道理啊，中向的话我这里只改了一个东西， 就是把它的吸附类型呢，改成 proximity， 表示附近吸附。啥意思呢？它是允许有中间状态的，比方这里你看是中间状态，对吧？它是允许你停靠在中间状态的，它只有贴到附近的时候才会被吸附啊，就这个区别，其他没啥区别。好，就讲到那个吸附功能啊， 如果说你不考虑什么浏览器兼容性问题的话，那么这个吸附功能可以让你非常高效的去实现这种文博图啊，或者是页面吸附，不需要靠一行的 js 代码。

这个东西网上很多人都叫他们标签，当然叫什么都无所谓，官方的叫法 settlement 翻译过来叫元素， 这是一个元素，这也是一个元素。前面这部分叫 opening tag 起始标记，或者说起始标签，这一部分先不看， 对于 ag 来说的话就是这一部分，先括号里面写上标签名，然后后面这部分就叫 cology tag 结束标签，结束标签和其实标签是一样的，只是要多一个斜杠，他们是成对出现的，一定要对应起来，你不要。其实标签写一个 a， 结束标签写一个 b， 这是识别不了的。其实标签和结束标签中间就是元素内容， 元素内容一般指的是页面上要显示的内容，可以是文字，也可以是其他元素，元素是可以嵌套的，这个我们后面再说。然后对于这个 a 元素来说，他还多一部分，写在第一个键框里面的，这个叫元素属性，一个 元素就是由这四部分组成的。其次，标签解数、标签、元素内容、元素属性。元素属性是用来描述元素的一些额外信息的，他不是必须要写的， 你看这该机元素就没有元素属性，这该元素他显示的内容就是百度一下，但他还是一个长链接，当我们点击他的时候需要跳转到其他页面，所以我们就要用这个属性来表示这告白信息，这个属性名就是 raf， 他表示的是链接地址， 然后这个 rap 的属性指是这个例子，这样当我们点击这个 a 元素的时候，就会跳转到这个例子。当然属性可以没有，也可以有多个，比如我们再加一个抬头属性，它的指我们就写一个小飞。抬头属性的意思就是当我们鼠标悬停在这个元素上面的时候，提示的内容保存一下， open with lift server， 当我们鼠标悬停的时候，就提示了一个小飞，这就是胎头属性的作用，既然 a 元素可以有 ref 属性，也可以有胎头属性，那 a 七一能不能有呢？这就涉及到了属性的分类，一个叫局部属性，一个叫全局属 属性。局部属性指的是某一些元素特有的属性，就拿这个 a 元素来说，它本身是用来表示超链接的，需要用 drive 属性来指定地址。这个 drive 属性就是 a 元素特有的属性，其他元素是不可以用的。你看我给他加一个 ref 属性， 然后来浏览器看一下，没有任何效果，即便给机元素加了 f 属性，他也是不能点击的，这就叫局部属性。后面我们讲到了其他元素，如果我没有特别强调的话，一般都是局部属性，我们还是把它删了。再来看全局属性， 就是所有元素都可以用的属性，比如这个抬头属性，他就是一个全局属性。我们来给 h 一也加一个抬头属性，保存来看一下， 没问题吧？他也有鼠标悬停提示了。现在这个页面里面的元素我们应该就比较能理解了，这是我们的一级标题，这是一个超链接，这个 body 我们不知道是个啥，反正是一个元素，这是起始标签，这是结束 数标签，然后里面这些是他的元素内容，他没有元素属性，然后这里有个 head 元素，他的解释标签，解数标签， head 元素里面还有一个太多元素，太多元素显示的内容，在标题栏上面来看一下，现在是 doctrine， 对吧？ 我们来改一下， get 第一个网页保存再来看，这里的标题就变了，这就是太多元素的显示位置，即使在黑的元素和玻璃元素外面，还 toilet kitty 元素， 他有一个元素属性呢。然后你会发现这两个 mate 元素有点不一样，他们没有结束标签，没有结束标签肯定就没有元素内容了，这种没有结束标签的元素我们就称为空元素，当然其他教程里面可能叫单标签， 我们就还是叫他空元素。前面也说了，元素内容一般指的是里面有显示的内容，这个元素不需要通过内容来产生效果，所以就不需要元素内容和结束表情。除了这个 mate 元素之外，还有一个加元素，这也是一个空元素，他只有开始表情， 没有属性，没有内容，也没有结束标签。这个 hr 元素就表示一个水平线。保存来看一下，这就是 hr 元素的效果，他只需要显示一个水平线，不需要展示元素内容，所以也是一个空元素。对于空元素来说，他是有两种写法的， 一种就是现在这样，只有起始标签或者加一些属性，另外一种写法是这样，在最后加一个斜杠，这是以前老版本的写法，现在就没必要加这个斜杠了。

hello， 小 伙伴们好，接下来咱们学习 css 的 三大特性，分别是继承性、层叠性和优先级。好消息是前两个我们已经学过了， 还记得继承性吗？就是孩子会继承父亲的某些样式啊，当然主要跟文字类相关的。 所谓的层叠性啊，就说咱们后面写的样式啊，会覆盖前面的样式，主要目的也是为了解决样式冲突的问题。 那学的前面有小伙伴还会问，哎，老师，我发现了，为什么我写的类选择器，它执行的样式就要比这类型选择器它的权重会更高呢？或者是 id 的 权重要比这类的权重还要高？ 哎，要想更详细的了解，那咱们就改学习一下优先级喽，因为每个选择器的权重是不一样的。好的，那接下来我们详细的看一下我们的优先级， 咱们浏览器呢，会通过优先级来判断我这个元素到底要执行哪一些样式。简单来说， who first， 那 优先级是基于不同选择器组成的匹配规则，那选择器不同，它的优先级就不同好了，那到底，呃，选择器它的权重到底什么样子呀？有什么样的规则呢？我们一起来看一下。 首先，如果它们优先级相同的情况下，那我们就采取的是层叠性就级原则，就是最后圣明的那个样式会覆盖以前的样式。 好，那如果优先级不同呢？哎，这个时候我们就来判断，谁的高，我就优先执行哪一个，你想想嘛，拿着军营来说，那排长是不要听营长的，营长是不要听团长的，团长是不要听师长的，他肯定有更高的优先级，他要执行哪一个样式，明白吗？ 其中权重啊，是由四位一组来组成的，它是分开的，中间是不能进位的。什么意思呢？我给小伙伴们做了一个表格，这个表格就是把我们选择器的类型啊，做了一个排名， 最上面是最高的。那我们先从底下开始看，其中通配符和继承啊，它的权重是零，你来看一下， 记住，权重是四位一组的，它的表示形式是这个样子，零逗号零逗号零逗号零。简单来说啊，就是同辈符啊，还有继承啊，呃，就是相当于没有权重了，谁写的样式都可以把它覆盖 好，再往上走的话，那就是我们的类型选择器了啊，就是我们说的标签选择器，或者叫元素选择器，还有呢，伪元素。咱们刚学的什么 after 呀， before 啊这一些，他们的权重呢，是一 再往上走啊，就是类学的契，属性学的契，尾类学的契，它的权重呢是零零一零。 我们发现它们都是四位构成的一组的啊，好，再往上走呢，就是 id 了， id 呢是零一零零。 所以你知道为什么类比这标签显示器的权重高了吗？因为阿迪的显示器要比类的权重高了吗？因为他们的权重是不相同的，你要看好了啊，他是越往前他会越大一些，但是呢，不是我们同意义中的个十百千，不是这样子，他就说越往前他的权重越高。 好了，那还有一个更高的是我们的内联样式，就是我们的行内样式，如果你把样式支起到标签内，他是一零零零， 这是它权重是最高的。当然还有没有更大的，有人外，有人天外有天，有一个单词更重要，叫做叹号 important， important 翻译过来就是重要的意思，前面还加了一个感叹号，杠杠的。意思就说如果你给这个样式加上来的它，它是属于无限大的，谁都不能把它覆盖， 当然这个呢，因为太大了吗？啊，所以说我们慎用一下，特殊情况我们可以去使用的。好了，这个呢，就是我们讲的类型选择器，他们的各自权重喽。这样哎，我截个图啊，把它放到这儿来。好，然后呢，我到代码里面去，分别来演示一下他们的权重好吗？ 走着到我们的代码里面去啊，我这准备好了一个 diy， 现在我可以写样式了。咱们前面说过的啊，继承也好，或者是同辈福享的器也好，新号他的权重是最低的，你可以理解为就没权重，没有什么话语权。比如说我写一个 color 啊，改成一个红色保存，哎，页面中是不是变成红色了呀？哎，这是我们说的同辈福享的器，但是它的权重是非常低的，如果我 我随便写个选择器，权重都比它高，比如我就写 d i v 好 颜色改成一个 blue 啊， blue 啊， b r u e 好， 考生加 s 保存走着，你看就把它覆盖掉了。 所以我们说的类型选择器，他比这通配符权重要高。那怎么去看他们的权重呢？你看啊，你把鼠标放到星号上，一放上去，看到没有，有一个叫特定，呃，选择器特定，零零零。好，第二位呢，鼠标放上去，你看零零一对不对？哎，就是零零一， 因为我们这个选择器啊，很少遇到铅的，因为这种行内的才能到铅，所以啊，我们选择器看的时候都是三位的，哎，理解就行好了。那除了这个之外啊，我们的尾元素，它的权重呢，也属于我们的零零一 啊，就比如说我们的 after 比 four。 我 们前面也说过啊， after 比 four， 它也是个盒子呀，那是个盒子。嗯那，那它权重就是一喽。好，那比有没有比它更高的呢？有，你像类啊， 刚才学的属性啊，尾类啊，都是零零一零。所以你会发现我写一个类啊，比如说点 box 好， 指定颜色为 green， 绿色 j r e n。 好， 那下面一定要加上一个 class 喽， class box 保存一下来看一下。喏，是不是只用绿色啊？所以你知道啊，类也好，属性也好，尾类也好，就比着我们这种类型显示器要高啊，永远都比它高，这个要注意。好了，那除了之外呢，再有一段就是 id 喽，我们现在就可以再演示一下 id 啊， id 等于 假设我叫 heder 吧。 ok， 那 我这儿写就是一个井号， h e a d 啊， heder， 然后呢，我写成一个 color， 红绿蓝 purple， 紫色走着，你会发现是不是优先执行紫色。我们说了，它的权重是很高的，那是一零零， 所以啊，它跟位置是没有关系的，你看我哪怕把这个 id 啊放到了最上面，我就放到最上面，它不会被蹭碟的，因为 还是紫色，他的看到没有，一零零，你都能看到他们的权重了，所以说权重不同，他执行的样式就不相同，谁的权重大，我就执行谁的样式 好了。有没有比 id 更高的呢？就是内敛样式喽，我们干脆直接在这里面去写啊 style， 然后呢， c o r o r color 我 改成一个 pink， 当然 pink 是 最好看的颜色，也是最厉害的保存， 你看是不是就成了粉色了？那只不过你把鼠标放上去之后啊，我们会发现他就没有提示那种权重了啊，因为他是直接把样式写到变成内了，他的权重呢，也是一零零零。 好，这是我们说内联样式，那有没有更高的呢？有，就是叹号 important。 好 了，你看啊，我写这么一句代码，你来看看。我们说了啊，这权重里面谁最低对不对？好，信号最低我就给信号， i m p o r t n t 我是最重要的是吧，你们都是小卡拉米，我只要把这个叹号 important 的 这个词啊，写到了， 我不管你写到哪里，反正 ctrl 加词保存走着，它一定是红色。没有人比我更厉害，没有人比我更重要了。 所以说啊，如果你想强制让某一个呃属性啊来进行显示的话，那就可以加好它号 important， 只不过平时我们说了慎用一下啊，慎用一下就是除非你明确了一定会执行它，你再考虑去加。 好吧，好，这个呢，就是我们讲的选择器的类型，它们的权重也不相同，同时它们在这里面是由四位组成的一组来进行表示它们权重。我们把鼠标放上去身上就能看到它好吗？除了这个之外，你也可以这样啊，嗯，不在这看，右击检查 好。然后呢，我们呃对大画一下，打开我们这一个调试工具，你看啊，我把鼠标放到这个 diy 身上。 好，你来看一下啊，小伙伴们认真听喽，我把鼠标放到 diy 身上，鼠标放上去，他这也会有权重显示，这个是零零零一，这个是 box， 这个是一零零。哎，你可以理解为一百也行。好吧，好，这是嗨点的权重，但是你会发现这几个都被划掉了，他是执行的，下面这一个 被划掉的，说明他没有去执行，被别人给层叠掉了，就被别人给取消了，因为他不能再使用了，所以以后同学们再看到这个短横线，就知道肯定有人比他的优先级更高了。好吧，好，这个呢，就是讲到我们选择器他们各自的权重了，那还有一个小细节需要同学们注意的 啊，放在这边啊，其实啊，我们的选择器，他会有一个权重叠加的， 刚才咱们写的都是单个选择器，但是我们会经常遇到什么后代选择器啊，然后呢，就是父子级啊，兄弟级啊， 是由多个选择器一起来组成的，比如说小伙伴，你看我这个选择器啊，井号 name 空格点 item 空格 a， 这个时候呢，里面有类型选择器，有类选择器，有 id 选择器啊，一起组成了后代选择器，它的权重是多少呢？ 哎，在这里面，如果你用到后代选择器或者兄弟选择器这一种组合选择器啊，它里面就会有一个权重叠加的问题了。那怎么叠加呢？很简单，就是最简单的小学加法问题，你来看啊，我给同学们分析分析，认真听。首先我们先看井号 nav， 它的权重是多少，还记得吗？井号的 是不是一零零啊，所以是这样子，零，一零零就是 id 的 权重。好，再往下走，是不是有个点 item， 它是类选择器，类选择器呢？零零一零，所以再来个零零一零，这是类的， 还有一个就是 a， a 属于类型选择器啊，他属于零零零一，所以这属于类型选择器，那他最终的权重反正都是四位一组，那我就把这四个都加起来。好，然后我进行相加，等于多少？小伙伴会算吗？ 哎，在这里面注意。呃，零零零这三个一加，他是一，这个零一零一加是一，这个一零零一加是一，前面没有，那我就写零，所以最终的结果呢？是零一一一，所以这就是他一个最终的结果了。 但是我们说过他是不能进位的啊，不会是出现是他满了十往前进一，不会的，有可能你会出现看到这个情况，零逗号一，逗号十二，逗号一，还是四组的， 明白吧？中间可能是十二，也可能是二十二，甚至呢二百二，但是他绝对不会往前面进位，他们是严格分开的好吧。啊，这是我们说的他这种权重叠加的一个情况了， 但有的说，哎，老师那写多了，那我我算不过来呀，算起来还挺麻烦的。我说了不用算，刚才不教给你方法吗？第一种你写完了之后呢，你可以在吹提供的代码里面去查看权重，或者是呢可以通过我们的调试工具啊，去查看他的权重，无需去写。比如说小伙伴们来， 你看啊，再回到我们的代码当中，我呢把它再拿回来，稍微小一丢丢。好，你来看啊，我写一个啊，这个呢是这么做啊， 下面有一个点 never 里面包含的是 u l 大 于 u， l 大 于力大于 a 都大于号包含的意思按下回车。哎，可以生成了啊。这是一个井号，然后写上一个假设，叫首页吧，好，保存一下。 那我现在想去修改这个 a， 我是 不可以这么去写了。看仔细啊，是点哎， nav 里面的 u， l 里面的 l 里面的 a， 然后呢，选中之后颜色改成一个 red 颜色？好，现在 ctrl 加次保存走着，那你会发现它就会变成红色了啊，咱先把这个注视起来啊， 他加了 important， 不要影响，先注视起来。好，现在你看它确实变成红色了，那它的权重是多少呢？如果咱们先口算， 这个是几类的？是一零，前面是零零一零，对不对？哎，零零一零啊，然后呢，这个是 u l u l 类型的 g， 它是一，所以啊，是一， le 是 一， a 是 一，前面都是零，所以加起来这个是三，逗号一零，逗号零零零一三。 是不是？如果口算算啊，只不过也不用费劲了，把鼠标放上去，零零一三是不是直接有了？所以啊，如果你发现，哎，我的样式怎么 被那个蹭蹭跌掉了，你想是不是我权重不够啊，那我看看这个的权重是多少？好，他是一三呀，那下面权重他是一四，怪不得呢，他把我盖了，那我想想我怎么去提高我的权重就行了， ok 吧。哎，所以说啊，你不用去刻意的记啊，这儿都会有相关提示的，但是呢，会告诉你，像这种后代显示器啊，或者兄弟显示器啊，它们都会有权重的，比如说点 navi 加一个 div。 好， 它的权重是几啊？啊？点 navi 是 一零，而这个 div 呢，是一，它应该是十一才对， 所以你看啊，我写完它之后看，是不是十一啊，把鼠标放到它身上看一看，是不是零一一啊，我说的十一是我，我们叫的时候，好听啊，其实它是零一一，明白吗？这是兄弟，它也会进行累加的啊。 好了，那这就是我们讲的我们的权重啊，是可以实现这种累加效果的，但是呢，同学们不用刻意的去记啊，只要鼠标放上去就会有提示。好了，小伙伴们理解完什么叫权重了吗？好，讲到这之后呢，现在我要兑现我的诺言了。同学们，还记不记得 那年天空很晴朗，我们留下了一个遗留问题表格的隔行变色，还记不记得当时我们是这么说的，表格第一行呀，哎，我发现写完之后呢，他被腾跌掉了。那没有办法，我只能把我的第一行写到下面来了，呵呵，是不是你看啊？嗯，拿下来才行。 那我说了，等学完权重我再来教教你怎么去解决，现在就可以解决了，你看他的权重是几零二幺，为什么零二幺呀？注意啊，我给你分析一下，为什么零二幺，因为 类和尾类它的权重都是幺零，所以它两个一加呢？是二零，而这个 t r 要算啊， t r 要算， t r 是 类型，选择器是一，所以是二一，明白吗？是二一啊，所以它的权重是二一，而上面这个 n t h 杠叉的，它也是二一，所以它俩权重相同了，如果权重相同，那我就执行底下的。那现在呢？ 哎，学了全中了对不对啊？我 ctrl 加 x 剪切一下，我可以放到上面去。好，如果你放到上面之后呢？因为他俩都是二一嘛，所以后面就把上面覆盖掉了，所以上面一行你看不见了，怎么办？嗯，我想想啊， 有一个最简单粗暴的，我上面第一行肯定是永远第一行了，谁也别动我，我多重要呀， 加叹号， important， 走着，哼哼，看到没有，它就可以出来了，而且你鼠标一经过它也不会有那个 bug 了，鼠标一经过它永远都是这种底色了。 也就说啊， important 永远是最重要的，别人都覆盖不了它，看到没有，哎，所以说，这个是真正的就解决了我们的问题了，所以这个权重重不重要是很重要的。 好，小伙伴们明白什么是权重了吗？哎，这个小伙伴要注意一下。好，讲到这之后呢，我再给小伙伴补充一个地方啊，嗯，还是必须要额外强调一点，继承的权重是零，因为刚才啊，我们演示的是这个通尾浮选的记，它的权重非常低， 因为这个有很多小伙伴经常会犯错误啊，所以我给同学们重点强调一下，继承权重为零。比如说，我这准备了一个小屁标签，屁标签里面准备了一个 spa 标签 好，然后里面写上文字， ctrl 加 s 保存一下来，回来看看啊，走着。哎，这个文字已经有了，看到没有？好了，现在呢，我是这么写的啊，呃，我想给它写上一个 p， 好， 然后呢，指定一个 color 为红色，那 ctrl 加 s 保存，那肯定是红色喽，因为我们说了， spa 是 不会继承父亲的这个颜色呀，好，继承了，好，继承完毕之后呢，接下来我们再给 spa 指定一个颜色， 好，再指定一个啊，然后呢， color 改成一个 blue， 那 最后肯定是什么色？对了，肯定是蓝色了。其实啊，并不是因为 spa 写在下面， spa 你 写在上面，它也会是蓝色的。 那前面咱们说过啊，就是如果，呃，我没有样式，父亲有我继承父亲样式，如果我有，我就会优先执行自己的样式，为什么呢？现在解决了，因为继承的权重是零， 因为屁，你写完了，我可以把颜色继承过来，但是呢，我们说过他的权重是零，很低的，那我随便写一个样式，我写个 spa， 一个样式就可以把它覆盖掉。所以为什么孩子会优先执行自己呢？就是因为继承的权重是零，明白了吧？好，除了这个之外呢，还有一个情况小伙伴们要注意一下， 比如我们的 h 和链接， h 和链接比较特殊啊，呃，浏览器有自己默认的样式 听没有？哎，浏览器它会有自己的默认样式，像 h 最大的特点它就是加粗，并且会呃文字变大，对不对？ 我是一级标题啊，这个 h 是 浏览器默认自带的，它有自己的样式 啊。然后呢？我是一级标题啊，呃，会加粗啊，会进行变大呀。那现在啊，你看看，我是这么去写，我给这个 he 啊包了 heder 标签好，这是 heder 啊， ctrl 加 v， 拿过来， ctrl 加四保存。 heder 里面包了 h e， 听明白没有？接下来我是这么去写了啊，看仔细， h e a d e 啊 heder font g 改成一个四百 看没有？我把文字加速取消掉了。取消掉，明白没有？同学，你看啊， h 一 是孩子的孩子， 按道理孩子没有样式，但是父亲有会继承过来，像文字加不加粗一定会继承的，那我 h 一 会不会也变成不加粗效果呢？记不继承父亲的这个样式呢？我们可加一次保存走着。有没有取消加速，并没有执行 原因知道吗？原因就是因为继承的权重是零，你想想， h 一， 我默认自带样式啊，我自己就会加粗啊，我有自己的样式， 但是呢，继承的权重是零，所以你把父亲的这个呃加粗取消了，对我来说是没有用的。所以啊，我们不能直接通过父亲来取消加粗，你想要加粗，那我就只能是我自己再写一个样式，把我自己默认的样式覆盖掉，所以你正确的写法应该是这样写。 看好了， h 一 写成一个 font 杠 wait 改成一个四百这么写才行。保存它就取消加速了，因为 h 也好，或者是链接也好，链接它默认是不都有下划线这一些，所以你不能通过父亲来取消他，而是要自己专门去写样式，我自己覆盖我自己 原来自带的那种样式，听明白了吗？啊，所以说呢，这个就不能用我们父亲来控制了，那 a 也是一样的啊，你看我如果给这个力啊， 他的父亲啊，他的父亲叫什么名字？叫南伟，看，他叫南伟了吗？南伟啊，你看我在这这样写点，南伟是他的父亲，我给这个链接取消下划线啊， tdn 格式保存走着，能取消吗？ 下划线是取消不掉的，因为我的 a 啊，我浏览器自带，我有自己的样式了，父亲继承过来的权重是零，所以你给我去不掉，那怎么去掉呢？除非我自己是吧，自己都杀了，我自杀啊，这样的话就可以取消下划线了， 所以啊，很多问题可以通过继承性帮我们去解决。好了，这个就是给小伙伴们讲解了一个特殊的地方，就是继承权重是零，这个一定要小心很多的一些像链接啊，像 h 啊这种，嗯，本身浏览器有自己样式的，你不能通过父亲来去修改他，而是要专门自己去修改， 好吧？啊，但是我们说了，链接啊，也就下划线不能去修改其他的你像是那个颜色呀，或者其他的是可以继承的，像标题的话也就加粗啊，我不能修改，那其他的你想改颜色也是可以继承的，明白吗？ 好的，那到此为止，我们的 css 三大特性就讲解完毕了，那接下来我们到 ppt 里面，让我们的猪爸爸给小伙伴们做一个总结，好吧，我们有请一下猪爸爸。 hello， 小 伙伴们。好，接下来又是我总结的时间喽，跟着我，首先，刚才 pink 老师讲解了 css 的 三大特性，还记得有哪三个吗？ 对了，分别是继承性、层叠性和优先级。那所谓的继承性呢，指的是子元素啊，会继承负极的某些样式，比如说文字类的会去继承。 但是呢，也有一些特殊的情况，比如说我们的 h 标题，比如说我们的链接，在我们浏览器默认都会有一些加粗或者是下划线的情况， 那咱们就不能通过继承的关系来进行修改了。你给父亲添加了样式，他的孩子是无法取消这种加粗效果或者是下划线的，我们需要单独去给他指定相关的样式， 比如说我给我的 h 指定取消加粗，它才会正式生效哟。好了，那我们第二个又讲解了一下我们的层叠性。 所谓的层叠性指的是就在权重相同的情况下呀，后面的样式会覆盖前面的样式，注意一定是权重相同啊，他们采取的大家就记住就近原则就行了，相对于我这个元素来说啊，哪个样式离我近，我就执行哪一个，效果 好。第三个也是本视频重点讲解的，叫优先级，那简单来说啊，就是哪个选择器的权重高，我就优先执行哪一个样式，这就叫优先级了。 优先级啊，同学们重点记住的就是这个表格喽，记住每一个选择器他们的权重是多少，他们是以四个为一组，他们之间是不能相互进位的， 当然了，也会出现一种权重累加的情况，但是这种累加啊，咱们也无需要去记或者是来计算，咱们可以通过我们的 tree 啊， ai 开发工具，或者是通过我们的浏览器啊，来去查看他的权重。 如果我们发现我们想要改的那个样式啊，没有被执行，他的权重不够，我们可以通过增加选择器啊，或者干脆通过叹号 import 的 方式啊来去增价他的权重，这样就会优先执行我们的代码喽。 好了，小伙伴们看来学得不错哟，赶紧把我们的优先级来做一个体验吧！

在跟航和打交道的时候啊，你往往会遇到一些困扰，比方说我这里呢，做了这么一个文字，高亮遇到了啥困扰呢？你看这个高亮显示呢，它这里呢不舒服，你知道吧，样式代码我们看一下啊，就是 我有个十遍元素，给他一个样式啊， highlight， 然后这里边有些文字，这些文字呢，高亮，怎么高亮呢？给他一个界面背景，然后呢一个 border， 一个背景，一个 border radius 没了，就变成这个样子了，就是这个截断位置呢，要跟这里长的一样，还有包括这个截断位置呢，要跟这个头部长的一样，你说这个玩意能整吗？可以 有这么一个 c c 属性啊，一行代码搞定，叫做 box decoration break， 这个玩意儿是专门用来处理那个截断位置的样式的，这有两个曲值，一个是默认值，是 nice， 这个值呢就是这个样子，对 吧？就直接截断。另一个呢是 clone， clone 这个值呢表示的是你这里截断位置啊，跟这个首尾的样式呢，要保持一致啊。不过这个属性呢，在 webkin 内核浏览器里边呢，要加上个前缀啊，它本身呢倒是没有什么兼容性问题，它兼容性是非常好的，只是呢，你在 webkin 内核呢，你要加上一个前缀，好保存，你看一下就介绍这么一个小知识啊。

在学 css 的 时候啊，一定要关注两个核心知识，一个呢是属性值的计算过程，一个呢是视觉格式化模型，这两块知识是 css 最最核心的知识，可以说这两个知识你搞定了， css 就 搞定了， 其他的什么细枝末节的东西都非常简单。但是这两个东西一旦没有搞定，或者是你根本就没听说过，那问题大了去了，我就不知道 css 学了个啥好。我们现在来说，这个属性值的计算过程，就指的是某一个元素从所有的 css 属性都没有值，到 所有的 c、 s 属性都有值的过程，就叫做计算过程。比方说某一个 a 七元素，它在最开始运行页面的时候啊，它所有的属性都没有值，然后呢，经过一系列运算，变成了每一个 c、 s、 s 属性都有值，那么这个过程呢，就是计算过程。 看到这呢，很多朋友可能会纳闷儿，哎，跟我想的不一样啊，一个元素，它的 c、 s、 s 不是 我写的哪些就生效哪些嘛，完全不是这样。比方说举个例子， 比方说页面上有一个 a 七元素，我就给他写了一个 cs 属性，难道他就只有这么一个属性有值吗？不是的哟，我们运行看一下，好，打开我们的调试控制台，找到这个 a 七元素， 你看这是我们写的对吧？难道最终就只有这么一个属性吗？我们来看一下最终的计算结果，你看这里的单词啊， computed 表示计算结果， 计算结果里边看一下下边的 cs 属性，是不是每一个都得有值，是不是这样，任何一个没有值都不行，它都显示不出来，哪怕你只写了这么一个 cs 属性，它也必须要保证这个元素的所有 cs 属性必须要全部有值，那么从没有值到有值的这么一个过程呢？就叫做属性值的计算过程。那这个计算过程到底是怎么计算的呢？ 必须要搞清楚的哈，它分为四个步骤，一个是确定声明值，层叠进行使用默认值，你们学的很多零散的 cs 点都在这里面。首先我们来看第一步啊，确定声明值，我这里举个例子，比方说有这么一个 h 元素，它呢，有这么一个内样式啊，有一个文本一开始的时候说，刚才说啊，每一个 cs 属性都没有值，你看都没有值，那 这个时候怎么计算呢？首先第一步，确定声明值。什么叫做确定声明值？这个时候啊，他会观察两个样式表，因为我们整个页面上样式表的来源就这么两个，一个是作者样式表，什么叫做作者样式表？你在写页面， 你就是这个网页的作者，就是你亲自书写的样式表。而另一个样式表呢，是浏览器的默认样式表，就浏览器呢，就是哪怕你啥代码都没写， 浏览器已经给你生成好了一个样式表，它也是生效的。比方说我们刚才看到了啊，这个 h 一 元素，虽然我们只写了一个 color 的 red， 但是呢，你会发现它还有别的样式，那么这些别的样式哪来的呢？就来自于浏览器的默认样式表，你看这里边还有很多有意思的东西哈，你看它这里给你设置了一个 display block， 啥意思？把它变成快盒。 你们经常听说什么 h 一 是一个块级元素，这种说法都是十年前的说法了，早就不用了，现在没有什么块级元素，什么行级元素这种说法， 官方已经明确的告诉我们，不再使用这种过时的说法了。应该是什么？它默认生成快盒。为啥默认生成快盒啊？是因为浏览器的默认样式表里边给他加了一个 display block， 然后再看一下别的元素呢？比方说一个 spin 元素或者一个 a 元素吧。哎，我说 a 元素是一个行和没有行和这种说法啊，看一下它的控制台，找到这个 a 元素， 看在浏览器的默认样式表里边，没有给它设置 display block， 所以 它没有生成快和，就这么简单。现在的说法是快和和行和，这是 c s s 的 叫法，已经摒弃了以前的 atm 的 叫法。什么会计元素，行情元素？不带这样说了啊， 他说回来啊，他来自于两个样式表，一个是作者样式表，一个浏览器样式表。那么第一步要做什么呢？就是看这两个样式表中找到没有冲突的样式。什么叫没有冲突？就是主姓名不相同。 看这两个样式表里边有些样式是冲突的，比方说什么样式呢？这个 font size 和这边的 font size， font size 是 不是有冲突，对吧？属性名一样，那到底听谁的呢？那么这就是有冲突。第一步，不管冲突，我们就找那些没有冲突的，哪些是没有冲突的？这个 display 没有冲突， font width 没有冲突， color 没有冲突 好，没有通透的样式，就直接作为最终的计算结果。所以说 color 出来了，方位出来了， display 出来了，对吧？都出来了，那么这里呢，还有个小细节啊，大家注意到没有，在计算样式的时候呢，它会把一些单词之类的预设值，比如说 red， 它是预设值，它会转换成绝对值，它单位会变，看到没？我来看一下吧，真的是这样吗？刚才我们设置了这个 h 元素， h 元素里边有一个样式啊，叫 color 为 red， 这是一个预设值，对吧？我们看最终的计算结果，来搜索一下 color， 你看这个 color 是 变成了 rgb 了，看到没？ rgb 啊，这是计算过程中的做了一个处理啊，包括刚才这个方位，方位这里设置的是什么？ bold， 它是一个预设值，看计算结果 变成什么就变成七百了，看到没啊，这顺带的事儿啊，那么第一步完成之后，是不是某一些 cs 的 属性就有值了，对吧？但是还有很多很多的 cs 属性都没有值，那么这些没有值的又怎么办呢？那么就进会进入第二步，第三步，第四步。 好，我们下节课呢，就来聊一聊第二步层叠又是怎么回事？好，我们来看一下 c s s 这边的层叠，这个层叠这一块的知识有多重要呢？ c s s 的 全称叫做层叠样式表， 你自己琢磨一下吧。那么层叠到底要做什么事？他是要搞定那些已经冲突了的样式，让他们之间啊进行厮杀，就剩下最后一个样式胜出，就跟你们玩这个吃鸡游戏是一样的，对吧？杀到最后就剩一个人， 其他的全部被淘汰，那么承接的做的事儿呢？也是完全一样的哈，比方说这个作者样式表和浏览器的默认样式表里边儿啊，有些样式是没有冲突的，像这 color 有 冲突吗？没有冲突。 display 有 冲突吗？没有冲突。那需要承接吗？不需要，只有那些有冲突的，比方说像这里的 font size， 对 吧？他也设置了 font size， 他 也设置了 font size， 所以 有冲突。 这些有冲突的样式之间进行沉叠。所以说啊，同学们一定要搞清楚啊，沉叠的前提条件，不要把啥东西都弄来，用沉叠的规则去套，那肯定要出问题的，一定是有冲突的。那么如何来施杀，又如何来胜出最后一个呢？他需要经过三个步骤， 第一个步骤要比较重要性，然后比较特殊性，然后比较叫原秩序。好一个个来吧，首先是比较重要性，哪个更重要，哪个就胜出，不重要的呢，淘汰掉。 怎么比较的？就这个规则一二三四，重要性从高到低自己看一下吧。带有 important 的 作者样式表什么叫作者样式表？就是你自己写的样式表，还有带 important 的 默认样式表啊，但是我们平时开发的话，很少去写这个 important， 所以 说我们就看第三个和第四个啊，作者样式和默认样式，作者样式的重要性要高于默认样式。所以说在冲突的时候呢， 你会发现，像这个的样式啊，它是来自于浏览器默认样式，它重要性比较低，而这些样式呢，来自于作者样式，它重要性比较高。所以说第一步惩戒的第一步啊，他就淘汰了这个样式，那么于是呢，就在这个作者样式表里边去继续视察啊，所以说第一步呢，容易出现一个面试题， 这个面试题怎么说的呢？他就问你啊，比方说我们看一个页面啊，页面上有一个 h 元素，随便写吧，然后呢，在样式表里边去写上一个星号啊，给他一个方 size 呢，为十六个像素， 那么请问这个 h 元素它是十六个像素呢？还是三十二个像素啊？如果说你不知道这一块知识的话，你就会认为这个 h 元素啊，不是有个浏览器默认样式表吗？对吧？看一下啊， 它是不是有个浏览器默认样式表的 font size 为二。 em， 那 就是三十二个像素，而这个选择题它的权重是不是比较高啊？而我们的新号的权重是不是比较低啊？那如果说你只按照权重来比较的话，那肯定是它胜出啊。但是第一步是比较权重吗？不是，第一步比较的是重要性， 哪更重要？肯定是作者样式表更重要，因此呢，反而是他胜出，哪怕他写的是个新号，懂这意思吧？好，第一步搞定了，第一步搞定了之后呢？浏览器默认样式表里边淘汰掉了，就剩下作者样式表里边。好，那继续啊，还有冲突啊，那进入第二步 比较特殊性啊，那特殊性呢？就是你们学的权重了啊，我也不知道你咋学的，特殊性是怎么比较的，他要计算那个每一个有冲突的样式，他特殊性，他的值是多少？那么怎么计算的呢？看下边这个表格，要分开计算四个东西， 我们就举个例子吧，比方说这里有四个东西冲突，对吧？第一个，我们来计算一下它的特殊性，它要计算四个值哈，第一个值呢，是它是不是内联样式，它如果说是的话就是一，不是的话就是零，那它肯定不是一个内联样式，对吧？内联样式是写到 style 里边去的。 好，那么第一个值出来了，第二个值，它的 id 选择器的数量，那么这里面有 id 选择器吗？没有吧，对吧？所以说第二个值呢，也是零。 第三个值呢，是属性选择器的数量，那么里边包含了属性选择器，内选择器，因为我知道内选择器呢，它也是一种特殊的属性选择器，包括伪内选择器啊，一起来算。那么这个选择器里边只有一个内选择器，对吧？所以说第三个值呢，算出来的是一 一个。第四个值呢？元素选择器，那就是零，没有元素选择器，所以说这个冲突的样式啊，他算出来的特殊性呢，是零零幺零。那么同理，这个样式呢，他的特殊性呢？算出来是零零 零幺，那么下边两个是一样的，对吧？都都属于同一个选择器，所以说就一起算了啊。下边这个呢，他怎么算的呢？是不是内连不是零？有没有 id？ 没有零。那么有几个属性选择器呢？包括内选择器，是不是一个有一个内选择器，看这里对不对。所以呢， 算出来是一。那几个元素选择性呢？是不是两个 d， i、 v、 h 一 对吧，算出来几个？两个，它算的就是零零幺二。好，把所有的这些冲突的样式，它们的特殊性的四个值全部要算出来，算出来了之后呢，就可以比较了。怎么比较呢？先比较高位， 高位全部相同，比较这一位全部相同，比较这里。哎，这里的话，是不是把这个东西淘汰掉了好，于是呢，第二个选择器啊，淘汰掉了，好，继续比较这位，两位相同，然后比较这个是不是把上面这个淘汰掉了，这个淘汰掉了， 说最后剩出的是谁？就是这两个，前面两个就被淘汰掉了。其实这一点呢，在我们平时开发的时候啊， vs code 非常贴心的为你展现了这些选择器的特殊性，比方说写了 a 一 元素啊， color red 指的 h 一， 你看特殊性是不是零零幺，它去掉了第一个 style 啊，去掉了第一个值，后边是不是零零幺？那比方我们再随便写一个啊， body 下边的 h， 一下边的 test， 在 下边的这个词变，那么这个选择器呢？你指的它 是不是零幺三？你自己算吧。 id 选择器的数量为零，内选择器的数量为一，元素选择器的数量为三，那再加上一个尾内呢？ first child 好，指着它是不零二三，为啥 id 为零类呢？有一个 test 有 一个尾类， first child 是 不两个， 然后三个元素三，懂这意思吧？他要把这些冲突的样式啊，全部的特殊性全部算出来，然后进行比较。于是呢，第二步特殊性比较完了过后，是不就剩下这两个了，那么现在还有冲突，那没冲突的话就结束了，还有冲突怎么办？比较元序， 什么叫元序，就用哪一个，那么哪个靠后呢？自然而然下边这个是靠后一点， 于是呢，最后通过这三步比较就胜出了这个东西。这东西胜出过后，是不是之前的全部被淘汰掉了？于是呢，这个方 size， 这个值啊，它就能够确定下来，为三十个像素， 它就这么确定的好，经过第二个步骤层叠，它能够搞定那些有冲突的样式，让它们最终就剩下一个属性，然后把它确定下来。但是呢，我们这个元素呢，还有很多其他的 cs 属性仍然是没有确定，那么接下来就要进入属性值计算过程的第三步就是继承。 那么下节课呢，我们来聊一聊继承是怎么回事？好，接下来我们来看一下 c s s 的 属性值继承这一块知识啊，应该说是每一个学习前端的小伙伴都学过的，但是呢，弄清楚的没几个。 继承呢，它的发生是有条件的，它有两个条件，第一个条件呢，是这个属性呢，目前是没有值的，就是我们整个属性值的计算过程。到了第三步， 他仍然还没有算出来，那么这个时候才满足了继承的前提条件。比方说这个 carl 的 属性他会继承吗？目前就不会，为啥呀？因为他已经算出来了呀，就像你自己挣的钱买，能够买车买房了，就不需要啃老了，对吧？像这个字体大小，他会不会继承啊？他不会，因为他已经算出来了。 说第一步呢，首先要确定那些没有算出来的属性好，第二步，他要可以继承，因为有些属性呢，是不能被继承的。那我们怎么知道哪些属性可以继承，哪些属性不能继承呢啊？有一个比较粗略的规则，就是跟文字相关的属性他是可以被继承的。像什么行高啊，字体大小啊，字体类型啊之类的啊，字体颜色啊， 这些是可以继承的。非文字相关的，比方说像宽高啊，位置啊，这些是不能被继承的。如果说你要详细地查看那个属性到底能不能继承的话，你最好去看一下官方文档。比方说呢，我们要再查一下啊，这个 background color 它能不能继承呢？你搜一下 m、 d， n 啊，进去它就会告诉你。哎，这个属性呢，是不能被继承的，你看是否被继承，否 懂这意思吧。所以说在继承呢，他要满足两个条件，一个是他目前没有值，手上没钱了，那就啃老呗。第二个呢，是他靠可以继承，对吧？那么两个条件同时满足的，在这个场景下边，只有这个 text 呢，对吧？它是跟文字相关的，它是可以继承的，同时它又没有值，所以这个东西一继承下来吧，它 就变成了 center， 没问题吧？好，第三步，继承啊，好，继承完成之后呢，你会发现还是有很多没有值。因为属性值的计算过程是要保证每一个元素的所有的 css 属性要全部有值， 还是有很多没有值？那怎么办呢？就进入最后一步，杀手锏呢，就使用默认值，每一个 c、 s、 c 属性呢，它都有自己的默认值。比方说，像这个 background color， 你 看它的初值值就是默认值啊，它的默认值是 transparent， 表示透明。所以说呢，像这个 background color， 它目前都还没有值，怎么办？使用默认值 transparent， 对于其他的 c、 s 属性呢？同意，好！属性值的运算过程，经过了这么四个步骤之后，就可以保证每一个元素，它每一个 c、 s、 s 属性全部都有值了。随便找一个元素吧， d， i、 v 随便找一个，不管你有没有给它写属性，你写了多少个它最终算出来这个 compute 的， 它都可以保证 它们里边的每一个 c s 属性，你看这么多 c s 属性全部都有值，这值哪来的？就是通过这边的四个步骤一步步算出来的， 正是因为有了这个属性值的计算过程，才能保证所有的 css 属性都有值。正是因为所有的 css 属性都有值了，浏览器才能够把这个界面渲染出来，不然的话有些值缺失，他不知道该怎么去渲染好了。我们现在了解了属性值的计算过程，那么下节课开始呢，我会带着大家啊，来聊一聊他有哪些实际的应用。 而且全班同学我们已经认识了 css 的 属性的计算过程一二三四，那么认识了这些知识之后能干什么呢？就我们能做啥呀？ 首先我要回答第一个问题，就是这个顺序啊，有些朋友可能有疑问说，这个顺序能不能调整啊？比方第四步跟第三步互换，第三步跟第二步互换，不行哈，顺序是无论如何都不能动的，也动不了。而且呢，在这四个步骤当中啊，第三步和第四步你是动不了的，你只能动第一步，第二步就是你写的 css 代码，它只会影响第一步和第二步，懂这意思吧？ 那么间接的影响第三步，第四步。好，咱们来看一些具体的例子好，比方说我们第一个例子就是一个经典的场景，就是我们一个复元素，下面呢有一些别的元素，还有一个 a 元素，然后给复元素设置个颜色呢，你会发现这个 a 元素它没有变，首先搞清楚它为什么没有变， 我们用这个属性值的计算过程来分析，打开控制台，然后呢找到这个 a 元素，你会发现到这个 a 元素是不是已经有了一个 color 样式了？哪来的？是不是浏览器的默认样式给的？那么这意味着啥呢？他就意味着啊，他会在第一步来确定这个颜色是没有冲突，这个颜色没有冲突吗？ 他第一步就确定了颜色，由于他确定了颜色会不会发生，第三步啊，他就不会发生，因为我们知道继承呢，他是有条件的，第一个条件是仍然没有值，他第一步就有值了，对吧？第二个条件呢是可以继承，他倒是可以继承，但是他因为已经有值了，所以他不会发生继承。找到了原因之后，那么怎么解决呢？我们可以写下这个代码，苍天乐 找到 a 元素，然后呢单独的去给他设置一下颜色，对吧？好，这样子一设置的话，我们来看一下这个 a 元素，这不是就正常了？那么这种情况又是什么情况呢？就是我们现在呢有两个颜色，浏览器默认样式表里面有一个 a 元素，自身有一个，是不是有冲突？那么这个样式的确定是发生在哪一步呢？是发生在第二步层叠，专门来处理冲突，最 后呢就剩下一个，在第二步的时候，是不是已经确定了这个颜色了？懂这意思吧？我们在第二步就确定颜色了， 但是感官上看上去呢，也好像是继承了复元素的颜色，其实没有继承是他自己去设置的颜色，跟复元素一样。那么为了让我们方便书写代码呢，浏览器啊给我们做了这么一个单词叫做 inheritance， 这单词起什么作用呢？就是当你把这个单词作为属性值的话，它表达的意思就是把复元素的那个颜色 复制粘贴放到这个位置。所以说你这里写这个 inheritance 和你写这个东西达到的效果是完全一样的啊，没有任何区别哦， 说了没有，这个 s 效果是完全一样的，那么这里特别容易造成误解。就是，哎，这个玩意是不是什么强制继承啊？是不是会影响到第三步啊？跟第三步压根就没关系一样的呀，它这个 a 元素现在出现了两个颜色，这个颜色和这个颜色，那么就进行规则叠呗，对吧？你是作者样式表，所以说你的重要性比较高，它就会使用这个样式。 这个样式里边的 inherit 啥意思啊？就是把复元素的颜色复制粘贴到这个位置，有兴趣的同学可以查一下官方文档是怎么描述这个 inherit 的， 就是描述的就是把复元素的样式直接粘到这个位置，所以说它的颜色的确定仍然是在第二步就完成了。那个 inherit 呀，跟这个第三步压根就没什么关系，由于它在第二步已经确定了，所以说第三步 不会发生。听懂我意思吧，那么利用这一点呢？我们很多时候啊，在写一些通用样式的时候，我们往往会这样写，找到页面上所有的 a 元素， 它的颜色呢？来自于复元素，为什么呢？因为往往页面上的 a 元素呢，我们希望跟其他的元素呢长成一样，没有什么特殊的。复元素是啥颜色，它就是啥颜色，方便后边的控制，这种代码呢，是非常常见的啊。好，接下来我们看一下第二个例子，第二个例子呢，也比较简单啊，一个 diy 里边套了一个 label， 一个 input， 然后呢，这个 diy 里边呢，就复元素里边呢，设置了一个字体大小。好，咱们来看一下页面上长什么样子，没问题吧。然后呢，我们在这里呢写上一些文字，你会发现呢，为什么文本框里边的文字大小它就不一样，为啥呢？这个 label 的 文字啊，有， 由于它自己没有自己大小，所以说它会发生在第三步进行继承，它的文字大小呢，就是复元素的一点三页，但是这个 input 它为什么没有用这个文字大小呢？咱们来看一下，打开浏览器的条控台，然后呢找到这个 input 往下翻，你会发现呢，它这里设置了一个 font size， 也就是说为什么看不到值呢？呃，这里应该是显示的，这应该是显示的 bug 啊，我们可以到那个浏览器的源码里边去看一下，在源码里边呢，有一个预设值啊，是这个 vip 内核里边的一个特殊值， 这个值呢，它就会产生一个字体大小啊，总而言之，就是浏览器的默认样式里边给他设置的字体大小。其实呢，你可以在这个最终的计算结果里边可以搜的到磅 size， 你 会发现它是十三个像素，没问题吧，所以它的道理呢，跟刚才的 a 元素是几乎一样的，由于它有这个样式了，它就不会继承。那么如果说我们希望页面上的这些元素啊，像这些 input 元素，它也跟 a 元素一样，要继承复元素，怎么办呢？还是一样找到 input 要设置一下 font size， 这样子一来，样式就发生了冲突。浏览器的默认样式表跟这个 input 之间是不是 font size 发生了冲突？于是呢，在第二步进行沉淀的时候，就确定了字体大小了，它就不会进入到第三步继承，保证了这个 input， 它的字体大小跟复元数完全一致，咱们再写个账号， 完全一致了啊，这也是一种常见的做法。好，咱们再看第三个例子，第三个例子呢，我给大家解释一下啊，就两个 divc， 一 套 c 二， 那么 c 一 是什么样式呢？个宽度百分之八十，然后呢有一个居中的效果， c 二呢，宽度百分之八十，然后呢也是一个居中的效果。我们的需求是挺好啊，我希望 c 二，就它里边这个 c 二，它的宽度 一个百分比，跟复元素保持一致，同时它的布局方式就它的 marking 啊，跟复元素也保持一致，咱们来看一下目前的效果，对吧？复元素百分之八十的宽度，那么紫元素呢，也是百分之八十的，那么目前就没问题啊，有什么问题呢？目前代码问题在哪啊？目前代码呢，在于 不好维护，比方说将来我们要把复元素呢宽度改成百分之六十，你这里改了，你紫元素是不是也得改？因为要保持一致啊，假设我们有这样的需求啊，那么紫元素也得去改，而你 margin 呢？现在不是零 out 了，而是变成了 margin next out， 相当于是靠右了，对吧？那么紫元素是不是也得改，对吧？是不是要改？两处推而广之，如果说这个欠套层次再深一点，那么这种改动的范围是非常大的，带来了维护上的困难，虽然说这个效果呢，最终可以实现啊，没问题，效果是没问题的。 好，我们有没有什么办法在维护的时候呢，方便一点呢？看着啊，这里呢，其实我们的需求无非就是继承嘛，对不对？子元素的宽度跟父元素一样，它是百分之多少，我就百分之多少，那继承呗。啊，有的人说这个位词啊，它就不能继承啊，不是说只有字体相关的属性能继承吗？ 注意啊，我这里说了，继承不是这个第三步的继承，是直接把某一个属性使用，父元素的值一定要理清楚啊，所以说这一块呢，是把父元素的值复制粘贴到这个位置，然后 marty 呢，也使用 inherance。 再重申一次哈，这个单词，它不是第三步的继承哈，它指的是把复元素的值复制粘贴到这个位置，好保存，那么这样一来，不仅现在的效果可以实现，将来呢，我们要去改动复元素的宽度，改成百分之五十，对紫元素就一起影响了，因为紫元素就是复制它的属性，对吧？然后呢，比如说将来我们要改动这个 martin， 把 martin let 改成 auto。 好， 紫元素动不动？不用动啊，反正它 martin 是 继承的，你是多少我就多少， 咱们来看一下，是不是一起靠右了，对吧？复元素跟紫元素一起靠右了。好，那么这就是关于继承啊，在我们实际开发中的一些应用，但是呢，也不用去记这些场景，以后呢，你们在开发的过程中遇到了需要拿复元素的值直接拿过来用的时候能够想到这个 inhabit 就 够了。场景是无穷无尽的，开发是非常灵活的啊，千万不要去死记硬背。 好，各位学前的同学，我们这里呢将通过三个例子，这三个例子呢是我们以后在开发中可能会遇到的一个场景，通过这三个场景呢，我们来对三个 cs 属性值做一个讲解。第一个场景我们来看一下啊， 目前呢页面上呢有一个 p 元素，这个 p 元素里边呢有些文字，然后呢上面有三个按钮，这每一个按钮呢可以改动这个 p 元素的内样式，咱们来看一下 p 元素是这个对吧？我们点那个二倍行高，你看它 manhattan 为二点三倍行高呢，换了一个内样式，它的 manhattan 为三，没问题吧？ 切换行高，那么现在问题是我点默认行高会发生什么？点这个的时候呢，它会把内样式呢是使用 g s 完成的啊，你会发现这个内样式里边啥也没写，啥也没写，行高就是默认值吗？ 不一定，我们再往下翻，你会发现它这个时候呢行高是继承了 body 的 行高，因为行高是可以继承的，而我们往往在页面上呢会去设置一个统一的行高，但是我现在不希望它使用统一的行高，我现在希望什么呢？希望它的这个 l h， d fork 选择器啊，它里边的行高啊是默认值，就是我要在这一步把行高设为默认值。 在具体来说的话，在属性值的计算过程当中，我需要在前两步给他把行高设为默认值，而不是要等到他第四步自动去设置默认值，懂这意思吧？现在的问题是，我怎么把它设为默认值呢？行高的默认值是多少啊？可能很多朋友都不知道，其实他的默认值呢，是 no， 不是一个具体的数值，好保存看一下啊。那么现在呢，我们点默认行高，你看这就是行高的默认值，那么问题出现在哪呢？对于一个简单的行高，很多同学呢，可能都不知道它的默认值，那么对于更多的其他的这么多的 cs 属性，难道说我们都要把它的默认值全部去背一遍吗？没有必要， 当我们要对一个元素把某一个 cs 的 属性改成默认值的时候，其实我们完全不用去查什么 m、 d、 n， 它的默认值到底是多少，直接使用一个单词叫做 enigma， 这个单词呢，就告诉浏览器把这个属性直接设置为默认值，但是一定要注意，它跟我们属性值的计算过程里边，第四步是没有关系的，它是在前两步，就是你书写代码只会影响前两步，在前两步就把这个属性值确定下来，确定为默认值，于是呢，第三步和第四步就不会发生，懂这意思吧？所以说我们这里呢，就不用去考虑行高和默认值到底是多少了， 一、保存看一下，两倍行高，三倍行高默认值，这就没问题了。好，这是第一个例子，通过这个例子呢，我们理解的这个预设值啊，叫 initial， 它可以用于任何的 c、 a， c 属性表示，把这个属性呢设置为默认值。好，咱们再看第二个例子， 第一个例子呢，就是经典的，我们需要清除浏览器的默认样式，那么在过去呢，要做到这一点，我们要写很多的代码，比方说我们要写一个 mark 零，潘金凌，哎，清除完了吗？肯定还没完。比方说像这个 h 一 元素，随便写一点，一保存，你看一下是不是文字还是比较大呀？为什么呢？因为它有默认值啊，你看浏览器的默认样式里边，把这个 h 一 元素是不是设置了它的文字大小， 这文字大小要不要清除？也要清除， fsi 设置为多少呢？我们可以设置为十六个像素，哎，我们继续。然后呢，如果说页面上还有这么一个 u l i 元素， 那么他们有没有样式默认值啊？也有啊，他们前面是有一个小点的啊，有人说搁小点没看见呢，是因为 mark 编辑清楚过后呢？这个小点啊，它超出了浏览器边缘了啊。如果说你给这个 u l 设置一个 mark 列居中的话， 也不居中吧，就有点距离看一下，这个小点就出来了。那么这个点怎么来清楚呢？是不是也得清楚，就需要去设置 list style 呢？好，那么现在呢，就不用继续写了啊， 你会发现浏览器里边有很多很多的默认样式，怎么才能把它干干净净的，全部给它清除干净呢？这里会出现两个问题，第一个问题，我们不知道清除的时候该如何来写属性值。哎，为什么呢？你看哈，我们要清除浏览器的默认样式，是不是要达到这么一个目标， martin， 我 们首先要判断它能不能继承，它不能继承，所以说我们要使用这个 martin 属性的默认值， elixir， 对 吧？ pending 能不能继承？ pending 不 能继承，所以说我们要使用 elixir formsize 能不能继承？ formsize 是 能继承的，所以说我们这里要使用 inheritance， 当然呢，你可以完全把它替换成具体的值，对吧？ martian 呢是零一， martian 呢是十六历史 style， 能不能继承呢？是不能继承的，所以说要把它设置为默认值呢，懂这意思吧？就是说我们在设置个属性值的时候就会遇到困扰，要一个一个去判定，那能不能有什么比较方便的方式呢？ 有，浏览器给我们提供了另外一个预设值，叫做 onset。 onset 是 什么意思呢？它表示说在属性值的计算过程这四步里边儿，前两步你啥也没做， 然后针对 margin 的 属性，你不管你写了多少，只要你应用了这个样式， margin on set， 而且这个样式生效了，就表示说在前两步里边，你对 margin 没有设置，没有设置的话，它是不是该继承就继承，没有继承的话就使用默认值，对吧？自动完成后续两个步骤。那么对于后边的属性呢，也是一样的， 前提也是一样的，访问 size 呢，也是一样的，比如说这个访问 size， 它表示说你在前边这两两个步骤里边没有去设置字体大小，那么访问 size 呢？该继承就继承，懂这意思吧？所以说 on size 呢，是一个非常灵活的样式值，那对后边的东西也是完全一样。这样子呢，我们脑袋里面就不用去想，哎呦，这个属性它能不能继承？它的值应该设置为多少才能把它清除干净啊？ 全部设为 on size 就 完事了。好，第一个问题解决了，那么第二个问题呢，那我们要写多少属性了？在过去呢，我们要写一大堆的属性来进行清楚，现在不用了，我们直接写一个 o， 这个 o 就 表示所有的 css 属性全部给它清除掉。来，我们保存一下啊，再刷新。 为什么会出现这么一个现象呢？是因为你这个新号啊，选择的面太广了，你把那个黑的元素的默认样式给它清除掉了，所以黑的元素里面东西它都显示出来了，包括页面上如果说有脚本的话啊， script 元素它也把它显示出来了啊，所以说我们这里啊，要精准的选中一下啊，我们要选中哪些呢？选中 body， 选中 body 下边的所有的元素，但是呢，不包含 script 元素 啊，保存，你看一下是不是清除掉了，当然呢，这个东西打气面是非常广的哈，如果说你使用了 o 之后啊，所有的 c s 属性都变成行和了， 因为浏览器的默认样式里边把它变成快盒了，对吧，你把清除掉了过后，它变行盒了，懂这意思吧，所以你们自己考虑一下啊。呃，这个 o 要到底要不要用，但是这个属性值是有用的，这个属性呢，你自己考虑一下啊。好，这是关于这个 on set， 然后呢，咱们再看第三个 revert， 这是什么意思呢？我们来运行看一下，这个页面呢，有这么四个按钮，很多时候啊，我们页面上的按钮呢，它的样式都是比较统一的，所以 说呢，我们在样式里边呢，会对这个按钮呢进行统一样式的设置，先把按钮的所有样式也清空见过了，是吧？然后呢，再设置一些这些东西，然后呢给他加了一个 hello 效果和一个 active 效果， 于是呢，按钮就变成这个样子了，问题吧，但是呢，有一些特殊情况下，我们可能希望某一个按钮回归到浏览器的默认样式，比方说像这个按钮 default， 它要回归到浏览器的默认样式，那么这个时候就会造成一个困难，我怎么让他回去，对吧？你怕改了倒挺容易的，你怎么让他回去呢？难道说我要去把这个默认样式全部背下来，一个一个样式去恢复吗？这样子太麻烦了对不对？于是呢，浏览器给我们提供了一个属性值，叫做 rewind， 这个属性值呢，表示的是就应用浏览器的默认样式， 比方说像这个按钮完全可以给它写上一个 o， 然后呢 reverb， 让它所有的样式回归到浏览器的默认样式。当如果说这个样式浏览器没有写默认样式的话，那么就相当于是你没有写好，咱们来看一下吧。这回回到默认样式了，但它鼠标的操作效果呢和按下去的效果呢？还没有回复，那么我们这里呢，用逗号 default harvard 和 default python 好 保存看一下，所以完全回归到原先默认样式好。最后呢，给大家再一次重申，我们所有的这些操作都是在前两步里边玩的，第三步和第四步你是控制不了的。所以说同学们理解 c s 属性值的计算过程，对我们理解这些属性值是非常有帮助的， 而且呢，还可以帮助我们解释页面上一些奇奇怪怪的现象，我们都可以通过浏览器的调试控制台来进行分析，当你发现样式出问题的时候，你首先找到出问题的元素，然后观察它下边的出现的样式，应用我们学过的这个知识，一步一步去分析它到底是在哪一步，跟你想的不一样，好吧，那么这也是属性值的计算过程呢，我们就到此为止了啊。

大家好，我是清新，今天带大家用纯 css 三实现这样一个三 d 旋转木马的效果，我们来看一下啊，那么当我们刚进来的时候，它会自动的发生这样一个旋转的效果，当鼠标放上去的时候，他就会停止旋转，移开之后他接着旋转放上去停止旋转， 那么接下来我们就来开发这样一个效果。首先我们在这里来新建一个网页文件，我们来给他取个名字叫做三 d 旋转木马效果 点 stmr 回车，按住我们的 shift 键感叹号回车，调出我们这个网页的框架，那么接下来我们就开始写代码了，我们要开发这样一个效果，首先我们需要构建一个 div 来作为我们的容器。好，我们来看一下啊，我们给他怎么样取个名字 saying， saying 是什么意思啊？场景的意思啊，那么接下来我们来给他添加 css 样式。 好，我们来看一下，我们给它添加一个宽度六百像素，我们来给它添加一个高度三百像素， 然后我们再给他添加一个边框线，两像素实现红色的边框线， ctrl 加 s 保存，保存之后我们在浏览器当中来查看一下， 那么构建好了之后，我们来看一下它与浏览器上面和左边有间距啊，那么这个间距是我们的波底自带的默认的八像素的外边距，我们不需要就把它设置为零。 那么接下来我要让这个盒子怎么样往下移一点，同时在水平居中的位置显示啊？这样怎么样？是为了方便看效果好，所以我们来给他加上一个上外边距一百五十像素是吧？左右外边距自动相等下，外边距设置为零，那么构建好了之后，我们接着往下 卡，那接下来我们要构建这样一个三 d 的效果，其实我是是怎么样？其实我是在这个盒子里面哈再构建了一个盒子，然后我在旋转的时候，其实旋转的是我接下来要构建的这个盒子啊，好，你可能不是很好理解，是吧？我们先写代码啊， 好，写完代码慢慢的你就会有感觉了。好，我们来看一下啊，那么接下来我们同样的来给他添加我们的样式， 我们来给它添加一个宽度也是六百像素，然后我们再给它添加一个高度三百像素，我们来给它添加一个背景颜色，黄色， ctrl 加 s 保存。 当然这个手你看到的还是一个平面的效果，没有三 d 的感觉。那么接下来我们来给他加上一个什么，当鼠标放上去的时候，让他有这样一个三 d 旋转的这样一个效果啊，让大家先感受一下他怎么样他的一个三 d 效果。 好，所以我们来看一下，当鼠标放上去的时候，是吧？我们让这个 box 这个盒子发生这样一个三 d 的旋转。 好，全是 form， 那我们在旋转的时候，我们应该让他怎么旋转呀？大家看一下，我们说了，大家看一下这个效果其实是怎么样？是这样，这个方向旋转的是不是？那这个方向他怎么旋转的呀？我们来看一下我们的三维坐标，那么这是我们的 x 轴，这是我们的 y 轴，这是我们的什么 j 轴啊？ j 轴就相当于有一根箭，是吧？ 从你的屏幕射向你啊，射向你的这边是怎么是 z 轴的正方向啊？那我们来看一下这个灰色的半透明的盒子，就相当于我们刚才那个什么黄色的盒子，那么他这样发生旋转的话，他是怎么旋转的？他应该是沿着我们这个歪轴， 是不是啊？好，然后我们来看一下，沿着歪着我们来看，往这个方向是正方向，那么这里应该是什么反方向旋转的， 是吧？好，所以我们来让他沿着我们的 y 轴反方向旋转，我们来旋转一个三百度，看一下效果啊， ctrl 加 s 保存，保存之后我们来看一下啊。哎，再看一下，虽然有效果，但是看不到三 d 的感觉是不是？ 好，所以我们来看一下，我们要让这个 box 的盒子有三 d 的效果，我们需要给它外面的这个盒子加上这样一个代码。好， post picti 五，是吧？我们来看一下啊， 我们来给它一个八百像素， ctrl 加 s， 加完之后我们来看一下。哎，就有这样一个三 d 的效果了，是吧？好，那么接下来我们来给它一个过渡动画，让它有一个慢慢慢慢的旋转的效果。好，我们来给这个 box 这个盒子加上一个 concession 过渡动画。 好，我们来 count 加 s 保存，大家看一下。哎，这个时候你就能感受到它的 一个什么呀，这样一个旋转的这样一个翻转的效果了，是吧？好，那么这个是什么意思啊？这个代表就是过渡的意思啊，那么这个是什么意思啊？这个二代表的是他身上所有的属性都可以发生过渡效果， 然后这个一则就是他过渡时候的速度，那么这是他过渡所需要的时间，也就是说当我们怎么样这个盒子从最开始的这个什么零度旋转到三百度的时候，是吧？他需要花一秒的时间啊。好， 那么这个效果构建好了之后，我们来看一下啊，那接下来怎么样？我们要让他有这样一个三 d 的这样一个排列的这样一个旋转的效果，然后这小图片排在这里，那这个效果是怎么做的呢？是吧？ 好，我们来看一下我们的 ppt 啊，同样的，我们来回到我们的 ppt， 他其实是怎么做的哈，我们来看一下我们说的这个灰色的半透明的盒子，相当于这个黄色的盒子， 那这个盒子的话，它旋转一周就会形成一个圆转，那这个圆就是他创建的这样一个三维空间的这样一个啊空间。然后我们来看一下啊，那么他旋转一周形成的这个圆，这个圆的半斤是多少？ 我们来看一下啊，那他的宽度是多少？是六百，那么旋转一周之后形成的这个圆的直径就是六百，那么他的半径就是多少？就是三百， 是吧？所以接下来我们来看一下啊，他其实是构建了九个盒子，把它放在哪里哈？放在这个盒子的什么水瓶中间底部的这个位置啊？然后然后再把这些盒子怎么样？ 往往什么往不同的方向去，什么移动，那么移动的距离是多少？就是这个圆的半径的大小，三百像素啊。好， 那么怎么关于后面的内容是怎么实现的？我们等下通过代码慢慢来啊，我们先构建九个盒子，然后先把它放到这个什么中间的这个位置来，然后再进行接下来的操作啊。 好，因为他比较抽象，是吧？讲再怎么讲的再多，还不如来干一次，是吧？好，所以我们来看一下啊，我们来构建九个盒子，然后我们来给他们加上 内容啊，一二三四五六七八九 count 加 s。 好， 那么 ok 了，之后怎么样？我们来看一下效果啊，当然这个时候你肯定是啥也看不到，就看到一二三四五六七八九，是吧？那么呢，接下来我们要干嘛？我们来给这些盒子啊，好，我们来干嘛呢？我们来给他们添加宽度和高度，我们给他一个两百像素。 好，我们给他一个高度两百像素。然后我们要干嘛呀？我们要给他加上一个背景颜色， ctrl 加是保存，保存之后我们来看一下啊，他是这样排列的，是吧？那接下来我要让他怎么样在这个盒子底部中间的位置来显示啊？我们来看一下， 我们要让它在这个位置显示，是吧？好，那么接下来我们就需要用到我们的定位了。好，那么这些 item 相对于谁进行位置的移动啊？ box， 所以我们把这个 box 这个盒子设置为什么设置为相对定位的元素， item 设置为绝对定位的元素。 然后我们给它加上一个 bottom， 零 ctrl 加 s 保存。好，那么接下来我要让它干嘛？我要让它移到这个盒子水平中间的位置，我们来看一下怎么操作啊？我给它一个 left 是百分之五十 看才加，是保存好，这个时候我们来看一下啊，那这个盒蓝色的盒子在最转最左边，正好就是这个黄色的盒子的什么中间的位置，那我要让这个蓝色的盒子相对于这个黄色的盒子水平居重的话，我只要让这个蓝色的盒子往左边移多少， 以它本身的宽度的一半就好了，所以我们来给它加上一个 monkey gun left 多少负一百，往左边移就是负的。好，这个时候他就在中间这个位置显示了。好，我们来感受一下这个感觉啊，好， 那么这样做完之后，接下来我们要干嘛呢？接下来我们就要让这九个盒子怎么样形成一个圆，是吧？像这样子排列的，所以我们来看一下他怎么排成这个效果哈。好，首先我们来看一下第一个盒子，就这个盒子，那么这个盒子我们来看他其实只做了一件事情， 就是让这个盒子怎么样沿着他的贼轴方向怎么样？像，怎么样？像贼轴的正方向移动了三百像素 是吧？好，但一定要注意啊，我们这里画的这个什么啊， y 轴啊， x 和 j 轴啊，是我们这个灰色的这个盒子的啊，那我们这里的每一个盒子它的一个 j 轴其实就是什么， 就是他的什么，相当于有一根箭是吧？从这个图片的后面射下，射，射穿他是吧？那然后射穿的这一面就是他的一个正面的啊，如果你不了解的话，你一定要看一下这个三滴图啊，一定要好好记一下这个东西，大家看一下啊，他这个方向是正方向啊，这一种啊， 好，所以接下来我们来看一下，我们就要把这个盒子怎么样往他的自身的 z 轴方向移动，三百像素啊，好， 我们来看一下啊，好，我们来看一下第一个盒子，点一下 atm 冒号，好，第一个盒子， 然后我们来看一下 transform， 我们刚才说了，他应该往哪里移啊？往他的 z 轴的方向移，圈是 later， 然后是正方向移，移三百像素是吧？好， ctrl 加 s 保存，保存了之后我们来看一下， 好像没啥效果，是不是？所以这一单一定要注意啊，我们刚才说了这个 box 这个盒子要有三 d 的效果，在这个 c 里面加了一个四句的代码是吧？如果说这个代码你不知道什么意思，你可以看上一个视频啊，上一个视频我详细讲过这个啊，好，那么接下来我们想要这个 at 目怎么样？也就是说这个 box 盒里面的内容有三 d 的效果，我们要给这个 box 这个盒子啊，加上这样一个代码啊，好，我们来看一下圈是 form 好， still 好，然后这个啊，这个意思就是什么？就是让这个 box 里面的子元素也有这样一个三 d 的效果，大家看这样是不是就 ok 了？那大家看旋转一下，是不是大家看一下他是不是就有这样一个看到没有，空间被拉开的感觉， ok 了啊？好，那么第一个什么盒子我们已经排好在这里了，那接下来我们来看一下第二个盒子是怎么排的啊？那么第二个盒子就是这个了， 是吧？他是怎么做出来的啊？我们来看一下这张图，他其实什么就相当于把这个盒子在这个位置什么先怎么旋转，沿着哪个轴选的沿着歪轴，那么沿着歪轴他是怎么旋转的呀？他是这样子旋转的，是不是这样旋， 旋转的话就是沿着歪走的哪个方向正方向旋转的是吧？好，我们来看一下这里是不是正方向，如果你记不住的话，你就记一下这个左手准则啊， 你看这是歪着的正方向，你拿着你的左手，拿出你的左手，然后让你的大拇指朝下，然后另外的四个手指的这个方向就是什么？就是他旋转的正方向。 好，所以接下来我们这里要旋转，就是沿着它的怎么样歪轴的这个正方向进行旋转的啊。好，所以我们来看一下啊，那么我们怎么样点上 box， 点上 item， 好第二个盒子，是吧？那么我们来看一下我们要干嘛的呀？我们首先要让它有一个旋转，沿着这个歪轴来旋转，那么它旋转多少度？哈，我们来看， 我们来看一下我们的一个 ppt 啊，我们说这总共有九个盒子，是吧？那么要围成一个圈，三百六十度，那么他们每一个人旋转多少度啊？三百六除以九就是四十度。好，四十 好， ctrl 加是保存，保存了之后我们来看一下效果，大家看见其实这里有一个盒子，大家看他是有这样一个，大家看见没？旋转的效果啊，当然如果说你觉得看起来不是很好看的话，那你可以给他加上一个颜色，加上颜色之后，你可以把第一个盒子 的效果先注视点，你看到没有？是不是这个蓝色的盒子，大家看到吗？他就有这样一个旋转的效果，那么旋转完了之后，接下来我们要干嘛呀？我们来看一下他，其实把它旋转完了之后，这个手，大家看一下，这是他的一个正面是不是？然后大家看他沿着他的正面是不是往这个 方向移啊？移多少也是移三百像素，是不是啊？因为他形成的远的半径是三百吗？那么就可以啊，就可以达到这样一个效果了哈，好，所以我们来看一下，那这里我要干嘛？我同样的也要沿着他的 g 轴方向，是吧？啊？ g 轴的正方向啊，一定要注意啊，是 g 轴哈，三百像素。 好，那这个时候他就移动到这里了，大家看一下啊，然后我把刚才那个注视的代码把它怎么样释放出来。好，我们来看一下，是不是就有这样一个效果了啊？那剩下的盒子的嘛，都是这样子排列出来的啊？好，我们把这个蓝色的这个颜色去掉， 那么接下来我们来看第二个，第三个，第四个，第五个，是吧？我们来看这三四五六七八九。好，我们来看一下这第一个，第二个，那第三个盒子，我们来看一下，那么第三个盒 盒子我们要旋转的角度是多少？那就是八十了， ctrl 加 s 保存，感受到了吧？好，然后我们来看一下，那第四个盒子就是多少？一百二是吧？好，我们来看一下啊， 好，那么接下来我们就往下面直接写了哈五，那就是一百六，然后这里写上一个六，六就是两百。好，这里是我们的七，第七个盒子就是二百四， 第八个盒子就是二百八，那么第九个盒子就是三百二。 好， ctrl 加 s 保存，大家看一下，是不是啊？这一代一定要注意，我们旋转的是谁啊？我们旋转的是我们这个 box 这个 盒子啊，所有的这些怎么 item 这些内容都是在这个 box 这个盒子里面啊，所以我们大一定要做，我们旋转的是这个 box 这个盒子形成的这样一个三维的一个空间，你旋转它的手，它里面的这些盒子，它就会什么就会跟着动起来了啊，好，就看到了这样一个效果。 好，那么写到是吗？写到这里之后，我们来看一下这个代码是不是看起来太多了呀？那有没有什么办法可以把它简化一下呢？有，我们可以通过自定义属性来解决啊，那什么是自定义属性啊？ 好，我们先写，写完之后我们再来解释，你就能懂了哈。好，我们这里给这里的每一个艾特姆身上，我们都给他加上一个自定义属性 杠杠 i。 好，那么我们的自定义属性一定要是以两个杠开头的 啊。好，然后我们来给他一个值，那么这里就相当于给他加了个自定义属性杠杠 a， 然后他的怎么样？他的值是零，然后我们把它改，这里改成一，这里改成二，这里改成三。好，我们来看一下，改成四， 这里改成五，这里改成六，这里改成七，这里改成八。 ctrl 加是保存，保存好了之后，我们来看一下我们这里的代码，大家看一下我们说的第一个盒子，它不要发生旋转，那不要发生旋转，相当于它的这个 lowtet 是多少？ 就是相当于它没有旋转，就是零度嘛，是不是？好，把它补充之后，我们来看一下，那么来看一下这个沿着 z 轴的方向的距离都是一样的，是不是？但是我们沿着这个什么 y 轴旋转的时候，它的度数是零四十八， 八十一百二，看到没有？一百六，是不是？那这里是有规律的，是不是？好，所以我们来看一下，那这个地方我们这个代码可以怎么改哈，我们来看一下，我们可以改成这样， var 杠杠 i， 那么这个 vr 什么意思啊？ vi， 它是一个函数，它可以获取到我们自定义属性的值，也就是说这个杠杠 i 就是我们这里定义的这个自定义属性，是不是它的值是假？第一个 itom 的值是零，所以它这里获取到的这个这个值是多少？是零，零的话我们再乘以多少乘以这个四十度 得到的还是零，是吧？但是我们知道这是一个算数表达式，它是不能直接计算的，所以我们还要通过一个函数叫做 clock， 那么这个函数他是可以怎么样进行这个算数的一个计算的哈，那么加上他之后，我们来看一下他就是就可以了啊，他同样也可以达到这个效果，那么我们来看一下啊， 我们来看一下第二个，好，我们把这里也改了，改完之后我们来看一下他，同样的，是吧？在这里效果没有发生改变啊，因为怎么这是第二个 it， 这第二个 it 这里获取的刚刚 i 得到的值就是怎么一一乘以四十就是四十了， 那么后面的我们都可以改成这个表达式，是吧？那么这样子发现没有，其实他的代码什么呀？是不是就可以简化成这一个代码了？好，所以接下来我们可以把这段代码怎么样复制过来，复制过来哈，剪切过来之后放到这个 item 里面就好了，然后剩下的怎么样？我们全部干掉不要了， 那么这样代码就简化了。好，大家看一下，同样的没有问题，是吧？好，那么做到这里之后，我们接着往下看，下一步我们要干嘛？我们是进来的时候他是自己在那里，什么呀？动鼠标 放上去的时候他就不动，是吧？而我们这里是鼠标放上去的时候动啊，这是为了我们最开始给大家看效果加的，所以接下来怎么样？我们要把我们刚才加的这样一个鼠标放上去的时候，他的一个旋转的效果把它给注视掉，然后这里的这样一个什么过度动画也注视掉， 那接下来我们要进来的时候，就让他自己发生这样一个旋转的效果，我们就要通过我们的 elements 动画来实现了，是吧？所以接下来我们首先我们来定一个动画，然后我们再调用这个动画就可以了。 好，第一个怎么动画啊？这个我们来看，这是关键针哈，我们就是通过这个来定义我们的动画，我们来给他取个名字叫做 low title 旋转。好，我们来看一下啊， 刚开始的时候这个动画的效果是什么呀？刚开始他在这里他的一个旋转的角度应该是零，是不是？所以我们来看 看一下最开始的时候这个什么旋转的角度，我们来看一下他这样旋转的话，他其实是沿着哪个轴啊？他其实是沿着我们的歪轴来进行旋转的，然后歪轴往这个方向，这个方向是歪轴的哪个方向呀？是不是他的反方向呀？啊？如果你不记得，我们再来看一下这个啊， 大家看一下他其实是沿着这个方向这样子旋转，是不是？那这样子旋转的，我们来看一下这里这样子旋转，旋转的应该就是这个歪轴，沿着歪轴旋转是不是他的一个反方向啊？好，所以我们来看一下。那么最开始的时候他沿着歪轴的什么 旋转的角度是怎么零？刚开始就是零吗？他在零度的这个位置是不是相当没有发生旋转，是吧？然后怎么样？然后到百分之百的时候。好，我们来给他一下啊，那这个时候他是吗？我们说下，他要旋转一圈， 那么旋转一圈的话，他是沿着反方向的，所以我们这里沿着歪轴的时候，他的角度应该是多少？负三百六，因为他是沿着反方向旋转的吗？是吧？好，那么定义了这样一个动画之后，接下来我们就要调用这个动画了，我们刚才说了，我们旋转的是谁啊？其实我们旋转的是 box 这个盒子啊，这里一定要注意了， 千万不要弄错了对象哈。然后我们来看，我们给它加上一个 element 动画，那第一个就是我们的动画名字。 好，我们来看一下，叫做 low table， 第二个就是我们动画的时间，我给他五秒，第三个就是这个动画执行的速度。好，我们写到这里，我们去后面的代码先不要了。 好，来，我们来看一下，我们 ctrl 加 s 保存之后，大家看他就可以旋转了，自己在那里发生旋转了。好，当然他怎么样默认了他这个动画只执行一次，我们要让他一直 执行的话，我们就给他加上个音翻列题啊，重复旋转是吧？重复这个动画啊，他就会一直旋转的啊？ 好，那么做到这里了之后啊，我们来看一下啊，如果你对这个关键真动画还不了解了，我简单解释一下啊，那这具体的你还是要自己去学一下，是吧？那么这里就是什么定一个动画，那么这个动画的名字就是这个 lootat， 然后这个动画要执行的时间是五秒， 然后动画在执行的时候，他的一个速度，这里是一直执行这个动画，对吧？那么这个百分之零代表什么？这个百分比相对的是这个时间而言的啊， 也就是说他在最开始零秒的时候，那么他的时候他的一个旋转角色就是零，是吧？就相当于没旋转，然后怎么经过最后这个百分之百就是五秒，是吧？也就从零秒到五秒的这个时间里，他的一个角度应该是从零度旋 转到负三百六十度啊，那么他就会发生这样一个旋转了。好，那么做到这里了之后，我们来看，还有一个细节啊，我们来看一下，我们来认真看一下这里啊， 好，来看一下，我们在这里的时候，是不是就可以看到后面的这些图片啊？大家看到吗？你能看得到他是不是？但是你看我们这里能看得到吗？啊？你可能说啊，被这个黄色的盒子挡着了，不是啊，我们把这个黄色的盒子背景把它给注视掉， 你看你还是看不到，是不是，是吧？好，那么我们来看一下，我们要看到后面的这个盒子， 那我们实际上对他做了一个什么效果？我们其实是让这个盒子什么往这个方向，这个方向什么呀？来旋转了一定的角度，也就是我们来看一下我们这里啊，我们来看一下这里，其实我们是让这个盒子沿着这个 x 是走，那这样子翻转了一下啊，这个样子翻转的啊，这样子翻转的，那么我们来看一下这样子翻转应该是沿着 x 走的正方向还是反方向呀？应该是反方向，是不是来看一下这是正方向是不是？如果你记不住的话，你再拿出你的左手大拇指对着 x 走的正方向， 四个手指的方向就是我们的正方向，是吧？而我们这里要旋转的是什么？我们要这样子旋转是吧？所以我们是反方向的啊， 好，所以这里我们来看一下啊，那我们接下来干嘛？我们来给他加一下啊，刚开始的时候我们应该让他怎么样？ low table， 我们来沿着 x 走方向，反方向，我们来旋转个二十度看一下啊， 哎，大家看一下，这个时候你就能看到他了，是不是？好，然后这里我们同样的也是一样的啊，那么结束的时候 它应该也是要的，是不是？好， ctrl 加 s， 大家看一下，但是你会发现它旋转的时候它怎么这样子旋转呀？这里大家一定要注意的啊，我们在这里旋转的时候，其实是可以改变改变的这个元素，它的一个什么，它的一个轴的一个方向了啊， 好，这里带自己去体验啊。所以我们应该是要先把什么，应该是先让他怎么样围着这个 x 轴方向这样翻转之后，然后再让他沿着这个歪走，所以我们要把这两个代码调一下。旋旋啊 啊，如果你学过基础的话，你应该知道的啊，我们旋转的时候是会改变这个轴的方向的，那么这样子大家看就没有问题了，理解了吧。啊，好，那么这样大家看你是不是可以看到后面的这些内容了？好，当然我如果觉得这里太大的话，你翻转的 手不要翻转的度数太多了，翻转十度就好了，大概就这个样子就好了。好，那么剩下的就是什么？当鼠标放上去的时候，他怎么他停止这样一个旋转，所以我们来给他加上一个效果啊， 好，我们加在这里吧，点上我们的 box 冒号号把，当鼠标放到这个 box 上面的时候，我要让他停止暂停他的一个，怎么这个动画是吧？好，暂停这个动画，我们来看一下怎么写哈，他有一个叫做 animation playstate。 好，我们来看一下啊，那么这个就是什么暂停动画的意思啊？好，当鼠标放到 books 上面的时候，大家看一下，他就暂停了， 是吧？啊，好，那么接下来我们要做的就是什么？给他插一些图片就可以了，是吧？好，所以我们来给他们插图片吧，我们一次性来插啊。 好，我们来看一下 i m g 是吧？回车 i m a j e s 杠三 d。 下面的图片啊，我们来选一下这个，然后我们来看一下我们要干嘛哈，我们还要给他添加一个。什么？ 添加一个宽度啊，因为这些图片都很宽，我们来给他一个两百，然后我们再控制一下这个图片的高度，我们也给他一个两百。 ctrl 加是保存好，然后我们来把这里改一下啊，这里改成二，这里改成三， 这里改成四，这里改成五六， 我们往这边移一点啊，好，这里是七， 这里是八，这里是九啊， 好， ctrl g s 保存，大家看一下，这样一个效果我们就出来了，然后我们给我们的波底加上一个什么，加上一个背景颜色就好了啊， background， color， 我们来给他一个黑色的， 然后我们把这些不需要的一个辅助线给他干掉，大家看一下，那么这样一个效果就出来了啊。 好，如果大家在做的过程当中遇到的问题的话，可以在下面留言啊，那么我们会给大家解答。好吧，那如果大家觉得有帮助的话，大家就点赞关注一下，我们后面还有更好的一些案例准备给大家啊。好吧，那么就讲到这里的啊，拜拜，记得点赞关注哦。

同学们好呀，今天咱们来聊聊 html 里超实用的列表标签， u l o l、 d l 这三个小家伙不仅能让内容更有条，利用好了还能让页面瞬间变清爽。 很多同学可能只知道基础用法，其实他们藏着不少进阶小技巧呢。先说说最常用的 u l 标签，也就是无序列表，它就像咱们购物清单上的项目，前面带着小圆点，彼此之间没有顺序之分，比如列爱好。我喜欢读书、旅行、听音乐。 但你知道吗？ u l 的 type 属性可以改变列表项的标记样式，比如把圆点换成方块或者空心圆。不过现在更推荐用 c s s 来控制， 这样样式更灵活。还有哦， u l 里面是可以嵌套 u l 的， 比如写食谱的时候，主石材下面还能列出细分配料，这样层级就很清晰了。接下来是 a o l 标签有序列表，这个就像咱们做实验的步骤，第一步第二步顺序不能乱，默认是数字排序， 但是 type 属性也能让它变成字母排序，比如 a b c 或者罗马数字 i i i i i。 更厉害的是 start 属性，比如你想从第五步开始列，就可以写 start， 等于五，还有 reverse 的 属性， 加上它，列表就能倒着排，是不是很神奇？同样， o l 也支持嵌套，比如在一个大步骤下面，再分几个小步骤，逻辑一下子就清楚了。 最后是 d l 标签定义列表，这个可能用的少一点，但在解释术语的时候特别好用。它由 d t 和 d d 组成，就像字典一样，先列出一个词，再解释它的意思。比如 html 抄文本标记语言用于创建网页，而且一个 d t 后面可以跟多个 d d 用来从不同角度解释同一个术语。 dl 还经常用来做网站的 fa 部分问题是 dt， 答案是 d d， 看起来专业又整齐。其实啊，这些列表标签不仅能让内容结构更清晰，对屏幕、阅读器用户也特别友好，能帮助他们更好的理解内容的逻辑关系。 平时写代码的时候可别图省事，都用 diy 堆砌，合理使用 u l o l d l 代码会更易化，搜索引擎也更喜欢哦。好了，今天的列表标签小课堂就到这里，大家平时在做网页的时候都是怎么使用这些列表标签的呢？有没有发现什么特别的用法？欢迎在评论区分享你的小技巧呀！

前端网页开发入门案例实战第十五集。嗯，然后我们再把这两个给他，就是换成这个函数，我们刚封装的这个函数， 这是主标题的一个标签对象，然后呢，虽然虽然这个主标题他只有了一个类名，但，但我们还是得写一个数组，因为我们对这个数组进行了一个循环， 然后我们把这个类名给它放到这个树组里面，它是只有一条数据的一个树组，然后把这个给它删掉，然后这个 subtitle 这个副标题也是同理，给它 add class， 然后把这个副标题给他放在这里面这个对象，然后再写一个数组，把这个给他放到这个数组里面去，然后再把这段代码给他删掉。 嗯嗯，这个你看我们在这个创建完这个标签之后呢，就紧接着就给这个标签就是添加了类名，所以说呢，我们可以就是说在这个 create tag 这个函数里面呢，可以同时做到这这两种 操作，就是先创建变量，然后再给这个标签呢添加类名，所以说我们可以 集成在这个 create tag 这个函数里面，而这个 add class 呢，我们还还需要保留，只不过就是说在这里面也有一个给标签添加了一名的这么一个功能。嗯，所以说我们要回到这个这个 create tag 这个 这个函数这里来，然后呢我们在这里接受一个 class list 这么一个参数，备注一下，就说 class list 是 一个 class 标签名数据库。嗯， 然后呢，这里我们就不能直接返回了，因为我们要要在创建完标签之后呢，还需要对这个标签做一个操作，做一个添加类型的操作，所以说呢，就先把 return 暂时的给它移除掉，把这个标签呢保存在一个 变量里面，就叫做 tag 变量，然后呢我们再对这个数组进行一个循环。 呃，不用，因为我们这里已经写写了这个添加类名的方法，所以说我们在这里直接调用就行。 and class， 把这个 tab 对 象标签对象放到这里来，然后呢把这个 class list 放到这里面来，你看现在就很清晰了。呃，别看这个 at class， 它是在这个 create tag 下面定义的，然后在这里去使用，也就是说先使用后定义，嗯，就会报错，这个是不会的函数，它是不会的，但是变量它是会的，我们我们一会演示一下吧， 然后我们 return， 我 们这个 create tag 这个函数呢，最终是要把创建的变量当做返回值给它返回出去的，所以说我们要把这个 tag 给它返回出去，然后点一下保存。呃， 那么既然我们这个函数它接收了一个参数，哦，不是这个，既然我们这个 create tag 接收了一个 class list 的 这个参数，所以说我们在创建函数的时候必须给它传入第二个参数，如果不传的话，我们看一下如果 不传他会什么情况，你看就会报错，就是说不能，就是这一段英文就代表着不能读取这个 let's 属性，这个 let's 属性是什么呢？ 就是你看我们在这里读取了 class 这个参数的这个 let's 属性，因为我们没有传吗？我们没有传第二个参数，所以说呢，第二个参数它是一个 on 的， 是一个 indefinite， 如果我们对 indefinite 进行一个读取 ness 的 一个操作，不管是 ness 还是其他值，它都会就是报一个这样的错误， 这个错误就是不能读取属性，然后就是这个安迪犯的吗？不能在这个安迪犯里面读取这个烂死属性。所以说呢，我们要传入一个第二个参数，我们把这个，呃，把这个内名给他传过去， 把这个主标题的也要传过去，这样只需要三行代码就可以了，只要三行就能完成创作。刚才还需要很多行代码的，现在行数逐渐减少，代码代码字数也逐渐减少， 然后点击点一下保存，现在呢就是还是这个样子，还是没有变化，控制台呢，也没有报错了，因为我们把这个数值已经传过去了， 这个就是尽量简化嘛。嗯，这个注视他前面没有加空格，稍微有点强迫症。还有就是这个 这个函数啊，他这个接收的参数，他是这种依次排列的，有多个参数的，这样看起来会比较乱一些。就是说假如说我过了几天我再回看一下，然后需要 需要看这个函数在调用的时候需要传的都是什么参数。那第一个他是就是说创建的标签名称，第二个就是 classlist 的， 我还需要根据这个数据进行一个分辨，所以很麻烦，所以说呢，我们用另一种数据格，数据类型，我们把这个， 把这个参数 create tag 里面的这个函数接受一个对象， properties 只接受一个参数，这个参数呢？它是一个对象，我们把这个，比如说，呃 properties 点 tag name， 这个就是一个，它这个对象里面有一个 tag name 属性，这个 tag name 呢就是标签的名称，要创建的一个标签，然后呢 properties 点 classlist， 然后它还有一个 classlist， 这个属性就是说给创建的标签添加一个类名， 现在我们就是这样， purpose 点 tag name， purpose 点 class list， 把它传就是做成一个对象的一个类型， 然后呢在调用的时候我们就不能这样调用了，我们得就是我们先创建一个，先写一个吧， 等于 create tag， 这里我们就得传入一个对象的一个数据类型了，对象呢它有一个，就是说你看这里 purpose 这里有一个 tag name， tag name 属性，然后呢这个属性指定是一个创建的标签名称， 然后呢它还有一个 classlist 的 这么一个属性，这是要添加的一个类名，我们把这一坨放到这里来，现在我们点一下保存， 然后我们对比一下，对比一下，你看这个对象它是有它，它是能知道，就是说，呃，我们 这个这个数据它代表的是什么意思？比如说这个的 div 就是 它个 name， 就是 标签名称吗？这个数组呢，就是通过这个属性名就知道它是一个，就是类名列数组，所以说呢，它相比于这个 这种传餐方式，嗯，这个会更加的，嗯清晰，嗯易懂一些，这个看起来就乱乱的，这个这个虽然他多了一些字，但是他能知道这些数据都代表的是什么，不至于就是说过一段时间再回看的时候就 看不懂这些都是什么。所以说呢，对象呢是比较好的一个餐，就是类型吧， 参数类型，我们把这个给它删掉，然后呢再把这些给它修改成对象，如果你不修改的话也不行了，因为你这个函数它已经接受一个对象了，你还这样传的话，它就会报错， 然后我们看一下它报错信息吧，你看说不能独取属性 n 还是一样的，因为我们 因为在这里这是一个对象，它读取不到这个 class list 的， 因为 第一个参数它是一个呃字母串，字母串它不是一个对象，它读取不到那个 class list 的 那个属性，所以说呢，就没就获取不到这个数组，嗯，我们得给它修改成这个对象的格式， 我们再创建一个 create tag， 呃， tag name span class list 是 一个数据库，然后把这个删掉， 嗯，这个副标题我们也要改一下， 然后把这个删掉。现在这个不止，就是不止 清晰了，而且呢，他这个代码的结构啊，也都非常的统一，不像刚才乱七八糟的，所以说呢，嗯，使用对象还是比较好的， 这是他未来可能有这么一种情况，就是说我在创建这个标签的时候，我还不知道他的类名有哪些呢，也就是说我不想传这个 class list， 比如说我们把这个，我们先把这个给他保存一下， 然后比如说这个副标题这里，我现在不知道他的类名是什么，我要给他删掉，我还不知道呢，然后点一下保存， 那么现在这里就不会出现东西了，然后在控制台这里面就会报错，不能读取属性，然后，嗯，不能在 on 的 on 的 里面读取属性，然后读取的是 let's 属性，这个是因为，呃， 我们在这里，我们在这里输出一下这个 ctrl 点 log 这个 class list 第一和二个它是有的，是因为我们我们只把副标题的给它删掉了，副标题的呢？第三个它是 anifun 的， anifun 的 它不是数族，它，所以说呢，它就 他就没法去读取这个 let's 这个属性，你看报错了，所以说呢？嗯，针对这种情况，假如说他没有传这个，呃，他没有传这个 class list， 我 们该怎么办呢？所以我们在刚开始， 刚开始的位置要对这个，要对参数，就是 对参数设置，呃，为参数设置默认值， 没有指定是默认值，就是什么默认值，就是没有指定的时候，我们需要，需要让这个参数它是一个什么值，比如说，呃，挂它个 name 就 等于 purpose 定这个，我们我们把这个对象的这个 tab 内幕保存在这个这个变量里面了，相当于一个，呃，另存吧，另存为。然后我们在使用的时候呢，就直接使用这个变量，不使用它， 然后呢这个 classlist 也是一样， classlist 等于 properties， 等于 classlist， 然后在使用的时候给它使用这个。嗯，为什么要多此一举做这个呢？是因为我们接下来要对这个参数啊进行赋值默认值， 我们要对这个 classlist 这个变量进行一个判断，就是说判断它是不是一个数组。呃，这个判断呢是我们一个新的知识点，我们 到下面去单独做一个小小的案例，嗯，因为如果我们现在保存的话，就是说他这个页面他这个控制台他会报错，是因为我们这个副标题这里没有给他传这个克拉斯利斯的属性。所以说呢，我们先先把这个 glass list 给它还原一下，给它设置回去，把这个给它放到这里来，然后呢我们来看一下，就是说判断语句该怎么用？ 呃，第一步要写一个关键字，就是说判断语句的关键字，就告诉浏览器我这个我接下来要对一个变量或者一些其他东西进行一个判断，就是说 if 就是 一个判断， if 就是 一个判断，然后它后面跟着一个 圆括号，最后是一个花括号，还是很熟悉的一个三个结构，这个这个花括号这里面就是 判断正确时执行的代码，嗯，判断正确，我们在哪里进行一个判断呢？在这个圆括号里面，圆括号里面就是说，嗯，进行判断， 进行判断，就是说这里面的这个代码他要求有一个就是执行结果， 就跟这个之前介绍这个循环负循环的时候是一样的。第二个这个 第二部分它要求有一个执行结果，就是处或者 false， 如果是处的时候，那么就继续执行循环，如果是 false 的 时候就终止循环了，那么这个判断语句这里还是一样的。如果 如果圆括号里的代码执行结果是处，就执行 花括号里的代码。我们先看只有处的这个情况， 我们可以就是说不用写任何代码，直接写一个处这个数据类型，因为它是一个不尔值吗？我们来看一下，比如说为处的时候就代表说执行正确。嗯，我们现在保存一下代码， 你看这个控制台这里就输出了一条执行正确的一个消息，一个信息。那么如果我把这个处改成 false 呢？ 你看这个控制台里面就什么都没有输出，那是因为他不符合这个，这个不符合这个处这个条件，所以说就没有执行这个。而且呢你看这个 vs code， 他 很智能，他就说给这个代码弄成一个灰色的了， 灰色的呢就代表说我永远不会执行这段代码，因为我们这里已经写死的是一个 false， 所以 说呢，他就不会执行这个花括号里面的这个东西了。 那么这个为 false 的 时候，他他也是一种情况呀，为处是一种情况，为 false 的是又是另一种情况，他他这个我们在判断的时候总有总有，就是在正确的时候， 正确的时候执行 a 这一部分的代码，为执行判断错误的时候就执行 b 这一段代码。所以说呢，这个当这个结果呢是 false 的 时候，我们在哪里去写关于就是判断错误时的一个代码， 这个就要在这个花括号这个这里写一个 else， 然后再写一个花括号，这里面是判断错误时 执行的代码，然后我们再输出 console 点 log 执行错，哎，我们要写成字母串啊，执行错误，现在我们点一下保存，你看 这个控制台这里面就显示执行错误，而不是说执行正确。它有两种结构，一种是第一个花括号，就是说是这个圆括号里面为促使的一个呃一个执行的代码。第二个花括号呢，中间要有 else， 是为 false 式执行的一个代码。嗯，通过这个英文这个字面意思啊，也也很容易理解，就是如果这个圆括号里面是 是处，那么就执行这一个，否则 else 就是 否则的意思，否则就执行这个。嗯，这就是这个判断语句的一个基本使用。 现在我们这里面写死的是一个布尔值，但真实情况呢？它是很复杂的，比如说要对一个变量进行一个判断，比如说创建一个 name， 呃，张三，我们要对这个内幕进行一个判断，因为这个，呃，这个，这个中划线不要管啊，不要管这 vs 扣的一个那什么，因为这个内幕它保存的是一个字母串，它不是一个 true 或者 false， 这该怎么办呢？ 这个不用担心啊，我们点一下保存，看看控制台里面输出什么，他输出执行正确，也就是说他执行了这段代码，也就是说这个内幕他是处的一种情况。 嗯，为什么会是这样呢？就是他这里明明是字母串，但是他为什么这里会被判断成一个处呢？这是因为这个，呃，浏览器会对数据类型 自动转换，什么意思呢？就是他会把字母串张三转换成布尔值。处 虽然说就是转换，但他不会不会影响这个内幕变量，这个内幕是该是张三还是张三，他不会说把这个处修改成复制给这个张三，这，这是不会的。比如说我们在这里输出一下这个内幕，这个变量， 你看他输出的还是张三，虽然他说他他自动转换成了处，但是他不会修改这个变量的这个值，不会修改这个值，他还是张三。 它这个自动转换它是有一个，就是有一些特殊条件的，就是说什么时候转换成 true， 什么时候转换成 false， 也就是说什么时候走这这个代码，什么时候走这个代码，它是有一个要求的。嗯，这个要求也很简单，就是说空字符串， 就是说这个双引号，一对双引号里面什么东西也没有，没有任何的字，就是空字母串嘛，它会被转换成 false。 我 们来看一下，我们把这个 name 改成这个空字母串，里面什么字母也不，也没有，就会被转换成 false。 那 我们看一下它输出了执行错误，执行错误也就说走这个代码了，那么就会说这个 name 它被转换成了 false。 但凡这个这个双引号里，这里面他有任何的字母，不管是多么大多么小的，他都会被转换成处。你看执行正确，走这个代码了， 这个就是空字母串的一种情况，他还有呢，就是零会被转换成 false。 零就是数字吗？数字零。 比如说我们先把这个 name 就 改成零，先先不用管这个 name， 这个变量代表什么意思，我们就给它指定成一个数，数值零，点一下保存，你看，哎， 是不是没刷新啊？ 这个零，这个零。怎么会？我们检查一下看，输出一下这个 name， 它是一个什么？这个 name 这个变量保存的是什么东西？它保存的就是一个零。 嗯，为什么会这样呢？ 呃，我们输出先先保存一个一二三，刷新一下页面， 这个一二三执行正确是没问题的，因为它不属于零，不会被转换成 false。 但是为什么我这里修改成零之后，它还是正确的呢？ 我们把这个指定成零，你看这个时候他就执行错误了，说明这个零他被自动转换成了 false， 然后他走这里了。但是我为什么把这个内幕， 虽然我们这个内幕保存的是一个这个零， 按道理来说这个零会被自动转换成 false， 也就说走这个执行错误的这段代码，也就是但是他实际控制台这里面被 走了，这个代码执行正确，也就是说这个内幕他被转换成了处，嗯，我猜他可能是跟这个中划线，也就说 vs 扣的这里面有关系。我们把这个变量名呢改一下，就改成一个叫 test 的， 不叫内幕了。 泰式的它没有这种影响，然后保存一下，嗯，现在就是执行错误了。嗯，它为什么会被刚才那个内幕？它是 这个内幕，它应该是有什么？在 vs code 里面有什么作用吗？这个我也不太清楚，就是说少用内幕吧，少用内幕， 反正这个零它会被转换成 false， 只要是非零值，哪怕你是零点一这种小数位的，它也是正确，也也也不会被转换成 false， 会被会被自动转换成处， 然后呢，就是还有 and 和 not 也会被转换成 false， 我 们把这个 修改成按理犯的，复制成按理犯的这个值，你看这里就是错误，说明他被自动转换成 false 了，然后闹呢？也是，同理，也是执行错误， 但是呢，呃，我们看一下这个空对象，空对象它是一个什么情况呢？虽然说这个对象里面一条属性也没有，但是它的值它的一个转换呢？是正确，也就是说会被自动转换成处， 虽然说他是一个空的，但是呢，嗯，这个现在还不太好解释，就是说这个空对象他会被转换成处， 这个不要跟这些弄混了，空对象会被转换成处，同理呢，这个空数组他也是会被转换成处，你看也是执行正确， 这就是这个自动转换的一个基本要求。嗯，基本情况， 嗯，这个判断语句，这个就基本上就是这样了。接下来就是说再介绍一个跟判断语句相关的一些，就是， 嗯，关键字吧，叫做，也也叫做这个预算符。什么就是这个 大于号，小于号，这种呢？咱们就之前已经介绍过了，这个没什么难点。他还有一个等于号，就是说判断两个数值是不是相等，比如说二和三是不是相等， 你不能直接写一个等于号，写一个等于号呢，他代表的就是这种给变量赋值的这么一个操作，一个等于号，他是给变量赋值用的，你如果直接就是回车呢？他报错，先不用管这个报错是什么， 然后要想判断两个数值相不相等，我们必须写三个等于号，写三个等于号 回车，他返回 false， 就 代表说不想等二不等于三，这是正确的。比如说三等于三，他返回处 这个就是对的，这个就是大于号，小于号，还有嗯，就是等于号之间的一个区别， 然后它还有一个关键字叫做 type off， type off 它是什么呢？ type off 它可以用来判断你这个变量它是什么类型的， 比如说，呃，比如说 type off， 我 们张三判断一个字母串，张三他返回的是一个 spring， spring 就是 字母串嘛，我们这个张三也确实是一个字母串类型，所以说呢，他返回的是一个 spring 类型，比如说我们再判断一个 一，一百二十三，一百二十三是数值 number， number 就是 数值嘛，然后再判断一个， 嗯，那那会返回 object， object 是 对象，这个嗯，大家忽略，不用管这个，这个属于进阶内容，不用管这个，然后 type off， on the fly 的， on the fly 的， 就会原样返回的是一个 on the fly 的。 还有一个你，你不能就是说用来判断， 比如说我们就判断一下这个空对象吧，空对象他返回的是 object， 这很正常，因为是一个对象嘛， object 就是 对象的意思，那么这个闹他也返回的是一个对象，这个不用管，不用管，现在是入门阶段，不用管这个。 然后还有就是述祖，虽然说是空对象，空述祖啊，但他都是述祖和对象，他也返回的是一个对象，这个 你就记住一句话就行。在这个 g s 这个语言里啊，对象述祖，不管什么它都是对象，虽然说我们叫述祖，但它都是对象， 嗯，这个也属于间接内容，不用管。还有一个就是 type off， 嗯， function， 比如说 f o， 这是一个函数吗？就你看这就创建了一个函数 type off， 判断一下这个函数，它返回的是一个方程，就是这个方程它就很准确了，就是说返回的是一个函数， 嗯，方程就可以，反正就是这个 type off， 它可以判断你这个数据类型，它是什么类型，是字母串类型还是数值类型？反正 type off 就是 这么一个意思。嗯， 在判断的时候也是经常用到的。嗯，我们把这些测试代码给删一下。

will be close to。 别说水果，只是应说。