开发速查

主题

CSS 布局与选择器 ​

选择器、伪类、盒模型、flex、文本截断、background、深色模式、SASS 等速查。

一、选择器 ​

类型语法说明
后代父 子（空格）选后代，允许多个层级
子代父 > 子仅直接子代，前后可有空格
相邻兄弟h1 ~ ph1 后所有 p
并集a, b逗号分隔，多选
交集.class1.class2紧挨无符号，同时满足

属性选择器 ​

语法含义
.item[abc]含属性 abc
.item[name][class]同时含两属性（与）
.item[class='sub']值相等（input[type="text"]）
a[href^="https://"]^ 前缀匹配
img[src$=".png"]$ 后缀匹配
td[data-*="abc"]* 包含匹配
[class~="title"]~ 全词匹配
`html[lang="en"]`

伪元素（双冒号） ​

::before ::after ::first-line

动态伪类 ​

:link :visited :hover :active :focus

结构伪类 ​

:nth-child(n)（从1；2n/even 偶，2n+1/odd 奇）:nth-last-child(n) :first-child :last-child :nth-of-type(n)

否定 ​

:not(selector)（数字非有效选择器；排除多个需嵌套 :not(.a):not(.b)）

状态 ​

:disabled :checked

目标 ​

:target（URL 锚点对应元素）

二、元素类型 ​

类型特点
行内同行显示遇边界换行；不支持宽高；不支持上下外边距；上下内边距不正常；换行解析为空格
块级独占一行，宽占满父，高由内容撑
行块同行，内容撑高，换行解析空格
pre保持原样式（多个空格不合并）
  • vertical-align 仅对行内/行块有效，控制与行内其他/父基线对齐，非容器内垂直居中。
  • line-height: normal 默认约 1.2，建议重置为 1.5 统一。

三、盒模型 ​

  • 标准：width + padding + border（margin 不影响实际大小但影响布局）。
  • 怪异/IE：width 完全控制，内容区自动减 padding/border。
  • 替换元素（img/iframe/video）：css 尺寸 > html 尺寸 > 固有尺寸。
  • box-sizing 无继承，需：
css
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

四、Flex ​

  • flex-flow: <direction> || <wrap>
  • flex-basis: auto | length | %（主轴初始占比，类似 flex 1-9 控占比）
  • align-self: auto（遵循父 align-items）允许单项目不同对齐。

五、文本截断 ​

单行：

css
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

多行：

css
display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; word-break: break-word; overflow: hidden; text-overflow: ellipsis;

六、margin ​

  • 垂直居中：Flexbox / 绝对定位+top:50%+translateY(-50%) / 绝对定位四向0+margin:auto。
  • 坍塌：相邻块级上下 margin 只留较大；父子无 padding/border 子 margin-top 带父下移（父 overflow:hidden）。

七、边框与形状 ​

  • outline 同 border 但不增元素大小，四边同步。
  • 四边 border 可见为等腰梯形；宽高发 0 + border:10px solid transparent; border-top-color:blue; border-radius:50% 做圆环/扇形。

八、background 简写 ​

background: [color] [image] [position]/[size] [repeat] [origin] [clip] [attachment]

  • 不加 / 浏览器把 size/position 都当 position。
  • background: url("img.jpg") center center / cover no-repeat;
  • 背景图位置用 background-position: 30px 30px。

九、table（用 css 替代属性） ​

border-collapse: collapse; margin: 0 auto; td,th { padding:10px; border:1px solid #000; }rowspan/colspan 跨行/列合并。

十、清除浮动 ​

父 overflow:hidden 或 :after { content:""; display:block; clear:both; } 或 display:table 或设高。

十一、打印 / A4 ​

  • A4：210×297mm；96dpi 下像素 794×1123；默认 1mm≈3.78px。
  • @page 设分页媒体样式（类似 @media print 但仅部分 css）。
  • 全局打印：@media print { .noprint_n{display:none} .noprint_h{visibility:hidden} }

十二、深色模式 ​

css
:root { --bg: rgb(30,30,34); }
html,body,#app { color: var(--bg); }

十三、SASS ​

  • @for $i from 0 to 2000 {} 循环编译基础样式。
  • $list: 0,4,8...; @each $i in $list {}
  • @extend 继承选择器；@mixin 定义复用块；@include 调用。跨文件不能用 @extend。

十四、CSS 关键字单位 ​

inherit（继承）/ initial（默认）/ auto（依场景）/ revert（浏览器默认）/ unset（inherit+initial 组合）。disabled 仅 button/input/textarea/select 有效，a/div/img 需 flag+return。

十五、transform / transition ​

  • transform 属性；translate 是 transform 值（2D/3D 位移）；transition 过渡动画（需触发条件）。
  • position: sticky 屏内 relative，滚出变 fixed（导航跟随）。
  • !!a 双重取反转布尔；Boolean(a) 更语义。
  • 数组变化检测：this.$set(target, key, value)（key 下标从0）。
  • 输入框事件：onfocus→keydown→keypress→oninput→keyup→失去焦点→onchange→onblur。
  • v-bind 带冒号数字/字符串/变量，不带字符串。
  • 模拟反向代理：pathRewrite 把 VUE_APP_BASE_URL 正则替换（可为空）。
  • 小程序跳转：tabBar 用 switchTab；禁止返回 redirectTo；可返回 navigateTo。

© 2026 开发速查