不过，对于 WPF 程序来说，一个独立的窗口实际上只有一个窗口句柄，窗口内的所有内容都是 WPF 绘制的。...如果你不熟悉 Win32 窗口中的父子窗口关系和窗口样式，那么很有可能遇到父子窗口之间“抢夺焦点”的问题，本文介绍如何解决这样的问题。...注意看下面的窗口标题栏，当我在这些不同区域间点击的时候，窗口标题栏在黑色和灰色之间切换： 这说明当子窗口获得焦点的时候，父窗口会失去焦点并显示失去焦点的样式。...你可以在这篇博客中找到一个简单的例子： 解决办法 而原因和解决方法仅有一个，就是子窗口需要有一个子窗口的样式。 具体来说，子窗口必须要有 WS_CHILD 样式。...欢迎转载、使用、重新发布，但务必保留文章署名 吕毅 （包含链接： https://blog.walterlv.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。
npm install sass-resources-loader --save-dev 2.修改 build 中的 utils.js 将scss: generateLoaders('sass')...vue 安装 node-sass 编译报错 安装node-scss报错 安装 node-scss 报错 在搭建 vue 脚手架 或者是在 vue 项目中，想使用 sass 的功能， npm install...将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1", 也可以先卸载当前版本，然后安装指定的版本 卸载当前版本 npm uninstall sass-loader...styleObject: { color: 'green', fontSize: '30px' } } }) v-bind:style 可以使用数组将多个样式对象应用到一个元素上...15.1.子组件向父组件传递参数; 子组件 A： 子组件A
如何在样式中使用 scss 的声明的全局变量 sass 声明的变量如： $color-primary: #409EFF; $color-success: #67C23A; $color-warning:...可以使用更优雅的方式：sass-resources-loader 使用 sass-resources-loader 需要两步： 其他环境的详细配置说明见 sass-resources-loader 官网...配置完之后，就可以在任意文件里使用 sass 声明的变量啦。...子组件中改变父组件通过 props 传递过来的属性 官方是不推荐子组件直接改变父组件传递过来的属性的，如果你这么做了，会有警告。...但有时的确是需要在子组件中改变父组件的属性，因为省事啊……比如子组件中有 Dialog，Dialog 的显示与隐藏要通过父组件控制，同时子组件关闭了 Dialog 要同步更新父组件中属性值。
嵌套 选择器嵌套 在 Sass 中，可以在父选择器中写子选择器，以嵌套的形式来表达关联的关系，这样做可以减少我们重复书写父选择器的工作量。...而其它选择器也可以复合使用，如 div#id、div.class、div[lang='en'] 等。 Sass 为了在嵌套中更好地表达这些复合关系，提供了父选择器 &。...变量作用域 在 Sass 中，变量只能在它被声明的层级和子层级访问；如果一个变量在不同层级中被重复定义，在使用时会从下到上寻找最近的定义。这与 JS 中的函数作用域相似。...Sass 改进了这条指令，它会在编译时将导入的资源直接替换并插入指令所在的位置。...Sass 对 @media 做了一些改进，允许我们在嵌套的过程中书写媒体查询和响应代码。在编译时， Sass 会把媒体查询编译到文件最外层，并为子选择器加上父选择器前缀。
最近，在 CodePen 上看到这样一个非常有意思的效果： 这个效果的核心难点在于气泡的一种特殊融合效果。...利用 animation-duration 和 animation-delay 构建随机效果 同一个动画，我们利用一定范围内随机的 animation-duration 和一定范围内随机的 animation-delay...如果你还不了解这个技巧，可以戳我的这篇文章看看：你所不知道的 CSS 滤镜技巧与细节 简述下该技巧： 单独将两个滤镜拿出来，它们的作用分别是： filter: blur()： 给图像设置高斯模糊效果。...其他保持一致 filter: blur(5px); } 就这么简单，父容器添加白色底色以及对比度滤镜 filter: contrast(8)，子容器添加 filter: blur(5px) 即可...运用了 filter: blur() 的元素，元素边缘的模糊度不够，会导致效果在边缘失真，我们仔细看看动画的边缘： 如何解决呢？
还有一个问题就是第一个子元素的 margin-top 值会加在父元素上的 bug（最后一个子元素的 margin-bottom 也存在类似的问题）。这里是不是有人问为什么呢？...那么我们在项目中应该如何使用呢？我们在 pc 端不需要考虑的这么复杂，所以这里我们主要讲讲这些单位在移动端中的使用。...作为单位，我们很快会发现在一些机型上的图案不圆，会呈现椭圆形。...Sass 和 Less 稍微有点区别： // sass$direction: left;// less@direction: left; 当然 CSS 原生也是存在变量的，使用规则如下： 变量定义的语法是...之前我们写 CSS 的时候，也会将一些重复使用的代码放在一个 class 中，这样的确达到了一定的复用性，不过最后的效果可能就是在一个元素里面放了很多 class，如下图： ?
$refs即可调用，这样可以减少获取dom节点的消耗。 ref介绍 ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。...如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例 通俗的讲，ref特性就是为元素或子组件赋予一个ID引用,通过this....注意： 当ref和v-for一起使用时，获取到的引用将会是一个数组，包含循环数组源 实例（通过ref特性调用子组件的方法） 1....= '变身' } } } 2.父组件code: <div
建议点击事件尽量只绑定在或这种原生clickable的元素上，而不是上。3....这对视障群体并不友好，因为焦点多、密集，明明是同一块内容，却分散到2个焦点上，这不方便他们摸索整个页面。...维护成本高（若子结点需要动态改变，父结点的aria-label也需要随之改变） 【推荐】父结点设置aria-labelledby，值为所有子结点的id（用空格拼接）...，子结点设置aria-hidden="true"，注意使用该方法，每个子结点都需要设置id维护成本低（若子结点需要动态改变，父结点无需变化）存在兼容性问题，低版本屏幕阅读器会忽略aria-labelledby...部分读屏软件可能无法打开链接将链接的onclick事件放在父结点触发，父节点设置role="button"或"link"只有1个链接，且整体内容与该链接强相关（如“您已阅读并同意《协议》”）打开链接很方便
还有一个问题就是第一个子元素的 margin-top 值会加在父元素上的 bug（最后一个子元素的 margin-bottom 也存在类似的问题）。这里是不是有人问为什么呢？...那么我们在项目中应该如何使用呢？我们在 pc 端不需要考虑的这么复杂，所以这里我们主要讲讲这些单位在移动端中的使用。...作为单位，我们很快会发现在一些机型上的图案不圆，会呈现椭圆形。...Sass 和 Less 稍微有点区别： // sass $direction: left; // less @direction: left; 当然 CSS 原生也是存在变量的，使用规则如下： 变量定义的语法是...之前我们写 CSS 的时候，也会将一些重复使用的代码放在一个 class 中，这样的确达到了一定的复用性，不过最后的效果可能就是在一个元素里面放了很多 class，如下图： ?
$('#num2').html(count2+=1)//只有移入指定元素才会加1 }) 7 hover鼠标悬停事件 有两个参数（方法），鼠标一定到指定对象以及移出时会触发... 2 blur()： 失去焦点事件 3 focusin() ：获得焦点事件 4 focusout() :失去焦点事件 5 change() :元素发生改变时，触发事件...可以在父元素上检测子元素获得焦点的情况 而focusout可以在父元素上检测子元素失去焦点情况 四 其他事件 1 scroll（）滚动滚动条时触发的事件 2 resize（）当调整窗口大小时触发的事件...//小案例（当滚动到一定高度出现搜索菜单） .bar{ width: 100%; height: 50px; background: red;...event.which将event.keyCode 和 event.charCode标准化了。推荐用event.which来监视键盘输入。
想使用其他组件的数据，就需要组件通信 如何通信及其组件之间的关系分类 父子关系 非父子关系 父组件通过 props 将数据传递给子组件 子组件利用 $emit 通知父组件修改更新 父向子通信代码示例...父组件通过props将数据传递给子组件 父组件App.vue //:title="msg" 表示动态赋予属性 父向子传值步骤 给子组件以添加属性的方式传值 子组件内部通过props接收 模板中直接使用...props接收的值 子传父通信代码示例 子向父传值步骤 $emit触发事件，给父组件发送消息通知 父组件监听$emit触发的事件 提供处理函数，在函数的性参中获取传过来的参数 props 定义 组件上...子传父，将任务名称传递给父组件App.vue 4....通过上述的步骤就可以实现数据从父标签传入子标签， 实现标签内容的回显 回车修改标签内容 上述的回显示标签信息是通过父标签传子标签的形式实现的， 但是如何实现子标签传入父标签呢 ?
一、命名方式（目录、组件） 组件的文件夹与文件名都使用PascalBase命名 二、父组件与子组件： 1、 父组件引用子组件： //父组件 import TitleBar from '...TitleBar' export default { name: 'WapCalc', components: { TitleBar: TitleBar } } 2、父组件向子组件传值...父组件关键点： 1、:xxx="xxx" 2、data(){ return{ xxx: 'xxx' } } //父组件 <div class...： 1、props: ['xxx'] 2、{{xxx}} //子组件 <span class="back" style=...三、vue-cli支持scss vue-cli中已经内置配置好了sass 以及lass的配置。
子—-> 父传值 [Events Up] 子组件通过 events 给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。...> 在父组件引用的子组件中写入想要显示的内容（可以使用标签，也可以不用） 子组件(slotOne1) 我是slotOne1组件 在子组件中写入slot，slot所在的位置就是父组件要显示的内容...>我是name为footer的slot 在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置... 在父组件上使用slot-scope属性，user.data就是子组件传过来的值 版权声明
实现此例您可以学到： vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一、搭建vue开发环境 更换镜像到cnpm npm install...node-sass和sass-loader实现scss的编译 用cnpm安装node-sass和sass-loader，用于编译scss相关内容。...实现思路 一个输入框，用于接受标签内容的输入； 一个列表，用于展示所有输入的标签信息； 提供一个可设置属性，用于设置标签列表的宽度； 具体实现 模板内容代码 <div class...props等相关属性； 1.3 props用于父组件向子组件传递值，此值可以动态传递； 1.4 v-on绑定事件，v-for用于迭代集合。...主要实现Vue常用的父组件改变子组件的值，view改变model，model的变化反应到view上，事件的绑定等功能。
对于容器，浮动让子元素按一个方向排行，例如“float:left”，让子元素按从左到右的顺序排列；对于元素，浮动让元素定位于父容器中的某一边或紧挨在某一个兄弟元素之后。...因浮动自动累加宽度，从而实现自适应大小的容器或按钮，这是浮动的价值。 但在子元素使用了浮动以后，父容器可能因子元素浮动而丧失高度。...> #footer 因为 center 区域要随浏览器动态伸拉，所以它的宽度是 100%，给左右两个边栏留出的宽度是靠父容器的 margin-left、margin-right...使用 webpack，可以将多张图片自动合并成精灵集，并输出一份匹配的 sass 样式文件。webpack 减去了设计师手动合图、排图、编写相应 CSS 样式的麻烦。...关于 sass sass 是一种设计师使用的 css 编译工具，这种工具处理后缀名为 .sass 的文件，将它们编译为 css 文件。
此外，如果颜色值不是十六进制颜色值（如#010203），而是RGB或者HSL的话，我们都是将RGB或HSL先转换为十六进制颜色值，然后再进行加、减、乘、除运算的。...如果相同的CSS样式只有一个CSS属性，此时只需要使用Sass变量实现就可以满足了。如果相同的CSS样式有多个CSS属性，这个时候我们就希望把“相同的CSS样式”当做整块来处理。...，在Sass开发中非常非常重要，因为使用这些可以极大地提高我们的开发效率，所以这一章小伙伴们要重点学习。...一、Sass继承 CSS具有2大特性：继承性和层叠性。CSS的继承性，指的是子元素继承了父元素的某些样式属性，例如在父元素中定义字体颜色（color），子元素会继承父元素的字体颜色。...看看我有没有时间，吧CSS进阶写一下 在Sass中，我们可以使用“@extend”来继承一个样式块，从而实现代码的重用。
child2 { color: green; } .parent1 .child2:hover, .parent2 .child2:hover { color: blue; } 现在，你可以将子选择器嵌套在父选择器中...你需要使用 CSS 预处理器（如 Sass、Less 或 PostCSS）进行构建步骤，以便将嵌套代码转换为常规的全选择器语法。...的直接子元素进行样式调整 :is(p) - 但是:is()使用最优先选择器的优先级 :where(p) - 但是:where()的优先级为0 在这个简单的示例中，它们都可以工作，但在以后使用更复杂的样式表时...&还允许你在父选择器上定位伪元素和伪类。...Sass开发团队已经宣布，他们将支持.css文件中的原生CSS嵌套，并按原样输出代码。
Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。 相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。...的值不为visible BFC的使用场景 去除边距重叠现象 清除浮动（让父元素的高度包含子浮动元素） 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 让一个元素水平垂直居中 水平居中...使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。 （2）inline-block实现水平居中方法。...如何使用rem或viewport进行移动端适配 rem适配原理： 改变了一个元素在不同设备上占据的css像素的个数 rem适配的优缺点 优点：没有破坏完美视口 缺点：px值转换rem太过于复杂(下面我们使用...基本语法区别 Sass是以.sass为扩展名，Less是以.less为扩展名，Stylus是以.styl为扩展名 变量的区别 Sass 变量必须是以开头的，然后变量和值之间使用冒号（：）隔开，和css
固定定位的元素 始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 的 本质是一种 特殊的绝对定位 ;...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码的基础上 , 将中心的标准流元素设置为 固定定位 元素 ; 为 body 设置高度 1000px , 方便进行滚动条滚动 ;...*/ .box { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: relative; /* 内容尺寸 通过测量图片获得 */ width:...class="box"> 展示效果 : 默认进入后的样式 : 滚动拖动条后的效果 :
5、如何居中div？...简单的方式： 上面的div宽100%， 下面的两个div分别宽50%， 然后用float或者inline使其不换行即可 12、css多列等高如何实现？...首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。...（1）父级div定义height； （2）父级div 也一起浮动； （3）常规的使用一个class； .clearfix:before, .clearfix:after { content...想让插入的内容出现在其它内容前，使用::before，否者，使用::after； 在代码顺序上，::after生成的内容也比::before生成的内容靠后。
领取专属 10元无门槛券
手把手带您无忧上云
