二、Sass占位符 在Sass中，我们引入了占位符“%placeholder”来进一步优化“@extend”。我们先来看一个例子。...也就是说，“.btn”这个类在编译出来的CSS中是多余的。那有没有更好的办法来实现我们预期效果呢？ 在新版本的Sass中，引入了“占位符%placeholder”来优化“继承@extend”的输出。...而在这个例子中，我们是定义一个占位符“%btn”（占位符，都是以“%”开头）。我们对比一下这两个例子的输出结果就可以知道，使用占位符的输出结果是不包含基类的。...，继承中的基类是否就一定要去掉呢？...如果你的HTML结构需要用到基类，则不需要使用占位符的方式来去掉；如果你的HTML不需要用到基类，则建议使用占位符配合继承来去掉。
在移动端，如果标签和输入框在一行中显示，显示的有点窄。 ? 如果标签和输入框各占一行显示，又浪费空间。有没有两全其美的方案呢？ Material Design 提供了一个两全其美的方案。...输入框没有值时，标签在输入框中显示。在输入框中有值或获得焦点时，标签在上方显示。如下图所示: ? 解决方案 可以用 CSS 的 :placeholder-shown 伪类可以实现上面的效果。...:placeholder-shown 作用于显示占位符时的元素。输入框在有值或获得焦点时，不显示占位符，可以用选择器 :not(:placeholder-shown) 匹配。....input-fill:placeholder-shown::placeholder { color: transparent; } 第 2 步 设置: 输入框显示占位符时的样式。...点个赞，分享给小伙伴们吧~ 参考文档 CSS :placeholder-shown伪类实现Material Design占位符交互效果 8个有点优秀的CSS实践
扩展/继承 继承对于了解css 的同学来说一点都不陌生，先来看一张图 在Sass 中也具有继承一说，也就是继承类中的样式代码块，在Sass中时通过关键词“@extend”来 ...Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器： .btn, .btn-primary, .btn-second {...%placeholder Sass中的占位符%placeholder 功能是一个很强大，很实用的一个功能，可以取代以前的css中的基类造成的 代码冗余的情形，因为%placeholder...c)占位符 最后来看占位符，将上面的代码中的基类.mt 换成Sass的占位符格式 //SCSS中占位符的使用 %mt{ margin-top...那么占位符和继承的主要区别的，“占位符是独立定义， 不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中
1.预热 css样式多如牛毛，我不可能一个一个去讲，那样好像背字典一样，我相信你们也不喜欢这样的方式。所以，我会在实战中慢慢和你讲解，然后，你记住一些重要的css属性就可以了。...2.编写工具类样式文件 tool.css 在刚才的例子中，我们把一个div元素或者span元素都相对于父元素居中显示了，我现在请问一下大家，在实际开发中，让一个元素相对于父元素居中显示，这样的需求是不是很常见呀...那有没有什么办法，让我们下次再遇到这个需求的时候，直接用起来就行了呢？答案肯定是有的，我们可以封装一个通用的工具类，然后把一些经常要用到的样式放进去，就OK了。...现在我们来编写一个tool.css工具类。 ? ? 1489026181387098368.png 引入这个css： ? 然后，在span元素上绑定对应的class： ? 这样就OK啦。...这样就有一个问题，对于领导批示，宽度应该比较窄才会比较好看，可是现在的话明显太宽了，有没有什么办法呢？第一个想到的，肯定是给它设置宽度： ? 刷新页面,无效，这又是什么原因呢？
在普通流中的内联元素之间不会生成“行分割符”，因此处于普通流中的内联元素会首先按照从左至右的顺序水平（horizontally）排列，当父容器水平方向上的剩余宽度不足以放下新的内联元素时，会往下换行，在新行的中继续按照水平顺序排列元素...替换元素 (replaced)： 可以理解为嵌入元素，相当于一个占位符，解析时会被其他内容替换。例如 和大部分表单元素 。...外边距合并 针对垂直外边距（margin-top 和 margin-bottom），两个相邻的垂直外边距会合并成一个外边距，两个外边距中较小的一个会被较大的一个合并。详细内容可以参考 这里 。...内联元素 东西比较多，先附一些文章链接： CSS 中的line-height CSS 行高line-height的一些深入理解及应用 CSS line-height 中文版 视觉格式化模型中的各种框 CSS...元素在正常流中的所占的位置会被清除，就好像该元素不存在一样。absolute 元素会生成一个块级框。
关于墙内墙外的问题，笔者因为目前在一家小外企，所以没有问题。...And 运算符 And 运算符只会返回和它们都相关的搜索结果 html AND css 3....使用 OR 操作符获取搜索词中某一个的结果 (javascript OR python) free course 4. - 操作符将排除包含搜索词的结果 javascript -css Minus...可以使用 (*) 通配符作为占位符，它将被任何单词或短语替换 "how to start * in 6 months" 6....在一个单一的网站搜索 site:freecodecamp.org 7. 查找特定的文件类型 filetype:pdf learn css Search by filetype 8.
CSS伪类表示任何显示占位符文本的form元素。...简单来说就是当输入框的placeholder内容显示的时候，输入框干嘛干嘛。 兼容性如下，在移动端没什么问题 ? placeholder-show是如何工作的？...:placeholder-shown CSS 伪类 在 或 元素显示 placeholder text 时生效，简单的说就是 placeholder 有值才生效，如下所示...如果检查 input 内容是否为空（在没有点位符的情况下）？ 我们检查输入是否为空的唯一方法是使用:placeholder-shown。但是如果我们的输入元素没有占位符会发生什么呢?...组合其它选择器 我们可以使用:not伪类对某些事物进行逆运算。 在这里，我们可以在输入不是空的情况下进行定位。
开场 今天我们的主角是伪类：placeholder-shown 效果 效果可以参见下面的GIF示意： ? 现在这种设计在移动端很常见，因为宽度是稀缺的。...相信不少人设计项目中有实现过这种交互，而且，我敢保证是利用JS实现的。 实际上，我们可以借助CSS :placeholder-shown伪类，纯CSS，无任何JS，实现这样的占位符交互效果。...兼容性还是很不错的，在移动端我们可以放心使用。因为就算一些老手机不支持，也不过是传统的placeholder占位符效果，并没有什么损失。...经典案例 下面展示使用几个:placeholder-shown实现label特性占位符案例。 ? 输入内容功能布局效果也是正常的： ?...首先，让浏览器默认的placeholder效果不可见，我们可以让颜色透明即可，如下CSS： ? 然后，后面的.input-label这个label元素代替成为我们肉眼看到的占位符。
2.1.1 选择器嵌套 避免了重复输入父选择器，复杂的 CSS 结构更易于管理 2.1.2 父选择器 & 在嵌套 CSS 规则时，可以用 & 代表嵌套规则外层的父选择器。...为了便于管理这样的属性，同时也为了避免了重复输入，SCSS 允许将属性嵌套在命名空间中 注意font：后面要加一个空格 2.1.4 占位符选择器 %foo 必须通过 @extend 有时，需要定义一套公共样式...，使用占位符选择器%foo，然后通过 @extend 指令引入，尤其是在制作 SCSS 样式库的时候，在需要时引入，希望 SCSS 能够忽略用不到的样式，达到简略代码的目的。...被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。...2.6.1 用占位选择器继承 注意：上面的图中 .alert 只是单纯的用于继承，不用做元素类名，但是它却导出成了 类名，这时我们可以用 占位选择器%foo 对其进行声明，不用于元素类名
，属性值如下 normal 合并空格，换行符转化为一个空格，允许自动换行 nowrap 合并空格，换行符转化为一个空格，不允许自动换行 pre 保留空格，保留换行符，不允许自动换行 pre-line 合并空格...优先 浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值 CSS的优先级如下 【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器 、伪元素选择器...】 通配符选择器【*】和关系选择符【+（相邻选择符）、>（子代选择符）、~（兄弟选择符）、" "（后代选择符）等】对优先级没有影响 在选择器使用较多的情况下，使用CSS优先级判断元素的属性值显示很容易出错且不利于排错...，可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级 选择器 权重 内联样式 1000 ID选择器 100 类选择器、属性选择器、伪类选择器 10 标签选择器、伪元素选择器 1 相邻选择符...、子代选择符、兄弟选择符、后代选择符 0 权重相同时，根据HTML代码从上往下执行的特点，后面选择器会覆盖前面选择器中相同的属性 权重不同时，权重大的选择器生效 !
中不会显示 //定义一个占位符 %mt5 { margin-top: 5px; } /*调用一个占位符*/ .box { @extend %mt5; } 变量： 以美元符号“$”开头。...{ -webkit-border-radius: 3px; border-radius: 3px; } Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。...Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器： .btn, .btn-primary, .btn-second { border:...1px solid #ccc; padding: 6px 10px; font-size: 14px; } 占位符 % Sass 中的占位符 %placeholder 功能是取代以前 CSS...中的基类造成的代码冗余的情形。
不知道大家有没有经常制作通知书、邀请函、合同等一类文书，重复性操作强，这些文书如果一个一个的制作，那人岂不成了重复操作的机器人了。...在Word文档中制作这类文书时，为了减少重复性操作、以及提高效率，可以使用邮件合并功能，而Python也可以制作这类文书，我们来看下二者的具体操作。 材料 一份合同信息表： ?...在弹出的【邮件合并收件人】窗口中，可以筛选出需要或者不需要的数据，然后点击【确定】。 ? 接着在相应的位置上【插入合并域】 ? 插入完成后，可以【预览结果】，看是否正确。 ?...模板中加入对应的占位符，我这里直接使用excel的列标题；另外需要注意的是：占位符需要添加两个大括号！...(r'D:\合同信息.xlsx') 通过循环取出合同信息表中的数据， 建立键值对，这里的键便是模板中的占位符，docxtpl通过键值对的方式，把值赋予给模板中对应的键。
在你的JavaScript中执行这行代码(注意在console下面写这段代码的时候，换行是shift+Enter) 那么，控制台就会输出以下信息： 自动完成命令 当您键入控制台时，控制台会自动显示一个与您输入的文本相匹配的相关方法的自动完成下拉菜单...console.group（）命令使用一个字符串参数来设置组的名称。 在您的JavaScript中调用它之后，控制台将开始将所有后续输出组合在一起。...要结束分组，只需在完成后调用console.groupEnd（）。 示例输入： 例子输出： 嵌套组 日志组也可以彼此嵌套。 这对于一次看到一个较小的小组很有用。...字符串后面的参数按顺序应用于占位符。 以下示例使用字符串和数字格式化程序将值插入到输出字符串中。你会在控制台上看到“Sam has 100 points”。...代码： 输出如下： 使用CSS设计控制台输出 CSS格式说明符允许您自定义控制台中的显示。用说明符%c开始字符串，并给出你希望应用的样式作为第二个参数，就是说第二个样式为CSS的样式。
其实懒加载是一种只在需要时才加载图片，它通过在用户滚动到图片位置之前，不加载图片或只加载低分辨率的图片占位符，来减少首屏加载时的网络请求和带宽占用。当用户滚动到图片位置时，再加载实际的高清图片。...把需要懒加载的图片的src属性替换为data-src属性，并使用一个占位符作为背景图，然后使用Intersection Observer API来监听图片是否进入视口，一旦进入视口，就将data-src...，我们前端开发者可以采取以下措施：使用防抖和节流：防抖是在一定时间内只触发一次函数，节流是在一定时间内只触发有限次数的函数，这两种技术都可以有效减少用户连续点击或输入导致的额外请求。...骨架屏原理作为前端开发者，在日常开发中对于骨架屏的使用应该非常熟悉，骨架屏是一种在内容加载期间展示给用户的一种视觉占位符，尤其是在用户等待数据加载时，展示一个大致的页面框架和关键元素，让用户提前感知到页面的结构...CSS类名来隐藏骨架屏并显示真实内容。
2）模型并行图示 在模型并行中，将模型进行切分，完整的数据被送至各个训练节点，与切分后的模型 进行运算，最后将多个节点的运算结果合并，如下图所示： ?...在具体说mirrored视角与consistent视角之前，说一下OneFlow的占位符。...数据占位符 注意，OneFlow的images、logits、labels、loss等对象，在定义作业函数时，并没有实际的数据。它们的作用只是描述数据的形状和属性 ，起到占位符的作用。...在作业函数的参数中的数据占位符，使用oneflow.typing下的Numpy.Placeholder、ListNumpy.Placeholder、ListListNumpy.Placeholder，注解作业函数参数的类型...两类占位符 实际上，针对并行，OneFlow的数据占位符还可以细分为两类：分别通过接口oneflow.typing.Numpy.Placeholder和oneflow.typing.ListNumpy.Placeholder
七、[Sass]扩展/继承@extend 类似css中的属性继承 在Sass中也有继承这一说，也是继承类中的样式代码快。...调用的占位符，编译出来的代码会将相同的代码合并。...c) 占位符 将上面代码中的基类 .mt 换成 Sass 的占位符格式： //SCSS中占位符的使用 %mt{ margin-top: 5px; } .block { @extend...CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。...那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码； 继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。
四、继承、占位符和混合宏 很多初学者刚刚接触的时候，都容易纠结什么时候用混合宏，什么时候用继承，然后什么时候用占位符。其实，这3个都有它们自身的优缺点。...这一节我们来详细探讨一下这3个在实际开发中的不同。...继承、占位符和混合宏的声明方式和调用方式 方法 声明方式 调用方式 继承 .class @extend 占位符 %placeholder @extend 混合宏...：编译出来的CSS不会把相同的代码块合并，造成代码冗余。...在实际开发的过程中，对于“功能代码块”（类似于JavaScript中的函数）我们都是使用混合宏来实现的，因为功能代码块往往是可以通过传递不同的参数来满足我们开发的不同需求。
& 符号代码父元素 在scss中，&符号代表父选择器。...@extend 指令 如果一些样式需要用到的地方很多，我们可以使用@extend指令将它们进行合并。...占位符选择器和@extend指令 占位符选择器可以让我创建能够继承的选择器。...占位符选择器和常用的类选择器以及ID选择器除了是以百分号%开头之外，没有其他区别。...但是如果我们在@media之外的h1中加入它自己的属性，比如 h1 { @extend .text; border:2px solid #ddd; } 这时候进行编译，就会报错。
； 标签浪费 2.6 after伪类 清浮动方法（现在主流方法），给父级添加清浮动的伪类after，且after中content为空 ...; //此时div中的内容包含“这是由after伪类生成的内容 ” display: block; clear: both; } 2.7 给父级加上 overflow...解决办法：设置背景fixed 1.14 IE7以及以下a标签右浮动时，错位到下一行 解决办法：css hack，利用css hack *margin-x...； 标签浪费 2.6 after伪类 清浮动方法（现在主流方法），给父级添加清浮动的伪类after，且after中content为空 ...; //此时div中的内容包含“这是由after伪类生成的内容 ” display: block; clear: both; } 2.7 给父级加上 overflow
有没有一种办法，在方法中传入通用的数据类型，这样不就可以合并代码了吗？泛型的出现就是专门解决这个问题的。读完本篇文章，你会对泛型有更深的了解。...使用泛型 下面是用泛型来重写上面的栈，用一个通用的数据类型T来作为一个占位符，等待在实例化时用一个实际的类型来代替。...C#泛型编译机制如下： 第一轮编译时，编译器只为Stack类型产生“泛型版”的IL代码和元数据，并不进行泛型类型的实例化，T在中间只充当占位符。...C#泛型类在编译时，先生成中间代码IL，通用类型T只是一个占位符。...在实例化类时，根据用户指定的数据类型代替T并由即时编译器（JIT）生成本地代码，这个本地代码中已经使用了实际的数据类型，等同于用实际类型写的类，所以不同的封闭类的本地代码是不一样的。
领取专属 10元无门槛券
手把手带您无忧上云
