1. CSS 盒子模型

# 1. CSS 盒子模型

IE 盒子模型 (border-box)
标准 W3C 盒子模型 (content-box)

其中 IE 的 width 部分包含了 border 和 padding

W3C-盒子模型

TIP

如何通过 css 切换盒子模型(通过 css3 的 box-sizing 属性)
box-sizing：border-box (IE 盒子模型)
box-sizing：content-box (W3C 盒子模型)

# 2. CSS 中 link 和@import 的区别

对比项		@import
加载时机	并行加载（不阻塞 HTML 解析）	串行加载（阻塞后续 CSS 解析）
DOM 支持	是（HTML 标签）	否（仅 CSS 语法）
兼容性	所有浏览器	IE5+ 支持，但部分高级特性可能不兼容
优先级	后定义的覆盖先定义的	被引入的样式优先级取决于 `@import` 的位置
JavaScript 操作	可通过 DOM API 动态插入/删除	无法通过 JS 直接控制
预加载支持	支持（）	不支持
HTTP 请求	单独请求（可缓存）	合并到主 CSS 文件中请求

# 总结

<link>：现代 Web 开发的首选，性能优、控制灵活。
@import：适用于遗留项目或特定模块化需求，但需谨慎使用。

一句话结论：在大多数情况下，<link> 是更好的选择，而 @import 应仅在无法避免时使用。

# 3. CSS 选择符、属性继承、优先级算法

id 选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a: hover, li:nth-child）

可继承的样式： font-size, font-family, color, text-indent 等
不可继承的样式：border, padding, margin, width, height 等

优先级为: !important > 内联 > id > class > tag > 通配符 > 继承

4 个等级的定义如下：

第一等级：代表内联样式，如 style=""，权值为 1000
第二等级：代表 id 选择器，如#content，权值为 100
第三等级：代表类，伪类和属性选择器，如.content，权值为 10
第四等级：代表标签选择器和伪元素选择器，如 div p，权值为 1
注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为 0

# 4. CSS 伪类和伪元素

# CSS 伪元素：(用于向某些选择器设置特殊效果)

:first-letter 向文本的第一个字母添加特殊样式
:after 在元素之后添加内容

# CSS 伪类：(用于向某些选择器添加特殊的效果)

:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时，向元素添加样式

# 5. Position 的值

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right, z-index 声明）。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
absolute 生成绝对定位的元素，相对于非 static 定位的第一个祖先元素进行定位。
如果没有非 static 定位的祖先元素则相对于 body 进行定位
fixed （老 IE 不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
inherit 规定从父元素继承 position 属性的值。
sticky（CSS3、浏览器兼容差）粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位

定位方式	参照物	是否脱离文档流	常见场景
static	无（默认布局）	否	普通元素布局
relative	自身原始位置	否	微调位置、作为绝对定位的父级
absolute	最近的定位祖先	是	脱离文档流精准定位
fixed	视口（屏幕）	是	固定位置（如导航栏）
sticky	视口（滚动时固定）	否	吸顶效果

TIP

在 position 设置为 fixed 或者 absolute 的时候，元素会脱离文档流，此时对于行内元素(inline)来说可以设置宽高

# 6. CSS 浮动及其危害和解决方法

浮动元素会脱离正常的文档流，向左或向右移动，直到碰到包含框或另一个浮动元素。

# 浮动的危害：

1. 父元素高度塌陷：当子元素全部浮动时，父元素无法自动计算高度，导致布局混乱
1. 影响后续元素布局：浮动元素会脱离文档流，影响后续非浮动元素的排列
1. 响应式布局困难：浮动布局难以适应不同屏幕尺寸
1. 代码维护困难：复杂的浮动嵌套会导致代码难以理解和维护

# 解决浮动问题的方法：

1. 清除浮动（Clearfix）

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

1
2
3
4
5

1. 触发BFC（块级格式化上下文）

为父元素创建BFC可以包含浮动元素：

.container {
  overflow: hidden; /* 或 auto */
  /* 其他BFC触发方式：display: flow-root; */
}

1
2
3
4

1. 使用现代布局技术替代，比如 Flexbox布局 和 Grid布局

.container {
  display: flex;
  flex-wrap: wrap;
}

1
2
3
4

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

1
2
3
4
5

1. 使用CSS的display: flow-root

这是专门为解决浮动问题而设计的属性：

.container {
  display: flow-root;
}

1
2
3

1. 在最后一个子元素上加一个 div，使用 clear：both
1. 给父元素定义高度

<div style="clear: both;"></div> <!-- 清除浮动的空div -->

# 7. block、 inline 和 inline-block 的区别

块状元素：如 div - display：block
行内元素：如 span - display：inline
行内块元素：如 input - display：inline-block

特性	block	inline	inline-block
是否独占一行	是	否	否
设置width/height	可以	不可以	可以
margin/padding	全部方向有效	只有水平方向有效	全部方向有效
包含块级元素	可以	不可以	可以
默认对齐方式	顶部对齐	基线对齐	基线对齐
典型应用	布局容器、段落	文本修饰、链接	导航项、按钮

TIP

对于行内元素(display：inline)，在 position 设置为 fixed、absolute 或者 float 的时候，元素会脱离文档流，此时对于行内元素来说可以设置宽高

TIP

对于行内块状元素(inline-block)，在设置了 display:inline-block 属性后，垂直 margin 不会重叠，甚至和他们的子元素之间也是一样。

空白间隙：inline-block元素之间会有约4px的空白间隙，解决方法：
- 删除HTML中的换行和空格
- 设置父元素font-size: 0，再在子元素上重置字体大小
- 使用负margin

<div class="container">
    <span class="inline-block">行内块元素1</span>
    <span class="inline-block">行内块元素2</span>
</div>

1
2
3
4

.inline-block {
  display: inline-block;
  background: lightgreen;
  width: 70px;
  height: 20px;
  font-size: 12px;
}

1
2
3
4
5
6
7

# 8. CSS 单位

px：绝对单位，页面按精确像素展示
- 特点：固定大小，不会随其他因素改变
em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身来计算（浏览器默认字体是 16px），整个页面内 1em 不是一个固定的值
rem：相对单位，可理解为”root em”, 相对根节点 html 的字体大小来计算，CSS3 新加属性，chrome/firefox/IE9+支持

html {
  font-size: 16px; /* 基准值 */
}
div {
  width: 2rem; /* 32px (2 × 16px) */
}

1
2
3
4
5
6

vw：viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%
vh：viewpoint height，视窗高度，1vh 等于视窗高度的 1%
%:百分比
- 表示相对于父元素或自身在某一属性上的参考值的比例
- 相对于父元素的属性，width: 50%，元素宽度为父元素宽度的 50%。
- 相对于自身元素的属性，transform: translateX(50%)，水平移动自身宽度的 50%。
cm:厘米
mm:毫米
vmin/vmax: 相对于视口较小或较大的尺寸
- vmin：取vh和vw中较小的值
- vmax：取vh和vw中较大的值

示例：在1000×800的视口中：
1vmin = 8px (800px的1%)
1vmax = 10px (1000px的1%)

# 9. display none 和 visibility hidden 区别

特性	`display: none`	`visibility: hidden`
是否占据空间	不占据	占据
是否影响布局	是（重排）	否（仅重绘）
是否响应事件	不响应	不响应
子元素是否可显示	全部隐藏	可单独显示子元素
性能影响	较大（重排+重绘）	较小（仅重绘）

# 10. Tailwind CSS

Tailwind CSS 是一种 实用优先 的 CSS 框架，与传统 CSS（如手写 CSS、BEM 等方法）在开发模式、可维护性和设计思路上有显著差异。

# 开发模式对比

特性	Tailwind CSS	传统 CSS
编写方式	直接在 HTML 中使用预定义的 Utility 类名	手写 CSS 规则或使用预处理器（如 Sass）
代码示例	`<div class="p-4 bg-blue-500 text-white">`	`.card { padding: 1rem; background: blue; }`
设计约束	基于设计系统的预定义值（如间距、颜色）	完全自定义，灵活性高
学习曲线	需记忆类名，但无需手写 CSS	需掌握 CSS 语法和选择器

总结
- Tailwind CSS 适合追求开发效率、设计一致性的项目（如 SaaS、后台管理系统）。
- 传统 CSS 适合需要高度定制化或已有成熟 CSS 架构的项目（如品牌官网）。
- 混合使用：Tailwind 处理布局和通用样式，传统 CSS 处理复杂动画或特殊组件。

# 11. CSS 元素居中方法归纳

水平和垂直方向都可居中

# a、子元素宽高未知

# a-1、css3 flex 布局（父元素设置）

.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

1
2
3
4
5

# a-2、Grid 布局（父元素设置）

.parent {
  display: grid;
  align-items: center;
  justify-content: center;

  /* 等价于前面2个 */
  /* place-items: center; */ 
}

1
2
3
4
5
6
7
8

注意点：
1、child 元素要设为 relative

# a-3、CSS3 transform 属性（子元素设置）

子元素相对定位

.child {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

1
2
3
4
5
6

# a-4、CSS3 transform 属性（父子元素都设置）

子元素绝对定位（相对父元素）

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

1
2
3
4
5
6
7
8
9
10

# a-5、table表格布局（父子元素都设置）

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.child {
  display: inline-block;
}

1
2
3
4
5
6
7
8

# a-6、margin: auto + 绝对定位（父子元素都设置）

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

1
2
3
4
5
6
7
8
9
10
11

# b、子元素宽高已知

# b-1、margin 负值 && 相对定位（父子元素都设置）

.child {
  position: relative;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -15px; /* 外边距为自身宽高的一半 */
}

1
2
3
4
5
6

统一 HTML 代码：

<div class="parent">
  <div class="child"></div>
</div>

1
2
3

相同的 css 代码抽取：

.inner {
  width: 30px;
  height: 30px;
  background-color: aqua;
}
.outer {
  width: 40px;
  height: 40px;
  border: 1px solid black;
}

1
2
3
4
5
6
7
8
9
10

# 12. BFC (Block formatting context)

# 块级格式化上下文

# BFC 作用：

1.阻止外边距重叠
常规流布局时，盒子都是垂直排列，两者之间的间距由各自的外边距所决定，但不是二者外边距之和
若两个相邻元素在不同的 BFC 中，就能避免外边距折叠
同时也可以利用 display：inline-block 来阻止外边距重叠

2.解决浮动问题
浮动元素是会脱离文档流的，浮动主要造成了父元素高度塌陷，以至于父元素很多像背景颜色，边框等都不能正确的显示出来
我们解决浮动的问题由很多，比如给父元素添加高度，或者添加一个子元素使用 clear:both 属性
大部分都是使用伪类 after 属性来解决
由于计算 BFC 的高度时，浮动元素也参与计算
对容器创建 BFC，这样也可以解决浮动问题

3.自适应两栏布局
由于 BFC 的区域不会与 float box 重叠
所以对另外不浮动元素创建 BFC 即可

# BFC 布局规则：

1.内部的 Box 会在垂直方向，一个接一个地放置
2.Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
3.每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
4.BFC 的区域不会与 float box 重叠
5.BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
6.计算 BFC 的高度时，浮动元素也参与计算

# 形成 BFC 的条件只需要满足以下任一条件即可

1、根元素
2、float 的值不是 none。
3、position 的值不是 static 或者 relative。
4、display 的值是 inline-block、table-cell、flex、table-caption 或者 inline-flex
5、overflow 的值不是 visible

# 13. CSS3新增的特性

特性类别	主要新增特性	示例/说明
选择器增强	属性选择器、结构伪类、UI状态伪类	`a[href^="https"]`, `:nth-child(odd)`, `:checked`
盒模型与布局	Flexbox、Grid布局、多列布局	`display: flex/grid`
视觉效果	圆角边框、阴影、渐变、多背景图	`border-radius: 10px`
变换与动画	2D/3D变换、过渡、关键帧动画	`transform: rotate(45deg)`, `transition: all 0.3s`, `@keyframes`
响应式设计	媒体查询、视口单位、弹性图片	`@media (max-width: 768px)`, `100vh`
其他重要特性	CSS变量、滤镜、混合模式、裁剪遮罩	`--main-color: #ff0000`, `filter: blur(5px)`, `clip-path: circle()`

# 14. CSS隐藏元素的7种方法

方法	是否占据空间	是否可交互	是否影响布局	适用场景
`display: none`	❌	❌	✅ 导致重排	完全移除元素，适合需要彻底隐藏且不保留布局的情况
`visibility: hidden`	✅	❌	❌ 仅重绘	隐藏元素但保留布局空间
`opacity: 0`	✅	✅	❌ 仅重绘	元素透明但仍可点击（如透明按钮）
`position: absolute + 移出视口`	❌	❌	✅ 导致重排	隐藏元素且不占空间，但代码较复杂
`clip-path: circle(0)`	✅	❌	❌ 仅重绘	视觉上裁剪元素（但保留DOM）
`width: 0; height: 0; overflow: hidden`	❌	❌	✅ 导致重排	隐藏内部内容（如表单的隐藏字段）
`transform: scale(0)`	✅	❌	❌ 仅重绘	缩放隐藏，适合动画效果

# 15. 如何让 Chrome 浏览器显示小于 12px 的文字

针对老式chrome：可通过加入 CSS 属性 -webkit-text-size-adjust: none;
对于新版本chrome：

font-size: 12px;
-webkit-transform-origin-x: 0;
-webkit-transform : scale(0.8,0.8) ;
display:inline-block;

1
2
3
4

# 16. rem适配原理

rem是相对长度单位，相对于html元素(根元素)font-size计算值的倍数的css单位。

适配原理：html标签的font-size = 移动设备宽度/设计稿宽度 * 100 + “px”

docEl.style.fontSize = 100 * (clientWidth / designimgWidth) + 'px';

# 17. 两栏布局（左侧固定，右侧自适应）

# 方法 1：Flexbox 布局（推荐）

<div class="container">
  <div class="left">固定宽度</div>
  <div class="right">自适应宽度</div>
</div>

1
2
3
4

.container {
  display: flex;
}
.left {
  width: 200px; /* 固定宽度 */
  background: lightblue;
}
.right {
  flex: 1; /* 自适应剩余空间 */
  background: lightgreen;
}

1
2
3
4
5
6
7
8
9
10
11

✅ 优点：代码简洁，兼容性好，支持等高布局。

# 方法 2：Grid 布局

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 第一列固定，第二列自适应 */
}
.left {
  background: lightblue;
}
.right {
  background: lightgreen;
}

1
2
3
4
5
6
7
8
9
10

✅ 优点：比 Flexbox 更简洁，适合复杂布局。

# 18. 三栏布局（中间自适应，左右固定）

# 方法 1：Flexbox 布局（推荐）

<div class="container">
  <div class="left">左侧固定</div>
  <div class="center">中间自适应</div>
  <div class="right">右侧固定</div>
</div>

1
2
3
4
5

.container {
  display: flex;
}
.left, .right {
  width: 200px; /* 左右固定宽度 */
  background: lightblue;
}
.center {
  flex: 1; /* 中间自适应 */
  background: lightgreen;
}

1
2
3
4
5
6
7
8
9
10
11

✅ 优点：代码简洁，支持等高布局。

方法 2：Grid 布局

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 左右固定，中间自适应 */
}
.left, .right {
  background: lightblue;
}
.center {
  background: lightgreen;
}

1
2
3
4
5
6
7
8
9
10

✅ 优点：代码更简洁，适合复杂布局。

← HTML基础 JS基础 →