ZhenYu's 知识库

外观

基础知识

约 3512 字大约 12 分钟

cssbase

2024-03-04

1. selectors 选择器

优先级 !important > 行内样式 > ID 选择器 > 类、伪类、属性 > 元素、伪元素 > 继承 > 通配符

ul li // 后代选择器
ul>li>p // 子选择器
h1+p // 相邻兄弟选择器
h1~p // 一般兄弟选择器

div[title] // 具有title属性的div标签
div [title] // 具有 title 属性的 div 的子元素
div[title="rain"] div[title~="rain"] // 也可以加入一些正则
div[title$="rain"] div[title^="rain"] div[title|="rain"] div[title*="rain"] // 伪类选择器
:nth-child(n) // 孩子选择器
:first-child // 第一个子元素
:last-child // 最后一个子元素

:nth-of-type(n) // 同类型的第n个元素
:first-of-type // 同类型的第一个子元素
:last-of-type // 同类型的最后一个子元素

:only-child // 父元素唯一的子元素
:empty // 没有子元素

:nth-last-child(n) // 倒数第n个子元素
:nth-last-of-type(n) // 同类型的倒数第n个子元素
.text:nth-of-type(n + 2):before // 选择第2个到第n个子元素

/* flex justify-content: space-evenly; 布局最后一个左对齐 */
.box-item:last-child:nth-child(odd) {
    margin-right: calc((100% - 328px) / 3 + 164px);
}

the first rule (A) is more specific than the second one (B). W3C CSS 2.1 Specification

A: a#a-02 {
    background-image: url(n.gif);
}

and B: a[id="a-02"] {
    background-image: url(n.png);
}

自定义提示

[title] {
    position: relative;
    display: block;
}

[title]:hover:after {
    content: attr(title);
    color: hotpink;
    background-color: slateblue;
    display: block;
    padding: 0.225em 0.35em;
    position: absolute;
    right: -5px;
    bottom: -5px;
}

1.1 pseudo-class 伪类

伪类描述示例
:hover当用户鼠标悬停在元素上时应用样式。button:hover { background-color: lightblue;}
:active当元素被用户激活（点击）时应用样式。button:active { background-color: red;}
:focus当元素获得焦点时应用样式。input:focus { border: 2px solid blue;}
:visited选择已访问链接的样式。a:visited { color: purple;}
:link选择未被访问的链接的样式。a:link { color: blue;}
:first-child选择父元素的第一个子元素。li:first-child { font-weight: bold;}
:last-child选择父元素的最后一个子元素。li:last-child { color: red;}
:nth-child(n)选择父元素的第 n 个子元素。p:nth-child(2) { color: green;}
:nth-last-child(n)选择父元素的倒数第 n 个子元素。div:nth-last-child(2) { background-color: yellow;}
:not(selector)选择不匹配指定选择器的元素。input:not([type="text"]) { background-color: lightgray;}
:only-child选择父元素中唯一的子元素。p:only-child { font-style: italic;}
:checked选择被选中的表单元素。input[type="checkbox"]:checked { border: 1px solid blue;}
:disabled选择被禁用的表单元素。input:disabled { opacity: 0.5;}
:enabled选择可用的表单元素。input:enabled { border: 1px solid green;}
:first-of-type选择同类型元素中的第一个。p:first-of-type { font-size: 20px;}
:last-of-type选择同类型元素中的最后一个。p:last-of-type { text-decoration: underline;}
:nth-of-type(n)选择同类型元素中的第 n 个。p:nth-of-type(2) { color: orange;}
:nth-last-of-type(n)选择同类型元素中的倒数第 n 个。p:nth-last-of-type(2) { font-weight: bold;}
:empty选择没有子元素的元素。div:empty { background-color: lightyellow;}
:target选择当前活动的目标元素。#section1:target { border: 2px solid black;}
/* nut-textarea 类上不包含 .textarea-type */
.nut-textarea:not(.textarea-type) { padding: 0; }

/* chat-box 类上不包含 style=display: none 的 */
.chat-box:not([style*="display: none"])

2. CSSOM

CSS Object Model 是一组允许用 JavaScript 操纵 CSS 的 API。 它是继 DOM 和 HTML API 之后，又一个操纵 CSS 的接口，从而能够动态地读取和修改 CSS 样式。

3. Style

box-shadow

语法： box-shadow: h-shadow v-shadow blur spread color inset

属性值
* h-shadow水平阴影的位置。10px：阴影在右侧；-10px：阴影在左侧
* v-shadow垂直阴影的位置。10px：阴影在下侧；-10px：阴影在上侧
blur模糊距离。值越大，阴影越模糊
spread阴影的大小。值越大，阴影越大
color阴影的颜色。
inset定义阴影为内部阴影（一般都是外侧阴影，不加此属性）

常用：

box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);

background

定义背景效果:

background-color 设置背景颜色

background-image 设置背景图片

background-repeat 设置背景重复

background-attachment 设置背景图片是固定还是滚动

background-position 设置背景图像的起始位置

background-size 指定背景图片大小。

/*  集合写法 */
background: #ffffff url("../assets/zcmap.png") no-repeat 5px 5px;

/*  设置背景颜色 （可以16进制，也可以使rgb() rgba()） */
background-color: #ffffff;

/* 图片链接 */
background-image: url("../assets/zcmap.png");

/* 默认。背景图像将在垂直方向和水平方向重复。*/
background-repeat: repeat;
/*  水平平铺，在水平方向重复 */
background-repeat: repeat-x;
/*  垂直平铺，在垂直方向重复 */
background-repeat: repeat-y;
/*  图片不重复，只显示一次 */
background-repeat: no-repeat;

/* 默认值。背景图像会随着页面其余部分的滚动而移动。 */
background-attachment: scroll;
/* 当页面的其余部分滚动时，背景图像不会移动。 */
background-attachment: fixed;
/* 规定应该从父元素继承 background-attachment 属性的设置。 */
background-attachment: inherit;

/* 第一个值是水平位置，第二个值是垂直，如果仅指定一个关键字，其他值将会是50% */
background-position: 5px 5px;
/* 第一个值是水平位置，第二个值是垂直，如果仅指定一个关键字，其他值将会是50% */
background-position: 5% 5%;
/* 位置英文  如果仅指定一个关键字，其他值将会是"center" */
background-position: left top;

/* 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动) */
/* 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" */
/* 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 */
/* 保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 */
background-size: length|percentage|cover|contain;

transform

/* Keyword values */
transform: none;

/* 2D 转换，使用六个值的矩阵。 */
transform: matrix(1, 2, 3, 4, 5, 6);
/* 3D 转换，使用 16 个值的 4x4 矩阵。 */
transform: matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);

/* 位移 2D 3D */
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);

/* 缩放 2D 3D */
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);

/* 旋转 2D 3D */
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);

/* 倾斜 */
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* 为 3D 转换元素定义透视视图。 */
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

参考资料：

4. css 布局

弹性盒子(Flexbox)

Flex 属性

作用在 flex 容器上参数
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
作用在 flex 子项上参数
order
flex-grow容器剩余空间多余时候的分配规则，默认值是 0，多余空间不分配。(越大分的空间越多)
flex-shrink容器剩余空间不足时候的分配规则，默认值是 1，空间不足要分配。（越大分的空间越少）
flex-basi指定了固定的分配数量，默认值是 auto
flex
align-self

Flex 简写

flex 属性是 flex-grow ， flex-shrink 和 flex-basis 这 3 个 CSS 属性的缩写。

单值语法等同于备注
flex: initialflex: 0 1 auto初始值，常用
flex: 0flex: 0 1 0%适用场景少
flex: noneflex: 0 0 auto推荐
flex: 1flex: 1 1 0%推荐
flex: autoflex: 1 1 auto适用场景少

CSS flex 属性综合应用布局效果实例页面-张鑫旭

TODO

  • 正常布局流(Normal flow)
  • display 属性(The display property)
  • Grid 布局(Grid)
  • 浮动布局(Floats)
  • 定位(Positioning)
  • 表格布局(Table layout)
  • 多列布局(Multiple-column layout)

5. css 函数

一、颜色函数

函数名作用描述用法示例说明
rgb()RGB 颜色值color: rgb(255, 0, 0);红(0-255)、绿、蓝
rgba()带透明度的 RGBbackground: rgba(0, 0, 255, 0.5);透明度范围：0（透明）到 1
hsl()HSL 颜色模型color: hsl(120, 100%, 50%);色相(0-360)、饱和度(0-100%)、明度(0-100%)
hsla()带透明度的 HSLbackground: hsla(0, 100%, 50%, 0.3);同上，增加透明度
hwb()HWB 颜色模型color: hwb(180 0% 0%);色相、白度、黑度（CSS Color Level 4）

二、渐变函数

函数名作用描述用法示例说明
linear-gradient()线性渐变background: linear-gradient(to right, red, blue);方向 + 颜色停止点
radial-gradient()径向渐变background: radial-gradient(circle at center, yellow, green);形状 + 中心点 + 颜色
conic-gradient()锥形渐变background: conic-gradient(red, yellow, green);从中心点旋转的渐变
repeating-linear-gradient()重复线性渐变background: repeating-linear-gradient(45deg, red 0px, red 10px, blue 10px, blue 20px);按指定间隔重复

三、尺寸计算函数

函数名作用描述用法示例说明
calc()动态计算尺寸width: calc(100% - 50px);支持 +, -, *, / 运算符
min()取最小值width: min(100px, 50%);多个值中取最小
max()取最大值font-size: max(1rem, 10vw);响应式设计中常用
clamp()限制在范围内font-size: clamp(1rem, 2.5vw, 2rem);语法：clamp(最小值, 理想值, 最大值)

四、变形变换函数（用于 transform）

函数名作用描述用法示例说明
translate()平移元素transform: translate(50px, 20px);X 轴和 Y 轴位移
rotate()旋转transform: rotate(45deg);单位：deg（度）
scale()缩放transform: scale(1.5);大于1放大，小于1缩小
skew()倾斜transform: skew(20deg, 10deg);X/Y 轴倾斜角度
matrix()矩阵变换transform: matrix(1, 0.5, 0, 1, 0, 0);6 参数实现复杂变换

五、滤镜函数（用于 filter）

函数名作用描述用法示例说明
blur()高斯模糊filter: blur(5px);值越大越模糊
brightness()亮度调整filter: brightness(150%);100% 原始，0% 全黑
contrast()对比度调整filter: contrast(200%);100% 原始
grayscale()灰度化filter: grayscale(100%);0% 彩色，100% 完全灰度
drop-shadow()投影效果filter: drop-shadow(2px 2px 4px black);替代 box-shadow，支持透明区域

六、其他实用函数

函数名作用描述用法示例说明
var()使用 CSS 变量color: var(--primary-color);需配合 :root 定义变量
url()引用外部资源background: url("image.jpg");路径需用引号包裹
attr()获取 HTML 属性值content: attr(data-text);常用于伪元素
counter()计数器值content: counter(item);配合 counter-reset/increment
cubic-bezier()自定义动画缓动曲线transition: all 1s cubic-bezier(0.5, 0, 0.5, 1);贝塞尔曲线控制动画速度
  1. 组合使用：函数可嵌套组合，如：
div{
    transform: translate(calc(100% - 80px), 0) rotate(90deg);
    background: linear-gradient(to right, rgb(255 0 0 / 0.5), hsl(240 100% 50%));
}
  1. 浏览器兼容性：
    • 新函数（如 hwb(), clamp()）需检查兼容性。
    • 使用前缀确保兼容：-webkit-（Chrome/Safari）、-moz-（Firefox）。

截断文本

这就是 text-overflow 和 line-clamp

.text-container h2 {
    font-family: "Lora", serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #1f313d;
    /* The styles here are meant to truncate titles that are too long. The first line ensures long text doesn't overflow its container. The second one ensures we title gets truncated */
    overflow: hidden;
    white-space: nowrap;
    /* Then, we show the three dots if the title is too long to be readable */
    text-overflow: ellipsis;
}

.text-container p {
    line-height: 1.5rem;
    /* Here's where the line-clamp magic begins. First, we need to hide the content that overflows our desired number of text lines to show */
    overflow: hidden;
    /* Then, we use the old implementation of Flexbox on the paragraph and set its direction to be row */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Finally, we set the desired number of lines we want to show */
    -webkit-line-clamp: 3;
}

滚动条

样式调整

*::-webkit-scrollbar {
    /* 滚动条整体样式 */
    width: 8px;
    /* 高宽分别对应横竖滚动条的尺寸 */
    height: 4px;
    scrollbar-arrow-color: red;
}

*::-webkit-scrollbar-thumb {
    /* 滚动条里面小方块 */
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
    scrollbar-arrow-color: red;
}

*::-webkit-scrollbar-track {
    /* 滚动条里面轨道 */
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}

隐藏

  • 通过div遮罩进行隐藏
#parent {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px;
    /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

This works for me with simple CSS properties:

.container {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.container::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

For older versions of Firefox, use: overflow: -moz-scrollbars-none;

input 相关

placeholder 样式修改

<input type="text" placeholder="请输入内容" />
input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: red;
}

input::-moz-placeholder {
    /* Firefox 19+ */
    color: red;
}

input:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}

input:-moz-placeholder {
    /* Firefox 18- */
    color: red;
}

input 聚焦时的样式

input:focus {
    background-color: red;
}

图片相关

1. 图片尺寸自适应

<div class="box">
    <div class="img-container">
        <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="" />
    </div>
</div>

<div class="box">
    <div class="img-container">
        <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="" />
    </div>
</div>

<div class="box-vw">
    <div class="img-container">
        <img src="https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-preview.jpg" alt="" />
    </div>
</div>
.box,
.box-vw {
    background-color: #f5f6f9;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}

.box:nth-of-type(2) {
    width: 260px;
}

/* vw方案 */
.box-vw .img-container {
    width: 100vw;
    height: 66.620879vw;
    padding-bottom: inherit;
}

/* padding方案 */
.img-container {
    width: 100%;
    height: 0;
    /* 图片的高宽比 */
    padding-bottom: 66.620879%;
}

img {
    width: 100%;
}

2. 超长图自适应

<!-- banner 2560*400  -->
<div class="banner-wrap">
    <img :src="activityInfo.pcHeadImg" alt="" />
</div>
// 头图
.banner-wrap {
    position: absolute;
    min-width: 1200px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

绘制三角形

/* 正三角 */
.up-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 40px 25px;
    border-color: transparent transparent rgb(245, 129, 127) transparent;
}

/* 倒三角 */
.down-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 25px 0 25px;
    border-color: rgb(245, 129, 127) transparent transparent transparent;
}

参考文章：