CSS
- align-items:center(垂直方向的居中)
- justify-content:center(水平方向的居中)
- CSS文本设置超出2行显示省略号
- 取消scroll横向滚动条
/deep/:这是一个 CSS 伪类选择器,用于穿透组件的封装,可以影响到组件内部的样式。在某些情况下,组件会封装自己的样式,但如果你想自定义组件内部的样式,你可以使用/deep/来覆盖组件的封装样式。::-webkit-scrollbar:这是一个伪元素选择器,用来选中浏览器的滚动条部分,可以用来自定义滚动条的样式。width: 4px !important;和height: 1px !important;:这两行代码设置了滚动条的宽度和高度。滚动条会变得非常细,宽度为4像素,高度为1像素。overflow: auto !important;:这一行代码指定了滚动条的溢出行为。auto的意思是只在内容超出容器时显示滚动条,这通常是默认行为,但!important用来确保这个规则被应用,即使有其他样式也不会覆盖它。background: transparent !important;:这一行代码将滚动条的背景颜色设置为透明,使得滚动条背后的内容可以透过滚动条看到。webkit-appearance: auto !important;:这个属性通常用来重置浏览器默认的外观,确保滚动条的外观是自定义的。display: block;:这行代码确保滚动条以块级元素的方式显示,通常是默认行为,但也被明确指定了一次。- 总之,这段 CSS 代码的主要作用是自定义浏览器滚动条的样式,使其变得非常细,透明,以及确保在需要滚动时才显示。它使用了一些 CSS 伪类和属性来实现这些效果,并确保这些样式规则被强制应用,不容易被其他样式覆盖。
- box-sizing
这个属性有两种常见的取值:content-box和border-box`,它们分别影响了元素盒模型的计算方式。 - content-box
(默认值): 当元素的box-sizing设置为content-box` 时,元素的宽度和高度仅包括元素的内容区域。这意味着元素的实际宽度和高度由内容、边框和内边距这三部分共同决定。如果你设置一个元素的宽度为100像素,那么这100像素只会包括元素的内容,而边框和内边距会额外占用空间,使元素的总宽度变得更大。 - border-box
: 当元素的box-sizing设置为border-box时,元素的宽度和高度包括了元素的内容、边框和内边距。这意味着元素的实际宽度和高度只取决于你设置的宽度和高度属性,而不再受到边框和内边距的干扰。如果你设置一个元素的宽度为100像素,并且将box-sizing设置为border-box,那么这100像素就会包括内容、边框和内边距,而不会再额外增加元素的总宽度。 这两种取值的选择取决于你的布局需求。通常情况下,当你想要更精确地控制元素的尺寸并确保元素不会超出预期的宽度或高度时,使用border-box` 是一个不错的选择。它在响应式设计和网格系统中特别有用,因为你可以更轻松地计算元素的大小和位置,而不必担心边框和内边距会改变元素的盒模型。
scoped属性用于限制CSS样式的作用范围,使其仅对某一部分的HTML元素生效,而不是全局生效。
white-space: nowrap;是一个 CSS 属性,用于指定元素部文本的换行规则。 默认情况下,当文本内容超过元素的宽度时,浏览器会自动将文本进行换行显示。但是,通过设置white-space: nowrap;这个属性,我们告诉浏览器不要进行换行,而是让文本在一行内保持连续显示。 简单来说,就是当你有一段文本想要在不换行的情况下显示在一行内时,你可以使用white-space: nowrap;来实现。 这个属性通常用在需要显示长的连续文本,例如横向导航栏、表格等地方。通过将white-space设置为nowrap,我们确保文本不会因为宽度不够而断行,而是在一行内完整显示,避免破坏设计或排版的要求。
vue3
- this无法使用(不支持),可替代方法:
- 一个父组件传参到子组件,子组件如何定义接受的参数和方法
正则表达式
- path: [/^\/api\//]
- *
/*:正则表达式通常由两个斜杠/包裹起来,以明确标示正则表达式的开始和结束。这里的/^\/api\//也是这种情况。 ^:这个符号在正则表达式中表示字符串的开始。在这里,它用来限定匹配的字符串必须从这里开始。- *
\/*:这是经过转义的斜杠字符。因为/在正则表达式中有特殊意义(表示开始和结束),如果你想匹配一个真正的/字符,你需要用\来转义它。在这个表达式中,\/匹配真正的/字符。 - *
api*:这是直接匹配字符串中的api部分。任何路径以/api开始的都会被匹配。 - *
\/*:再次,这也是一个经过转义的斜杠,匹配真正的/字符。 - *第二个
/*:标志着正则表达式的结束。
- 作者:清弦子
- 链接:https://tangly1024.com/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/cv3
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
.jpg?table=collection&id=aeb9995f-c21f-83d9-b9b7-07efa597272a&t=aeb9995f-c21f-83d9-b9b7-07efa597272a)