2024年最全鲜为人知的CSS高招，2024年最新这些面试题你会吗-CSDN博客

本文链接：https://blog.csdn.net/2401_84616292/article/details/138869698

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

15、caret-color【设置插入符号的颜色】
16、@supports【检查浏览器是否支持特定的一个或多个属性】
17、var（）【自定义变量的值作为属性值】
18、calc（）【用于指定使用大小、角度、时间或数字作为值的属性的计算值。这允许根据不同单位的加减来设置值。】
19、attr（）【可以检索所选元素的属性值并在样式中使用它】
20、:target【伪类允许你创建无需 JavaScript 即可工作的模态】
21、::marker【类似：使用 list-style: none 删除列表标记，并使用 ::before 或 ::after 伪元素添加我们自己的标记】
22、::selection【伪元素允许你设置文本选择的样式】

CSS 属性和值，它们对提高 Web 界面开发的速度和质量特别帮助。

现代浏览器都支持它们中的大多数。但是使用这些属性中的任何一个，自行了解查询下浏览器对它是否支持。

1、grid + place-items【水平垂直对齐】

这种技术允许你仅用两行代码水平和垂直对齐项目。

.parent {

display: grid;

place-items: center;

}

place-items 是 justify-items 和 align-items 的简写属性。

此属性可以一次应用于一个或多个（子）单元格。

.parent {

display: grid;

grid-template-columns: 1fr 1fr;

place-items: center

}

2、flex + margin【水平垂直对齐】

另一种水平和垂直对齐项目的现代方法是使用 display: flex 和 margin: auto 的组合。

.parent {

display: flex;

}

.child {

margin: auto;

}

其实，使用以下代码段可以完成相同的效果：

.parent {

display: flex;

justify-content: center;

align-items: center;

}

3、flex + gap【设置flex项之间的空隙】

既然我们在谈论 Flexbox，值得一提的是，我们终于能够使用 gap 属性设置 flex 项之间的间隙（我们真的需要这个）：

.parent {

display: flex;

flex-wrap: wrap;

gap: 1em;

}

4、inline-flex【创建内联元素】

此属性允许你创建具有 Flexbox 功能的内联元素。一个例子胜过我说很多话：

👋

👌

👍

👐

body {

margin: 0;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

gap: 0.5em;

background: #fbfbfb;

}

span {

width: 2.5em;

height: 2.5em;

/* — */

display: inline-flex;

justify-content: center;

align-items: center;

/* — */

background: #1266f1;

border-radius: 30%;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

font-size: 1.1rem;

}

5、columns【文本拆分为列】

此技术允许你将文本拆分为列。column-count 属性指定列数，column-gap 设置列间间隙的大小，column-rule 设置列间垂直线的样式。

columns 是 column-count 和 column-width 的简写属性。

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis reprehenderit inventore ad libero officia, necessitatibus laudantium corporis veniam quae, fugiat dolores quaerat corrupti tempore ipsa consequuntur similique explicabo ducimus commodi expedita. Dolore commodi nesciunt harum? Consequuntur, voluptatibus odio! Maiores non alias autem tempore corrupti, animi accusamus repudiandae nam. Autem at explicabo molestias dignissimos repellendus, magnam laudantium ea quisquam, quam, tenetur adipisci facere quas. Accusantium architecto iste eius tempore consequatur quidem officiis delectus eaque sequi rem! Nesciunt voluptatum tempora voluptatem a sit, minima excepturi quaerat quasi soluta aspernatur quia explicabo incidunt, fugiat animi. Dolor provident corporis magni voluptate vel non earum?

@import url(“https://fonts.googleapis.com/css2?family=Montserrat&display=swap”);

body {

margin: 0;

background: #262626;

font-family: “Montserrat”, sans-serif;

color: #fbfbfb;

}

p {

margin: 1em;

/* — */

column-count: 3;

column-gap: 2em;

column-rule: 1px dotted;

/* — */

}

@media (max-width: 768px) {

p {

column-count: 2;

}

@media (max-width: 512px) {

p {

column-count: 1;

}

6、background-repeat【背景填充指定图案顺序】

background-repeat 属性设置背景填充指定图像的顺序。round 值在容器的整个宽度上均匀分布图像，而 space 值在图像之间添加少量填充：

body {

margin: 0;

height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background: #fbfbfb;

}

div {

width: 300px;

height: 64px;

background-image: url(“https://pics.freeicons.io/uploads/icons/png/3733236321617275952-64.png”);

}

.repeat {

background-repeat: repeat;

}

.round {

background-repeat: round;

}

.space {

background-repeat: space;

}

7、background-blend-mode【设置背景图像和颜色】

background-blend-mode 属性设置背景图像和颜色（或多个背景图像/颜色）应该相互混合的顺序。

它的一些值：

color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
saturation
screen
soft-light

你用过 Photoshop 吗？那我想你明白这是怎么回事了。

假设我们有一个想要用作背景的黑白图像。但同时，我们希望它是彩色的。我们怎样才能做到这一点？

look at

the sky

@import url(“https://fonts.googleapis.com/css2?family=Audiowide&display=swap”);

@keyframes show {

from {

opacity: 0;

transform: scale(0) rotate(-180deg);

}

to {

opacity: 1;

transform: scale(1) rotate(0);

}

body {

margin: 0;

height: 100vh;

/* — */

background: url(“https://images.pexels.com/photos/414659/pexels-photo-414659.jpeg?auto=compress&cs=tinysrgb&h=650&w=940”),

linear-gradient(135deg, skyblue, steelblue 90%);

background-blend-mode: overlay;

/* — */

background-size: cover;

display: grid;

place-items: center;

}

h1 {

font-family: “Audiowide”, cursive;

color: #00b74a;

font-size: 4rem;

text-transform: uppercase;

text-align: center;

text-shadow: 0 1px 2px #262626;

animation: show 2s linear forwards;

}

8、background-clip【定义了背景颜色或背景图像应该超出元素的内边距的程度】

background-clip 属性定义了背景颜色或背景图像应该超出元素的内边距的程度。在我看来， text 是这个属性最有趣的值：

nature

9、filter【对元素应用视觉效果】

filter 属性允许你对元素应用一些视觉效果。

它的函数值：

url()
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()

为懒惰的人更改网站颜色主题（或方案）：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime. Adipisci quos quia veritatis nemo quaerat magnam dolorum tempora voluptatum deleniti consectetur enim ea facere nihil sed ut laborum hic, sapiente vel ratione harum, vero iusto laudantium. Porro accusantium a harum ipsam!

@import url(“https://fonts.googleapis.com/css2?family=Montserrat&display=swap”);

body {

margin: 0;

height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.theme {

cursor: pointer;

}

.theme:checked + .text {

filter: invert();

}

.text {

margin: 1em;

padding: 1em;

background: #262626;

border-radius: 4px;

font-family: “Montserrat”, sans-serif;

color: #fbfbfb;

transition: 0.2s ease-in;

}

在 CSSgram 上，你会找到一个为 Instagram 过滤器使用过滤器的示例。

10、drop-shadow【允许你向图像本身（以 PNG 格式）添加阴影，而不是添加到其中的框】

设置为 drop-shadow() 的 filter 属性与 box-shadow 属性不同，它在应用效果方面类似，允许你向图像本身（以 PNG 格式）添加阴影，而不是添加到其中的框。

@import url(“https://fonts.googleapis.com/css2?family=Montserrat&display=swap”);

body {

margin: 0;

height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.theme {

cursor: pointer;

}

.theme:checked + .text {

filter: invert();

}

.text {

margin: 1em;

padding: 1em;

background: #262626;

border-radius: 4px;

font-family: “Montserrat”, sans-serif;

color: #fbfbfb;

transition: 0.2s ease-in;

}

11、object-fit【控制被替换元素的纵横比，例如 img 和 video，如果它们有宽度或高度，以及缩放过程。】

object-fit 属性控制被替换元素的纵横比，例如 img 和 video，如果它们有宽度或高度，以及缩放过程。

例如，缩小值允许你保持图像的纵横比，而不管框大小：

body {

margin: 0;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

gap: 1em;

background-color: #fbfbfb;

}

img {

width: 100px;

height: 100px;

/* — */

object-fit: scale-down;

/* — */

border: 1px dashed #262626;

border-radius: 4px;

}

object-position 属性用于对齐框内任何选定的替换元素的内容。

12、cursor【定义自己的图片和SVG、光标图标】

你知道吗，除了浏览器提供的光标图标（比如cursor:pointer），我们还可以定义自己的图片和SVG？

image

svg

body {

margin: 0;

height: 100vh;

background-color: #fbfbfb;

display: flex;

justify-content: center;

align-items: center;

gap: 4em;

}

div {

width: 100px;

height: 100px;

display: grid;

place-items: center;

background-image: linear-gradient(yellow, orange);

font-family: system-ui;

font-weight: bold;

text-transform: uppercase;

letter-spacing: 2px;

border-radius: 4px;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

}

.image {

cursor: url(“https://pics.freeicons.io/uploads/icons/png/20278001131579606320-32.png”),

auto;

}

.svg {

cursor: url(“data:image/svg+xml;utf8, ”),

auto;

}

13、scroll-behavior【属性设置为 smooth 可以轻松实现页面部分之间的平滑滚动】

scroll-behavior 属性设置为 smooth 可以轻松实现页面部分之间的平滑滚动：

Scroll to

A

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

0.25);

}

.image {

cursor: url(“https://pics.freeicons.io/uploads/icons/png/20278001131579606320-32.png”),

auto;

}

.svg {

cursor: url(“data:image/svg+xml;utf8, ”),

auto;

}

13、scroll-behavior【属性设置为 smooth 可以轻松实现页面部分之间的平滑滚动】

scroll-behavior 属性设置为 smooth 可以轻松实现页面部分之间的平滑滚动：

Scroll to

A

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-3pzWfaDB-1715691006210)]