html百分比状态条怎么做
好，明白了，那我继续跟他往后面分享啊。 啊，我们刚才跟大家说到了这个自定义属性啊，哎，感觉好像也很麻烦，他里面会有三个属性啊，会有三个属性，那么他的这个优势在哪里呢？他肯定是有他的这个优势的啊。 好，不知道大家平时在写的时候啊，有没有碰到这样的一种情况。我比如我的这个结构。好，来，我先写一个。嗯， 我想一下啊，我的这个地方。好，我结构写简单一点吧，结构也没有啥第一的啊，主要就是针对的一些样式。那我现在呢我需要实现的是一个什么渐变背景， 哎哎，渐变背景会有一个过渡的，一个啊，一个效果渐变背景设过渡。 我们平时看到的这个颜色呢，只有一种颜色啊，比如红色到黄色过渡，哎，可以的，但是渐变背景过渡好像不可以吧，你看啊，我我们先先写一个呗，不知道可不可以先试一遍啊？ 好，它的宽高呢？是一个两百。呃，渐变颜色嘛，那既然用到了渐变色的话，肯定还是通过这个 background 的这个属性啊。好，那我这里呢用到了这个线型渐变。 好，我这样定义啊，我在 rot 里面我定义了一个两种颜色，一个是 a， 好，一个粉色啊，再来一个 b， 好，红色的，那我现在需要啊，我先把它的这个颜色呢，我现在这样获取到啊，它的这个颜色呢？就是这个啊， colora 它的这个颜色啊，第二种颜色， 来，我们到这个浏览器这边先看一看啊，是不是粉色到红色的一个渐变呀？好，那我现在需要效果是什么呢？我的鼠标移入到这个盒子上面的时候，这个渐变颜色 色它发生了变化，哎，但是它需要有一个过渡的一个效果。好，你看啊，我们的鼠标移入到的话，会给它添加一个 hover， hover 的话，好，那这个 a 的颜色呢？我希望哈，咱们写一个啊，蓝色的。 好，随便写一个啊，绿色的。你看我这样定义，定义完了以后，用它的这个背景颜色啊，会发生一个变化，来我们页面先刷新， 鼠标移入到这个盒子上面的时候，发现颜色是变了啊，从这个蓝色到绿色吗？但是发现了一个问题，就是他很变得很突然，他没有过度的效果，他没有说你鼠标移入以后他 颜色是慢慢慢慢的过渡，没有吧？哎，一说到过渡，大家肯定会立马想到，这个不是里面有一个过渡的这个属性吗？你给它添加进来呀。好，咱们把这个过渡啊给它添加进来。呃， c 型这过渡吧， 好，过度呢，我就写个 background。 好，这个 好，你看我这样添加了以后啊，来我们页面再来发现啊，鼠标移入发现没有还是没有这个，哎，过度的效果吧， 因为他是不支持这个背景渐变色啊，渐变色这个直接过度变化的，所以我们现在看到的其实就是两针之间的这个变化很突然， 那如果说我们要实现这个渐变，它的这个颜色过度呢？哎， property 它是可以的啊。好，你看我们怎么来改造一下 啊？这个呢，我就不需要了。 好，直接把这个拿过来啊，咱们，哎，我拿哪哪边的，咱们拿这个吧。 好，下一个。哎，一个 a 一个 b， 是，这我们定义了两个嘛。好，这个我就写一个，什么粉色的 哎，一个粉色好，一个红色，我检查检查。啊，好，难道我们这样定义完 ok 了吗？好，保存啊，回到页面这边再来刷新看 看。哎，好像没有吧，好像这个颜色跟刚才没有任何的一个变化呀，那我们还要在哪个地方改改一下呢？ 大家应该看到了，这个地方颜色好像是一个红色的，肯定感觉好像就有点不对，对不对？是的啊，这地方不对，其实我们这个地方他要改变的是谁？他改变的并不是说是针对的这个 background 的这个属性啊，哎，不是针对的他，他应该针对的就是我们 看到的这个颜色啊，颜色的一个变化，所以你看应该怎么来改啊？因为我现在要改变的就是这个 color a 到和这个 color b 它的这个颜色的一个改变嘛，所以我们可以直接的这样啊，你的这个时间， 哎，你要改变的是那个谁？好，第二个啊，再来一个。嗯， 那也就是我们要，哎，鼠标移入的时候，我们要改变的就是这个 color a 和 color b 不是针对的这个 background 的这个属性。好，来我保存啊，保存，回到这个页面这边咱们再来刷新，仔细看， 看到没有，是不是你的鼠标一入的时候，他就不是很突然的这个变化吧，是不是可以看到这个颜色他会有一个过渡吧。 好，那有小伙伴不相信的话，我把我，我们把这个属性，我把 他那个再展开。啊， 看到没有，是不是又还原了吧？ 对，这个就是自定义属性啊。哎，它的一个优点， 它是可以支持救助这个渐变颜色呢，它会有一个过渡的一个效果 哎，自定义变量，因为我们前面定的那个 background 啊，如果说是一种颜色啊，是可以的，不需要用到它，但是如果说碰到这个渐变颜色不行，哎，渐变色不行， 所以它是支持啊，一种就是这个颜色啊，变换到另外一种颜色，我们通过 这个 probt 呢，哎，就可以实现渐变背景色的一个过度动画了。其实这种场景还是蛮多的啊，例如我们啊这个地方有一个按钮啊，默认是一种颜色，当你的鼠标移入的时候啊，他会慢慢过度变成另外一种啊颜色是不是 其实这种常见还是蛮多的啊？ 对，如果我们没有使用这个自定义属性的话，他就只是两种颜色的一个切换，他没有这个过度的一个效果 好，这块有没有有问题的 啊？我们刚才看到了那个有颜色啊，类型有颜色啊，啊，还有这个角度啊，对不对？好，我们继续往后面来看啊。嗯，好嘞，我们看一下这个百分比吧，百分比平时也会用到的比较多啊， 比如我现在要实现一个进度条，哎，大家现在脑海里面先想一下咱们这个进度条啊它的这个效果呢？嗯啊，比如我们也写一个鼠标移入的一个效果吧。好，那我的 结构啊，结构还是很简单的。 好，我的结构呢啊，还是这个 a box 好，我希望鼠标移入到的时候我们的这个进度条啊，它是一个零啊，零到百分之这个百的一个效果。 那首先呢，咱们先把这个进度条啊，我先样式啊，咱们咱得先写一个了 啊，来一个。什么来一个啊？这个，哎。这个高就不能按哎高，我写个三十吧，太高了，那个正方形了， 哎。圆角好，来个边框吧。 好，那我现在需要的效果是什么呀？我现在需要效果是，呃，就是我们的这个鼠标啊，移入到上面的时候啊，他会有这种颜色，哎，从零， 也就是他先是一个透明的，然后你鼠标移入到上面的时候啊，慢慢慢慢他变成一个啊红色啊或者其他颜色。 好，那么大家先想一想你看我们这一块应该如何来实现呀？哎，最常见的方式就是通过这个背景的颜色 嘛来配合百分比的方式啊啊来实现，好，那么首先你肯定得要有一个颜色吧啊你的这个背景颜色啊， buy go ground。 好，我们还是通过这个线形渐变 好。角度啊，因为从左到右嘛角度好，我来一个。什么颜色呢咱们来一个什么颜色好？红色的吧 啊这个颜色好，我后面稍微的给他来一个过渡啊，来个九啊，然后就是我们看到的这个透明的颜色 好，也就是我们目前呢看到的是啊这个红色 到这个透明颜色啊好，然后他们之间呀你可以哎也给他来一个这个百分比，比如各自占的这个比例啊百分之，好，我随便，我先随便定一个百分之五十吧， 哎，百分之五十，那么最终我们看到的效果它是这样的，哎，一半一半嘛。好，那你的这个鼠标移入的时候我是希望这个红色啊占满，哎，占满它， 你看应该怎么来实现， 我们同样的是要先定一个啊这个变量吧，制定一个属性啊，哎，让他的这个百分比呢，先是零，然后你的鼠标移入的时候他变成了 一个，一个多少？百分之百，是不是 好直接把它拿过来啊，哎，当然这块肯定是要那个稍微的改一改啊，它的这个类型也不是颜色啊，这个也不是啊，这些呢，我都要改一下， 好，随便写一个名字了。好，然后呢，他的这个是多少？这个百分比吧。 好，那么我现在需要的效果是我们的鼠标移入的时候，它的这个值呢，就变成一个百分之百，对不对？好，那我现在啊，咱们给它来一个啊，鼠标移入，哎， hover 啊，也就是它的这个值啊， 应该变成一个，哎，百分之一百，好，你看我这样定义完了以后，相信大家肯定会有想法啊，哎，我们哪个地方要改一改，有没有知道的那个小伙伴可以在评论区可以回复一下。哎，我哪，我这个地方我们这样定义肯定是不对的，因为 你的这个鼠标移入以后啊，你看他没有啊，我们应该怎么来改呀？ 呃，能不能讲一个什么骰子旋转的这个动画？好，有机会的话，那个咱们公开课啊，准备了，以后有机会可以跟大家来聊一聊。好，我刚才说到的这个问题，哎，有没有小伙伴知道的，你看我哪个地方 要改一改？跟咱们前面聊到的，哎，你想一想，你看我这个地方我们定义的肯定是不对的， 哎，应该怎么来改？ 也就是我们这个地方地的这个百分之五十的这个值，他肯定不是一个固定的吧，对不对？你看啊，如果说针对于这个值不是特别清晰的话， 好，我们在这里面呢，可以，你看如果说我要发生变化，我把这个值啊，我自己手动的来改，可不可以啊？那就可以手动的来改， 你看也就是我这个地方我要获取到的就是这个自定义属性的啊，这个名字，对吧？ 好，他也是一样的啊，我们把它也改变一下。 好，我这样添加完了以后来我先保存，大家看看还有没有什么地方要改的。 对，因为背景颜色啊，后面的他的这个，哎，他不是一个固定的，他是通过自定义变量百分比设定的这个值啊，好，来我页面先刷新啊，哎，看到没有， 你鼠标一移入的话，他立马变成了一个百分之百，所以咱们还需要调整一下。怎么来调整？能不能有让他有一个慢慢，慢慢是不要过度的一个效果，咱们还需要给他添加一个过度吧，你看过度应该怎么来？ p e 啊，哎，你看过渡这个地方我们应该怎么来写呢？ 对，哎，难道也是我们平常这样写的吗？ 好了，我这样先定义啊。好，来我们到页面刷新。哎，看到没有，你的鼠标移入以后跟刚才你添加的这个过渡好像这个属性添加了没用吧， 所以你看过渡应该怎么来写，这样写肯定不对啊，我们因为现在我需要他的这个效果，是你鼠标移入以后他会有一个过渡，让他从零到百分之一百是有一个过渡的动画，所以我们在这个地方就不能就应该是怎么来来定义啊， 是应该是这个它吧，是不是它的这个值啊？对不对？哎，定义属性的这个变量对不对？哎？来设定这个过渡动画， 来，你看我这样写完了以后啊，我们到页面再来刷新好，鼠标一入的时候是不是就会有这个过度的效果就出现了？从零鼠标一入，哎，它会到这个百分之百， 好，这块有没有有问题的？ 对，这个背景颜色啊，是默认值呢？是零，你的鼠标移入以后，他要变 成一个百分之百，然后呢我们需要给他添加一个过度动画，要不然的话你的鼠标一移入，他立马变成一个百分之百，他没有这个过度的效果。但是我们在设置这个过度动画的时候呢，哎，这个时候你就要想清晰啊，他是通过自定义变量百分比设置的这个啊过度动画， 其实大家现在可以想一下啊。嗯，我们平时见到蛮多的那种像，呃，什么加载动画呀？啊，等一会我跟大家来写一个吧，哎，来写一个那个加载动画啊， 其实大家现在心里面可以想象一下。好，我先评论一下吧，刚才跟大家分享到的有没有有问题的？ 哎，这个是百分比啊，其实不管是什么，其实实现的这个思路啊，都是一样的角度啊，百分比呀，对不对？
粉丝1408获赞6446
相关视频
13:38查看AI文稿AI文稿大家好，这个视频呢主要带大家来做一个进度条的效果，这里我们主要运用了 css 单里面的动画， 布局上的话，就简单的应用了这个 green 的三格布局。当然这里呢其实也没有什么特别的布局，大家用这个传统的 div 加 css 来做，又或者是这个 fres 弹性和来做呢，都可以的。不过这里主要就带大家来熟悉一下之前说的这个 green 的布局哈， 还有下面这个进度条的这一个百分比呢，我们是用这个 gs 来获取的。好，现在呢我们就正式来写下代码， 这里呢我先写上几个 div， 第一个 div 的话就主要是放我们这个进度条的，然后第二个 div 的话放的就是我们这个百分比的这个文本框。这里简单给大家来分析一下我们的一个思路，这 假设就是我们的一个网页的一个四口，我们可以控制一下我们这个波点呢，他百分之一百的一个四口宽度和高度，所以这里的话就是我们这个波点的一个可视区域，我们就可以在这个波点上面呢就画上一个三格这么一个盒子。 然后呢我们再控制一下这个三格格子呢，让他变成一个一列两行的这么一个两个三格的格子哈，然后上面这一行这一个格子的话，我就主要放这个 divvfa 的进度条的这个 div 在里面， 这个 f a 这个 div 呢，我主要就让他画出一个边框出来就可以了。然后呢他里面的这个三的这个 div 的话，我就让他填充一个背景颜色，他是有一个背景颜色的，但是呢我们需要通过 css 三来控制一下 里面这个 div 它的一个宽度的变化的话，哎，这个时候的话进度调的效果就出来了。然后下面这一个 div 为 nav 的这个 div 的话，我们就放这个百分比的这一个文本框， 我们再可以控制一下这个文本框哈，控制他在第二行里面进行一个水平和垂直的一个居中，然后里面的数值的话，我们就通过 gs 来控制一下就可以了。现在来学一下这个 css， 先控制一下这个波点，让他的一个宽度呢，百分之一百的四口宽度，高度的话百分之一百的四口高度，给他一个背景颜色呢黑色， 再让他变成一个古蔺的这么一个盒子。然后呢我们要画一个两行一列的这么一个格子出来哈，先控制一下他的行呢，就是这个古蔺的 template rose， 第一行的话给他 他的一个含高是二十五个像素，然后第二含的话就一百三十个像素，再来控制一下他的裂裂的话，就是这个 古林的 templet columns， 我们只是一列这一列的话，就给他一个三百五十个像素的一个列宽，所以现在的话，我们呢就已经在这个玻璃这里的话，就画了一个两行一列的这么一个三格盒子出来，这个盒子的话他是一个两行一列的 内含，他的一个含高就是二十五个像素，二十五个 ps， 然后第二含的话他是一百三十个 ps， 就这么一个三格盒子，但是呢我们还没有控制他的一个水平和垂直居中，对吧？这里我们就控制一下他的一个水平垂直居中啊 的话，他水平就可以剧终，然后呢 aglai santa 的话就控制一下他的一个垂直剧中。这里呢，我们还要对这个两行一列的这两个格子的话，给他命个名，指定一下他这个区域的一个名字啊， 就是这个 green 的 temple earlier， 然后的话他的名字呢，第一行这个格子的话就叫 diy 一，然后第二行的话就叫做一个 diy 二吧， 给他缩进对过来。好，这两个格子命好名之后的话，就要把它分配给我们这个 div 了，对吧？ 我们就先拿到这个 fa， 这个 dav， 就给他指定一下这个规定的 are， 让他就指向我们这个 dav， 再给他一个宽度和高度呢，就刚好站满第一行哈， 高度就二十五个像素，他这个三百五呢，刚好就是他这个列宽，二十五的话就他第一行的行高，刚好是站满这一行的。 再给他来个波的边框吧，给他个两个像素的实线的紧细细的一个边框，然后呢做上个圆角，给他给个十个像素，然后给他一个波三斗，这么一个阴影 位于呢为零，然后扩散的话就十个 ps 颜色就白色。先来看一下效果哈。 好，现在的话就这么一个布局，我们把网页放大一点，再来处理一下里面这个进度条的一个显示的一个效果。我们这里就拿到这个三线，他的宽度，我们一开始给他一个百分之一百的高度，也是 等一下的话再用动画去控制一下他这个波的瑞典也给他十个像素。盒子的这个阴影呢，也给他加上吧， 再给他加上一个背景，这个背景的话，我们这里用的是这个渐变颜色， 而且是让他向右边的颜色的话，就这么两个颜色哈，我们现在就来看一下现在的效果长什么样。刷新，哎，这个进度条里面这个颜色呢，他就显示出来了，再来做一下这个文本框这一个的样式哈，现在看起来呢实在是太丑了。 先拿到这个 mav 这个 div， 然后给他指令一下他的一个格子，他的格子的话就是这个 div 二，对吧？再控制一下这个 文本宽他的一个样式哈，拿到这个文本宽先宽度呢，给他个六十个像素，高度的话，给他一个三十五个像素。背景颜色就给他一个黑色，也是零零零 里面的这个字体颜色呢，给他一个白色，还有上面这个圆角和阴影呢，也给他来上一份这个阴影，给他个五个像素就可以了。这里边框呢还要给他加一下， 给他一个一个像素十下，然后呢也是紧细细细的再控制一下他的一个字体的一个大小哈， 二十个像素字体的一个对齐那三的好来看一下效果。这边刷新呢，这个文本框的话就长这个样子了，我们 现在的话就控制一下他的位置，那应该控制他在哪个位置比较合适呢？我们参考一下这边啊，应该把它放在这个进度条的正下方这里，对吧？而且他们之间呢是有一定的间距的， 我们这里呢打开这个控制台，然后把这个雷奥里面这个网格线给他显示一下我们这个书宽，这个文本宽，他现在其实呢他是在我们第二行这个格子这里的，对吧？我们刚才自己给他分配在这个 div 二这里了， 我们现在呢就需要他在这一行这一个格子里面呢进行一个水平垂直的居中，这样子的话他的位置呢就合适了。我们现在呢就回到代码这里 找到这个 nav， 我们要控制元素在一个格子里面进行一个水平垂直的聚众的话，我们就用到这个 justify self， 就是元素在这一个 格子里面进行一个排列哈，让他一个水平居中，然后垂直居中的话，就是这个 align self 这里的话让他一个垂直居中，也是 santa。 我们再过来呢，一刷新的话，哎，这个时候他的位置呢就比较好看了， 我们现在就来控制一下这个进度条的它里面这个背景颜色的一个动画效果。这里的话其实也很简单，我们只需要控制这一个有背景颜色这个低于他的一个宽度就可以了，对吧？我们这里试一下， 假如说我们找到他，他的一个宽度现在是百分之一百吗？我给他手动这里改成一个百分之五十，这边一刷新，哎，就只剩一半了， 让他这里的话变成个百分之八十呢，哎，他就变得长一点了。所以呢，我们这里只需要做一个动画， 控制一下这一个点于他的宽度进行一个变化呢，这个动画效果呢就可以实现了哈。我们就来学一下这个动画，找到这个 sun， 在他下面这里呢做上一个 akifis， 给他的名字呢叫 asham 吧， 他百分之零的时候控制下他的宽度呢，直接让他从零开始， 他百分之零的时候是没有的啊，然后呢百分之一百的时候就控制他的宽度呢就和负极百分之一百就刚好撑满就行了。 再来把这个动画呢给他绑定在这个上，这里给他来上一个 n 的魅损，然后呢绑定我们这个 s 给他三秒钟，然后呢循环播放我们上面这个宽度就不不需要了，给他去除 除掉保存，然后呢我们一刷新的话，这个动画效果呢他就出来了哈， 现在呢就剩最后一个任务了，就好像这边这样子，把这个进度条呢，把它这个直动态放在我们这个文本框这里，对吧？看一下这里呢我们用这个 jas 怎么来处理一下？来写一下这个 jas 这里的话我就直接写在锅底这里了。 先给大家简单来分析一下，我们需要拿到这个进度条一个动态的一个数值哈，首先的话我们是不是需要拿到这个 div 为 fa 这个 div 它的一个宽度，对吧？首先拿到它的一个宽度，然后呢再拿到这个 idvs 三啊，也就是我们做了背景颜色的这个点于它的一个宽度，只不过呢这个宽度它是动态的，我们需要不断的去获取。 拿到他们这两个宽度的话，我们就让这个闪他的一个宽度哈来除以这个 fa 他的一个宽度，这样子的话是不是就可以得到这个进度调他的一个数值了，对吧？这里先声明一个对象呢，放这个 div 为 fa 这个 div 的 通过一个 document 点上一个快递 st letter， 然后把他的一个 dav 给他传一下，这样子的话就拿到我们这个 fa 这个 dav 的对象，把这句话直接复制一份， 这里改成 oson， 然后呢把这个 stan 他的一个 diy 传一下呢？这样子的话我们两个 diy 他的对象呢都拿到了这里，应该怎么样拿到他们宽度的一个笔直呢？说我们之前说过的一个 offset with 这么一个 属性吗？其实这里用这个属性的话是不对的，因为的话我们给这 div 给他设置了一个边框，这样子的话他会包含这个边框的话，算出来是有一定的误差的，所以呢这里我们应该要用这个 climate， 这样子的话他就不会包含这个边框哈，我们让这个 ostom 他的一个 kind of with 除以这个欧发的他的一个 kind of with 这一个笔直的话，就是我们进度条下面的这一个笔直，我们只需要动态的获取到，然后呢放在这个稳稳宽这个输入宽这里面呢就 ok 了。 所以这里还要把这个文本框这个对象给他拿一下哈，这里复制，然后改一下，改一个 oimp 这个名字，然后把他的 id 传进去，这样子的话我们文本框这个对象呢就拿到了这里我们需要 动态获取到这个宽度的笔直，并且把它写进这个文本框。这里的话我们必须要来一个定时器哈，来一个定时器，然后呢里面给他来上一个方法， 这里我声明一个变量就专门纯这个笔直的，这里的话我们就用这个模板字符串来写一下吧，这里我们就要把这个笔直给他放进来了， 把我们刚才的这个算出来这个笔直，然后面呢给他加上个百分号，这个定时器，我让他每三百个毫秒执行一次，再打印一下，看一下我们这个呢这个数值有没有正确给获取到哈。 好，我们现在刷新，然后的话打开这个控制台，哎，这个时候我们发现哈，这个数值我们就拿到了，只不过呢现在这个数值呢比较长，我们还要给他处理一下。这里有 由于呢我们是拿这个百分比的，拿百分比的话就相当于除以一百了，对吧？所以呢这里要给他重回个一百，重回一百，现在再来刷新看的话，他还是很长的，但是呢整数部分已经出来了，所以呢我们现在对他进行一个取整就可以了。 曲整的话，这里呢直接给他来上一个 party 的方法，这个方法呢我们就可以对小数来进行一个曲整了，大家这里留意哈我们的模板制服串里面呢，可以直接嵌套方法的 这里保存，然后我们刷新的话，哎，这个整数这个笔直的话，我们就可以正确的拿到了，我们现在只需要把它放进我们的文本框里面呢就 ok 了。要把这个直放进文本框里面也很简单哈，因为我们已经把这个文本框他的对象拿到了， 直接把他的这个笔直付给他的一个为了值就可以了哈，这里的话这个三百改成一百吧，让他快一点。好，现在呢我们一刷新的话，哎，我们这个进度条呢，他的一个笔值这个数值我们就可以拿到了哈。好，这就是我们整个案例啊，感谢大家的收看。
556小K师兄
01:46查看AI文稿AI文稿接着我们来看一个百分比句子， west hat， pending， margin， 它们都可以百分比句子 来试试看，把它的 ys 改成百分之三十也是可以的。那既然是百分比，它是谁的百分比呢？是相对于谁的累计比？这里的 ys， pandy margin 没有 head 害的不一样，它们的百分比相对的都是包含块的宽度。 来看一下这里的包含块宽度是五百，对吧？他的百分之三十应该就是一百五，来看恶魔性宽度就刚好一百五。现在我把复原数的高度改一下，改成八百像素，然后我们来给他一个判定特 百分之十，这个潘金托是多少呢？八百像素的百分之十八十像素吗？当然不是，一定要注意刚刚这句话，这里的百分比他相对的是半块的宽度，和高度没有任何关系，所以这里是宽度五百像素的百分之 应该是五十像素。来看一下横模型没问题吧。 ok， 我们再来看害的百分比，这就分两种情况了，如果八万块的宽度不是凹凸， 那么他就是相对于包含块高度来试一下，先把判定去掉，包含块的高度现在是固定的，对吧？八百像素不是凹凸，然后我们给指元素的高度设置百分之三十有效，对吧？他内容都溢出了，你看我继续来加，都是有效的。但如果包含块的高度是凹凸就麻烦了， 看这里垂直方向的凹凸，他表示自适应那种高度，也就是自适应子元素高度。我们的子元素又设置百分比，子元素的高度要相对于包含块的高度，包含块高度又要适应子元素高度，这不就是寄生蛋问题吗？复元素高度要依赖子元素，子元素高度要依赖复元素可能就乱套了，你看我把复元素的还得去掉， 现在他就是凹凸了，对吧？再来看字眼数，现在他的 hat 我们再怎么设置百分比都是无效的，看到了吗？没有任何效果。 ok， 来记一下，如果包含过的高度是凹凸，百分比无效。
103小飞有点东西
00:23
00:25查看AI文稿AI文稿这里我们看一下百分比波浪加载动画，在包地结构中使用 same bill 定义一个模板，在下方使用 use 标签进行实力化。在脚本中，我们通过 set interval 函数实现动画加载， 即设置净度。百分比样式中，我们给 sd 填充不同的背景色，定义两个动画，调整不同的延迟时间，就形成了我们所看到的波浪效果。今天的分享就到这里，我们下期见。
490前端元素
02:06
02:25查看AI文稿AI文稿第四个特点，细心的同学肯定早就发现了，叫 margin 合并，这里我写了两个 p 元素，然后加了一个边框和 margin 来看一下。表面上好像挺正常的，但是当我们选中第一个 p 元素之后，你会发现它的下面二级直接是挨着第二个 p 元素的 bother 的。再来看一下核模型， 他的下外边距确实是一百，对吧？再来看第二个屁元素，他的上面二级又是在这第一个元素末端的，也就是说他们共用了一个面积，其他方向都没问题，就是上下相邻的面积会进行合并，合并的方式是取最大值，你看我重新给第一个屁元素，这次面积两百像素，看到了吗？还是合并的，只是宽度取的是两百像素。 来记一下，上下相邻嘛，也会进行合并，取最大值。当然不只是这种兄弟元素会合并，嵌套的元素也会合并。我们来一个 dividend parent， 里面嵌到一个 dividend cher 的，来给他们设置一下样式，选中 parent 五百像素， bank ground color， red margin 一百像素，再选中切尔 west 两百像素， head 两百像素， bank ground color， 他也能骂进一百像素。按理说这元素应该全部在包含块里面，对吧？他有一百的外边距，应该是距离包含块边缘有一百像素的距离，对吧？来看一下，我先选中复原数， 你注意看黄色区域，这就是塔特马尔井。然后我选种植元素，看到了吗？左边是没问题的，外边距在包含块里面，但你注意看上下外边距， 他们就合并了，虽然他们是欠套关系，但外边却是相领的，所以也需要合并。然后你注意看，我把复原数的墨镜改成零，现在复原数没有墨镜了， 应该就不会合并了吧。但是你会发现还是合并了。注意了， marging 等于零不代表他没有 mrg， 他有 mrg， 只是宽度为零而已，所以该合并还是会合并。那怎么让他们不合并呢？兄弟。元素和平还可以理解，毕竟美观嘛。那这种签 套路元素墨镜合并还是有点反的。如果想让他和走外边距一样离复元素边框有一段距离，也很简单。来看下笔记，这里说的是上下相离，墨镜会进行合并，注意是相邻的，只要有任何东西把他们分开，他们就不会合并了。比如我们给复元素加一个 body 以像素，所以这样子元素的外边距和副元素的外边距他们之间隔了一个边框，就不会再合并了。如果你觉得有边框不好看的话，可以把它设置成透明的， 但有时候设计稿里面又没有要求用边框。所以还有一种方式，不就是让子元素离复元素的边框有点距离吗？给复元素设置一个潘丁不就行了，一百像素子元素就不要用二斤了，用复元素的潘丁把它撑开就行了。来看一下效果也是一样的。当然外面这里有一个八像素到外边去， 这个是波迪的外编剧浏览器的默认样式来看一下，他设了八个像素，我们一般会在从字样式表里面把它去掉。
98小飞有点东西
01:33查看AI文稿AI文稿这种带有精度条百分比的完成率图形，你学会了，再也不怕老板看不懂的表格了。第一步我们要确定完成率的正方形个数，我们输入等于 fr 函数，在函数中我们要输入正方形，在我们输入法中入键，选择表情 符号，选择第三个符号，选择一个我们需要的正方形，插入即可输入逗号。第二个参数，我们要确定正方形的个数， 那我们就用实际销量除以目标销量，这样层出来会有小数点，那为了保证我们正方形的个数是整数，我们将它乘以十，这样正方形的数量就做好了。 接着我们来做百分比，我们先用连接符号将正方形跟百分比连接起来，那百分比的话， 我们只需要用时机的处于目标的像他四个小数点，那我们再乘以一百，他就是整数了。接着我们给他加一个百分符号，那我们再需要用到一个连接符号，然后上一号中间添加百分比的符号，确定，这样就可以了。 接着我们只需要往下拉，我们就会发现小数点比较多，那我们要将这小数点去掉，怎么操作呢？我们只需要在计算百分比的地方加入一个 and 函数， 这个函数呢就是直接用来取消小数点的，再点击确定，接着我们往下拖拉填充，然后我们再选中他，给他换一个颜色，这样就做好了，你学。
![初识animation基本使用 keyframes定义关键帧 [网站开发入门指南135] 初识animation基本使用 keyframes定义关键帧｜ html css 零基础入门教程 html5 css3
#html #css #javascript #前端 #网站开发](https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/4c024680f5d7835a07b877f0e47fbcc8~tplv-dy-resize-origshort-autoq-75:330.jpeg?lk3s=138a59ce&x-expires=2098749600&x-signature=t1d66FiE41J8qRPe0YvR0Nhb0ik%3D&from=327834062&s=PackSourceEnum_AWEME_DETAIL&se=false&sc=cover&biz_tag=pcweb_cover&l=20260707101147AA707240B633DFE1370B)
