CSS相关知识点

原创已于 2025-05-28 15:27:26 修改 · 919 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-04-28 16:12:19 首次发布

本文介绍了CSS伪类选择器的用法，浏览器内核及其兼容性，Sass中的&符号和混合器，flex布局的应用，以及.npmrc文件和CSS总结中的常见特性，如.inherit、currentColor和预格式化文本的处理。

一.伪类选择器

伪类使用单冒号（如:hover、:visited），伪元素使用双冒号

::selection 表示元素选中内容（注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection）

二.浏览器内核

1.浏览器的内核引擎分类

WebKit内核: Google Chrome、Safari、傲游3、猎豹浏览器、百度浏览器、opera浏览器等、都是基于Webkit开发的（edge浏览器也支持下面的css语法哦）
Gecko内核: Firefox 是基于Gecko开发
Trident内核: IE是基于Trident开发的

2.各浏览器内核的兼容写法

3.webkit内核的浏览器滚动条样式

三.sass语法

1.“&”符号

通常用于选择器中，表示选择某个元素的子元素或特定状态下的元素

2.@minx、@include

当你的代码中需要用到大段重复样式代码的时候，可以使用scss的混合器实现大段样式的复用。混合器使用@mixin标识符定义。

四.flex布局

详情参考：一文吃透 CSS Flex 布局 - 知乎

五. .npmrc文件

详情参考：【深入理解 .npmrc 文件_vue中的npmrc文件-优快云博客】

六.css总结点

1.inherit、currentColor等

inherit 表示使用父级使用的值。eg:color: inherit;

currentColor 跟随最接近的颜色属性值。

opacity实现透明效果,作用于元素，以及元素内的所有内容的透明度,设置后可能会发生背景色盖住了文字底色的情况。

box-shadow:

0 2px 5px 0 rgba(0,0,0,.16),

0 2px 10px 0 rgba(0,0,0,.12);

文本溢出省略
.classxxx {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 使用省略号表示溢出内容 */
}

边框透明色
border: 1px solid transparent;

2.em

16px = 12pt = 1em = 100%em 不像 px 和 pt 那样，它是可以成比例缩放的单位。.5em就是0.5em

3.<pre>

<pre>可定义预格式化文本：被包围在<pre>标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

4.输入框placeholder

input::placeholder {
color: #999; /* 设置颜色为灰色 */
}

5.css 文字过多显示...

1. 单行文本中显示省略号
.ellipsis {
white-space: nowrap; /* 确保文本不会换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 显示省略号来代表被修剪的文本 */
}

2. 多行文本中显示省略号

.multiline-ellipsis {
display: -webkit-box; /* 必须设置为box，以使用-webkit-line-clamp */
-webkit-box-orient: vertical; /* 必须设置为vertical，以使用-webkit-line-clamp */
-webkit-line-clamp: 2; /* 限制显示的行数为2 */
overflow: hidden; /* 隐藏溢出的内容 */
}