html、css汇总

2023-04-03

🎯 第一部分：HTML基础重点

1. HTML骨架结构

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    网页主体内容
  </body>
</html>

2. 核心标签分类

文本标签：<h1>-<h6>、<p>、<strong>、<em>、<ins>、<del>
多媒体标签：<img>、<audio>、<video>
链接标签：<a href="URL" target="_blank">
列表标签：<ul>、<ol>、<dl>
表格标签：<table>、<tr>、<td>、<th>
表单标签：<form>、<input>、<select>、<textarea>

3. 路径知识

相对路径：./当前目录、../上级目录
绝对路径：从盘符开始或网络地址

🎨 第二部分：CSS基础重点

1. CSS引入方式

<!-- 内部样式 -->
<style>CSS代码</style>

<!-- 外部样式 -->
<link rel="stylesheet" href="style.css" />

<!-- 行内样式 -->
<div style="color: red;">内容</div>

2. 选择器优先级

!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符

3. 复合选择器

后代选择器：div span（空格）
子代选择器：div > span（>）
并集选择器：div, p, span（逗号）
交集选择器：p.box（连写）
伪类选择器：:hover、:first-child、:nth-child()

4. 文字控制属性

/* 字体大小 */
font-size: 16px;

/* 字体样式 */
font-style: normal/italic;

/* 行高 */
line-height: 1.5;

/* 字体族 */
font-family: 'Microsoft YaHei', sans-serif;

/* 复合属性 */
font: italic 700 16px/1.5 'Microsoft YaHei';

📦 第三部分：盒子模型重点

1. 盒子模型组成

内容区域 (width/height)
    ↓
内边距 (padding)
    ↓
边框线 (border)
    ↓
外边距 (margin)

2. 尺寸计算

/* 默认模式 */
box-sizing: content-box;
/* 盒子尺寸 = 内容尺寸 + padding + border */

/* 内减模式 */
box-sizing: border-box;
/* 盒子尺寸 = 设置的宽高 */

3. 外边距问题

合并现象：垂直排列的兄弟元素，上下margin取较大值
塌陷问题：父子级标签，子级上外边距导致父级一起移动

🎯 第四部分：布局技术重点

1. 标准流

块元素：独占一行，可设置宽高
行内元素：一行显示多个，不可设置宽高
行内块：一行显示多个，可设置宽高

2. 浮动布局

/* 基本使用 */
float: left/right;

/* 特点 */
- 脱标，不占位
- 具备行内块特点
- 顶对齐

/* 清除浮动 */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

3. Flex布局

/* 父级设置 */
display: flex;
justify-content: center; /* 主轴对齐 */
align-items: center; /* 侧轴对齐 */
flex-direction: row; /* 主轴方向 */

/* 子级设置 */
flex: 1; /* 弹性伸缩 */
align-self: center; /* 单独对齐 */

4. 定位布局

/* 相对定位 */
position: relative;
/* 不脱标，相对自己原来位置移动 */

/* 绝对定位 */
position: absolute;
/* 脱标，相对最近定位祖先元素移动 */

/* 固定定位 */
position: fixed;
/* 脱标，相对浏览器窗口移动 */

/* 定位居中 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

🎨 第五部分：CSS高级技巧

1. CSS精灵图

/* 实现步骤 */
.box {
  width: 小图宽度;
  height: 小图高度;
  background-image: url(精灵图);
  background-position: -x坐标 -y坐标; /* 左上角坐标 */
}

2. 伪元素

/* 创建虚拟元素 */
.box::before {
  content: '';
  display: block;
}

.box::after {
  content: '';
  display: block;
}

3. 结构伪类选择器

/* 选择第一个子元素 */li:first-child { }
/ 选择最后一个子元素 /
li:last-child { }
/ 选择第n个子元素 /
li:nth-child(n) { }
/ 选择偶数子元素 /
li:nth-child(even) { }
/ 选择奇数子元素 /
li:nth-child(odd) { }

<hr/>

📱 第六部分：移动端重点

1. 视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2. 二倍图适配

/ 设计稿尺寸 ÷ 2 = CSS尺寸 /<br/>width: 100px; / 设计稿200px /

3. rem适配方案

/ 基准根字号 = 视口宽度 ÷ 10 /<br/>html {<br/>  font-size: 37.5px; / 375px ÷ 10 /<br/>}<br/><br/>/ rem单位尺寸 = px单位数值 ÷ 基准根字号 /<br/>.box {<br/>  width: 100px; / 375px ÷ 37.5 = 10rem /<br/>}

4. vw适配方案

/ vw单位尺寸 = px单位数值 ÷ (1/100视口宽度) /<br/>.box {<br/>  width: 100px; / 375px ÷ 3.75 = 26.67vw /<br/>}

<hr/>

🎭 第七部分：CSS3动画重点

1. 平面转换

/ 平移 /
transform: translate(100px, 100px);
transform: translateX(100px);
transform: translateY(100px);
/ 旋转 /
transform: rotate(45deg);
/ 缩放 /
transform: scale(1.5);
transform: scaleX(1.5);
transform: scaleY(1.5);
/ 倾斜 /
transform: skew(30deg);
/ 多重转换 /
transform: translate(100px) rotate(45deg);

2. 空间转换

/ 3D平移 /<br/>transform: translate3d(x, y, z);<br/><br/>/ 3D旋转 /<br/>transform: rotateX(45deg);<br/>transform: rotateY(45deg);<br/>transform: rotateZ(45deg);<br/><br/>/ 视距 /<br/>perspective: 1000px;<br/><br/>/ 立体呈现 /<br/>transform-style: preserve-3d;

3. 渐变

/ 线性渐变 /<br/>background-image: linear-gradient(to right, red, blue);<br/><br/>/ 径向渐变 /<br/>background-image: radial-gradient(circle, red, blue);

4. 动画

/ 定义动画 /
@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
/ 使用动画 /
animation: move 2s infinite linear;
/ 动画拆分 /
animation-name: move;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;

<hr/>

🎨 第八部分：项目CSS设计重点

1. 项目目录结构

项目名/<br/>├── images/          # 固定图片素材<br/>├── uploads/         # 非固定图片素材<br/>├── iconfont/        # 字体图标<br/>├── css/            # CSS文件<br/>│   ├── base.css    # 基础公共样式<br/>│   ├── common.css  # 公共模块样式<br/>│   └── index.css   # 首页样式<br/>└── index.html      # 首页HTML

2. 版心居中

.wrapper {<br/>  margin: 0 auto;<br/>  width: 1200px; / PC端 /<br/>  width: 375px; / 移动端 /<br/>}

3. SEO优化

<!-- 网页标题 --><br/><title>网站名称</title><br/><br/><!-- 网页描述 --><br/><meta name="description" content="网站描述" /><br/><br/><!-- 网页关键词 --><br/><meta name="keywords" content="关键词1,关键词2" /><br/><br/><!-- 网页图标 --><br/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

4. 布局思路

先整体再局部：从外到内，从上到下，从左到右
CSS实现步骤：

画盒子，调整盒子范围（宽高背景色）
调整盒子位置（flex布局、内外边距）
控制图片、文字内容样式

5. 响应式布局

/ 媒体查询 /
@media (max-width: 768px) {
  .left { display: none; }
}
/ Bootstrap栅格系统 /
<div>
  <div>
    <div class="col-md-6 col-sm-12">内容</div>
  </div>
</div>

<hr/>

🎯 第九部分：Less预处理器重点

1. 基本语法

// 注释
@变量名: 数据;
// 运算
width: 100px + 50px;
// 嵌套
.box {
  .item { color: red; }
}
// 导入
@import './base.less';
// 导出
// out: ./css/
// 禁止导出
// out: false （通常设置在base.less）

2. 变量使用

@primary-color: #007bff;
@font-size: 16px;
.box {
  color: @primary-color;
  font-size: @font-size;
}

<hr/>

📋 第十部分：开发工具与技巧

1. VS Code快捷键

Ctrl + /：添加/删除注释
! + Tab：生成HTML骨架
Ctrl + D：选择相同内容

2. PxCook使用

自动智能识别设计稿尺寸
测量颜色、距离、字体大小

3. 调试技巧

使用浏览器开发者工具
检查元素样式
调试响应式布局

<hr/>

🚀 第十一部分：前端开发实战要点

1. 文本处理基础

文本缩进

p {<br/>  / text-indent: 40px; /<br/>  text-indent: 2em; / 推荐：2个字符的缩进 /<br/>}<br/><br/>/ 经验：谷歌浏览器文字默认大小16px /<br/>p {<br/>  font-size: 30px; / font-size属性必须有单位，否则不生效 /<br/>}

水平对齐方式

h1 {<br/>  / text-align: left;   左对齐 /<br/>  / text-align: right;  右对齐 /<br/>  text-align: center; / 居中对齐 /<br/>}<br/><br/>/ 重要：文本、span、a标签、input标签、img标签居中 /<br/>/ text-align: center 需要给以上元素的父元素设置 /<br/>.parent {<br/>  text-align: center; / 给父元素设置，子元素居中 /<br/>}

文本修饰

/ text-decoration 文本修饰 /
a {
  text-decoration: underline;    / 下划线（常用） /
  text-decoration: line-through; / 删除线 /
  text-decoration: overline;     / 上划线 /
  text-decoration: none;         / 无装饰线（常用，清除a标签下划线） /
}

单行文字垂直居中

.box {
  height: 100px;
  background-color: skyblue;
  / 注意：只能是单行文字垂直居中 /
  line-height: 100px; / 行高等于高度 /
}
/ 网页精准布局，会设置line-height: 1; 取消上下间距 /
/ 行高和font连写 /
p {
  font: italic 700 16px/1.5 'Microsoft YaHei';
}

2. 元素类型与特点

块级元素

/* 特点：
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
*/
/ 常见块级元素：div p h1-h6 ul li dl dt dd form header nav footer /

行内元素

/* 特点：
- 一行显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高，尺寸和内容大小相当
*/
/ 常见行内元素：a span b u i s strong ins em del /

行内块元素

/ 特点：<br/>- 一行显示多个<br/>- 可以设置宽高<br/>/<br/>/ 常见行内块元素：input textarea button select /<br/>/ 特殊：img标签有行内块元素特点，但Chrome调试工具显示结果是inline /<br/><br/>/ 行内块问题：代码换行会产生空格间隙 /<br/>div {<br/>  display: inline-block;<br/>  / 没有好的解决方案，建议不用转行内块 /<br/>}

3. 元素嵌套规则

/ 块级元素一般作为大容器，可以嵌套：<br/>- 文本<br/>- 块级元素<br/>- 行内元素<br/>- 行内块元素<br/>/<br/><br/>/ 注意事项：<br/>- p不要嵌套div、p、h标签<br/>- a标签内部可以嵌套任意元素<br/>- a标签不能嵌套a标签<br/>/

4. CSS继承特性

/ 子元素默认继承父元素样式（子承父业） /

/* 可以继承的常见属性（文字控制属性都可以继承）：
- color
- font-size
- font-style
- font-weight
- font-family
- text-indent
- text-align
- text-decoration
- line-height
*/

/* 继承消失的特殊情况：
- 如果元素有默认样式，此时继承依然存在，但保持原样式
- a的color会继承失效
- h的font-size会继承失败
/

5. 伪元素使用

/ 用CSS创建虚拟标签（伪元素），用来摆放装饰性内容 /<br/>/ 非主体元素可以使用伪元素，在父级里面创建子级标签 /<br/><br/>/ ::before 在父元素内容的最前添加一个伪元素 /<br/>/ ::after 在父元素内容的最后添加一个伪元素 /<br/><br/>.box::before {<br/>  content: ''; / 必须设置，用来设置伪元素的内容，如果没有内容则引号留空 /<br/>  display: block; / 伪元素默认是行内显示模式 /<br/>}<br/><br/>/ 伪元素特点：<br/>- 权重和标签选择器相同<br/>- 必须设置content属性<br/>- 默认是行内显示模式<br/>/

6. Flex布局详解

主轴对齐方式

.container {<br/>  display: flex;<br/>  justify-content: flex-start;   / 了解 /<br/>  justify-content: flex-end;      / 了解 /<br/>  justify-content: center;        / 常用 /<br/>  justify-content: space-between; / 常用 /<br/>  justify-content: space-around;  / 常用 /<br/>  justify-content: space-evenly;  / 常用 */<br/>}

侧轴对齐方式

.container {
  display: flex;
  align-items: stretch;   / 默认：沿着侧轴线被拉伸至铺满容器 /
  align-items: center;    / 常用 /
  align-items: flex-start; / 认识 /
  align-items: flex-end;   / 认识 /
}
/ 单独给某个弹性盒子的侧轴对齐方式 /
.item {
  align-self: center; / 配合结构伪类:nth-child()使用 /
}

主轴方向控制

.container {<br/>  display: flex;<br/>  flex-direction: row;             / 水平方向左-右（默认） /<br/>  flex-direction: column;          / 垂直方向上-下（最常用） /<br/>  flex-direction: row-reverse;     / 水平方向右-左 /<br/>  flex-direction: column-reverse;  / 垂直方向下-上 /<br/>}

弹性盒子尺寸控制

.item {<br/>  flex: 1; / 整数数字，表示占用父级剩余尺寸的份数 /<br/>}<br/><br/>/ 在默认情况下：<br/>- 主轴方向尺寸是靠内容撑开<br/>- 侧轴默认拉伸<br/>/

多行对齐方式

.container {<br/>  display: flex;<br/>  flex-wrap: wrap; / 先设置换行 /<br/>  <br/>  / 调整行对齐方式，对单行弹性盒子不生效 /<br/>  align-content: flex-start;<br/>  align-content: flex-end;<br/>  align-content: center;<br/>  align-content: space-between;<br/>  align-content: space-around;<br/>}

垂直居中布局

.box {<br/>  / 两个弹性盒子垂直排列，图文上下居中排列 /<br/>  display: flex;<br/>  <br/>  / 修改主轴方向为垂直方向，侧轴自动变换到水平方向 /<br/>  flex-direction: column;<br/>  <br/>  / 主轴在垂直，视觉效果垂直居中 /<br/>  justify-content: center;<br/>  <br/>  / 侧轴在水平，视觉效果水平居中 /<br/>  align-items: center;<br/>  <br/>  width: 150px;<br/>  height: 120px;<br/>  background-color: pink;<br/>}

7. 标签水平居中方法

/ 方法总结：margin: 0 auto; /
/ 如果让div、p水平居中，直接给当前元素本身设置即可 /

.box {
margin: 0 auto; / 一般针对固定宽度的盒子 /
width: 200px; / 必须设置宽度 /
}

/ 注意：如果大盒子没有设置宽度，此时默认占满父元素的宽度 /

8. 图片展示方法

/ 方法一：直接使用img标签 /
img {
  / img标签是一个标签，不设置宽高会以原尺寸展示 /
}
/ 方法二：div标签 + 背景图片 /
.img-container {
  width: 200px;
  height: 150px;
  background-image: url('image.jpg');
  background-size: cover;
  / 需设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签 /
}

9. 盒子模型问题

/ 行内块元素设置宽高后可能会导致元素的总宽度超过了其父元素的宽度 /
/ 从而导致元素换行显示 /

/* 这种现象通常称为"盒子模型"，也就是元素包含：
- 内容区
- 内边距区
- 边框区
- 外边距区
*/

/ 如果要让行内块元素在一行内显示，请确保其总宽度不超过父元素的宽度 /
/ 可以考虑调整内边距、边框、外边距等属性，或者使用浮动、定位等技术实现 /

10. CSS书写顺序

/ CSS书写顺序：浏览器执行效率更高 /<br/>.box {<br/>  / 1. 浮动 / display /<br/>  float: left;<br/>  display: flex;<br/>  <br/>  / 2. 盒子模型：margin border padding 宽度高度背景色 /<br/>  margin: 10px;<br/>  border: 1px solid #ccc;<br/>  padding: 20px;<br/>  width: 200px;<br/>  height: 100px;<br/>  background-color: #f0f0f0;<br/>  <br/>  / 3. 文字样式 /<br/>  font-size: 16px;<br/>  color: #333;<br/>  text-align: center;<br/>}

11. 文本居中对齐要点

/ ❌ 错误做法：直接给文本元素设置 /<br/>span { text-align: center; }  / 无效 /<br/>a { text-align: center; }     / 无效 /<br/>input { text-align: center; } / 无效 /<br/><br/>/ ✅ 正确做法：给父元素设置 /<br/>.parent {<br/>  text-align: center; / 文本、span、a、input、img都会居中 /<br/>}

12. 图片垂直对齐问题

/ 解决图片底部间隙问题 /<br/>img {<br/>  vertical-align: middle; / 或 top、bottom /<br/>  / 或者设置 display: block; /<br/>}

13. Flex布局中的input宽度问题

/ ❌ 问题：input在flex布局中flex:1不生效 /<br/>.search {<br/>  display: flex;<br/>}<br/>.search input {<br/>  flex: 1; / 不生效，浏览器优先使用input默认宽度 /<br/>}<br/><br/>/ ✅ 解决：重置input默认宽度 /<br/>.search input {<br/>  flex: 1;<br/>  width: 0; / 关键：重置默认宽度 /<br/>}

14. 定位元素文字溢出处理

/ 定位元素文字溢出时的对齐方式选择 /<br/>.cart i {<br/>  position: absolute;<br/>  / ❌ 右对齐：文字多了会向左撑开，可能盖住其他内容 /<br/>  / right: 1px; /<br/>  <br/>  / ✅ 左对齐：文字多了会向右撑开，更安全 /<br/>  left: 15px;<br/>}

15. 清除默认样式的完整方案

/ 统一清除默认样式方案 /<br/>,<br/>::after,<br/>::before {<br/>  box-sizing: border-box;<br/>}<br/><br/>body,<br/>ul,<br/>p,<br/>h1,<br/>h2,<br/>h3,<br/>h4,<br/>h5,<br/>h6 {<br/>  padding: 0;<br/>  margin: 0;<br/>}<br/><br/>body {<br/>  font-family: -apple-system, BlinkMacSystemFont, PingFangSC-Regular, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;<br/>  font-size: 14px;<br/>  color: #333;<br/>}<br/><br/>img {<br/>  vertical-align: bottom;<br/>}<br/><br/>ul {<br/>  list-style-type: none;<br/>}<br/><br/>a {<br/>  color: #333;<br/>  text-decoration: none;<br/>  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);<br/>}

16. 字体图标使用要点

/ 字体图标垂直对齐 /<br/>.iconfont {<br/>  vertical-align: middle;<br/>  margin-right: 4px; / 与文字保持间距 /<br/>}<br/><br/>/ 字体图标颜色继承 /<br/>.iconfont {<br/>  color: inherit; / 继承父元素颜色 /<br/>}

17. 响应式布局断点设置

/ 常用断点 /<br/>@media (max-width: 1200px) { / 大屏幕 /<br/>  .wrapper { width: 960px; }<br/>}<br/><br/>@media (max-width: 992px) { / 中等屏幕 /<br/>  .wrapper { width: 720px; }<br/>}<br/><br/>@media (max-width: 768px) { / 平板 /<br/>  .wrapper { width: 540px; }<br/>}<br/><br/>@media (max-width: 576px) { / 手机 /<br/>  .wrapper { width: 100%; padding: 0 15px; }<br/>}

18. 移动端适配单位选择

/ rem适配：适合需要精确控制的项目 /<br/>html { font-size: 37.5px; }<br/>.box { width: 100px; / 100/37.5 = 2.67rem / }<br/><br/>/ vw适配：适合简单快速的项目 /<br/>.box { width: 26.67vw; / 100/3.75 = 26.67vw / }<br/><br/>/ 混合使用：关键元素用rem，装饰元素用vw /<br/>.title { font-size: 1.6rem; } / 精确控制 /<br/>.decoration { width: 20vw; }  / 快速适配 /

19. 性能优化要点

/ 1. 避免过度嵌套 /<br/>/ ❌ 过度嵌套 /<br/>.header .nav .list .item .link { }<br/><br/>/ ✅ 合理嵌套 /<br/>.nav-item-link { }<br/><br/>/ 2. 使用简写属性 /<br/>/ ❌ 分开写 /<br/>.box {<br/>  margin-top: 10px;<br/>  margin-right: 20px;<br/>  margin-bottom: 10px;<br/>  margin-left: 20px;<br/>}<br/><br/>/ ✅ 简写 /<br/>.box {<br/>  margin: 10px 20px;<br/>}<br/><br/>/ 3. 避免使用通配符选择器 /<br/>/ ❌ 性能差 /<br/> { margin: 0; }<br/><br/>/ ✅ 明确指定 /<br/>body,<br/>div,<br/>p,<br/>h1,<br/>h2,<br/>h3 { margin: 0; }

20. 兼容性处理要点

/ 1. 浏览器前缀 /<br/>.box {<br/>  -webkit-transform: translateX(100px);<br/>  -moz-transform: translateX(100px);<br/>  -ms-transform: translateX(100px);<br/>  transform: translateX(100px);<br/>}<br/><br/>/ 2. 降级方案 /<br/>.box {<br/>  background-color: #f0f0f0; / 降级背景色 /<br/>  background-image: linear-gradient(to right, #f0f0f0, #e0e0e0);<br/>}<br/><br/>/ 3. 条件注释（IE） /<br/><!--[if IE]><br/><link rel="stylesheet" href="ie.css"><br/><![endif]-->

### 21. 调试技巧要点

/ 1. 临时背景色调试 /<br/>.box {<br/>  background-color: pink !important; / 临时调试 /<br/>}<br/><br/>/ 2. 边框调试 /<br/>.box {<br/>  border: 1px solid red; / 查看盒子范围 /<br/>}<br/><br/>/ 3. 控制台调试 /<br/>console.log('调试信息'); / 配合JavaScript调试 /

22. 代码规范要点

/ 1. 属性顺序 /<br/>.box {<br/>  / 定位属性 /<br/>  position: absolute;<br/>  top: 0;<br/>  left: 0;<br/>  <br/>  / 盒模型属性 /<br/>  display: flex;<br/>  width: 100px;<br/>  height: 100px;<br/>  margin: 10px;<br/>  padding: 10px;<br/>  <br/>  / 文字属性 /<br/>  font-size: 16px;<br/>  line-height: 1.5;<br/>  color: #333;<br/>  <br/>  / 背景属性 /<br/>  background-color: #fff;<br/>  <br/>  / 其他属性 /<br/>  border-radius: 5px;<br/>  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);<br/>}<br/><br/>/ 2. 命名规范 /<br/>.header-nav { }        / 连字符分隔 /<br/>.headerNav { }         / 驼峰命名 /<br/>.header_nav { }        / 下划线分隔 /<br/><br/>/ 3. 注释规范 /<br/>/ 头部导航样式 /<br/>.header-nav {<br/>  / 导航列表 /<br/>  .nav-list {<br/>    display: flex;<br/>  }<br/>}

<hr/>

🎯 第十二部分：项目实战技巧总结

1. 文本居中操作

/ 从学成在线项目：导航文字居中 /<br/>.nav li a {<br/>  display: block;<br/>  padding: 6px 8px;<br/>  line-height: 27px;<br/>  text-align: center; / 给父元素设置，子元素居中 /<br/>}

2. 图片处理技巧

/ 从小兔鲜儿项目：图片垂直对齐 /<br/>img {<br/>  vertical-align: middle; / 解决图片底部间隙 /<br/>}<br/><br/>/ 从酷我音乐项目：图片填充容器 /<br/>img {<br/>  object-fit: cover; / 保持比例，裁剪填充 /<br/>  border-radius: 5px;<br/>}

3. Flex布局中的input处理

/ 从小兔鲜儿项目：搜索框input宽度问题 /<br/>.search input {<br/>  flex: 1;<br/>  width: 0; / 关键：重置默认宽度，让flex:1生效 /<br/>}

4. 定位元素文字溢出处理

/ 从小兔鲜儿项目：购物车数字定位 /<br/>.cart i {<br/>  position: absolute;<br/>  left: 15px; / 左对齐：文字多了向右撑开，更安全 /<br/>  / right: 1px; 右对齐：文字多了向左撑开，可能盖住其他内容 /<br/>}

5. 字体图标使用

/ 从小兔鲜儿项目：字体图标对齐 /<br/>.iconfont {<br/>  vertical-align: middle;<br/>  margin-right: 4px;<br/>}

6. 版心居中布局

/ 从多个项目：版心居中 /<br/>.wrapper {<br/>  margin: 0 auto;<br/>  width: 1240px; / PC端 /<br/>}

7. 响应式断点设置

/ 从移动端项目：常用断点 /<br/>@media (max-width: 768px) {<br/>  .left {<br/>    display: none; / 隐藏左侧区域 /<br/>  }<br/>}

8. rem适配计算

/ 从极速问诊项目：rem单位计算 /<br/>/ 基准根字号 = 视口宽度 ÷ 10 = 37.5px /<br/>.box {<br/>  width: 1.813rem; / 68px ÷ 37.5px /<br/>  height: 0.773rem; / 29px ÷ 37.5px /<br/>}

9. vw适配计算

/ 从酷我音乐项目：vw单位计算 /<br/>@vw: 3.75vw; / 375px ÷ 100 /<br/>.box {<br/>  width: (100 / @vw); / 100px ÷ 3.75 = 26.67vw /<br/>}

10. 清除浮动方案

/ 从学成在线项目：清除浮动 /<br/>.clearfix::after {<br/>  content: '';<br/>  display: block;<br/>  clear: both;<br/>}

11. 定位居中技巧

/ 从多个项目：绝对定位居中 /<br/>.box {<br/>  position: absolute;<br/>  left: 50%;<br/>  top: 50%;<br/>  transform: translate(-50%, -50%);<br/>}

12. 文本溢出省略

/ 从项目中的长文本处理 /<br/>.text-ellipsis {<br/>  white-space: nowrap;<br/>  overflow: hidden;<br/>  text-overflow: ellipsis;<br/>}

13. 背景图片定位

/ 从小兔鲜儿项目：精灵图使用 /<br/>.service li h5 {<br/>  background-image: url(../images/sprite.png);<br/>  background-position: 0 -58px; / 使用PxCook测量的坐标 /<br/>}

14. 表单控件样式重置

/ 从搜索框项目：input样式重置 /<br/>.search input {<br/>  border: 0;<br/>  background-color: transparent;<br/>  outline: none; / 去掉焦点框 /<br/>}<br/><br/>.search input::placeholder {<br/>  font-size: 14px;<br/>  color: #999;<br/>}

<br/>