当前位置: 首页 > 知识库问答 >
问题:

前端 - css "as each of the properties of the shorthand"是什么意思?

周翰
2023-09-11

比如flex
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
as each of the properties of the shorthand:
flex-grow: 0
flex-shrink: 1
flex-basis: auto

直译是 作为简写的每个属性
但是我不理解什么意思


我大概知道什么意思,就是flex的初始值是flex: 0 1 auto
但是看这个“as each of the properties of the shorthand:”实在有点别扭

共有1个答案

干浩然
2023-09-11

那么就拿常用 padding 来举例吧。

正常来说,如果要设置一个元素的 padding 值,你需要通过设置 padding-toppadding-bottompadding-leftpadding-right 来控制四个方向的值。

div {    padding-top: 1em;    padding-bottom: 1em;    padding-left: 1em;    padding-right: 1em;}

是不是太麻烦了,换成 padding 这个简写属性怎么样?

div {    padding: 1em;}

简写属性的目的很简单,把一些相关联的属性合在一起,然后根据参数数量来决定生效效果。比较常见的还有 backgroundmargin

参见:

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding
 类似资料:
  • 举例来说,react或vue项目里。CSS用到url的时候,~和@是什么用法。在哪里配置的,MDN里好像也没写这个。求一个完整的步骤

  • 什么是module css? 我们在学习React 的时候,经常看到module CSS的说法。 请问下我们自定义组件,将CSS文件放在index.tsx同级别目录下是否属于module CSS呢?

  • 问题内容: 什么是在这个CSS规则是什么意思? 问题答案: 是相邻的同级组合器。 这意味着选择只选择自带 之后 的。 插图: 选择了什么,没有选择什么: 选择 这个来之后第一。 未选择 这出现在第一后而不是在。由于它不会立即跟随,因此未选中。 但是,由于它仍然紧随元素之后,选择器不会立即匹配此元素,而是将使用通用的同级组合器来匹配该元素。 未选择 这位于内,并且在引号内没有满足其选择器的内容。

  • 问题内容: CSS是什么意思? CSS 2中可用吗?CSS 3? 在哪里支持?所有现代浏览器? 问题答案: 从本质上讲,它的意思是说。“这很重要,请忽略后续规则,以及所有常见的特异性问题,请应用 此 规则!” 在正常使用中,外部样式表中定义的规则被文档中定义的样式所取代,而样式本身又被元素本身内的内联样式所取代(假设选择器的特异性相同)。用“属性”(?)定义规则将放弃关于“后继”规则优先于“较早”

  • 问题内容: 有人可以解释这两个CSS选择器的区别吗? 上定义中的多余点是什么? 问题答案: 一个前缀通常代表一类选择,但如果它紧跟空格那么它是一个语法错误。 如果要冒昧地猜测一下,那么可能是作者想要说的,但是错过了Shift键,就像他正要键入字符(子组合器)一样。 您的第二个选择器,仅表示包含在名为的类的元素中的任何选择器。

  • 问题内容: 我是第一次使用,并从fontsquirrel下载了一个字体工具包 他们建议插入我的CSS中的代码是: 现在,笑脸让我难过。但是src中的url数量也是如此- 为什么它们建议这么多文件,并且在呈现页面时会将它们全部发送到浏览器?删除除.ttf以外的所有内容是否有害? 问题答案: 如果您在font-squirrel的font-face生成器中阅读了注释,您会发现这是paul irish的陷