專欄：JavaEE 進階躍遷營
個人主頁：手握風云
目錄
一、常用CSS
1.1. border
1.2. width/height
1.3. padding：內邊距
1.4. margin：外邊距
二、初始JavaScript
2.1. JavaScript是什么
2.2. 發展歷史
2.3.?JavaScript 和 HTML 和 CSS 之間的關系?
一、常用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 是 “靈魂”，賦予頁面交互能力，比如點擊按鈕提交表單、動態更新內容，讓靜態頁面 “動” 起來。
????????三者獨立又配合，既便于后期維護，也是前端開發的核心底層邏輯。
