CSS 中的 unset, initial, 和 inherit 关键字用于 CSS 属性值,提供了对属性继承和默认值的控制。这些关键字在处理样式复写和元素默认行为时非常有用,可以帮助开发者更精确地控制样式的应用。

1. unset

  • 定义:unset 是一个智能关键字,它根据 CSS 属性是否是继承属性来决定其行为。对于自然继承的属性,它表现得像 inherit(继承父元素的值);对于那些不继承的属性,它表现得像 initial(使用属性的初始默认值)。

  • 用途:unset 特别适用于想撤销特定元素上所有先前应用的样式,并希望某些样式回退到继承状态而其他回退到初始状态时。

button {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

button.reset {
  all: unset;
}

在这个例子中,.reset 类的按钮将不再继承任何样式(如边框、背景、颜色等),colorbackground-color 将回到默认状态,而 border 将回到初始值,因为它通常不继承。

2. initial

  • 定义:initial 将一个属性设置为其初始默认值,即 CSS 规范中定义的值。
  • 用途:适用于将元素的某个属性明确重置为其默认状态,无论上下文如何。这对于撤销样式中的某些特定更改非常有用。
div {
  color: red;
}

div.default {
  color: initial; /* 将颜色重置为黑色,默认的初始颜色 */
}

这里 .default 类的 div 元素将有默认的黑色文本,不论其父元素的颜色是什么。

3. inherit

  • 定义:inherit 明确地设置属性值为直接父元素的相同属性值。
  • 用途:在一些特殊情况下,你可能需要强制一个元素继承其父元素的某些属性,即使默认情况下它不会这样做。
div {
  color: green;
}

span {
  color: inherit; /* 将颜色设置为继承其父 div 的颜色 */
}

这里的 span 通常不会继承 div 的颜色,除非明确指定使用 inherit。

在实际开发中的应用

  • 布局复位:使用 all: unset; 或特定属性的 initial 值来重置某些复杂的组件或插件的默认样式,避免样式冲突。
  • 主题一致性:在构建具有深度继承和多级覆盖的大型网站或应用时,inherit 可以确保子组件继承关键视觉属性(如字体、颜色)。
  • 框架和库的整合:在将第三方 CSS 框架或库整合到项目中时,经常会使用这些关键字来帮助撤销或应用某些默认或继承样式,确保组件的视觉一致性。
Posted in CSS.

解析 matrix(a, b, c, d, e, f) 函数

matrix(a, b, c, d, e, f) 函数接受六个参数,对应 2D 变换矩阵的六个值:

  • a 和 d:控制缩放(scaleX 和 scaleY)。
  • b 和 c:控制倾斜(skewY 和 skewX)。
  • e 和 f:控制平移(translateX 和 translateY)。
transform: matrix(a, b, c, d, e, f);
  • a:水平方向的缩放。取值为 1 时,表示保持原有大小。
  • b:水平方向的倾斜(skewY)。
  • c:垂直方向的倾斜(skewX)。
  • d:垂直方向的缩放。取值为 1 时,表示保持原有大小。
  • e:水平方向的平移距离,单位为像素。
  • f:垂直方向的平移距离,单位为像素。

具体代码分析

transform: matrix(1, 0, 0, 1, 0, -100); 的具体含义是:

  • a = 1:水平缩放系数为 1,表示不缩放。
  • b = 0:水平倾斜为 0,表示不倾斜。
  • c = 0:垂直倾斜为 0,表示不倾斜。
  • d = 1:垂直缩放系数为 1,表示不缩放。
  • e = 0:水平平移距离为 0,表示不平移。
  • f = -100:垂直平移距离为 -100 像素,表示元素在 Y 轴上向上移动 100 像素。

这段 transform: matrix(1, 0, 0, 1, 0, -100); 代码的效果是将元素在垂直方向上平移了 100 像素,向上移动,而不改变其大小、倾斜角度或水平位置。

这是一个简化的形式,通常可以通过更直观的 transform 属性写法来实现同样的效果:

transform: translateY(-100px);
Posted in CSS.

针对Webkit浏览器(Chrome,Safari等)

.instagram-slide .instagram-layout--scroll::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}

为了兼容其他浏览器,如Firefox,可以使用以下CSS:

.instagram-slide .instagram-layout--scroll {
    -ms-overflow-style: none;  /* IE和Edge */
    scrollbar-width: none;  /* Firefox */
}
Posted in CSS.

在CSS中,flex: 0 0 auto; 是用于设置 Flexbox 布局的属性。这个属性是 flex-grow, flex-shrink, 和 flex-basis 的简写形式。

flex-grow:指定一个弹性项在父容器中沿着主轴的增长系数。如果所有项目的 flex-grow 都为 1,则它们会等分剩余空间。设置为0表示不增长。
flex-shrink:指定一个弹性项在必要时缩小的系数。如果空间不足,该值指定项目相对于其他项目收缩的比例。设置为0表示不收缩。
flex-basis:指定了一个弹性项在交叉轴上的初始大小。可以设置为 auto、长度值(如 px、%)或百分比。
因此,flex: 0 0 auto; 的含义是:

flex-grow: 0:这意味着项目不会在剩余空间中增长,它将占据其自然尺寸。
flex-shrink: 0:项目不会收缩,即使空间不足,它也不会缩小。
flex-basis: auto:项目会基于其自身尺寸在交叉轴方向上占据空间。
这种设置通常用于那些我们希望根据项目内容大小来确定大小的情况,而不希望它们自动扩展或缩小。

////
在CSS的Flexbox布局中,flex: 1 0 0%; 这个属性设置表示了以下含义:

flex-grow: 1:这表示项目可以增长,占据所有剩余空间。如果所有项目都具有相同的 flex-grow 值为1,则它们将平均分配所有可用空间。
flex-shrink: 0:项目不会缩小,即使空间不足,也不会收缩。
flex-basis: 0%:这表明项目在分配空间时会根据父元素的大小进行自动调整,占据初始大小为0%的空间。
综合来看,flex: 1 0 0%; 的作用是让项目可以根据剩余空间进行扩展,但不会被压缩,始终占据0%的基础空间,根据需要平分或拉伸剩余空间。这通常用于创建灵活且平均分配剩余空间的布局。

Posted in CSS.

小米字体和思源宋字体引入到网站方法:

首先将字体css引入到网站

<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans" />

添加调用字体到全局css

* {font-family: MiSans} 

思源宋字体方法同上

//css引用
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=Source_Han_Serif:400,600:Source_Han_Serif" />

//css调用
* {font-family: Source Han Serif}

作者:道言 https://www.bilibili.com/read/cv28524456/ 出处:bilibili

Posted in CSS.

aaa
.clearfix:after{ content:""; /*设置内容为空*/ height:0; /*高度为0*/ line-height:0; /*行高为0*/ display:block; /*将文本转为块级元素*/ visibility:hidden; /*将元素隐藏*/ clear:both; /*清除浮动*/ } .clearfix{ zoom:1; /*为了兼容IE*/ }
Posted in CSS.

CSS可以帮助我们让表格出现滚动条,特别是当表格非常长并且所有列不适合在一页上显示。下面是一些CSS代码可以让表格出现滚动条。

/* 添加以下样式,即可让表格出现水平和垂直滚动条 */
table {
overflow: auto;
display: block;
/* 为表格添加一些间距和边框 */
padding: 20px;
border: 1px solid #ddd;
}
/* 添加以下样式,即可让表格的表头固定在顶部 */
thead {
position: sticky;
top: 0;
background-color: #fff;
}
/* 添加以下样式,即可让表格的行固定在左侧 */
tbody {
position: sticky;
left: 0;
background-color: #fff;
box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.5);
}
/* 如果对于表格的垂直滚动条不想出现的话,可以添加以下样式 */
tbody::-webkit-scrollbar {
display: none;
}

来源:前端老白

Posted in CSS.

单行文字超出显示省略号

.text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

3行文字超出显示省略号

.text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;/*省略几行写几*/
    -webkit-box-orient: vertical;
}

鼠标悬浮显示全部

<!-- 给元素设置title属性 -->
<p title="文本内容">文本内容</p>
Posted in CSS.

它们一样是因为:

都是鼠标落上去的时候触发的。

它们不一样是因为:

onmousemove是javascript里面的,他可以触发js命令,但是hover做不到,hover只是css样式的类,只能定义样式。
比如说鼠标落上去实现一个弹出窗口的操作,就要用onmousemove,用hover的css定义是没办法的。除非在css里面再调用js,那就麻烦了。

细节:

hover包括了鼠标移到对象上,同时鼠标再移出对象的过程,相应的子类也被选中。

mouseover是鼠标经过对象时,不包含他的子类同时被选中。

主要区别在于 hover元素的子类上也有添加了事件驱动。而mouseover 只对当前元素添加事件驱动。

且 hover 事件包含mouseover 事件

mousemove(fn);

在每一个匹配元素的mousemove事件中绑定一个处理函数。

hover(over, out);

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(对子类的检测),如果是,则会继续保持“悬停”状态,而不触发移出事件(mouseout)。