前端CSS入门详解

CSS（层叠样式表）是前端的"美容师"------HTML负责搭建页面的"骨架"（比如标题、段落、图片），而CSS负责给骨架"化妆"（设置颜色、大小、布局）。作为前端入门必备技能，CSS不难，但小白容易陷入"记不住属性、用不对方法"的困境。

一、CSS基础：什么是CSS？怎么用？

CSS 全称 Cascading Style Sheets（层叠样式表），核心作用就是定义HTML标签的样式，让页面更美观、布局更合理。常用的3种引入方式，各有优缺点，可根据场景选择：

1.1 行内样式（直接写在标签里）

直接在HTML标签的style属性中设置样式，写法简单，适合快速修改单个标签的样式。

复制代码

<!-- 示例：给段落设置红色、16px字体 -->
<p style="color: red; font-size: 16px;">这是行内样式的段落</p>

缺点：

标签多、样式多的时候，代码会变得非常臃肿，不好维护；
可读性差，样式和HTML结构混在一起，找起来麻烦；
没有复用性，同一个样式需要给多个标签重复写，浪费时间。

1.2 内部样式（写在head标签里）

在HTML的标签中，用<style>标签定义样式，可统一管理当前页面的所有样式，建议一行只写一个样式，方便阅读和修改。

复制代码

<head>
  <style type="text/css">
    /* 注释：给所有p标签设置样式 */
    p {
      color: blue;
      font-size: 16px;
      line-height: 24px;
    }
    /* 注释：给h1标签设置样式 */
    h1 {
      color: #333;
      text-align: center;
    }
  </style>
</head>

优点：样式和HTML结构分离，可读性提升，同一页面内的样式可复用；
缺点：样式只能作用于当前页面，无法复用给其他页面。

1.3 外部样式（单独写在CSS文件里，推荐）

把所有CSS样式单独写在一个.css文件中，再通过<link>标签引入到HTML页面中，是实际开发中最常用的方式，可实现样式跨页面复用。

复制代码

<!-- HTML页面中引入CSS文件 -->
<head>
  <link rel="stylesheet" type="text/css" href="./style.css"/> 
  <!-- href属性：填写CSS文件的路径，./表示当前文件夹 -->
</head>

/* style.css 文件内容 */
p {
  color: green;
  font-size: 14px;
}
div {
  width: 200px;
  height: 100px;
  background-color: #f5f5f5;
}

优点：样式和HTML完全分离，可复用给多个页面，维护方便（改一个CSS文件，所有引入的页面都生效）；
缺点：需要多维护一个CSS文件，适合页面较多的场景。

小白推荐：新手练习可用内部样式，实际开发优先用外部样式，养成"结构（HTML）和样式（CSS）分离"的好习惯。

二、CSS选择器：精准选中要美化的标签

CSS选择器的核心作用：决定哪些标签会被动使用定义好的样式。就像"找对象"，根据不同条件找到对应的标签，给它设置样式。常用4种选择器，小白必掌握：

2.1 标签名选择器（全局匹配）

根据HTML标签的名称（如p、h1、div）选择标签，会选中页面中所有该类型的标签，适合统一设置某类标签的基础样式。

复制代码

/* 选中所有p标签，设置颜色为灰色 */
p {
  color: #666;
}
/* 选中所有div标签，设置边框 */
div {
  border: 1px solid #000;
}

2.2 ID选择器（唯一匹配）

通过标签的id 属性选择标签，id值在页面中必须唯一（一个id只能给一个标签用），适合给单个特殊标签设置样式。

复制代码

<!-- HTML标签：给div设置id="box" -->
<div id="box">这是ID选择器选中的盒子</div>

/* CSS样式：id选择器用#开头，后面跟id值 */
#box {
  width: 300px;
  height: 200px;
  background-color: pink;
}

2.3 类选择器（批量匹配，最常用）

通过标签的class属性选择标签，class值可以重复（多个标签可以用同一个class），适合给多个标签设置相同样式，复用性最强。

复制代码

<!-- HTML标签：多个标签用同一个class="title" -->
<h2 class="title">标题1</h2>
<h3 class="title">标题2</h3>
<p class="title">标题3</p>

/* CSS样式：类选择器用.开头，后面跟class值 */
.title {
  color: red;
  text-align: center;
  font-size: 18px;
}

2.4 组合选择器（多选择器共用样式）

当多个选择器需要设置相同样式时，用逗号（,）分隔选择器，可减少代码冗余，提高复用性。

复制代码

/* 选中p标签、#box、.title，共用同一个样式 */
p, #box, .title {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

小白避坑：id选择器和类选择器的区别------id唯一，适合单个标签；class可重复，适合多个标签复用，日常开发中类选择器用得最多。

三、CSS常用文本样式：快速美化文字

文本样式是CSS最基础、最常用的部分，重点记以下几个属性，小白可直接复制使用：

line-height：设置行高，让文字上下间距更舒适（建议设置为font-size的1.5~2倍）；
text-indent：设置首行缩进（比如text-indent: 2em;，2em表示缩进2个字符，适合段落）；
text-align：设置文本水平对齐方式（left左对齐、center居中、right右对齐）；
color：设置文字颜色（可写颜色名，如red；也可写十六进制，如#ff0000；或RGB，如rgb(255,0,0)）；
font-size：设置文字大小（单位常用px，如16px，小白建议设置14~18px，更易阅读）；
text-decoration：设置文本装饰（none去除下划线，适合超链接；underline添加下划线）。

注意点：

在HTML中，无论你输入多少个空格，页面上只会显示1个。如果需要多个空格，可使用空格占位符（1个表示1个空格）。

这是三个空格后的文字

四、CSS常用基础样式：高频实操

以下样式是开发中最常用到的，直接复制代码就能用，重点记！

4.1 居中相关

div盒子水平居中（最常用）：

csharp 复制代码

div {
  width: 200px; /* 必须设置宽度，否则居中无效 */
  margin-left: auto;
  margin-right: auto;
}

文本水平居中：

csharp 复制代码

p {
  text-align: center;
}

4.2 超链接美化

超链接默认有下划线、蓝色，可通过以下样式修改：

csharp 复制代码

/* 去除下划线，修改颜色 */
a {
  text-decoration: none;
  color: #333; /* 灰色，更柔和 */
}
/* 鼠标 hover 时变色（可选，提升体验） */
a:hover {
  color: red;
}

4.3 表格细线样式

默认表格边框较粗 、有缝隙，可通过以下样式实现细线表格：

csharp 复制代码

table {
  border: 1px solid black; /* 设置表格外边框 */
  border-collapse: collapse; /* 合并边框，去除缝隙（关键） */
}
td, th {
  border: 1px solid black; /* 设置单元格边框 */
  padding: 8px; /* 单元格内边距，更美观 */
}

4.4 列表去除修饰

ul、ol列表默认有圆点/数字修饰，可去除：

csharp 复制代码

ul {
  list-style: none; /* 去除圆点 */
  padding-left: 0; /* 去除默认左内边距，可选 */
}

五、核心重点：CSS盒子模型（必吃透）

页面中所有的HTML元素（标签），都可以看做是一个"盒子"------就像我们收到的快递盒，有盒子本身、里面的物品、物品和盒子之间的缓冲棉、盒子之间的距离。理解盒子模型，才能做好页面布局。

5.1 盒子模型的4个组成部分（从内到外）

content（内容区域） ：盒子的"核心"，存放元素的内容（文字、图片、子元素），由width（宽度）和height（高度）控制；
padding（内边距）：内容和边框之间的"缓冲棉"，控制内容到边框的距离，不会影响盒子外部布局；
border（边框）：盒子的"外壳"，包裹内容和内边距，会增加盒子的总宽度和总高度；
margin（外边距）：盒子和其他盒子之间的"距离"，控制盒子在页面中的位置，不影响盒子自身大小。

5.2 盒子模型核心属性

width：设置盒子内容区域的宽度（单位常用px）；
height：设置盒子内容区域的高度；
border：设置边框（格式：边框宽度边框样式边框颜色，如1px solid #000）；
padding：设置内边距（顺序：上→右→下→左，如padding: 10px 20px 10px 20px，上下10px，左右20px）；
margin：设置外边距（顺序和padding一致，如margin: 20px，四个方向都是20px）。

技巧：单独设置单个方向的属性

如果只需要设置某一个方向的边框、内边距、外边距，可在属性名后加上"-位置"：

csharp 复制代码

/* 单独设置上内边距 */
padding-top: 10px;
/* 单独设置左外边距 */
margin-left: 20px;
/* 单独设置下边框 */
border-bottom: 1px solid red;

六、进阶样式：边框、阴影、浮动

6.1 边框进阶样式

除了基础边框，这些样式也常用，可直接复用：

单独设置各方向边框 ：border-top（上边框）、border-bottom（下边框）、border-left（左边框）、border-right（右边框）；
合并边框 ：border-collapse: collapse;（常用于表格，去除边框缝隙）；

圆角矩形 ：border-radius: 10px;（数值越大，圆角越明显），也可单独设置单个角：

csharp 复制代码

     /* 单独设置左上角圆角 */
border-top-left-radius: 10px;
/* 单独设置右下角圆角 */
border-bottom-right-radius: 10px;

6.2 阴影样式（提升页面质感）

阴影分为盒子阴影 和文字阴影，简单设置就能让页面更有层次感：

盒子阴影（不占页面空间，不会影响其他元素）：

csharp 复制代码

 /* 格式：水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内部阴影（可选） */
box-shadow: 2px 2px 5px 0px #ccc; 
/* 解释：水平向右2px，垂直向下2px，模糊5px，尺寸0，灰色阴影 */
/* 内部阴影：加上inset，如 box-shadow: inset 2px 2px 5px #ccc; */

文字阴影（让文字更突出）：

csharp 复制代码

/* 格式：水平阴影 垂直阴影 模糊距离 阴影颜色 */
text-shadow: 1px 1px 2px #666;

6.3 浮动（改变元素排列方式）

默认情况下，块级元素（如div、p）会纵向排列（这就是"标准流"）；浮动可以让多个块级元素横向排列，是早期页面布局的核心技巧。

浮动核心属性：float

csharp 复制代码

/* 可选值 */
float: none; /* 默认值，不浮动，遵循标准流 */
float: left; /* 向左浮动 */
float: right; /* 向右浮动 */

浮动的2个关键特性

脱离标准流：浮动后的元素，不再保留原来的位置，会"浮"起来；
行内块特性：浮动后的块级元素，会变成"行内块"，可以和其他元素在同一行显示。

注意点：

浮动元素不会压住下面的标准流文字（浮动的初衷就是实现"文字环绕图片"效果）；
绝对定位或固定定位，会压住标准流的所有内容（和浮动区分开）；
浮动会导致"父元素高度塌陷"（父元素没有高度，无法包裹浮动的子元素），必须清除浮动！

4种清除浮动的方法（优先掌握前2种）

额外标签法（隔墙法，W3C推荐） ：在所有浮动元素后面，添加一个空的块级标签，设置clear: both;。

csharp 复制代码

<div class="father">
  <div class="son1" style="float: left;">浮动元素1</div>
  <div class="son2" style="float: right;">浮动元素2</div>
  <div style="clear: both;"><!-- 空标签清除浮动 -->
</div>

父级加overflow: hidden：给浮动元素的父元素设置overflow: hidden;，简单快捷，但缺点是无法显示父元素中"溢出"的内容。
csharp 复制代码
```
.father {
  overflow: hidden; /* 清除子元素浮动 */
}
```

伪元素法：给父元素添加伪元素，适合不想添加额外标签的场景（推荐）。

csharp 复制代码

.father::after {
  content: ""; /* 伪元素必须有content */
  display: block; /* 设为块级元素 */
  clear: both; /* 清除浮动 */
  height: 0; /* 隐藏伪元素 */
  visibility: hidden;
}

双伪元素清除浮动：更完善的清除方法，适合复杂布局。

csharp 复制代码

.father::before, .father::after {
  content: "";
  display: table; /* 触发BFC，清除浮动 */
}
.father::after {
  clear: both;
}

推荐：新手练习用"额外标签法"，实际开发用"伪元素法"，既简洁又不影响布局。

七、CSS定位：实现元素自由移动

定位的核心作用：让元素可以自由移动到页面的任意位置，常用于导航栏、弹窗、悬浮按钮等场景。定位由** "定位模式"+"边偏移" **组成。

7.1 定位模式（4种，小白必记）

定位模式决定元素在文档中的定位方式，通过position属性设置：

static：默认值，无定位，遵循标准流，无法使用边偏移；
relative：相对定位（最常用，给绝对定位当"父容器"）；
absolute：绝对定位（自由移动，依赖有定位的父元素）；
fixed：固定定位（固定在浏览器可视区域，不随页面滚动）。

7.2 边偏移（控制元素移动位置）

边偏移配合定位模式使用，控制元素的具体位置，常用4个属性：top（上）、left（左）、right（右）、bottom（下）（单位常用px）。

7.3 4种定位的详细说明（重点）

1. 相对定位（`relative`）

移动参考：以自己原来的位置为基准移动；
核心特点：不脱离标准流，原来的位置继续占有（不会影响其他元素）；
常用场景：给绝对定位的子元素当"父容器"（俗称"给绝对定位当爹"）。

2. 绝对定位（`absolute`）

移动参考：相对"有定位的祖先元素"（父、祖父等），如果没有，就以浏览器窗口为基准；
核心特点：脱离标准流，不再占有原来的位置；
常用场景：弹窗、下拉菜单、元素精准定位。

3. 固定定位（`fixed`）

移动参考：以浏览器可视窗口为基准（不管页面怎么滚动，元素位置不变）；
核心特点：脱离标准流，不再占有原来的位置；
常用场景：导航栏、回到顶部按钮、悬浮广告。

4. 叠放顺序（`z-index`）

当多个定位元素重叠时，用z-index控制叠放顺序，只有有定位的元素（relative/absolute/fixed）才有这个属性：

默认值：0（auto和0效果一致）；
数值越大，元素越靠上（如z-index: 100; 比z-index: 10; 的元素靠上）。

避坑Tips：

绝对定位的盒子，用margin: auto;无法实现居中，正确方法：

csharp 复制代码

.box {
  position: absolute;
  top: 50%; /* 距离顶部50% */
  left: 50%; /* 距离左侧50% */
  margin-top: -50px; /* 往上移动盒子高度的一半 */
  margin-left: -50px; /* 往左移动盒子宽度的一半 */
  width: 100px;
  height: 100px;
}

行内元素（如span、a）加定位后，可直接设置宽高；块级元素加定位后，若不给宽高，默认为内容大小；
浮动元素、固定定位、绝对定位，不会触发"外边距合并"（不用纠结，记住即可）。

八、常用技巧：元素显示隐藏、鼠标样式等

8.1 元素显示隐藏（3种方法，差异很大）

display：最常用，隐藏后不占有原来的位置（彻底隐藏）。

csharp 复制代码

display: none; /* 隐藏元素，不占位置 */
display: block; /* 显示为块级元素 */
display: inline; /* 显示为行内元素 */
display: inline-block; /* 显示为行内块元素 */

visibility：隐藏后仍占有原来的位置（占位隐藏）。

csharp 复制代码

visibility: hidden; /* 隐藏元素，占位置 */
visibility: visible; /* 显示元素（默认） */
visibility: inherit; /* 继承父元素的显示状态 */

overflow：控制元素内容溢出时的显示方式（常用于盒子内容过多的场景）。

csharp 复制代码

overflow: hidden; /* 隐藏溢出内容 */
overflow: visible; /* 显示溢出内容（默认） */
overflow: scroll; /* 显示滚动条，即使内容不溢出 */
overflow: auto; /* 内容溢出时显示滚动条，不溢出时不显示（推荐） */

8.2 鼠标样式（cursor）

设置鼠标 hover 元素时的样式，提升用户体验：

csharp 复制代码

cursor: default; /* 小白（默认） */
cursor: pointer; /* 小手（常用，适合按钮、超链接） */
cursor: move; /* 移动图标（适合可拖动元素） */
cursor: text; /* 文本图标（适合输入框） */
cursor: not-allowed; /* 禁止图标（适合不可点击元素） */

8.3 其他高频技巧

去掉表单聚焦轮廓：表单元素（input、textarea）聚焦时，默认有蓝色轮廓，可去除：
csharp 复制代码
```
input:focus {
  outline: 0; /* 或 outline: none; */
}
```

解决图片底部空白缝隙：图片默认是行内块元素，会和文字基线对齐，导致底部有空白。

csharp 复制代码

 /* 方法1：推荐，设置图片垂直对齐方式 */
img {
  vertical-align: middle; /* 或 top、bottom */
}
/* 方法2：将图片转为块级元素 */
img {
  display: block;
}

超出文字显示省略号：

单行文字（最常用）：

csharp 复制代码

  p {
	  white-space: nowrap; /* 不自动换行 */
	  overflow: hidden; /* 超出隐藏 */
	  text-overflow: ellipsis; /* 溢出用省略号表示 */
	}

多行文字（仅适用于webkit浏览器/移动端）：

csharp 复制代码

p {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

九、布局技巧：margin负值运用（进阶）

margin负值常用于解决"边框重合"问题，比如多个盒子并排时，边框重叠导致变粗，用margin负值可完美解决：

示例：3个并排的盒子，解决边框重合

csharp 复制代码

.box {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  margin-left: -1px; /* 每个盒子往左移动1px，压住相邻盒子的边框 */
}
/* 鼠标 hover 时，提升盒子层级，避免边框被压住 */
.box:hover {
  position: relative; /* 无定位时，加相对定位保留位置 */
  z-index: 1; /* 提升层级 */
  border-color: red; /* 可选，hover时变红色边框 */
}

十、必记：CSS属性书写顺序（规范开发）

书写CSS属性时，按以下顺序排列，可提高代码可读性和维护性，实际开发中建议遵循：

布局定位属性（position、float、top、left、z-index等）；
自身属性（width、height、border、padding、margin等）；
文本属性（color、font-size、line-height、text-align等）；
其他属性（background、box-shadow、cursor等）。

csharp 复制代码

/* 示例：规范书写顺序 */
.box {
  /* 1. 布局定位 */
  position: relative;
  top: 20px;
  left: 20px;
  /* 2. 自身属性 */
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  margin: 10px;
  padding: 10px;
  /* 3. 文本属性 */
  color: #333;
  font-size: 16px;
  text-align: center;
  /* 4. 其他属性 */
  background-color: #f5f5f5;
  box-shadow: 2px 2px 5px #ccc;
}

十一、总结：入门CSS的核心要点

CSS的核心是"选中元素→设置样式"，入门不用死记硬背所有属性，重点掌握以下几点，就能应对大部分基础开发场景：

3种引入方式：优先用外部样式，结构和样式分离；
4种选择器：类选择器最常用，id选择器唯一，标签选择器全局，组合选择器复用；
核心盒子模型：content、padding、border、margin，理解它们的关系，才能做好布局；
浮动和定位：浮动用于横向排列（记得清除浮动），定位用于自由移动（重点记relative和absolute）；
常用样式：文本、边框、阴影、显示隐藏，直接复制复用，多练就能记住。

最后提醒：CSS入门简单，但想熟练运用，必须多写、多练------找一个简单的页面（比如个人简介页），用上面的知识点亲手写一遍，遇到问题多调试，慢慢就能掌握其中的技巧。坚持练习，你也能轻松用CSS打造美观的页面！

前端CSS入门详解

一、CSS基础：什么是CSS？怎么用？

1.1 行内样式（直接写在标签里）

1.2 内部样式（写在head标签里）

1.3 外部样式（单独写在CSS文件里，推荐）

二、CSS选择器：精准选中要美化的标签

2.1 标签名选择器（全局匹配）

2.2 ID选择器（唯一匹配）

2.3 类选择器（批量匹配，最常用）

2.4 组合选择器（多选择器共用样式）

三、CSS常用文本样式：快速美化文字

四、CSS常用基础样式：高频实操

4.1 居中相关

4.2 超链接美化

4.3 表格细线样式

4.4 列表去除修饰

五、核心重点：CSS盒子模型（必吃透）

5.1 盒子模型的4个组成部分（从内到外）

5.2 盒子模型核心属性

六、进阶样式：边框、阴影、浮动

6.1 边框进阶样式

6.2 阴影样式（提升页面质感）

6.3 浮动（改变元素排列方式）

4种清除浮动的方法（优先掌握前2种）

七、CSS定位：实现元素自由移动

7.1 定位模式（4种，小白必记）

7.2 边偏移（控制元素移动位置）

7.3 4种定位的详细说明（重点）

1. 相对定位（relative）

2. 绝对定位（absolute）

3. 固定定位（fixed）

4. 叠放顺序（z-index）

八、常用技巧：元素显示隐藏、鼠标样式等

8.1 元素显示隐藏（3种方法，差异很大）

8.2 鼠标样式（cursor）

8.3 其他高频技巧

九、布局技巧：margin负值运用（进阶）

十、必记：CSS属性书写顺序（规范开发）

十一、总结：入门CSS的核心要点

1. 相对定位（`relative`）

2. 绝对定位（`absolute`）

3. 固定定位（`fixed`）

4. 叠放顺序（`z-index`）