当父组件引用了子组件的时候，会遇到父组件执行子组件的方法，比如下拉刷新上拉加载等事件只有在页面中才能检测到，但是获取数据的方法在子组件，这时就可以执行子组件方法。...思路很简单，类似于vue中给子组件加ref执行子组件方法道理一样，这里是给子组件加一个 属性： id="子组件名称",比如： 然后在父组件对应的方法中直接...this.selectComponent("#list").getList(); 如果涉及到多次调用该子组件的方法，可以在onReady生命周期中定义一下，比如： onReady:function(...){ this.list = this.selectComponent("#list"); }, 之后在方法中再调用的时候直接用this.list.方法名就可以了。
就是子元素的宽度是父元素的 百分之几 1-2 盒模型–padding padding 作用 改变内边距 .box { padding: 20px; } 等同于 .box { padding-top...| 阴影颜色 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 15px; } 注解： x偏移量：在x轴上移动...，向右为正 y偏移量：在y轴上移动，向下为正 阴影模糊半径：就是边线的清晰度 阴影扩散半径：就是向外伸展 阴影颜色：就是矩形下面那个矩形的背景颜色 1-4 盒模型–margin margin 外边距 <...相加 垂直距离 为上下两个盒子的最大值 所以一般设置垂直距离 推荐 .box1{ margin-bottom: 50px; } 盒子左右居中 如下可以使子盒子在父盒居中 div class...-- 将div标签写在一行 --> div class="box1">div>div class="box2">div> 给父元素添加word-spacing 属性 div class
外边距的溢出, 特殊场合下，为子元素设置外边距(上下)会作用到父元素上 特殊场合： a. 父元素没有边框(上下) b. 为第一个(最后一个)子元素设置外边距 解决方案： a....为父元素增加边框(透明的)，弊端：父元素会变高 b. 可以为父元素设置上内边距来取代子元素上外边距，弊端：父元素高度会变高 c....为父元素添加边框 B. 使用父元素的内边距，取代子元素的外边距 D....容器的属性，该组属性要添加在容器元素上，控制子元素的位置 #container{ display:flex; flex-direction:row; flex-wrap...父元素的高度如果参照上级元素设为100%,那么在弹性布局时，子元素也参照父元素设为100%,子元素将无法显示，解决方案时将子元素设为固定高度 63.
# 嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并...解决方案： 可以为父元素定义1像素的上边框或上内边距。 可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。...在CSS颜色值 (opens new window)寻找颜色值的完整列表 inset 可选。从外层的阴影（开始时）改变阴影内侧阴影 注意: 前两个属性是必须写的。其余的可以省略。...# CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 注意： 1....即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 行内样式优先。
translate ：在屏幕上移动元素（上下左右四个方向）transform: translate(40px, 0px); ?...top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); padding: 15%; } ①-webkit-perspective: 200; 在父级元素上设置透视...（透视声明只会应用到其第一个子元素上）：透视的值越大，就表示你的视点与 3D场景之间的景深越大 ②-webkit-transform-style: preserve-3d; （为了延续父元素的透视） 这样可以设置一个...3D场景 ③-webkit-transform: rotateY(180deg); 当鼠标悬停在 .Qcontainer 模块上时，我们给 .film 这个 div添加一个翻转效果 ④-webkit-backface-visibility...: hidden; 用来处理当海报翻转之后隐藏在其背面内容 ⑤-webkit-transform: rotateY(180deg); 不加这句的话， .back 这个 div就会显示在正面海报之上
要实现卡片光照的效果，我们需要添加子元素，此时使用伪元素::after是最好的选择。...*/ transition: all .3s ease; } .hover-light:hover::after { /*鼠标放在父元素上 移动子元素*/ left: 100%...其他代码相上*/ /*添加动画效果 直接继承父类的效果*/ transition: inherit; } .hover-light:hover { /*向上移动6个像素*/...: translateY(-6px); -webkit-transform: translateY(-6px); transform: translateY(-6px); /*添加一个淡一点的阴影.../*鼠标放在父元素上 移动子元素*/ left: 100%; } .hover-light:hover { /*向上移动6
Day7:html和css 如果有浮动,会导致脱标,定位也能脱标,我们没有清除浮动,因为里面有子绝父相....清除浮动的方法 额外标签法,在最后一个浮动元素后面添加一个空的标签代码: div style="clear: both">div> 使用after伪元素进行清除浮动. .clearfix:after...margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 margin:上外边距 右外边距 下外边距 左外边 外边距实现盒子居中...:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); 浮动(float...style=”clear:both”>div> // 父级添加overflow属性方法 给父级添加： overflow为 hidden|auto|scroll 都可以实现 使用after伪元素清除浮动
好，接下来，我们需要给按钮添加上阴影效果，像是这样： 因为使用了两个伪元素，当前单个按钮在 Hover 状态下的大致代码如下： li { position: relative; width...嗯哼，老读者一定也知道，这里我们需要对整个可见部分添加阴影，需要使用 filter:drop-shadow()。...这里，我们的思路如下： 可以尝试在 .g-main 中，添加一组与 .g-nav 相同的结构，负责样式层面的展示 把新增的结构，利用绝对定位，让其与实际的导航位置重叠 在原本的 .g-nav 中，通过...此时，由于不规则按钮结构和右侧的主体内容结构，其实是在一个父 div 之下，所以，我们只需要给 .g-main 元素添加 filter: drop-shadow()，就可以实现一整个整体的阴影效果： 最后...让我们能够在父元素节点上，根据子元素的状态变化，做出样式的调整。
；在父元素和子元素同时具有margin-top属性时，以最大值为准； 解决方式有：给父元素 > 设置边框 border {1px } > 设置内边距 > 添加overflow: hidden> 浮动的盒子不会有这个塌陷问题...，不会影响前面的标准流；div在服务的盒子前面，还是会独占一行；清除浮动很多情况下，父盒子不方便给高度，但子盒子浮动又不占有位置，最后父盒子的高度是0，就会影响到下面的标准流盒子;这个时候就需要清除服务...，就是清除浮动元素的影响；清除浮动后，父元素就会根据浮动的子元素自动计算高度；语法：图片清除浮动的方法：- 清除浮动的策略是闭合浮动，只让浮动在父元素内影响，不影响父盒子外面的盒子；- 额外标签法：在最后一个浮动元素的后面添加一个元素...，添加样式属性 div style= "clear:both">div；会添加多个无意义的标签- 父级添加overflow属性，设置为auto,hidden 或scroll- 父元素添加：after...伪类； 不需要添加额外标签，- 给父元素添加 双伪元素；before和after; 原理是在父盒子中的第一个元素和最后一个元素添加一个块级元素；图片
注意： 1、RGBA和HSLA中的透明度不会影响子元素的透明度，不具继承性； 2、opacity 会影响子元素的透明度，子元素会继承父元素的透明度。...text-align: center; font: bold 80px/100% "微软雅黑"; color: #fff; } /*添加阴影...div> div class="demo demo4">我是江小白div> ?...三、盒模型 1、在默认情况下，CSS 设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。真正盒子的宽度（在页面呈现出来的宽度）和高度，需要加上一些其它的属性。...，扩展和收缩阴影的大小--可选 默认0 color：颜色--可选，默认黑色 inset：内阴影--可选,默认是外阴影 当然，box-shadow 和 text-shadow 一样，也是可以添加多个的
: cornflowerblue; width: 100px; height: 100px; margin: 10px; } 父元素上的属性...display 属性：display:flex;开启弹性盒，属性设置后子元素默认水平排列 flex-direction属性：flex-direction 属性指定了弹性子元素在父容器中的位置 flex-direction...（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度） 子元素上的属性 flex：flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 div class="flex-container...red; overflow: hidden; clear: both; } 伪对象方式 如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理 为父标签添加伪类after...：box-shadow 向框添加一个或多个阴影。
默认的旋转中心点时元素的中心点 如下代码的效果为：当鼠标悬停在图片上时，图片会顺时针旋转360°，为了更具有动画效果，添加了过渡效果。...语法： translform:translateX(100px); 在x轴上移动移动100px translform:translateY(100px); 在Y轴上移动100px translform...透视我们也称为视距 :视距就是人的眼睛到屏幕的距离 透视的单位是像素 透视写在被观察元素的父盒子上面的 还是上面的例子，我现在给div的父元素加上透视，因为我body里面只有div,所以div的父元素就是...），而这个属性默认设置是flat，也就是不开启的意思，所以我们必须显式地给父元素设置，才能让子元素开启三维立体环境。...语法： transform-style: flat; 子元素默认不开启3d立体空间 transform-style: preserve-3d; 子元素开启立体空间 注意：这个属性是设置给父元素的
二、通用伪类和伪元素 :hover 作用：当鼠标悬停在任何元素上时应用的样式，并非仅限于 元素。 应用场景广泛，可以为各种元素增加交互效果。...例如，当鼠标悬停在一个 div> 元素上时，可以改变其背景颜色或添加阴影。...如：div:hover { background-color: #f0f0f0; box-shadow: 2px 2px 5px gray; } ::before 和 ::after 作用：在任何元素的内容之前...可以用于添加装饰性元素、图标或提供额外的信息。...例如，为一个段落添加引号装饰，p::before { content: "“"; } 和 p::after { content: "”"; }，每个段落前后会出现引号。
展开你的扇子：设置网页的标题，显示在浏览器的标签栏上。 添加了一个轻微的阴影效果（box - shadow: 0 0 3px 0 #666;）。...这是基于 CSS 中的 :hover 伪类选择器实现的，#box:hover 表示当鼠标悬停在 #box 元素上时应用相应的样式规则。 4....元素旋转展开 前 6 个元素逆时针旋转：根据 CSS 规则，当鼠标悬停在 #box 上时，#box:hover div:nth - child(n)（n 从 1 到 6）选择器会选中前 6 个子元素...此时，元素会根据过渡效果规则，在 1.5 秒内平滑地恢复到初始状态，即所有子元素回到原来的位置和角度，等待下一次鼠标悬停事件的触发。 测试结果
>123div> 继承性 CSS中的继承： 当子类未设置对应属性时，子类继承成父类的某些样式（例如：字体颜色，字体大小等） 恰当使用可以简化代码，降低css复杂性 子元素只能够继承父类的某些样式...15px /* 上和右和下和左 */ padding： 5px 10px 15px 20px 注意：padding也会影响盒子的大小 当存在padding时，盒子大小也会相应增加相对大小 所以我们在设计盒子时...class="nav"> 123 div> 嵌套块元素垂直外边距塌陷问题： 当出现嵌套关系（父子关系）时，父元素和子元素同时有外边距时...，此时父元素会塌陷较大的外边距值 解决方案： 为父元素定义一个上边框:border：1px solid transparent 为父元素定义一个内边距：padding：1px 为父亲添加overflow...class="father"> div class="son">div> div> 注意：因为网页很多元素都带有内外边距，且在各浏览器中标准不同
最近的:has()选择器允许您对父元素和其他祖先应用样式，本文将向您展示如何在Web应用程序开发中使用它。 在CSS的世界中，选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。...使用 :has() 选择器，您可以将样式应用于父元素或祖先HTML元素。这样我们就可以扩展选择器的范围，包括一个或多个兄弟或子元素。 在本文中，我们将讨论CSS选择器以及它们在代码中的多个使用示例。...有条件地添加或删除样式：如果 div> 元素包含特定数量的子元素，您可以使用 :has() 选择器为其添加边框。...基于子元素的选择 使用 :has ，我们不仅可以选择父元素，还可以选择子元素。...导航菜单示例 这将引导我们进入我们项目的下一部分，它看起来是这样的： 在这里，我们将鼠标移到位置上，您可以看到当我们将鼠标悬停在位置上时，我们拥有的不同位置。
map 父容器中 , 定义 city 子元素 , 该子元素使用 绝对定位 放置位置 ; 子绝父相 " 原则 , 该子元素 所在的 父容器 必须要使用 相对定位 ; 使用 left 和 top 设置 该 子元素 在 父容器内 距离左侧的位移...和 距离顶部的位移 ; .city { /* 使用绝对定位进行定位 , 子绝父相 , 父容器 相对定位 */ position: absolute...类下的 div 类型标签 , 类型是以 bowen 开头的标签 */ /* 使用绝对定位进行定位 , 子绝父相 , 父容器 相对定位 */ position...子绝父相 , 父容器 相对定位 */ position: absolute; /* 绝对定位位置 : 距离顶部的位移 */ top
E F:nth-child(n) 父元素的第nth的子元素(括号里面的n可以是1，2，3 even,odd) E:first-of-tyope 父元素指定类型的第一个子元素 E:last-of-type...父元素指定类型的最后一个子元素 E F:nth-of-type(n) 父元素指定类型的第nth的子元素 2.2.3 属性选择器 属性选择器 功能描述 E[attr] 选择具有属性attr的元素 E...right 在右侧不允许浮动元素 both 在左右两侧不允许浮动元素 none 允许 5.4 解决父级边框塌陷的方法 5.4.1 添加空div,并清除两边浮动 5.4.2 设置父元素的高度(灵活性差...，但是浏览器会显示滚动条以便查看其他剩余内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其他剩余内容 5.4.4 父级添加伪类after div id="father" class="clear...--在clear类后面添加内容为空--> display: block; 添加的内容转化为块元素--> clear: both; <!
div> 6、伪类及伪元素选择器 常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。...它们在布局中表现的行为： 支持全部样式 如果没有设置宽高，宽高由内容决定 盒子并在一行 代码换行，盒子会产生间距 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height...，需要清除浮动 7、浮动元素之间没有垂直margin的合并 清除浮动 父级上增加属性overflow：hidden 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）...-- 第2个子元素div匹配 --> 2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反） 3、E:first-child：匹配元素类型为E且是父元素的第一个子元素...个类型为E的子元素 7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反） 8、E:first-of-type：匹配父元素的第一个类型为E的子元素 9
，然后添加3条和底色一样颜色的线覆盖在上面即可。...要用水平垂直居中元素的父元素添加下面样式，且它本身要有高度和宽度（被子元素撑大也可以），该父元素下面只能有它一个子元素。...，反之，则缩小 color 阴影颜色，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。...大家看图，应该就能明白box-shadow多层阴影遵循的规律了。 ? 回到我们正题上 div id="adidas"> div class="logo"> ......元素本身是一道横线，然后多阴影添加2个，这样就是3道横线了。 结语 本节内容就到此结束了，大家应该或多或少都有些收获吧，关注我，学习更多前端知识，但不止于前端哦！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
