02-前端基础快速扫盲

飞一样的编程

擅长邻域：Java,MySQL,Linux,nginx,springboot,mongodb,微信小程序,vue

分类： Java springboot vue 专栏：【带小白做项目】springboot和vue前台开发标签：前端基础

2025-10-21 18:46:26 122浏览

前端基础快速扫盲

前端三剑客

1. html

负责搭建结构，是页面的骨架，是整体的架构，哪里是标题，哪里是段落，哪里放图片，哪里是链接，都由HTML来定义

类比：房子的结构。好比钢筋水泥和墙体，决定了房子的基本框架和房间布局

2. css

它负责网页的样式和美化，让页面美观起来，打扮的好看起来，网页布局。字体多大，按钮长什么样，这些“面子工程”都由CSS搞定。它让原本朴素的HTML结构变得好看、有设计感。

类比：墙刷什么颜色，家具怎么摆放

3. JavaScript

让页面动起来，而不是死页面，最核心的就是要跟后端进行交互，比如登录页面，用户输入的账号密码不能说随便乱填都登录成功吧。得去数据库查询判断输入的是否正确，正确的跳到新的页面，不正确的话在当前页面进行错误提示等等之类的.

JS让网页从一个静态的“展示品”变成一个可以和用户互动的“活物”。

类比：按一下电灯开关灯会亮（点击按钮弹出提示），拉开窗帘（展开/收起菜单），或者设置一个自动浇花系统（定时刷新数据）

常用的 html

块级元素-大块头

特点：

独占一行：它们会从新的一行开始，并且其后的元素也会另起一行。
可设置宽高：你可以为它们设置 width 和 height 属性。如果不设置宽度，默认会撑满其父容器的100%。
可以容纳其他元素：块级元素内部可以放其他的块级元素和行级元素。

可以这样理解：块级元素就像一块块积木或者一个个段落，它们是构建页面结构的主要骨架。

常用块级元素列表：

元素	描述
<div>	最通用的容器元素，用于组合其他HTML元素，方便布局和样式设置。
<h1>- <h6>	标题元素， <h1>最重要， <h6>最不重要。
<p>	段落元素，用于包裹一段文本。
<ul>	无序列表，通常与<li> 配合使用，显示为项目符号列表。
<ol>	有序列表，通常与<li> 配合使用，显示为带编号的列表。
<li>	列表项，用在<ul>或<ol>内部。
<header>	页面或区域的页眉，通常包含logo、导航、标题等。
<footer>	页面或区域的页脚，通常包含版权信息、联系方式等。
<nav>	导航区域，用于包裹主要的导航链接。
<main>	页面的主要内容区域，一个页面最好只有一个。
<section>	文档中的一个独立区域，比如章节、页眉、页脚等。
<article>	独立的内容区域，比如一篇博客、一则新闻、一个评论。
<form>	表单容器，用于收集用户输入。
<hr>	水平分割线，可以在内容上创建一条线。

行级元素-小零件

特点：

不独占一行：它们和其他行级元素会在同一行上从左到右并排显示，直到一行排满才换行。
不可设置宽高：设置 width 和 height 是无效的，其宽高由内容本身决定。
通常只容纳文本或其他行级元素：行级元素内部一般不放块级元素。

可以这样理解：行级元素就像文字中的一个个词语或标点符号，它们是文本流的一部分。

常用行级元素列表：

元素	描述
<span>	最通用的行内容器，用于在文本中标记一小部分内容，以便单独设置样式。
<a>	锚点/链接元素，用于创建超链接。
<strong>	表示重要性很强的文本，浏览器通常显示为粗体。
<em>	表示强调的文本，浏览器通常显示为斜体。
<img>	图片元素。（注意：<img> 是个特例，它是个“可替换元素”，虽然默认表现是行级，但可以设置宽高。）
<br>	换行标签，用于在文本中强制换行。
<input>	输入框，用于<form>中接收用户输入。
<label>	为<input>元素定义标注。
<button>	按钮。

一句话总结与对比

特性	块级元素	行级元素
排列方式	独占一行，垂直排列	在一行内水平排列
设置宽高	可以	不可以（内容决定）
默认宽度	100%	由内容决定
容纳元素	可含块级和行级	通常只含行级和文本

特殊存在：行内块级元素

通过CSS的 display: inline-block; 属性，可以把一个元素变成行内块级元素。它兼具两者的优点：

像行级元素一样，可以和其他元素在同一行显示。

像块级元素一样，可以设置 width、height 和垂直方向的 margin 和 padding。

<img> 和 <button> 元素就天生具有行内块级的特性。这在制作导航栏、按钮组等需要并排显示且要控制尺寸的场景中非常有用。

常用的 css

1. 布局属性

这是CSS的灵魂，决定了元素在页面上的位置和排列方式。

属性	常用值 & 作用
display	block：块 inline：行内元素 inline-block：行内块 flex：弹性布局 grid：网格布局 none：隐藏改变元素的显示类型，是布局的基础。其中flex和grid是现代布局的两大神器。
position	static(默认), relative(相对定位), absolute(绝对定位), fixed(固定定位) sticky(粘性定位) 用于精确定位元素，常与 top, right, bottom, left配合使用。
float	left, right, none 让元素浮动，实现文字环绕等效果。在现代布局中已较少使用，但了解其原理依然重要。
clear	left:规定一个元素的左侧不允许出现浮动元素，当一个元素设置了 clear: left;，它就会向下移动，直到其左边没有任何浮动元素为止。 right:规定一个元素的右侧不允许出现浮动元素 both：最常用的值。元素的左右两侧都不允许出现浮动元素。它会向下移动，直到两边都清空为止 none：默认值。允许两侧出现浮动元素。
z-index	数字（如 1, 100）设置元素的堆叠顺序，数值大的在上面。只在定位元素（position非static）上有效。

1.1display

（1）网格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .layout {
        display: grid;
        /* 定义3行：头部固定高，中间自适应，底部固定高 */
        grid-template-rows: 60px 1fr 60px;
        /* 定义2列：侧边栏固定宽，主内容自适应 */
        grid-template-columns: 200px 1fr;
        /* 使用 grid-template-areas 定义布局区域 */
        grid-template-areas:
                "header header"
                "sidebar main"
                "footer footer";
        /* 整个网格占满浏览器高度 */
        height: 100vh;
        gap: 10px;
    }

    /* 为了让区域更明显，加个背景色 */
    .header, .sidebar, .main, .footer {
        background-color: #f0f0f0;
        padding: 20px;
        text-align: center;
    }
    /* 为每个子元素指定其应占据的区域 */
    .header { grid-area: header; }
    .sidebar { grid-area: sidebar; }
    .main { grid-area: main; }
    .footer { grid-area: footer; }

</style>
<body>
<div class="layout">
    <div class="header">头部</div>
    <div class="sidebar">侧边栏</div>
    <div class="main">主内容</div>
    <div class="footer">底部</div>
</div>
</body>
</html>

（2）flex 弹性布局

<div style="display: flex; gap: 5px">
    <div style="width: 100px; " >
      <img src="@/assets/logo.png" style="width: 100px;height: 100px" alt="">
    </div>
    <div style="flex: 1">
      <div style="height: 50px;line-height: 50px; ">
        <span style="background-color: #ff9000; color: #ffffff">赏金200元</span> &nbsp;&nbsp;
        <span><strong>java项目xxxxx</strong></span>
      </div>
      <div style="height: 50px;line-height:50px;">
        <span>用户：小王</span>&nbsp;&nbsp;
        <span style="color: #95a5b6">时间：2020-01-01</span>&nbsp;&nbsp;
        <span>语言：java</span>&nbsp;&nbsp;
        <span style="color: green"><strong>已完成</strong></span>
      </div>

    </div>

  </div>

水平居中和垂直居中

display: flex; align-items: center;justify-content: center

其中align-items 是垂直居中

justify-content 是水平居中

（3）element 的 layout 布局练习

  <!--学习elementUI-->
  <el-row :gutter="20">
    <el-col :span="6">
      <div style="border: 1px solid #f5dada;text-align: center">
        <img src="@/assets/logo.png" alt="" style="height: 200px;width: 200px">
        <h2>基于springboot+vue的前台</h2>
        <p style="display: flex">
          <span style="flex: 1" >价格：400</span>
          <span style="flex:1">销量：100</span>

        </p>
        <p style="display: flex">
          <span style="flex: 1">作者：小王</span>
          <span style="flex: 1;"><a href="#">详情：——></a></span>

        </p>
      </div>
    </el-col>
    <el-col :span="6">
      <div style="border: 1px solid #f5dada;text-align: center">
        <img src="@/assets/logo.png" alt="" style="height: 200px;width: 200px">
        <h2>基于springboot+vue的前台</h2>
        <p style="display: flex">
          <span style="flex: 1" >价格：400</span>
          <span style="flex:1">销量：100</span>

        </p>
        <p style="display: flex">
          <span style="flex: 1">作者：小王</span>
          <span style="flex: 1;"><a href="#">详情：——></a></span>

        </p>
      </div>
    </el-col>
    <el-col :span="6">
      <div style="border: 1px solid #f5dada;text-align: center">
        <img src="@/assets/logo.png" alt="" style="height: 200px;width: 200px">
        <h2>基于springboot+vue的前台</h2>
        <p style="display: flex">
          <span style="flex: 1" >价格：400</span>
          <span style="flex:1">销量：100</span>

        </p>
        <p style="display: flex">
          <span style="flex: 1">作者：小王</span>
          <span style="flex: 1;"><a href="#">详情：——></a></span>

        </p>
      </div>
    </el-col>
    <el-col :span="6">
      <div style="border: 1px solid #f5dada;text-align: center">
        <img src="@/assets/logo.png" alt="" style="height: 200px;width: 200px">
        <h2>基于springboot+vue的前台</h2>
        <p style="display: flex">
          <span style="flex: 1" >价格：400</span>
          <span style="flex:1">销量：100</span>

        </p>
        <p style="display: flex">
          <span style="flex: 1">作者：小王</span>
          <span style="flex: 1;"><a href="#">详情：——></a></span>

        </p>
      </div>
    </el-col>

  </el-row>

1.2position

position 属性决定了元素在页面上的定位方式，它可以让元素脱离常规的文档流，并精确地控制它的位置。

在讲具体用法之前，必须先理解一个核心概念：定位上下文。

当你使用 top, right, bottom, left 这四个属性来偏移元素时，它们是相对于“谁”来进行定位的？这个“谁”就是定位上下文。

position 的 5 个具体用法

（1）position: static; (默认值)

作用：这是所有元素的默认定位方式。可以理解为“无定位”。
特点：

元素按照正常的文档流（从上到下，从左到右）排列。
top, right, bottom, left 和 z-index 属性无效。

用法：一般不需要特意设置，除非你想覆盖掉其他已定义的 position。

（2）position: relative; (相对定位)

作用：相对于它自己原来的位置进行偏移。
特点：

不脱离文档流：元素偏移后，它原来占有的空间依然会被保留，不会影响其他元素的布局。
它本身偏移了，但它的“影子”还留在原地。

常见用法：

微调元素位置：比如想让某个图标向下移动 2px，和文字对齐。
作为绝对定位元素的“参考父级”：这是它最重要的用途！一个 absolute 元素会寻找它最近的 relative 祖先元素作为定位参考。

（3）position: absolute; (绝对定位)

作用：相对于最近的、已定位的（非 static）祖先元素进行偏移。
特点：

完全脱离文档流：元素不再占据任何空间，其他元素会当它不存在一样填补它的位置。
如果找不到任何已定位的祖先元素，它就相对于 <body> 或 <html> 元素进行定位。

常见用法：

在一个容器内放置一个徽章或图标。
制作弹出框、下拉菜单。
任何需要“悬浮”在另一个元素之上的内容。

经典组合：父相子绝

/* 父容器 */
.parent {
  position: relative; /* 关键！给子元素一个定位参考 */
  width: 200px;
  height: 200px;
}

/* 子元素 */
.child {
  position: absolute; /* 相对于 .parent 定位 */
  top: 10px;
  right: 10px;
}

（4）position: fixed; (固定定位)

作用：相对于浏览器窗口进行偏移。
特点：

完全脱离文档流。
它的位置不随页面的滚动而改变，永远“钉”在屏幕的某个位置。

常见用法：

网页顶部的固定导航栏。
页面右下角的“返回顶部”按钮。
悬浮的客服聊天窗口。
全屏遮罩层。

（5）position: sticky; (粘性定位)

作用：可以看作是 relative 和 fixed 的结合体。
特点：

元素在滚动到特定阈值之前表现为 relative（正常文档流）。
当滚动到特定阈值之后，它就“粘住”了，表现为 fixed（相对于窗口固定）。
这个阈值由 top, right, bottom, left 属性决定，其中 top 和 bottom 最常用。

常见用法：

文章页面的侧边栏，滚动时保持可见。
长列表的表头，滚动时固定在顶部。
网页的二级导航，滚动到一定位置后固定在顶部。

（6）配合 z-index 使用

当多个定位元素（relative, absolute, fixed, sticky）重叠时，谁在上面谁在下面呢？这就用到了

z-index。

z-index 属性设置元素的堆叠顺序。
拥有更高 z-index 值的元素会处于较低值元素的上方。
z-index 只对定位元素（非 static）有效。

简单理解：z-index 就像楼层号，数值越大，楼层越高，越能被看到。

（7）总结

属性值	是否脱离文档流	定位参考对象	常见用途
static	否	正常文档流	默认状态，无需设置
relative	否	自身原位置	微调位置、作为绝对定位的父级
absolute	是	最近的已定位祖先	徽章、弹窗、悬浮内容
fixed	是	浏览器窗口	固定导航栏、返回顶部按钮
sticky	是（滚动后）	浏览器窗口（滚动后）	粘性表头、粘性侧边栏

总而言之，position 是实现精确、特殊布局效果的基石，和 Flexbox/Grid 各司其职，都是前端开发者必须熟练掌握的核心技能。

2. 盒模型属性

每个HTML元素都可以看作一个盒子，这些属性就是用来设置这个盒子的。

属性	作用
width / height	设置盒子的宽度和高度。
margin	外边距。控制盒子与外部元素的距离。可以简写：margin: 上右下左;
padding	内边距。控制盒子内容与边框的距离。可以简写：padding: 上右下左;
border	边框。设置盒子的边框样式、宽度和颜色。例如：border: 1px solid red; solid 是实线 dashed 是虚线
box-sizing	content-box(默认), border-box 这是一个非常重要的属性！border-box能让width 和height包含padding和border，让布局计算更直观。

3. 文本与字体属性

用于美化网页中的文字内容。

属性	常用值 & 作用
color	颜色值（如 red, #333, rgba(0,0,0,0.5)）设置文字颜色。
font-size	大小（如 16px, 1em, 1rem）设置字体大小。
font-family	字体名称（如 "Arial", "微软雅黑"）设置字体。可以设置多个备用字体。
font-weight	normal, bold, 数字（100-900）设置字体粗细。
text-align	left, center, right, justify 设置文本水平对齐方式。
line-height	数字或带单位的值（如 1.5, 24px）设置行高，影响多行文本的间距。
text-decoration	none：移除所有装饰线 underline：下划线 line-through:删除线设置文本装饰，常用于去掉链接的下划线（a { text-decoration: none; } ）。

4. 背景与视觉效果

让页面更好看，更有层次感。

属性	常用值 & 作用
background-color	颜色值设置背景颜色。
background-image	url('图片路径') 设置背景图片。
background-size	cover:会等比缩放以完全覆盖容器。 contain:缩放图片以使其在容器内完全显示具体值（如 100px 100px,也可以是百分比，50% 50%）控制背景图片的大小。
border-radius	长度或百分比（如 5px, 50%）设置圆角。50%可以做出圆形。
box-shadow	h-offset (水平偏移)：必需。正值向右移动，负值向左移动。 v-offset (垂直偏移)：必需。正值向下移动，负值向上移动。 blur (模糊半径)：可选。值越大，阴影越模糊、越柔和。0 表示阴影完全锐利。 spread (扩展半径)：可选。正值让阴影变大，负值让阴影变小。不设置时，默认为 0，阴影大小和元素一样。 color (颜色)：必需。可以是任何 CSS 颜色。强烈推荐使用 rgba() 颜色，这样可以设置透明度，让阴影更自然。 inset (内阴影)：可选。加上这个关键字，阴影会从外部投影变为内部凹陷。小提示：你可以只设置前两个必需的值，其他都有默认值。示例 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
opacity	0到1之间的数字设置整个元素（包括内容）的透明度。