7个实用的CSS技巧(1)

我们可以使用 :first-letter 来删除文本的第一个字母：

p:first-letter {
 font-size: 200%;
 color: #8A2BE2;
}

:first-letter 选择器用于指定元素的首字母样式，它仅适用于块级元素。效果如下:

codepen.io/OMGZui/pen/…

2. 图像文本环绕

CSS 中的 shape-outside 属性是一个非常有用且强大的工具，它允许设计师和开发者控制内容如何围绕一个浮动元素（通常是图像或图形）进行排列。通过定义这个属性中的形状，您可以创建更复杂和吸引人的布局，使文本环绕复杂的形状，而不仅仅是通常的矩形。

shape-outside 属性定义了内容将围绕其排列的形状。它通常与 float 属性一起使用，因为只有浮动的元素才会有内容围绕它。

可用的值:

1. none: 默认值。不创建任何形状；内容围绕元素的盒子进行排列。
2. <shape-box>: 使用元素的边距盒、边框盒、填充盒或内容盒作为参考盒。

• margin-box
• border-box
• padding-box
• content-box

1. <basic-shape>: 可以定义一个基本的形状，例如：

• circle()
• ellipse()
• inset()
• polygon()

1. <image>: 一个图像可以用作形状的参考。图像的 alpha 通道决定了形状的尺寸。

举例

使用椭圆:

.element {
    float: left;
    shape-outside: ellipse(50% 50% at 50% 50%);
}

使用多边形:

.element {
    float: left;
    shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);
}

使用图像:

.element {
    float: left;
    shape-outside: url('path-to-image.png');
}

实际应用

假设你有一个圆形图像，您希望文本围绕它排列，同时尊重圆的边界。没有 shape-outside，文本只会围绕图像的矩形边界盒子进行排列。但使用 shape-outside，可以使文本平滑地围绕圆形图像进行排列，从而得到更加视觉上吸引人的布局。

整合地址：codepen.io/OMGZui/pen/…

3. 使用 :where() 简化代码

当将同一样式应用于多个元素时，CSS可能会像这样：

.page div,
.paget .title,
.page #article {
   color: red;
}

这段代码看起来并不是很易读，而 :where() 伪类就派上了用场。 :where() 伪类函数接受一个选择器列表作为其参数，并将选择所有可以由选择器列表中的任何规则选择的元素。

.page :where(div, .title, #article) {
 color: red;
}

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

[外链图片转存中…(img-TE08LAEt-1718164084672)]

[外链图片转存中…(img-3j5jmMs9-1718164084674)]