CSS学习日记

2025.10.13 打卡明天从CSS轮廓开始看。
2025.10.14 打卡
2025.10.15 打卡
2025.10.17 打卡
2025.10.18 打卡
2025.10.26 打卡

0. 通用知识

0.0 尺寸单位

注意，尺寸理论上都可以是整数或者小数，没有规定，但是对于边框的px一般用整数，因为不同浏览器对0.5px这种显示可能不一样，有的会取1px，有的直接不显示了。

单位

0.0.0 绝对单位

px 像素，是屏幕显示最可靠的。
pt, cm, mm, in多用于打印样式，屏幕显示不可靠。（pt表示1/72英寸）

0.0.1 相对单位

% 百分比，相对于父元素的相同属性的值。

width: 50%;（父元素宽度的一半）。font-size: 120%;（父元素字体的1.2倍）。注意：margin和padding的百分比是相对于父元素的宽度（无论方向），这是一个很有用的特性。

发现一个问题，如果父元素的高度没有设置，也就是auto的话，他需要根据子元素的高度计算自己的height，但是子元素如果也设置成 height: 10%，那子元素的高度又要依赖于父元素，就会造成类似循环论证的情况，这个时候浏览器会把无法显示的元素的height重置成auto，10%就失效了。<html>的父元素就是视口，也就是整个窗口。如果要用%实现页面的10%，得把<body>的高度设置成100%。

虽然不知道为什么，但是 html 也得设置成 height: 100%; 就好了。

em 父元素的字体大小, 1em = 父元素的 font-size 值。

用于需要相对于当前字体大小进行缩放的情况，如段落间距、行高。缺点：多层嵌套时，计算会变得复杂。

'rem' 根元素的字体大小 1rem = 根元素（<html>）的 font-size 值。默认通常是 16px。

现代Web开发的首选。用于字体大小、间距、布局尺寸。完美避免了 em 的嵌套问题，整体控制更容易。

vw 视口宽度的1% 1vw = 浏览器可视区域（Viewport）宽度的1%。

用于创建真正响应式的布局或字体，如一个始终占屏幕宽度一半的容器：width: 50vw;。

vh 视口高度的1% 1vh = 浏览器可视区域（Viewport）高度的1%。

用于需要占满整个屏幕高度的元素，如全屏英雄区域：height: 100vh;。

vmin/vmax：vw/vh 中较小/较大的那个，1vmin是1vw和1vh中较小的值，1vmax则是较大的值。

用于确保元素在横屏和竖屏状态下都能良好显示，例如：一个始终贴在屏幕角落的按钮。

0.0.2 无单位的值

line-height: line-height: 1.5; 意思是行高是当前字体大小的 1.5倍。这是首选写法，因为它具有最好的继承特性。
transform: scale(1.2); 将元素放大到原来的 1.2倍。这里的 1.2是无单位的比例因子。（虽然还没见过qwq）

0.0.3 最佳实践

场景	推荐单位	示例	理由
字体大小	rem	font-size: 1.8rem;	可访问性，易于缩放和维护
内外边距、尺寸	rem	padding: 2.4rem;width: 30rem;	与字体节奏一致，整体协调
边框宽度	px	border: 2px solid blue;	精确控制，渲染一致
行高	无单位数值	line-height: 1.6;	继承性最佳，避免嵌套问题
容器宽度	% + max-width	width: 80%; max-width: 120rem;	流体布局，同时限制最大宽度
全屏区块	vh, vw	height: 100vh;	直接与视口关联

0.1 滚轮与触控板放大网页

由于一些实现方式的差异，滚轮的体验不太好，而且看w3school的时候会看不到右边的内容，但是滚轮不改变网页布局，所以顺滑浏览。滚轮就是方便啊！

0.2 用户代理样式表

就是浏览器的默认皮肤，每个浏览器可能会有细微的区别，所以有CSS重置的做法。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

或者使用Normalize.css，要用再去查吧。

1. CSS选择器有五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

1.1 元素选择器：

例如选择所有的<p>标签，

p { ... }

1.2 id选择器：

HTML中：

<div id="main_page">...</div>

CSS中：

#main_page {...}

同一个页面中，id是唯一的，而且id不能以数字开头。

1.3 类选择器

HTML中：

<div class="main_page">...</div>

CSS中：

.main_page {...}

还可以指定某一种标签的这一种类，比如：

div.main_page {...}

只会选中类名为main_page所有<div>标签。

不同的元素可以用相同的类名，同一个元素也可以有多个类名（用空格隔开）。

<div class="main_page text">...</div>

这个<div>元素就有两个类名，分别是main_page和text。

类名也不能以数字开头。

如果两个类中声明了同一个属性，该如何判断呢？

1.4 层叠规则

首先，看有无 !important ，有的优先。

这样使用：background-color: grey !important;。

接着看特异性得分：

- 内联样式（如 style="color: red;"）: 特异性得分 1000
- ID 选择器（如 #header）: 特异性得分 100
- 类选择器、属性选择器、伪类（如 .my-class, [type="text"], :hover）: 特异性得分 10

元素选择器、伪元素（如 div, p, ::before）: 特异性得分 1

将一条规则中的所有选择器得分相加，总数高的优先。

实际上CSS标准是将上面四个得分逐个比较，遇到某个更大后面就不管了，比如1000, ..., ..., ...永远优先于0, ..., ..., ...，但是由于它们的差值十倍，10就是十进制的基数，后面就算加起来也不会超过前面的某一位，比如1000 > 111，所以理解为相加也是一样。

如果优先级还是一样，就看先后顺序：后出现的会覆盖之前的，也就是后出现的优先。

这个太阴了，最好没事不要乱用ID选择器，不然会这样：here，里面这个就很丑陋。

优先使用class选择器。

1.5 通用选择器

* {...}

这会选择页面中的所有元素。

1.6 分组选择器

其实就是把样式一样的写到一起，用逗号,隔开。

.text, #page, body {...}

跟这个一样

.text {...}
#page {...}
body {...}

1.7 更多选择器

这些都是简单选择器，更加复杂的选择器后面会学到。

属性值的数字和单位不要有空格，写20px，不要写20 px。

3. 引入样式表

3.1 外部样式表

W3Cschool的写法是：<link rel="stylesheet" type="text/css" href="mystyle.css">

现在省略了type，写成这样即可：<link rel="stylesheet" href="mystyle.css">

另外有两个有用的属性：

crossorigin="anonymous"：将样式表托管在另一个域名（CDN）上，使用此属性可以更安全地加载资源，并且如果发生错误，能获得更好的错误报告。
media：指定样式表应用的媒体类型。例如media="print"表示该样式表仅在打印页面时使用，可以有效优化性能。

3.2 内部样式表

写在<head>里面的<style>里面。

3.3 行内样式表

写在元素的style属性中，例如

<h1 style="color:blue;text-align:center;">This is a heading</h1>

CSS注释写成/*...*/。

5. CSS颜色

5.1 颜色名

CSS/HTML 支持 140 种标准颜色名。

5.2 更多表示颜色的方法

有RGB值、HEX值、HSL值、RGBA值和HSLA值。

5.3 RGB和RGBA

rgb(red, green, blue)，三个参数都是0-255的整数，定义这种颜色光源的强度。

可以让三个参数相等来表示不同的灰色阴影。

rgba多了一个参数，表示颜色的不透明度，介于0.0（完全透明）和1.0（完全不透明）之间。

5.4 HEX

其实就是RGB的三个参数写成了十六进制的形式，例如#ff0000。

5.5 HSL和HSLA

类似RGB和RGBA，好像是另外一套定义颜色的体系，不懂，不想用。

5.6 三个关键字

tranparent：rgba(0,0,0,0)，也就是全透明
currentcolor：color，也就是和文本颜色一致
inherit：从父元素继承

6. CSS背景

6.1 背景色：用`background-color`属性来设置背景色。

6.2 透明度：`opacity`，取值范围为`0.0 - 1.0`。值越低，越透明。

6.3 使用`RGBA`的透明度：如果只希望设置背景颜色的透明度而不是文本和子元素，可以用rgba颜色的alpha通道。

6.4 背景图像：`background-image: url("paper.gif");`。

注意：默认情况下，图像会重复，以覆盖整个元素。

6.5 背景图像重复：

使用background-repeat属性设置：

6.6 背景图像位置：

background-position：

如果只指定了一个关键字，则第二个值默认为center。

有时候会看到四个值，其实是每两个值一个关键字，比如 left 20px top 20px，表示距离左边20像素，上边20像素，用这种写法可以不用先水平后垂直。

6.7 背景图片尺寸：

6.8 背景附着：`background-attachment`，值为`fixed`表示附着，`scroll`表示滚动。

6.9 背景简写：

6.10

background-origin → 调整背景图片的起始位置（不改变背景色）。
- background-clip → 控制背景（图片+颜色）的可见区域（裁剪边界）。

7. 边框

边框还可以有自己设置的图片，但是好复杂，不想学。

7.1 `border-style` 指定边框类型。

提供 1 个参数：定义所有边框。
提供 2 个参数：第一个参数设置上下边框，第二个参数设置左右边框。
提供 3 个参数：第一个参数设置上边框，第二个参数设置左右边框，第三个参数设置下边框。
提供 4 个参数：按上、右、下、左的顺时针顺序分别设置四个边框。

可以用 TRouBLe来记忆，Top, Right, Bottom, Left

注意：必须设置border-style属性，其它边框属性才能生效！

7.2 边框宽度

可以用常规单位，推荐px，也可以用下面三个的一个：thin、medium 或 thick。

同样，也可以设置1到4个值。

7.3 边框颜色

没有设置的话，会继承元素的颜色，也一样有1到4个值可以选用。

7.4 各个边框分别设置

在border后面加上-top可以单独设置上边框，比如border-top-color，右下左边框同理。

7.5 边框简写属性

顺序是width style color，其中style是必须的。

可以用border，也可以写border-left这种来设置左边框的样式。

7.6 圆角边框

border-radius，单位首先rem，次选px，特殊场景%。

当你想让元素呈现为完全的圆形或根据元素自身尺寸成比例的椭圆时，使用%。

border-radius: 50%;会创建一个完美的圆形（如果元素是正方形）或椭圆形（如果元素是长方形）。

设置的是曲率半径。

8. 盒子模型

8.1 外边距

margin可以设置1到4个值，同上。

取值可以是

auto 浏览器来计算外边距，以使元素在其容器中水平居中。
... 以 px、pt、cm 等单位指定外边距
% 指定以包含元素宽度的百分比计的外边距
inherit 指定应从父元素继承外边距

外边距可以是负数，正外边距理解为斥力，让元素排开来；负边距理解为引力，让元素互相吸引甚至重叠。

DS如是说：最佳实践是：优先使用现代布局模型（Flexbox和Grid），当它们无法优雅地解决你的特定问题时，再考虑负外边距这个强大但危险的工具。

8.2 外边距合并

简单来说就是几个元素的margin可能会并成一个显示，后面遇到问题再管吧，感觉不重要。

8.3 内边距

padding不能是负数。

padding不能设置成auto，DS有一个比喻：

margin: auto; 就像是你决定把一幅画放在一面墙的正中间。你需要测量墙的宽度和画的宽度，然后把剩余的空间平均分到画的左右两边。
padding就像是画本身的画框。画框的宽度是画本身的一个固定属性，它没有“自动”这个概念，你必须明确告诉木匠你要做多宽的画框。

padding用来设置内边距，需要注意，默认情况下加入元素的宽度为x，实际上显示的宽度会是padding-left+x+padding-right。如果要设置的width就是显示宽度，要用 box-sizing: border-box;

高度同理，实际上的高度是padding-top+height+padding-right，解决办法同上。

margin(外边距)：属于元素的外部。它是在元素边框之外添加的透明区域。增加margin不会改变元素本身的尺寸，但会推开周围的元素，从而改变元素在布局中的位置和所占的总体空间。

完整来说，以宽度为例，是元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距。

8.4 背景的显示范围

背景应用于由内容和内边距、边框组成的区域。

红色部分：

9. 高度和宽度

9.1 `height` 和 `width` 属性可设置如下值：

auto 默认。浏览器计算高度和宽度。
length 以 px、cm 等定义高度/宽度。
% 以包含块的百分比定义高度/宽度。
initial 将高度/宽度设置为默认值。
重置回CSS样式规范的值，而不是其他的模板或者浏览器自己设置的东东。
inherit 从其父值继承高度/宽度。

9.1 最大/最小宽度/高度

以max-width为例，浏览器宽度太小的时候，他不够显示max-width，就会变成他想变的宽度（大多数情况就是width=auto;）。

同时设置了width和max-width，实际显示的宽度仍然会受到max-width的约束，也就是窗口大小width会失效。

这个指的是width: 100px; max-width: 80px;这种，同时设置width和max-width会导致响应式布局（缩小窗口元素跟着变小）失效，要响应式布局就得去掉 width。

设置的min-width大于max-width：实际显示是，最终宽度 = max[min-width, min(width, max-width)]。所以永远是min-width。

10. 轮廓

10.1 不同于`margin`，`border`，`padding`，轮廓`outline`不属于盒子模型的任何一部分。它不影响任何页面布局（不会像`border`一样可能使元素变宽变高），但它的设置很类似`border`，显示在`margin`这部分。

10.2 和边框类似，只有设置了`outline-style`，其它轮廓属性才会生效。

10.3 其它属性和边框完全一致。将`border`替换为`outline`即可。然而`outline`不能单独设置每一边的样式。

10.4 `outline-color`多了一个`border-color`没有的选项：`invert`，浏览器会渲染完其它页面，然后自动计算一个颜色，使得这个颜色和轮廓要覆盖的像素区域的差值最大，让轮廓显示出来。它不是元素自身背景色的相反，也不是父元素背景色的相反。它的计算目标是轮廓线本身所覆盖的那些像素点的背景色。

10.5 `outline-offset`可以设置轮廓到边框的距离，但是它不能设置四个方向，只能设置一个值。（四个方向都是这个距离）

10.6 没有写轮廓的`width`，默认是`medium`，通常是`3px`。

11. 文本

11.1 文本颜色

color设置文字的颜色，CSS标准建议设置了color就同时设置background-color。

11.2 文本对齐

水平对齐：text-align：left/center/right，文本从左往右，默认left，从右往左，默认right。

justify属性：拉伸每一行，以使每一行具有相等的宽度。其实就是把每一行的单词间距设置得不一样，但是总的宽度相等。

但是justify在英文排版中还稍微有用，在中文排版中没人会用它，因为中文没有单词的概念，它会让许多汉字间隔变大，看起来很丑。

11.3 文本方向

direction 和 unicode-bidi 属性可用于更改元素的文本方向。

direction: rtl;
unicode-bidi: bidi-override;

但是DS不推荐这么做，最好在HTML中直接设置元素属性：dir="rtl"。（Right to Left）说这样会有很多好处，比如从头就是反过来的，不会说加载css卡顿导致短暂的反向。

详细解释一下unicode-bidi：

Unicode 双向算法（Bidirectional Algorithm）：
- 问题来源：世界上有些语言的书写方向是从左到右（LTR，如中文、英文），有些则是从右到左（RTL，如阿拉伯语、希伯来语）。当这两种文字混合在同一个段落或句子中时，浏览器如何确定每个字符的显示顺序？
- 解决方案：Unicode 标准定义了一套复杂的算法，来自动处理这种混合文本的方向。这套算法能自动识别字符的内在方向性，并正确地重新排序它们。

例如：
"Hello - مرحبا - World"

基础方向是 LTR（因为首字符 'H' 是LTR字符）。
算法遇到阿拉伯语 مرحبا（其内在方向是 RTL）。
双向算法会正确地将这段文本显示为：
"Hello - ابحم ر - World"
（请注意，阿拉伯单词本身也被正确地从右向左重组了）。

这一切在大多数情况下都是自动发生的，无需开发者干预。

然后不想看了，都是底层实现的一些bug，很丑陋，DS也说不重要，忽略吧。

11.4 垂直对齐

vertical-align: top/middle/bottom;

11.5 文本装饰

text-decoration: none/overline/underline/line-through; 无、上划线、删除线、下划线。

11.6 文本转换

text-transform: uppercase/lowercase/capitalize。大写、小写、首字母大写。

11.7 文本间距

文本缩进：text-indent 属性用于指定文本第一行的缩进。单位一般用 em，即相对当前的元素的字体大小。
字符间距：letter-spacing 可以是负的。
行间距：line-height 默认是1.2。
单词间距：word-spacing 属性用于指定文本中单词之间的间距。对中文似乎没啥用。
空白设置：white-space: nowrap; 不让换行，这个元素一定显示在一行中。

11.8 文本阴影

text-shadow: 2px 2px; 水平阴影2px，垂直阴影2px。
text-shadow: 2px 2px red; 加入红色。
text-shadow: 2px 2px 5px red; 添加模糊效果 5px。

12. 字体

12.1 字体的分类

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

在计算机屏幕上，无衬线字体被认为比衬线字体更易于阅读。

12.2 设置字体

font-family：可以填写多个字体，如果字体名称不止一个单词，必须用双引号括起来，用逗号隔开。从左到右优先级降低，即会优先尝试使用左侧的字体，如果没有再看右侧的下一个……

如：

.p1 { font-family: "Times New Roman", Times, serif; }

12.3 字体样式

12.3.1 倾斜的字体

normal 文字正常显示
italic 文本以斜体显示
oblique 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

一般斜体都用italic。

12.3.2 字体粗细

font-weight 不能用 px 之类的单位。语法上，可以是 1 - 1000 的任意整数，但是实际上只会被近似成整百的值，可以理解它是离散的大小等级。可变字体才会对这种精确到十位、甚至个位的粗细生效。

数字，100~900的整百整数。
关键字，normal/bold：400/700。
相对关键字，lighter/bolder：比父元素更细/粗，但是难以维护，不建议使用。

12.3.3 小的大写字母

font-variant：normal/small-caps; 可以把小写字母变成比较小的大写字母。

好像没啥用。

12.4 字体大小

font-size：使用第0章的通用单位。

12.5 谷歌字体

其实就是引入云端字体，例如：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

12.6 字体简写

按照一下顺序给出：font-style font-variant font-weight font-size/line-height font-family

需要注意，简写中没有给出的值，不是保留原来的值，而是重置为默认的值。所以如果只修改一两个属性，建议单独写出来，不要用简写，以免无意中重置了属性。

13. CSS图标

CSS图标是矢量图，而普通的图片是位图。

任何元素都可以放图标，一般用<i>。（一般放在行内元素中）

国内常用的图标库有阿里巴巴图标库之类的。

14. CSS链接

链接可以用文本的设置方式来设置。该有的属性都有。

此外，可以根据链接处于什么状态来设置链接的不同样式。

a:lin 正常的，未访问的链接
a:visited 用户访问过的链接
a:hover 用户将鼠标悬停在链接上时
a:active 链接被点击时

这四个东西叫伪类选择器，后面再细说。

它们其实都是修改了<a>的样式，而不是四个元素。伪类的特异性得分相等，所以后面的会覆盖前面的，于是有了一个建议的顺序：

a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

不然就会有一些样式被覆盖，白设计了。

14.1 光标

cursor 属性可以设置光标移动到元素上方时的光标样式。

这不光对链接管用，对所有元素都管用！

不仅可以用预设的光标，也可以用自定义图片作为光标样式。

15. CSS列表

列表项是每一项最前面那个小图标。

list-style-type：可以用来设置列表项（取值是预设好的）。
list-style-image: url('sqpurple.gif'); 用图片作为列表项。
list-style-position：outside就是列表项不算进列表的文本里，inside就是算进去。
删除默认样式要注意：列表有设置margin和padding，所以要这样写：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

简写属性：
list-style-type（图标更优先，有图标就不会显示这个）list-style-position list-style-image

16. CSS表格

如果要传统表格，设置border的时候要同时设置table, th, td。
如果只要最外面的一圈边框，只设置table的border即可。
border-collapse: collapse; 可以把table和单元格之间双层的边框合并成一个。
表格的各种元素也可以用:hover伪类选择器，来实现悬停样式的变化。
tr:nth-child(even) {background-color: #f2f2f2;} 为所有偶数行添加阴影，实现斑马状的效果。
在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果。（也就是表格底下会有一个拖动条）
标题位置：caption-side: bottom;将表格标题放在表格下方。

另外，显示其它东西的时候，也最好用auto来设置overflow，避免破坏页面布局。

16. `display`属性

inline：显示为行内元素；（一个行内元素可以被拆到两行）
block：显示为块级元素；（独占一行）
inline-block：不换行的block。（一定是一个矩形显示）
none：隐藏元素；（会像没有这个元素一样，这个元素不会参与布局）

visibility:hidden; 也会隐藏元素，但是这个元素仍然会正常参与布局，但是不会显示（会占着位置）

注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

三者的属性不一样！

block和inline-block能够使用所有的盒子属性，可以把inline-block理解为一个自定义的大大的字符，然后block就是多了个换行。但是inline元素的width和height都不会生效。设置的上下的margin无效。只有左右的margin是完全有效的。inline的padding都会生效，但是上下的padding只会撑开背景，不会推开其它元素。

正因如此，对于inline元素设置box-sizing: border-box;没有任何卵用。

17. `position` 定位属性

static：默认，设置了 top 之类的也没用，它始终会在文本流中常规显示。
relative：相对于元素原来的位置进行调整。注意不会影响其它元素本来的布局。
同时设置了一个方向，top优先于bottom，left优先于right。
fixed：固定在页面的一个地方。
设置同一个方向的两个属性会强行拉伸元素。
absolute：相对于最近的定位祖先元素（“被定位的”元素是其位置除 static 以外的任何元素）进行定位。如果没有这个祖先，就会相对于 <body> 定位。

如果它相对的元素固定，它也固定（不会随页面滚动）；如果它相对的元素不固定，它也不固定（会随页面滚动）。

sticky：在页面离边界很远的地方，它是类似于 static的显示方式；接近设定的边界之后，就会变成类似 fixed 的显示方式，粘在了页面上一样。可以设置1至4个值。

18. 元素重叠

z-index：设置元素显示的优先级，z-index大的元素显示在上方。
只对定位的元素（不是position: static;）或者弹性项目（display: flex 元素的直接子元素）。
没有指定的话，代码后面的显示在上面。

19. 溢出

有时候内容太多，容器装不下，overflow可以设置处理方式。

visible 默认。溢出没有被剪裁。内容在元素框外渲染
hidden 溢出被剪裁，其余内容将不可见
scroll 溢出被剪裁，同时添加滚动条以查看其余内容
auto 与 scroll 类似，但仅在必要时添加滚动条（感觉这个比较好用）

overflow-x和overflow-y可以单独设置水平和垂直方向的溢出处理方式。

20. 浮动

float可以设置成left, right, none, inherit。

可以实现文字环绕图片。

浮动可以理解为这一部分单独拎出来了一个图层。

注意：block不会主动避让浮动区域，因此它的背景可以延伸到浮动区域之下，但是inline-block和inline元素都会主动避开浮动区域！

clear的作用就是告诉浏览器，左边/右边不能有浮动元素。如果有，就会把当前元素下移，直到满足要求。

元素浮动之后，父元素的高度宽度会产生异常，这个时候可以用一个clear:both;的空元素，来撑到最下面，让父元素正确显示！

这玩意好丑陋啊，记住一下不管了。

还可以这样处理子元素的溢出。

.clearfix {
  overflow: auto;
}
或者
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

布局实例不看了，过时的技术。

21. 组合器

用来组合多个简单选择器，创造出更复杂的选择方法的工具

后代选择器：空格，如div p，表示选中div中的所有p，不管是儿子，孙子，还是嵌套了更多层。
子选择器：>，如div > p，表示选中是div儿子的p，只选择第一层子元素。
相邻兄弟选择器：+，如div + p，表示选中div后面的第一个父元素相同的p元素。
通用兄弟选择器：~，如div ~ p，选择div后面所有在同一个父元素下的兄弟p元素。

22. 伪类

:

伪类用于定义元素的特殊状态。

要用再查吧，就是一些选择的条件，比如要求是鼠标悬停时，要求是兄弟中的第一个儿子之类。不想背了。

:focus是指获得焦点

23. 伪元素

::

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

这里有完整的查询表。here

伪类是定义一个已有元素的不同状态，伪元素可以理解为定义了一个新的虚拟元素出来。

selection 选择的是元素的一部分，所以是伪元素，而 hover 是整个元素，所以是伪类。

24. 元素透明度

这个不是单纯的颜色透明，是一个元素的透明度设置。

opacity 属性的取值范围为 0.0-1.0。值越低，越透明。

常与伪类 hover 连用。

直接用 opacity 会让子元素继承父元素的透明度，导致文本难以阅读。如果只设置背景的透明度，可以用RGBA颜色。

如果背景是图片，可以把图片单独拎出来，不要写在background-imamge里面。

25. 导航栏

常用ul来设置导航栏，会进行设置：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

链接的display可以设置成block，这样点击整个元素都可以跳转，不一定要文字。

26. 图像精灵

大概意思就是说，如果你有很多个小图标要同时显示，可以把它们合并成一张图像，然后每次显示一小部分，这样子可以减少延迟，加快响应速度。

27. 属性选择器

可以用属性来定位元素

28. 计数器

好像很鸡肋，但是原生而且轻量，或许有用？

29. CSS函数

还有函数，好像可以用来动态调整大小什么的，有点鸡肋感觉。

30. 圆角

一样，有一到四个值可以选。

31. 椭圆角

水平半径 / 垂直半径

posted @ 2025-10-13 14:44 Zlc晨鑫阅读(10) 评论(0) 收藏举报

刷新页面返回顶部

zhangchenxin