半山烟雨的博客

em 和 rem是什么？它们有什么区别？

查看详情

em 和 rem 都是相对单位，在 CSS 中主要用于设置字体大小、边距、间距等值。它们的主要区别在于：相对于谁来计算。

单位	参考对象	会被嵌套影响吗？	常见用途
`em`	当前元素的 `font-size`, 用于 `font-size` 时相对于父元素的字体大小	✅ 会	字体、内边距、行高等
`rem`	根元素 `<html>` 的 `font-size`	❌ 不会	通用响应式布局，统一缩放

css 盒模型

查看详情

CSS 盒模型包括 margin、border、padding 和 content
标准盒模型
- box-sizing: content-box
- width === content width
怪异盒模型（IE 盒模型）
- box-sizing: border-box
- width === content width + padding left + padding right + border left + border right

css 选择器有哪些？权重是什么？

查看详情

选择器
- 7 中基础选择器
  - ID 选择器，如 #id{}
  - 类选择器，如 .class{}
  - 属性选择器，如 a[href="segmentfault.com"]{}
  - 伪类选择器，如 :hover{}
  - 伪元素选择器，如 ::before{}
  - 标签选择器，如 span{}
  - 通配选择器，如 *{}
- 3 种组合选择器
  - 后代选择符： .father .child{}
  - 子选择符： .father > .child{}
  - 相邻选择符: .bro1 + .bro2{}
权重：important > 行内样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器

什么是伪类？什么是伪元素？

查看详情

伪类是指定“已有的”元素状态（比如：鼠标悬停）
伪元素是虚拟生成新元素用于样式渲染（比如：装饰内容）

类型	示例	作用	写法
伪类	`:hover`、`:first-child`	选中已有元素的特定状态	单冒号 `:`
伪元素	`::before`、`::after`	创建一个不存在于 DOM 中的虚拟元素	双冒号 `::`

`::after` 和`:after` 的区别是什么

查看详情

按照规范，伪元素应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

css 新特性

查看详情

calc() 函数
transition 过渡
transform 旋转、缩放、移动、倾斜
animation 动画
gradient 渐变
shadow 阴影
text-shadow 文字阴影
border-radius 圆角

行内元素和块级元素的区别

查看详情

行内元素
- display: inline
- 高度和宽度是由内容决定的，与其他行内元素共占一行
块级元素
- display: block
- 默认宽度由父容器决定，默认高度由内容决定，独占一行

绝对定位，相对定位和固定定位的区别

查看详情

绝对定位
- position: absolute
- 相对于元素最近的已定位的祖先元素，无已定位的祖先元素时，以 body 元素为偏移参照的基准
- 完全脱离了标准文档流
相对定位
- position: relative
- 相对于元素在文档中的初始位置
- 未脱离文档流
- position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
固定定位
- position: fixed
- 相对于视口来定位（当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。）
- 脱离文档流

什么是 BFC？如何产生 BFC？作用是什么？

查看详情

Block formatting contexts 块级格式化上下文，简称 BFC，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响
产生
- 根元素
- 浮动元素（元素的 float 不是 none）
- 绝对/固定定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- overflow 值不为 visible 的块元素
- 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
作用
- 自适应两（三）栏布局
- 可以阻止元素被浮动快元素覆盖
- 可以清除浮动
- 分属不同 BFC 时可以阻止 margin 重叠

实现三栏布局，左右宽度固定，中间自适应

查看详情

CSS 浮动：第一个 float:left，第二个 float:right，第三个设置 margin-left 和 margin-right
BFC：第一个 float:left，第二个 float:right，第三个设置 overflow: hidden
绝对定位：第一个定位到 left，第二个定位到 right，第三个设置 margin-left 和 margin-right
flex 布局：父元素设置 display: flex，第一个、第三个设置宽度，第二个设置 flex: 1
grid 布局：父元素设置 display: grid; grid-template-columns: 100px 1fr 200px;

清除浮动的方法？

查看详情

父元素设置 float
- 原理：浮动元素也会形成 BFC，从而包含内部浮动子元素。
- 缺点：父元素本身也浮动了，布局容易失控，很少用。
额外标签法：在最后一个浮动标签后新加一个标签，给其设置 clear: both（不推荐）
- 原理：空标签强行清除浮动。
- 优点：直观、简单。
- 缺点：多余标签，破坏语义，代码不够优雅。
父级添加 overflow 属性法：父级添加 overflow 属性（不推荐）
- 原理：触发 BFC（块级格式化上下文），BFC 会包裹浮动元素。
- 优点：简洁，常用。
- 缺点：可能裁剪掉溢出的子元素（比如下拉菜单）。
after 伪元素法：使用 after 伪元素清除浮动，给父元素添加（推荐）
- 原理：在父元素最后生成一个块级元素，使用 clear: both 清除浮动。
- 优点：优雅，语义清晰，不影响结构。
- 缺点：需要额外写伪元素。
父元素设置 display: flow-root（现代方案）
- 原理：flow-root 本身就是一个 BFC 容器，会自动包裹浮动。
- 优点：最简洁，符合现代 CSS 语义。
- 缺点：需要现代浏览器支持

什么是 CSS 层叠上下文？形成条件？层叠等级？

查看详情

层叠上下文是浏览器在处理元素的层叠顺序（z-index）时引入的一个独立渲染层级环境。在同一个层叠上下文中，子元素的层叠顺序只会和兄弟元素比较，不会跑去跟外部的元素比较。
形成条件
- 文档根元素 html
- position 为 relative / absolute / fixed / sticky 且 z-index 不是 auto
- opacity 属性值小于 1 的元素
- 元素设置了 transform、filter、perspective、clip-path
层叠等级（自下而上）
- 背景和边框
- 负 z-index 的子元素
- 普通流内的子元素（没有定位，或者 z-index: auto）
- z-index: 0 的定位子元素
- 正 z-index 的子元素

垂直水平居中

查看详情

css

/*1：须知道子元素宽高*/
.child {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

/*2：须知道子元素宽高*/
.child {
  width: 200px;
  height: 200px;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
}

/*3：不须知道子元素宽高*/
.child {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/*4：不须知道子元素宽高*/
.child {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/*5：不须知道子元素宽高*/
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*6：不须知道子元素宽高*/
.parent {
  display: table-cell;
  vertical-align: middle;
}
.child {
  width: 200px;
  height: 200px;
  margin: auto;
}

/*7：不须知道子元素宽高*/
.parent {
  display: grid;
}
.child {
  align-self: center;
  justify-self: center;
}

link 与@import 的区别

查看详情

从属关系区别：link 是 HTML 提供的标签，不仅可以加载 css 文件，而且还可以定义 RSS，rel 连接属性等；@import 是 css 提供的语法规则，只能导入样式表；
加载顺序区别：link 标签在加载页面时同时加载 css；@import 则是在页面加载完毕后加载；
兼容性区别：link 作为 HTML 的标签不存在兼容性；@import 是在 CSS2.1 才有的语法；
DOM 可控性区别：link 可以通过 JS 动态插入；@import 不行

单行文本省略

查看详情

css

div {
  overflow: hidden; /*文字长度超过限定的宽度则隐藏超出的内容*/
  white-space: nowrap; /*设置文字在一行显示，不能换行*/
  text-overflow: ellipsis; /*规定当文本溢出时，显示省略号来代表被修剪的文本*/
}

多行元素文本省略

查看详情

css

div {
  -webkit-line-clamp: 2; /* 限制一个块级元素显示文本的行数 */
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 设置或者检索伸缩盒对象的子元素的排列方式 */
  overflow: hidden;
  text-overflow: ellipsis;
}

如何让元素消失？

查看详情

完全消失：元素从渲染树中消失，不占据空间
- display: none，该元素隐藏起来了，但是会改变页面布局，可以理解为吧该元素删掉了
- hidden 属性
视觉上消失：屏幕中不可见，占据空间
- 利用 position 将元素移出可视区范围
- 利用 transfrom，缩放、移动、旋转元素
- 设置宽高为 0，字体为 0 或者超出隐藏
- opacity: 0，该元素隐藏起来了，但是不会改变页面布局，如果元素已经绑定了一些事件也能够触发
- visibility: hidden，该元素隐藏起来了，但不会改变页面的布局，但是不会触发已绑定的事件
- z-index: -1 需要先定位，将 z-index 值小的藏在 z-index 大的下面
语义上消失：读屏软件不可读，但正常占据空间
- aria-hidden="true"属性：占据空间，可见，但读屏软件不可读取

calc 函数

查看详情

calc()函数是 CSS3 新增的功能，可以使用 calc 计算 border,margin,padding,width,font-size 等属性
注意：
- calc()函数只支持加减乘除运算
- 运算符前后要保留一个空格
- 对于不支持的浏览器来说，整个属性运算表达式会被忽略

CSS 画半圆、扇形、三角形、梯形

查看详情

css

/* 半圆 */
.half-circle {
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  background: red;
}
/* 扇形 */
.sector {
  width: 0px;
  height: 0px;
  background: none;
  border: 50px solid red;
  border-color: red transparent transparent transparent;
  border-radius: 50px 50px 0 0;
}
/* 三角 */
.triangle {
  width: 0px;
  height: 0px;
  background: none;
  border: 50px solid red;
  border-color: red transparent transparent transparent;
}
/* 梯形 */
.ladder {
  width: 100px;
  height: 0px;
  background: none;
  border: 50px solid red;
  border-color: red transparent transparent transparent;
}

transition 和 animation 的区别

查看详情

它们的大部分属性是相同的，都是随时间改变元素的属性值
transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何事件就能随时间改变属性值
transition 只能定义两帧（from...to），而 animation 可以定义多帧

css的哪些属性可以被子元素继承？

查看详情

文本与字体相关

属性	说明
`color`	文字颜色
`font`	简写属性
`font-family`	字体族
`font-size`	字号
`font-style`	字体样式（如 italic）
`font-variant`	小型大写字母
`font-weight`	字体粗细
`letter-spacing`	字母间距
`line-height`	行高
`quotes`	引号样式
`text-align`	文本对齐
`text-indent`	首行缩进
`text-transform`	文本大小写转换
`visibility`	可见性
`white-space`	空白符处理
`word-spacing`	单词间距

列表与表格相关

属性	说明
`list-style`	列表样式（简写）
`list-style-type`	列表标记类型
`list-style-position`	列表标记位置
`list-style-image`	列表标记图像
`border-collapse`	表格边框合并方式
`border-spacing`	单元格间距
`caption-side`	表格标题位置
`empty-cells`	是否显示空单元格

强制继承：使用 inherit

postcss是什么？

查看详情

PostCSS 是一个 CSS 的处理平台，通过插件可以做前缀自动添加、压缩、未来语法支持等，灵活度极高。

CSS modules是什么？

查看详情

CSS Modules 是一种 CSS 作用域管理方案，用于让 CSS 样式默认局部化，避免全局污染。CSS Modules 的核心是把每个 class 或 id 编译成独一无二的哈希值。

什么是CSS预处理器？

查看详情

CSS 预处理器本质上是“增强版 CSS”，它支持我们使用变量、嵌套、函数、继承、逻辑运算等功能。可以让我们用程序化思维写样式，提高可维护性和开发效率，最终它可以编译为标准 CSS 供浏览器使用

常见的CSS预处理器：

Sass/SCSS：功能最全、社区最大。
Less：语法接近 CSS，学习成本低。
Stylus：语法灵活、自由度高。

flex 布局

查看详情

flex 布局

grid 布局

查看详情

grid 布局

在使用tailwind css的时候写在后面的类名会覆盖前面的类名吗？

查看详情

不同类作用于不同属性 → 共存
同一属性的不同值 → 后者覆盖前者
状态类（如 hover:、sm: 等）有更高优先级
!important 类（如 !text-red-500）会强制覆盖

如何解决在一个节点上tailwind css类名过长的问题？

查看详情

场景	最佳做法
类名重复太多	用 `@apply` 抽语义类
一个样式多处复用	写成组件
类名动态决定	用 `clsx + tailwind-merge`
类名看着乱	用 `prettier-plugin-tailwindcss`
类名来源于设计稿	抽象 theme，减少魔法数字

em 和 rem是什么？它们有什么区别？ ​

css 盒模型 ​

css 选择器有哪些？权重是什么？ ​

什么是伪类？什么是伪元素？ ​

::after 和:after 的区别是什么 ​

css 新特性 ​

行内元素和块级元素的区别 ​

绝对定位，相对定位和固定定位的区别 ​

什么是 BFC？如何产生 BFC？作用是什么？ ​

实现三栏布局，左右宽度固定，中间自适应 ​

清除浮动的方法？ ​

什么是 CSS 层叠上下文？形成条件？层叠等级？ ​

垂直水平居中 ​

link 与@import 的区别 ​

单行文本省略 ​

多行元素文本省略 ​

如何让元素消失？ ​

calc 函数 ​

CSS 画半圆、扇形、三角形、梯形 ​

transition 和 animation 的区别 ​

css的哪些属性可以被子元素继承？ ​

postcss是什么？ ​

CSS modules是什么？ ​

什么是CSS预处理器？ ​

flex 布局 ​

grid 布局 ​

在使用tailwind css的时候写在后面的类名会覆盖前面的类名吗？ ​

如何解决在一个节点上tailwind css类名过长的问题？ ​

em 和 rem是什么？它们有什么区别？

css 盒模型

css 选择器有哪些？权重是什么？

什么是伪类？什么是伪元素？

`::after` 和`:after` 的区别是什么

css 新特性

行内元素和块级元素的区别

绝对定位，相对定位和固定定位的区别

什么是 BFC？如何产生 BFC？作用是什么？

实现三栏布局，左右宽度固定，中间自适应

清除浮动的方法？

什么是 CSS 层叠上下文？形成条件？层叠等级？

垂直水平居中

link 与@import 的区别

单行文本省略

多行元素文本省略

如何让元素消失？

calc 函数

CSS 画半圆、扇形、三角形、梯形

transition 和 animation 的区别

css的哪些属性可以被子元素继承？

postcss是什么？

CSS modules是什么？

什么是CSS预处理器？

flex 布局

grid 布局

在使用tailwind css的时候写在后面的类名会覆盖前面的类名吗？

如何解决在一个节点上tailwind css类名过长的问题？