你所不知道的css

最新推荐文章于 2024-05-20 22:08:52 发布

城南顾北

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量1k

点赞数 29

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_54252035/article/details/136477689

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

你所不知道的css

总结自：你所不知道的 CSS_哔哩哔哩_bilibili

字体

font-family

<body>
    <div class="example1" style="font-size: 100px; font-family: serif">
        L 李
    </div>
    <div class="example2" style="font-size: 100px; font-family: sans-serif">
        L 李
    </div>
</body>

不同的操作系统中，预装的字体是不一样的。

上面的一行叫做衬线字体，下面的那一行叫做非衬线字体

程序会自行在电脑中查询你默认的第一种衬线字体或者非衬线字体来进行展示。

font-weight

正常的情况下只有 400 （normal）和 700 （bold）是一定有的，某一些字体可能并不存在其他字重的样式。

事实上，很少有字体是满足到900的

css优先级

使用叠加的方式来增加 css 的优先级

body .example1 {
	color: violet;
}
.example1 {
	color: red;
}

可以看并不是我们想要的效果，于是我们可以通过如下的方式来解决问题：

body .example1 {
	color: violet;
}
.example1 {
	color: red !important;
}

但是这样会有一点破坏代码结构的感觉，所以我们使用叠加的方式来解决问题：

body .example1 {
	color: violet;
}
.example1.example1 {
	color: red;
}

结果同上，此外我们还可以通过这样的方式来解决问题：

body .example1 {
	color: violet;
}
.example1[class] {
	color: red;
}

结果同上。

深入理解currentColor和color

currentColor = color

.example1 {
    color: red;
    border: 1px solid;
    box-shadow: 10px 10px;
}

border ： 1px solid cuttentColor 实际上这才是真正的写法，但是如果你不写颜色的话，就会出现 currentColor=color 的情况

inherit和unset

inherit

inherit：继承，从他的父元素中去寻找这个值

每一个css属性都会表明是继承还是不继承的，请在mdn中具体查询。

如何实现如下的这个效果：

解决方案：

这样的话，就将 inherit使用上了，而且当上面的图片改变了之后也不用改变下面的代码。

unset

unset：CSS 关键字 unset 可以分为两种情况，如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。

注意与 initial的区别：

CSS 关键字 initial 将属性的初始（或默认）值应用于元素。

fixed失效

如果你在父容器上面加上了 transform属性，fixed 就不会跟着视口来定位了，会根据它的父元素的位置来定位。

根本原因是在于 stacking context
-> 堆叠上下文

堆叠顺序（stacking order）：HTML 内元素发生层叠的时候的特定垂直顺序,即元素在用户视线方向上的顺序。

以下的几种方式都会使得 fixed 失效。

所以当你的定位失效的时候，你可以一直往上面去寻找看看有没有这样的样式。

3D坍缩

当我们使用了css混合模式（或者是滤镜）的时候，堆叠上下文会重新对着个使用了混合模式的元素的根节点出创建了堵路的渲染平面，而这个平面默认是不支持 perserve-3d的效果的，所以我们会看到二维的效果。

100vh失效

在一些浏览器中，某些浏览器会把地址栏算到100vh中，所以会出现滚动条。

所以慎用100vh

所以建议使用以下的方法：

也可以使用最新的单位 cqw、cqh来解决问题：

替换元素的伪元素

所有元素都有伪元素吗（所有元素都有 ::before 和 ::after吗）

其实并不是，css中的替换元素是没有伪元素的，所以最简单的，图片标签是没有伪元素的。

比较常见的的替换元素：

替换元素(input并不是，但他也没有伪元素)
`<audio>`
`<img>`
`<input>`
`<canvas>`
`<video>`
`<audio>`
`<iframe>`
`<object>`
`<embed>`

但img元素不一定总是替换元素。

在图片无法加载的情况下是可以实现伪元素的效果的。

所以我们可以使用这个思路来实现当图片无法加载的时候，实现兜底图和文字同时出现。

overflow:hidden

问题：是不是父元素设置了这个属性，当任意的元素超过父元素之后都无法显示？

答案当然是否定的。

请看下面的两种情况：

此外是否还有别的方式让溢出容器的部分隐藏？

clip-path:(坐标)

contain:paint

超长打点省略

关于单行省略：

white-space:nowrap 
overflow:hidden
text-overflow:ellipsis

关于多行省略：

white-space:normal
overflow:hidden
text-overflow:ellipsis
display: -webkit-box
-webkit-line-clamp: 2
-webkit-box-orient: vertical

display: -webkit-box 将对象作为弹性伸缩盒子模型显示；
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式；
text-overflow: ellipsis 用省略号“…”隐藏超出范围的文本

那如果我们想让省略的部分放在内容的前面呢？

这里就要涉及到文本排版的方向：

direction：rtl ltr

方向：从右到左从左到右

关于整块省略：

城南顾北

关注

29
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
你所不知道的css

可以分为两种情况，如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。当我们使用了css混合模式（或者是滤镜）的时候，堆叠上下文会重新对着个使用了混合模式的元素的根节点出创建了堵路的渲染平面，而这个平面默认是不支持。属性，fixed 就不会跟着视口来定位了，会根据它的父元素的位置来定位。使用上了，而且当上面的图片改变了之后也不用改变下面的代码。是没有伪元素的，所以最简单的，图片标签是没有伪元素的。
复制链接

扫一扫