一、常用CSS

1.1. border

border是CSS控制元素边框的复合属性，用于定义元素内容区外围的线条，包含三个核心要素：宽度、样式、颜色。不分前后顺序，浏览器会根据设置的值⾃动判断。

border: [宽度] [样式] [颜色]; /* 顺序无关，至少包含样式 */
.text1 { border: 1px solid purple; } /* 1px宽、实线、紫色边框 */

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>border属性</title><style>#one {border-color: black;border-width: 10px;border-style: solid;border-top-width: 10px;border-right-width: 5px;border-bottom-width: 20px;border-left-width: 15px;}</style>
</head>
<body><div id="one">我是111</div><div>我是222</div><div>我是333</div><ul><li>aaa</li><li>bbb</li><li>ccc</li></ul><ol><li>eee</li><li>fff</li><li>fff</li></ol>
</body>
</html>

属性名	说明	取值示例
border-width	边框宽度（默认 `medium`）	`1px`、`thick`、`2em`
border-style	边框样式（必填，默认 `none`）	`solid`（实线）、`dashed`（虚线）、`double`（双线）
border-color	边框颜色（默认继承文本色）	`red`、`#00ff00`、`rgb(255,0,0)`

1.2. width/height

width和height是 CSS 中控制元素内容区尺寸的属性。width设置宽度，height设置高度，只有块级元素（如div、p、h1）可以设计宽度和高度。

.selector {width: 300px; /* 固定宽度（像素） */height: 50%; /* 相对于父容器的百分比 */
}

值类型	说明
像素（`px`）	默认值，宽度占满父容器（块级元素），高度自适应内容
auto	绝对单位，固定尺寸
百分比（`%`）	相对于父容器的百分比
max-width/min-width	最大 / 最小高度，控制元素范围
max-height/min-height	最大 / 最小高度，控制元素范围

（行内元素如span、a）：需通过display: block或inline-block转换为块级 / 行内块级元素后生效。

1.3. padding：内边距

padding是 CSS 中控制元素内容与边框之间距离的属性，类比 “文字与文本框内壁的留白”。作用是增加元素内部空间，提升内容可读性（如按钮文字与边框的间距）。

单位支持：

绝对单位（px、em）：文档示例 padding：20px：；
百分比（%）：相对于父容器宽度（如padding: 5%，移动端适配常用）；
禁止负值：所有摘要均强调 padding 不能为负数。

padding是复合属性，支持 1-4 个值，按顺时针方向（上→右→下→左）应用。

padding会增加元素实际占据空间（内容区 + padding + border），需配合box-sizing:border-box避免意外布局偏移。

1.4. margin：外边距

margin（外边距）是 CSS 中控制元素与其他元素之间距离的核心属性，属于盒模型的最外层（位于border外侧），核心作用是调整元素在页面中的布局间距，避免元素拥挤重叠。其与padding（内边距，控制内容与边框距离）的核心区别在于：margin 影响元素外部空间，margin 的值不会改变元素自身尺寸，仅改变元素与周围元素的位置关系。

是复合属性，支持通过 1-4 个值灵活控制四个方向（上、右、下、左）的外边距，取值遵循顺时针规则（上→右→下→左），语法格式与padding一致，但支持负值。

margin不占用元素自身的 “实际尺寸”（元素尺寸 = content + padding + border），仅影响元素在页面中的 “占位空间”。

方向细分属性：margin-top、margin-right、margin-bottom、margin-left。

二、初始JavaScript

2.1. JavaScript是什么

JavaScript (简称 JS)，是一个脚本语言，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

2.2. 发展历史

1995 年，网景工程师布兰登艾奇在 10 天内为 Navigator 浏览器打造了初代脚本语言 Mocha（后更名 JavaScript），旨在填补客户端交互空白。借势 Java 热潮，它随 Netscape 2.0 进入大众视野，以表单验证和 DOM 操作革新网页体验。

1997 年 ECMAScript 标准（ECMA-262）诞生，终结浏览器方言混战。1999 年 ES3 引入正则、异常处理，奠定语言严肃性；2005 年 AJAX（XMLHttpRequest）催生 Gmail 等 Web 2.0 应用，jQuery 则以统一 API 破解跨浏览器困局，推动前端工程化萌芽。

2009 年 Node.js 携 V8 引擎让 JS 突破浏览器，开启 “全栈” 时代；2015 年 ES6（ES2015）引入类、箭头函数等现代特性，配合 TC39 年度更新机制，语言持续向 “万能” 进化。从表单验证到驱动万亿级应用，30 年淬炼，JS 终成 Web 生态的底层血脉。

2.3. JavaScript 和 HTML 和 CSS 之间的关系

前端三剑客 HTML、CSS、JavaScript 分工明确且协同紧密，是网页开发的核心基础。

HTML 是 “骨架”，用标签（如<h1>、<form>）搭建页面结构，定义内容的呈现逻辑，比如哪里是标题、哪里是表单；CSS 是 “皮肤”，通过选择器和样式属性（如color、width）美化外观，控制布局、颜色、间距，让结构更美观，实现样式与结构分离；JavaScript 是 “灵魂”，赋予页面交互能力，比如点击按钮提交表单、动态更新内容，让静态页面 “动” 起来。

三者独立又配合，既便于后期维护，也是前端开发的核心底层逻辑。