问： 假设我有这个脚本： export.bash #!.../usr/bin/env bash export VAR="HELLO, VAR" 当我执行脚本并尝试访问 $VAR 时，我没有得到任何值!...echo $VAR 有没有一种方法可以通过只执行 export.bash 而不 source 它获取 $VAR？ 答： 不可以。 但是有几种可能的解决办法。...在调用 shell 的上下文中执行脚本: $ cat set-vars1.sh export FOO=BAR $ . set-vars1.sh $ echo $FOO BAR 另一种方法是在脚本中打印设置环境变量的命令.../set-vars2.sh)" $ echo "$FOO" BAR 在终端上执行 help export 可以查看 Bash 内置命令 export 的帮助文档： # help export export
正当我愁得要改 JS 的时候，隔壁老王一脸淡定：“兄弟，这些 CSS 技巧轻轻松松搞定，少写代码，效果还好。”于是，我抱着试一试的态度研究了一波，才发现 CSS 的隐藏技能简直是“救命稻草”！...vertical：只允许调整高度。 允许用户同时调整宽度和高度。 其他选项： overflow: auto 当内容超出输入框的尺寸时，自动添加滚动条，保证用户可以查看完整内容。...无需 JS 的互动菜单 业务场景：订单筛选菜单 用 CSS 的 :checked 伪类可以实现简单的交互效果，比如点击显示或隐藏菜单。这种方法适合轻量级项目，减少对 JavaScript 的依赖。...更高效的开发体验：快速实现复杂效果。 更灵活的布局控制：适应各种屏幕和场景。 更少的代码负担：省去写 JS 的麻烦。 互动时间： 你有没有用过这些 CSS 技巧？哪个让你印象深刻？...你在项目中遇到过类似的需求吗？还有哪些 CSS 隐藏技能可以分享？ 留言区等你讨论，一起提升我们的开发效率！
当对多个元素进行分组设计时，用户可以通过它们之间的空间量来决定它们之间的关系。如果没有间距，用户将很难分清页面上哪些项目内容相关，哪些项目内容不相关。...这不是更容易和直接吗？ 按需差距 我真正喜欢 CSS 网格的地方是 grid-gap 仅在需要时才应用，考虑以下模型。 我有一个有两张卡片的部分。...卡片组件 哦，如果我想详细了解卡片组件间距，我可能会写一本书。 我将突出显示一个通用模式，看看应该如何应用间距。 （对不起，如果你饿了） 你能想到这张卡的间距会在哪里使用吗？ 见下图。...更重要的是，在任何 JavaScript 框架中应用这些概念都相当容易。...我不是 JavaScript 开发人员，但我认为他们称之为 Props。考虑来自 styled-system.com 的以下内容： 我们在标题和部分之间有一个间隔。
通过设置高度，我的意思是项目应该有内容(不是空的)，也不是添加一个显式的高度。...大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 Hidden ? 当内容比其父内容长时，它将被剪切。但是，可以使用 Javascript 滚动内容。 Scroll ?...在上面的模型中，我们有水平放置的卡片，还有一个滚动条，可以滚动并显示更多内容。...模态框内容 ? 当模态内容太长时，我们可以很容易地使区域可滚动。...在这种情况下，我要做的是打开DevTools，然后开始删除元素并注意。 一旦水平滚动消失了，我就可以确定引起问题的元素。
在列表展示中，经常会使用卡片的内容展示形式，为了美观，常常要求各卡片间的间隙是一致的。 卡片内容不一样可能高度不等，但一般来说为了整体的一致性，会限制每个卡片的宽高都相等。...本文就基于宽高一致的多个卡片，在不同屏幕大小下，每行卡片数量可能有调整，考量如何实现等间隙的布局。 点我预览 ?...还是把目光投向margin值的设定规则吧 在设计一个页面布局时，至少已经确定了XX页面大小的情况下，容器宽度应该设置为多少（比如为1200px），每行放n个项目，项目的宽高是多少 有了这些指标（也必须有这些指标...这些整数值 加入n为4，如果要保证 itemMargin值15px在各种情况下都相等，计算可得 容器宽度containerWidth值 为 595px 同理求得 n是5时为 740px ，n是2时为 305px...为了保证各种请下间距都相等，我个人就不推荐这么干了 ? ? 通过上述的规则计算，我们可以得出每行项目数量递增时的容器宽度临界值。把这些临界值放在媒体查询里面配置，即可方便地实现这种布局的自适应。
当对多个设计元素进行分组时，用户可以根据它们之间的空间大小来决定它们之间的关系。没有间距，用户将很难浏览页面并知道哪些内容相关而哪些内容无关。 ?...请注意，分隔符周围的间距现在相等，原因是导航项没有特定的宽度，而是具有padding。结果，导航项目的宽度基于其内容。...难道不是那么容易和直接吗？ 按需定制 我真正喜欢CSS Grid 的地方是 grid-gap 只在需要的时候才会被应用。考虑下面的模型。 ? 没有CSS网格，就不可能拥有这种灵活性。...Card组件 Oh，如果我想把所有细节的Card组件间距都写进去的话，最后可能会出现书本上的内容。我就突出一个大概的模式，看看间距应该如何应用。 ? 你能想到此卡片在哪里使用间距吗？参见下图。 ?...而且，将这些概念应用到任何JavaScript框架中都相当容易。
您可以将该卡片缩小到其基本视觉形状（UI组件的骨架） ? 每当有人从服务器请求新内容时，您可以立即开始显示骨架，同时在后台加载数据。内容准备就绪后，只需将骨架换成实际卡即可。...这可以使用普通的 JavaScript 或使用像 Vue/React 这样的库来完成。 现在我们可以使用图像来显示骨架，但这会引入额外的请求和数据开销。...此外，它没有响应，如果我们决定调整一些内容卡的样式，我们将不得不复制骨架图像的更改，以便它们再次匹配。 一个更好的解决方案是只用CSS创建整个东西。没有额外的请求，最小的开销，甚至没有任何额外的标记。...我们可以用下面的方式来构建它，使以后更改设计变得更容易。 通过CSS绘制骨架 首先，我们需要绘制构成卡片骨架的基本形状。我们可以通过 background-image 属性添加不同的渐变来实现这一点。...background-size 的值来设置每个图层的宽度和高度，保持我们使用的相同顺序 background-image： ? 最后一步是将元素放在卡片上。
向组件添加 display: grid 将为您提供一个单列网格，但是主区域的高度将仅与页脚下方的内容一样高。...这可以自动放置这些子元素。这些子元素的基本最小值为 150px ，最大值为 1fr ，这意味着在较小的屏幕上，它们将占据整个 1fr 宽度，当它们达到 150px 宽度时，它们将开始流到同一条线上。...对于这些卡片，它们被放置在 Flexbox 显示模式中，使用 flex-direction: column 将方向设置为 column。 这会将标题、描述和图像块放在父卡片内的垂直列中。...在这里， clamp() 函数所做的是使该元素保持 50% 的宽度，直到 50% 大于 46ch （在较宽的视口上）或小于 23ch （在较小的视口上）。...您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。
100个最常问的JavaScript面试问答-第4部分 问题31.参数对象可用于ES6 arrow functions吗？ 问题32.如何在没有原型的情况下创建对象？ 问题33....相关内容 问题31.参数对象可用于ES6 arrow functions吗？ 答：不可以，arguments对象不适用于ES6 arrow functions。...问题37.解释JavaScript中的相等性 答： JavaScript具有严格的和类型转换的比较： 严格的比较（例如===）在不强制的情况下检查值是否相等 抽象比较（例如==）在允许强制的情况下检查值是否相等...如果比较中的任何一个值都可以是这些特定值（0, “”, 或 [] – 空数组），请不要用==，而使用===。 在其他所有情况下，您都可以放心使用==。...我很快将更新系列的第5-10部分，应该在明天了，我会保持每天至少更新一篇，关注我，或者❤或把本篇文章收藏起来，我会把后续内容链接放在本篇文章末尾。
})为了实现视频卡片的吸顶效果， Scroll 容器的内容高度使用 calc 计算属性设置为 Scroll 容器高度和视频高度的和，使 Scroll 滚动到尾部边缘时，视频隐藏，视频卡片吸顶。...Scroll 内容的剩余空间，当视频卡片吸顶时新闻列表可以完全显示，并且当新闻标题改变导致卡片高度发生变化时，新闻列表组件高度也相应变化。...0 : Constants.VIDEO_HEIGHT)在状态变量isHideVideo的监听回调中，根据视频的显隐状态修改视频卡片的上边距保持Scroll内容高度不变，避免滚动混乱。...// TODO：知识点：根据视频显隐状态修改边距，使用边距代替video占位，使Scroll容器内容高度不变，可以向下滚动显示视频，并且避免滚动混乱 onIsHideVideoChange() {...，我想邀请你帮我三个小忙：点赞，转发，有你们的 『点赞和评论』，才是我创造的动力；关注小编，同时可以期待后续文章ing，不定期分享原创知识；想要获取更多完整鸿蒙最新学习知识点，可关注B站：码牛课堂；
您所要做的就是将半径设置为元素宽度或高度的一半。 border-radius: 50px; 而且，如果我们想找点乐子，我们还可以利用灵活框模型（在#8 中详细介绍）将文本在圆圈内垂直和水平居中。...5.多种背景 该 background 属性已经过大修以允许在 CSS3 中使用多个背景。 让我们创建一个愚蠢的示例，仅作为概念证明。由于附近没有合适的图片，我将使用两张教程图片作为我们的背景。...请注意，在第一种情况下，它是如何放置在左上位置 ( 0 0) 的，而在第二种情况下，它是如何放置在右上角 ( 100% 0) 的。 确保为不支持多背景的浏览器提供后备方案。...我还将应用一个通用的宽度和高度，因为我们没有任何实际的内容在播放。...水平和垂直居中 接下来，我希望我们的卡片在屏幕上完全居中。为此，我们将利用灵活盒模型。 由于我们的页面将只包含这张卡片，我们可以有效地使用该 body 元素作为我们的包装器。
document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。...： window.outerWidth 5.如何使固定定位的元素（position:fixed）的元素垂直水平居中在浏览器可视窗口中央？...缩进的方式是设置CSS属性”text-indent:2em;”。 关于长度单位em的描述见：CSS中常见的长度单位。 7.js在函数中申明变量可以不用var吗？...变量可以在使用时先申明，后定义。之所以会有这样的差异，因为CC++是编译型语言，在编译时如果发现变量只申明，而没有定义在会编译时报错。...我在上面已经定义了变量lvlv，在下面还可以重复定义，JS强大吧，在CC++中绝对不会允许这么做的。这个JS的语法太松散，感觉JS又有点缺憾，竟然不去检查我在下面定义的变量，这是为什么呢？
它有助于设计师创建一个图像大小的清晰指南，这样开发者就可以在开发过程中处理它们。 计算宽高比 为了测量宽高比，我们需要将宽度除以如下图所示的高度。 宽度和高度之间的比例是1.33。...这些缩略图的宽度和高度应该是相等的。 由于某些原因，运营上传了一张与其他图片大小不一致的图片。注意到中间那张卡的高度与其他卡的高度不一样。 你可能会想，这还不容易解决？...我们可以给图片加个object-fit: cover。问题解决了，对吗？不是这么简单滴。这个解决方案在多种视口尺寸下都不会好看。...注意到在中等尺寸下，固定高度的图片从左边和右边被裁剪得太厉害，而在手机上，它们又太宽。所有这些都是由于使用了固定高度的原因。我们可以通过不同的媒体查询手动调整高度，但这不是一个实用的解决方案。...另外，图片是绝对定位的，它有它的父元素的全部宽度和高度，有object-fit: cover，用于上传不同大小的图片的情况。请看下面的动图。 请注意，卡片大小的变化和缩略图的长宽比没有受到影响。
这张卡片包含一个推荐信，但我们可能想在不同的上下文中使用这种卡片模式。我们的卡片不应关心其内部的内容。也就是说，在这个特定的卡片示例中，我们不会使用 .card- 对所有内容进行限定。...此外，由于我们使用的是 SCSS，因此我们可以在标记名上使用更多字数，因为无论如何，它们都会编译成更小的值。 这个特定卡片中的内容包括一张图片和一个块状引文，使用 flexbox 水平排列。...我假设这实际上是一个链接，在这种情况下，我们可以在全局样式中为链接应用 .cool-text-interactive 样式，这样我们就可以直接使用不带类的 。...，看到了他们实际使用的所有实用类和内联样式，而这些在代码示例中并没有显示出来。...，更容易解析类的作用，而且在不同的上下文中重复使用这些样式时可以减少重复。
它可以帮助学生学习并避免他们花钱购买纸质抽认卡。这是我们使用 flexbox 的列表中的第一个项目，因此一开始并没有什么挑战性。然而，一旦我掌握了它，它实际上非常易于使用，并且使项目更具活力。...是的，您现在可以扔掉所有这些便签纸。...事实上，如果我没有那个项目的代码可以依靠，我将不得不再次观看抽认卡教程视频以检查我是否正确地完成了这个项目。当然，这个项目确实有一些独特的功能，因此弄清楚如何对这些部分进行编码是一项挑战。...在这个项目中，我们使用内置的 JavaScript 子字符串函数来制作打字机效果。 15. 方形卡片（模板） 一种显示数据的时尚方式或只是一张方形卡片。...如果您想查看其余内容，可以关注我，后续会继续给大家分享！如果觉得有用，记得点赞收藏哦！
在这种情况下，我们可以使用content-visibility来跳过渲染屏幕之外的内容。如果你有大量屏幕之外的内容的话，这会大大减少页面渲染时间。...与滚动条行为相关的问题。由于元素最初渲染的高度是 0px，当你向下滚动时，这些元素会进入屏幕。实际的内容会被渲染，这个元素的高度会被相应地更新。这会使滚动条出现预料之外的行为。...当你在一个元素上使用will-change，浏览器会尝试通过将它放到一个新层中并将转换移交给 GPU 来优化它。如果你没有要转换的东西，这会导致资源浪费。...在这种情况下，我们可以只让主 CSS 文件阻塞关键路径，并将其优先下载，让其它样式表以低优先级的方式下载。...最重要的是，我们不用编写一句 JavaScript 代码就可以获得所有这些性能提升。 我相信，你可以结合以上特性，为最终用户构建性能更好的 Web 应用。
在这种情况下，我们可以使用content-visibility来跳过渲染屏幕之外的内容。如果你有大量屏幕之外的内容的话，这会大大减少页面渲染时间。...content-visibility接受几个值，我们可以在一个元素上使用content-visibility: auto;来立即获得性能提升。 我们可以看下面这个页面，包含很多显示不同信息的卡片。...与滚动条行为相关的问题。由于元素最初渲染的高度是 0px，当你向下滚动时，这些元素会进入屏幕。实际的内容会被渲染，这个元素的高度会被相应地更新。这会使滚动条出现预料之外的行为。 ?...当你在一个元素上使用will-change，浏览器会尝试通过将它放到一个新层中并将转换移交给 GPU 来优化它。如果你没有要转换的东西，这会导致资源浪费。...最重要的是，我们不用编写一句 JavaScript 代码就可以获得所有这些性能提升。 我相信，你可以结合以上特性，为最终用户构建性能更好的 Web 应用。
对于以下示例，默认的flex-direction的值都是row。 在不使用flex-grow的情况下，flex 项目的宽度将默认为其初始宽度。...可以用0作为flex-grow的值吗？ 当然可以！因为flex-grow属性接受整数值，所以可以使用0,可以防止 flex 项目占用可用空间的一种方式。 ?...这在边界情况下非常有用，我们希望使 flex 项目保持其初始宽度。 flex-grow 不能让 flex 项目相等 有一个常见的误解，使用flex-grow会使项目的宽度相等。...如果你想让项目的宽度相等，可以使用flex-basis，这个在接下来的部分会对此进行讲解。...我喜欢 flex 属性的几个点！ 顾名思义，此属性可以灵活使用其值。 请看下面的例子。
回答你的问题之前，我们先来看看，学术界有没有人用卡片法来创作学术论文和专著，以及效果如何。 2 奇人 让我理解卡片法的功效的，是个奇人。...所以卢曼卡片创作的研究，也就大都在德语使用者内部自产自销了。 这些人，一直在推广 zettelkasten 这个概念。Zettelkasten 是德语，翻译成中文，约等于是「卡片盒」。...4 实质 讲了这些，你大概能从感性上了解到，卡片盒方法不但适合学术写作，而且能够消除学术写作的痛苦，给你带来轻松和愉悦感，甚至使你变成高产学者。...但是文献 A 当初是怎么从审稿人的手底下滑过去的？它想必是有合理和可取之处的。于是你就可以从这样的文献间冲突出发，用更为全面的模型考虑在哪一种情况下，A 的论点依然会成立。...曾经读过的内容，你会遗忘。 时间久远的笔记，你恐怕也早已忘记。 再见到他们的时候，甚至会怀疑——这难道是我写的？ 但是，好消息是，你的「卡片盒」（笔记网络）不会遗忘。
你可以在不阅读本书中的其他内容的情况下理解它，本书的其他部分也不依赖于它的内容。然而，阅读本书的提示在阅读本书的提示中适用。 第一章：基本 JavaScript 原文：1....= 严格（不）相等：===和!== 普通相等性认为太多的值是相等的（详细内容在普通（宽松）相等性（==，！=）中有解释），这可能会隐藏错误。因此，建议始终使用严格相等性。...它对语言进行了广泛的初步介绍，并解释了它存在的背景（不过不涉及太多技术细节）。 这部分不是必读的；你可以在没有阅读它的情况下理解本书的其余部分。 第二章 为什么选择 JavaScript？...我用不同范式的几种编程语言写了大量代码。因此，我很清楚 JavaScript 并不是优雅的巅峰。然而，它是一种非常灵活的语言，有一个相当优雅的核心，并且使你能够使用面向对象编程和函数式编程的混合。...它是 Web 平台的一部分 JavaScript 是 Web 平台（HTML5 API、DOM 等）的一个重要组成部分，以至于很容易忘记前者也可以在没有后者的情况下使用。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
