JavaEE 进阶第四期:开启前端入门之旅(四)

专栏:JavaEE 进阶跃迁营

个人主页:手握风云

目录

一、常用CSS

[1.1. border](#1.1. border)

[1.2. width/height](#1.2. width/height)

[1.3. padding:内边距](#1.3. padding:内边距)

[1.4. margin:外边距](#1.4. margin:外边距)

二、初始JavaScript

[2.1. JavaScript是什么](#2.1. JavaScript是什么)

[2.2. 发展历史](#2.2. 发展历史)

[2.3. JavaScript 和 HTML 和 CSS 之间的关系​](#2.3. JavaScript 和 HTML 和 CSS 之间的关系)


一、常用CSS

1.1. border

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

css 复制代码
border: [宽度] [样式] [颜色]; /* 顺序无关,至少包含样式 */
.text1 { border: 1px solid purple; } /* 1px宽、实线、紫色边框 */
html 复制代码
<!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) | 1pxthick2em |
| border-style | 边框样式(必填,默认 none) | solid(实线)、dashed(虚线)、double(双线) |
| border-color | 边框颜色(默认继承文本色) | red#00ff00rgb(255,0,0) |

1.2. width/height

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

css 复制代码
.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 是 "皮肤",通过选择器和样式属性(如colorwidth)美化外观,控制布局、颜色、间距,让结构更美观,实现样式与结构分离;JavaScript 是 "灵魂",赋予页面交互能力,比如点击按钮提交表单、动态更新内容,让静态页面 "动" 起来。

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

相关推荐
上单带刀不带妹3 分钟前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
怕冷的火焰(~杰)14 分钟前
yarn安装electron和better-sqlite3失败问题(rebuild:better-sqlite3)
前端·javascript·electron
IT_陈寒42 分钟前
JavaScript性能优化:7个90%开发者不知道的V8引擎黑科技
前端·人工智能·后端
摸鱼的春哥42 分钟前
“全栈模式”必然导致“质量雪崩”!和个人水平关系不大
前端·javascript·后端
Eme丶1 小时前
Nginx部署vue以及转发配置记录
前端·vue.js·nginx
大气层煮月亮1 小时前
Oracle EBS ERP之报表开发—嵌入Web中的报表预览、报表打印
前端·数据库·oracle
excel1 小时前
Vue 中 v-show 与 v-if 的全面解析
前端
回忆哆啦没有A梦4 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__5 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生5 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js