页面色彩搭配的基本原理
- 色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。
- 色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。
- 色彩的合适性。就是说色彩和你表达的内容气氛相合适。如用粉色体现女性站点的柔性。
- 色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事，选择色彩和你想要的网页的内涵相关联。
建议：
1.用一种色彩。调整透明度或饱和度，产生新的色彩。这样的页面看起来色彩统一，有层次感。
2.用两种色彩。先选定一种色彩，然后选择它的对比色，整个页面色彩丰富但不花哨。
3.用一个色系。简单的说就是用一个感觉的色彩。
4.用黑色和一种彩色。
（基本方案）原则：同类色搭配；邻近色搭配；互补色搭配；对比色搭配
什么是css 主要作用是什么
CSS（层叠样式表）是一种用于描述网页外观和格式的样式表语言，主要作用是控制网页元素的布局、颜色、字体等视觉表现。
弹性布局 弹性盒子 怎么实现水平居中和垂直居中 怎么对齐 代码
在 CSS 中，弹性布局（Flexbox） 是一种现代的布局模式，特别适合在容器中对齐和分配空间。它通过设置一个容器为 display: flex 来启用。
<div class="container"><div class="box">内容</div></div>.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 容器高度占满整个视口，便于看到效果 */}响应式布局怎么实现 自适应布局
使用 媒体查询（Media Queries） 、弹性盒子（Flexbox） 、网格布局（Grid） 和 相对单位 可以实现响应式/自适应布局。
响应式布局 vs 自适应布局
| 类型 | 特点 |
|---|---|
| 响应式布局 | 一个网站自动适应所有屏幕尺寸，使用灵活的布局和媒体查询 |
| 自适应布局 | 针对几种特定分辨率设计多个布局，根据设备加载不同的样式（较少使用） |
什么是文档对象模型和浏览器对象模型
- DOM（文档对象模型） 是表示和操作网页内容（HTML/XML 文档）的 API。
- BOM（浏览器对象模型） 是用于操作浏览器窗口、历史、导航等功能的对象集合。
DOM（Document Object Model）文档对象模型
含义：
DOM 是将 HTML 或 XML 文档解析成一棵树形结构（称为“文档树”），每个节点代表文档中的一个部分（如元素、属性、文本等），允许 JavaScript 对其进行访问和操作。
主要作用：
- 获取页面元素（如
document.getElementById()） - 修改页面内容、样式或结构
- 响应用户交互（如点击、输入）
BOM（Browser Object Model）浏览器对象模型
含义：
BOM 是浏览器提供的用于与浏览器窗口交互的一组对象，它不是标准化的规范（不像 DOM 有统一标准），但大多数浏览器都支持常见的 BOM 对象。
主要作用：
- 控制浏览器窗口（打开、关闭、调整大小）
- 获取浏览器信息（如版本、屏幕尺寸）
- 实现页面跳转、历史记录管理等
什么是盒子模型
盒子模型（Box Model） 是 CSS 中用于描述网页元素在页面中所占空间的模型，它由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
每个 HTML 元素都可以看作是一个矩形的“盒子”，这个盒子由以下四部分组成（从内到外）：
| 部分 | 描述 |
|---|---|
| Content | 内容区域，即元素的实际内容（文字、图片等） |
| Padding | 内边距，内容与边框之间的空间 |
| Border | 边框，围绕内容和内边距的一条线 |
| Margin | 外边距，盒子与其他元素之间的空白区域 |
div+css布局的优势
使用 div + CSS 布局网页，可以实现结构与样式分离，提高页面的可维护性、可读性和跨设备兼容性。
| 优势 | 说明 |
|---|---|
| 1. 结构清晰 | 使用 |
| 2. 易于维护和修改 | 所有样式集中管理在 CSS 文件中，修改一个地方即可影响整个网站风格，节省开发时间。 |
| 3. 加快页面加载速度 | 减少冗余 HTML 代码（如嵌套表格），页面体积更小，加载更快。 |
| 4. 提高 SEO 优化效果 | 没有复杂的表格嵌套，搜索引擎更容易抓取页面内容，提升排名。 |
| 5. 更好的跨浏览器兼容性 | 合理使用 CSS 可以适配主流浏览器，同时支持响应式设计，适应不同设备。 |
| 6. 支持响应式布局 | 配合媒体查询（Media Queries）、Flexbox 或 Grid，可以轻松实现自适应网页设计。 |
| 7. 页面表现统一 | 多个页面共享同一个 CSS 文件，确保整个网站风格一致。 |
js编写网页动态效果的一般步骤
使用 JavaScript 编写网页动态效果的一般步骤是：获取元素 → 监听事件 → 操作元素或样式 → 实现交互效果。
| 步骤 | 描述 | 示例 |
|---|---|---|
| 1. 获取页面元素 | 使用 |
|
| 2. 绑定事件监听器 | 为元素绑定用户交互事件，如点击、鼠标悬停、输入等 |
|
| 3. 判断逻辑/条件 | 在事件触发后，执行一些判断或数据处理逻辑 | 如判断表单是否填写正确、用户是否登录等 |
| 4. 操作 DOM 或 CSS 样式 | 修改元素内容、属性、样式或类名，实现视觉变化 |
|
| 5. 触发动态行为或动画 | 结合定时器、CSS 动画、过渡效果等，实现更丰富的动态效果 | 如淡入淡出、滑动菜单、轮播图等 |
长度单位 rem 等好处 换算
rem 是相对于 HTML 根元素字体大小的相对单位，适合做响应式设计；而 em 是相对于当前元素字体大小的单位；px 是绝对单位，常用于固定尺寸。
常见 CSS 长度单位对比
| 单位 | 含义 | 特点 | 示例 |
|---|---|---|---|
|
| 像素（Pixel） | 绝对单位，不会随其他设置缩放 |
|
|
| 相对于当前元素的字体大小 | 如果当前未设置字体大小，则继承父级 |
|
|
| 相对于根元素（html）的字体大小 | 所有 rem 都基于 html 的 font-size |
|
|
| 视口宽度的 1% | 100vw = 整个视口宽度 |
|
|
| 视口高度的 1% | 100vh = 整个视口高度 |
|
|
| 百分比，相对于父容器 | 依赖父元素大小 |
|
换算关系（以默认设置为例）
通常浏览器默认的 <html> 字体大小是 16px，所以：
| 单位 | 默认值 | 换算公式 |
|---|---|---|
|
| = 16px | 可通过修改 |
|
| = 当前元素的 font-size | 若当前字体为 20px，则 |
|
| = 1% 的视口宽度 | 若屏幕宽为 1000px，则 |
|
| = 1% 的视口高度 | 若屏幕高为 800px，则 |
使用 rem 的好处（为什么推荐使用？）
-
响应式设计更方便
修改<html>的font-size，所有使用rem的元素都会按比例缩放，非常适合移动端适配。 -
可维护性强
所有尺寸都基于根元素，便于统一管理。 -
无障碍友好
用户如果在浏览器中设置了更大的默认字体大小，使用rem的页面也能自动适应。
块级元素行内元素 行内块级元素之间的区别
块级元素（block）独占一行，行内元素（inline）与其他内容共享一行，而行内块级元素（inline-block）像行内元素一样排列，但可以设置宽高和内外边距。
响应式布局的基本实现过程
响应式布局的基本实现过程是：设置视口 → 使用媒体查询 → 采用弹性布局（Flexbox/Grid）→ 使用相对单位 → 图片等元素自适应。
| 步骤 | 描述 |
|---|---|
| 1. 设置视口（viewport） | 在 HTML 中添加 |
| 2. 使用媒体查询（Media Queries） | 根据不同屏幕尺寸应用不同的 CSS 样式 |
| 3. 使用弹性布局（Flexbox / Grid） | 实现灵活的、自动调整的页面结构 |
| 4. 使用相对单位（rem, em, %, vw/vh） | 替代固定像素值，使布局更具适应性 |
| 5. 图片和媒体自适应 | 设置图片最大宽度为 100%，避免超出容器 |
