css 小结css用法小结。简单选择器简单选择器简单选择器简单选择器简单选择器简单选择器简单选择器简单选择器简单选择器简

在线工具 html、css、js

选择器

简单选择器（根据*、标签名称、id、类来选取元素）

后代选择器

区别：带 > 表示直接子元素

兄弟选择器

区别：二者拥有相同父元素，+表示紧跟的首个兄弟元素；~表示之后的兄弟元素，不必紧跟

伪类选择器

nth-child(n) 匹配第N个子元素。n可以是

数字：数字是从1开始

关键词：odd-奇数，even-偶数

公式：an+b a表示周期的长度，n 是计数器（从 0 开始），b 是偏移值

示例：

p:nth-child(3n) 表示下标是3的倍数，且是p标签的元素

伪元素选择器

before和after都要用content来指定插入内容。使用场景

伪类和伪元素都是可用于选择器末尾的关键字，区别是：

语法差异，通常只需要在关键字前加上一个冒号（:）或两个冒号（::）即可。不过在一些旧版浏览器中，伪元素可能会被解析为伪类。

伪类（Pseudo-class）用来描述元素的特殊状态（如:hover、:active等），它们依赖于用户的行为或当前文档的状态。而伪元素（Pseudo-element）不仅可以描述元素的状态，还可以在元素内部创建一个虚拟元素，并对其应用样式。常见的伪元素包括::before和::after。

属性选择器（根据属性或属性值来选取元素）

示例：

盒子模型

盒子就是一个元素所占的空间大小，由几个部分组成：内容、内边距、边框、外边距。

分为：标准盒模型和IE怪异盒模型。通过box-sizing可切换两种模式。content-box （标准）、border-box（IE）。一般用后者。属性值还有inherited，从父元素继承

标准盒模型的宽度就等于内容本身宽度，即width=content。所占大小 = content + padding + border + margin；
IE模型的宽度等于内容宽度+内边距+边框，即width = content + padding + border，所占大小 = width + margin

示例：IE模型

相邻两个inline-block之间的间隙

参考

百分比的相对值

相对于自身宽高的：transform（translate、scale）
相对于父元素宽：margin、padding（margin-left margin-top padding-left padding-top）
相对于父元素宽、高的
- 正常定位下的width和height 百分比分别根据父元素的宽度和高度
- 相对定位（relative）的top、left 百分比分别根据父级元素块的高度和宽度来计算的
- 绝对定位（absolute）的top、left 百分比分别根据包含它的第一个不是 static 定位的元素的高度和宽度来计算的
- 固定定位（fixed）的 top、left 百分比分别根据浏览器视口的高度和宽度来计算的
相对于父元素的字体大小：font-size

示例：

文字

溢出超出...

单行

width:200px; 
border:1px solid #000000; 
overflow:hidden; // 溢出隐藏
white-space:nowrap;  // 不换行
text-overflow:ellipsis;  // 文字超出显示...

多行

width:400px; 
border:1px solid #ccc; 
overflow : hidden;  // 溢出隐藏
text-overflow: ellipsis; // 文字超出显示...
display: -webkit-box; // 将元素设置为块级盒子，并使用WebKit引擎的弹性布局模型进行布局。这样可以让元素根据所设置的高度自动调整其宽度，以尽量利用可用空间
-webkit-line-clamp: 3; // 指定限制元素显示的文本行数，这里将其设置为3行。如果文本内容超过了指定的行数，则剩余部分会被截断并用省略号表示
-webkit-box-orient: vertical; // 设置弹性盒子的主轴方向为垂直方向，即元素内部文本的排列方式为垂直方向排列。

word-break、word-wrap、white-space

juejin.cn/post/684490…

transition 失效情况

元素处于隐藏状态。当元素处于隐藏状态时，CSS transition将无法生效。可以尝试通过设置CSS display属性或其他方式使元素可见来使过渡效果生效。
transition属性只能识别具有可度量的数值单位（如px、em等）或百分比的数值。因此，如果要使用transition来实现opacity的过渡效果，需要将opacity的取值转换成一个可度量的数值。。height: auto，opacity: 0/1 这种，都不生效

（例子：数据资产-非末级维度中的健康度情况 opacity）

阴影

text-shadow

属性值是：水平阴影的位置垂直阴影的位置模糊大小颜色

box-shadow

box-shadow: 水平阴影的位置垂直阴影的位置模糊距离阴影的大小阴影的颜色阴影开始方向（默认是从里往外outset，设置inset就是从外往里）; 更多...

弹性布局flex

flex布局 - 语法篇 flex布局 - 实例篇

参考

container 属性
- 改变 items 流动方向（主轴） flex-direction: row;（横着排） column;（竖着排） row-reverse;（从右往左排）column-reverse（从下往上）
- 是否换行 flex-wrap: wrap;（换行）常用 nowrap; wrap-reverse;（从下往上换行）
- 主轴对齐方式（横向） justify-content: flex-start;（往前靠） flex-end;（往后靠） center;（居中） space-between;（把空间放在中间）（常用） space-around;（把空间放到周围） space-evenly;（空隙一样大）
- 次轴对齐方式（纵向） algin-items: center; flex-start; flex-end; stretch;（往上下顶，等高，顶满，默认值）
- 多行之间对齐（有多余高度空间） algin-content: flex-start; flex-end; center;（上下居中） stretch;（平均分） space-between;（上下顶头，空间在行间） space-around;（空间在行两边）

flex item 属性

加 order（排序）不写 order 默认是 0 item 按照 order 的值从小到大排序

分配多余空间（如何变胖，撑满空间） flex-grow 默认是 0，不分配

.item:first-child {
    flex-grow: 1; （长胖比例 1/4=1+2+1）
}
.item:nth-child(2) {
    flex-grow: 2; （2/4）
}
.item:last-child {
    flex-grow: 1; （1/4）
}

空间不够，原始宽度开始压缩 flex-shrink 默认是 1

.item:first-child {
    flex-shrink: 1;
}
.item:nth-child(2) {
    flex-shrink: 0; （值为0不变瘦）
}
.item:last-child {
    flex-shrink: 1;
}

缩写规则：
- flex-grow flex-shrink flex-basis
- flex: auto; // 1 1 auto
- flex：1; // 1 1 0
- flex: none; // 0 0 auto

控制基准宽度（跟 width 差不多，可代替） flex-basis 默认 auto
控制垂直对齐使某个 item 特立独行对齐自己 align-self: flex-end;(属性取值和 container 里一样)

css性能优化

参考

css 小结

选择器