CSS 零基础完整学习笔记｜选择器｜盒子模型｜布局

📖前言

HTML 搭建网页骨架，CSS (Cascading Stylesheet 层叠 / 级联样式表) 负责给网页添加样式美化：设置颜色、字体、大小、背景、位置排版。

简单回顾前端三剑客分工：

🧱 HTML：网页结构，有什么内容

🎨 CSS：网页外观，长什么样子

⚡ JavaScript：网页交互，做什么动作

CSS 不能独立运行，必须依附 HTML 页面执行。

一、CSS 三种编写 & 引入方式

CSS 一共有三种书写形式：内联样式（元素内嵌）、内部样式表、外部外联样式表。

1.1 内联样式 / 元素内嵌式

直接写在 HTML 标签style属性里面，只对当前这一个标签生效。

复制代码

<h1 style="background-color:yellow;color:red;">三字经</h1>

✅优点：写起来直接，针对单个元素快速调试 ❌缺点：大量页面会出现大量重复样式代码，代码冗余，不利于维护，开发中尽量少用。

1.2 内部样式表

写在当前页面<head>标签的<style>标签内，仅对当前这一个 HTML 页面生效 。语法：选择器 {属性名:属性值; 属性名:属性值;}

复制代码

<head>
    <style type="text/css">
        /* CSS注释，只在css内生效，不会在页面显示 */
        h1 {
            background-color: yellow;
            color: red;
        }
    </style>
</head>
<body>
    <h1>三字经</h1>
    <h1>百家姓</h1>
</body>

💡CSS 注释语法：/* 注释内容 */，不能使用 HTML 的写 CSS 里面注释。

✅优点：样式和标签分离，消除单页面内重复代码 ❌缺点：多个网页无法共用这套样式，适合做单页面简单 Demo。

1.3 外联外部样式表【企业开发首选】

把 CSS 全部代码写在独立的.css后缀文件，HTML 页面使用<link>标签引入。

新建style.css文件

/* style.css 文件内容 */
h1 {
background-color: yellow;
color: red;
}
html 页面引入外部 css

✅优点：

多个 HTML 页面可以共用同一份 css 文件；
结构与样式完全解耦，方便后期维护；
浏览器可以缓存 css 文件，网页打开速度更快。

💡企业正式项目全部使用外联样式表。

✨样式优先级小知识点

同一个标签被多处设置样式：越靠近标签本身，优先级越高 。优先级简单排序：内联样式 > 内部样式表 / 外部样式表；

内部和外部样式，看代码加载顺序，后面加载的样式会覆盖前面。

二、CSS 选择器【核心重点】

🎯选择器作用：选中页面中一个或者一批 HTML 标签，给选中的元素设置 CSS 样式。

2.1 ID 选择器

语法：#id值

HTML 标签设置id="xxx"；
id 属性要求整个 HTML 文档全局唯一，同一个 id 只能出现一次！

明月几时有，把酒问青天

不知天上宫阙，今夕是何年

⚠️注意：id 适合选唯一一个元素，不要大量重复使用 id 做样式。

2.2 标签选择器（元素选择器）

语法：标签名 {} 直接写 HTML 标签名字，页面所有该标签全部被选中。

复制代码

font {
    font-size:24px;
    color:red;
}

<body>
    <font>明月几时有，把酒问青天</font>
    <font>不知天上宫阙，今夕是何年</font>
</body>

2.3 class 类选择器【开发最常用】

语法：.class名字 {}

标签设置class="类名"；
同一个 class 可以给多个标签复用；一个标签可以写多个 class。

.sty1 {
background-color: blue;
}
明月几时有，把酒问青天
不知天上宫阙，今夕是何年

不知天上宫阙，今夕是何年

💡开发经验：写样式优先使用 class 选择器，复用性强，不依赖 id。

2.4 组合选择器（并集选择器）

逗号,隔开多个选择器，同时给多组元素设置相同样式。语法：选择器1,选择器2,选择器3 {}

复制代码

font,p,h1 {
    background-color: red;
}

2.5 后代选择器（包含选择器）

空格隔开：父选择器后代选择器 {}

选中父元素下面所有后代（儿子、孙子、重孙子全部匹配）。

复制代码

p font {
    background-color:red;
}

<body>
    <font>不会被选中</font>
    <p>
        <font>被选中（儿子）</font>
        <b>
            <font>被选中（孙子）</font>
        </b>
    </p>
</body>

📌拓展区分：子代选择器 p>font，只选直接子一级，不包含孙子；日常 demo 后代选择器用的更多。

2.6 伪类选择器（常用 a 标签伪类）

伪类用于描述元素特殊状态 ，最常用超链接 a 标签。语法：选择器:伪类名{}

复制代码

/* 链接默认状态 */
a:link { color:black; }
/* 访问过的链接 */
a:visited { color:gray; }
/* 鼠标悬浮在上面 */
a:hover { color:red; }
/* 鼠标点击按住瞬间 */
a:active { color:blue; }

💡记忆小技巧：LVHA顺序，link → visited → hover → active，顺序写反伪类会失效。

三、CSS 常用基础样式属性

3.1 背景 background 系列

表格

属性	说明	示例
`background-color`	设置背景颜色	`background-color:#ff0000;`
`background-image`	设置背景图片	`background-image:url("img/bg.jpg");`
`background-repeat`	图片平铺	`no-repeat`不平铺；`repeat‑x`横向平铺；`repeat‑y`纵向平铺
`background‑size`	背景图片大小	`background‑size:100% auto;`
`background‑attachment`	背景图片是否滚动	`scroll`跟随滚动 (默认)；`fixed`固定不动

简写写法（推荐）

复制代码

background: #fff url("bg.jpg") no-repeat fixed;

3.2 文本 text 系列

表格

属性	说明	取值
`text‑align`	文本水平对齐	`left`左对齐 /`center`居中 /`right`右对齐
`text‑decoration`	文本装饰线	`none`无；`underline`下划线；`overline`上划线；`line‑through`删除线

示例

复制代码

p {
    text-align:center;
    text-decoration: none;
}

3.3 字体 font 系列

表格

属性	说明	示例
`font‑size`	字体大小	`font‑size:16px;`
`font‑family`	字体	`font‑family:"微软雅黑";`
`font‑weight`	字体粗细	`bold`加粗 /`normal`正常

简写

复制代码

font: bold 18px "微软雅黑";

3.4 列表 list 样式

清除 ul/ol 列表默认小圆点 / 序号，开发导航栏高频使用！

复制代码

ul{
    list-style-type:none; /* 取消列表标记 */
    /* list‑style‑type:circle;空心圆 square实心方块 */
}

四、HTML 元素分类：块级元素 & 行内元素

4.1 行内元素（内联元素 inline）

特点：多个元素排在同一行显示 ；默认不能直接设置宽高；大小被内容撑开。
常见标签：<a>、<font>、<span>、<input>

4.2 块级元素 block

特点：独占一行；可以设置 width、height 宽高；
常见标签：<div>、<h1~h6>、<p>、<ul>、<li>、<table>

4.3 两个非常重要布局标签 div 与 span

div ------ 块级元素

网页分块容器，把页面划分一块一块区域；div 高度默认由内部内容撑开。网页布局的基石。

复制代码

<div>这是一大块内容</div>

span ------ 行内元素

本身没有任何默认样式；用于选中一小段行内文字，单独设置样式。

复制代码

<p>今天<span style="color:red">天气晴朗</span>适合学习</p>

💡小技巧：CSS 可以修改元素显示模式

复制代码

display:block; /*转为块级 */
display:inline; /*转为行内 */
display:inline‑block; /*行内块：同一行，同时支持设置宽高，导航常用 */

五、🔥盒子模型（CSS 核心，面试重点）

HTML 中几乎所有元素都可以理解成一个盒子，盒子由四部分组成：内容 content、内边距 padding、边框 border、外边距 margin。

表格

盒子组成	中文名称	作用
content	内容	盒子存放文字图片的主体区域，width/height 设置内容大小
padding	内边距（内补白）	内容与边框之间距离；设置 padding 会把盒子整体撑大
border	边框	盒子的边线
margin	外边距	盒子与外面其他盒子之间的距离，控制盒子和别的元素间距

1）外边距 margin

控制盒子外部和别的元素之间的距离

复制代码

margin‑top:10px;
margin‑right:10px;
margin‑bottom:10px;
margin‑left:10px;
/*简写：上 右 下 左，顺时针 */
margin:10px 20px 10px 20px;
/*上下10px，左右20px */
margin:10px 20px;
/*四边全部15px */
margin:15px;

2）内边距 padding（内补白）

内容到边框之间空白；设置 padding，盒子整体实际尺寸会变大。

复制代码

padding‑top:5px;
padding‑right:5px;
padding‑bottom:5px;
padding‑left:5px;
/*简写 */
padding:5px 8px;

3）边框 border

复制代码

/* 宽度 样式 颜色 */
border:1px solid #000;

⚠️易错坑：width 设置的只是内容区域宽度 ，padding+border 会额外增加盒子总尺寸。想让宽高包含边框内边距，可以开启：box‑sizing:border‑box;

六、布局相关：定位 position

position 定位，控制盒子在页面摆放位置。

6.1 absolute 绝对定位

复制代码

position:absolute;
top:100px;
left:200px;

✨特点：脱离文档流；原来占的位置会空出来，后面元素会挤上来；
找参照物：向上找设置过非 static 定位的父容器；如果没有，以浏览器页面左上角作为原点。

6.2 fixed 固定定位

复制代码

position:fixed;
top:0px;
right:0px;

✨特点：脱离文档流；参照物永远是浏览器可视窗口；
页面滚动，盒子位置纹丝不动；常用于网页悬浮回到顶部按钮、侧边悬浮栏。

6.3 relative 相对定位

复制代码

position:relative;
top:20px;
left:10px;

✨特点：不脱离文档流！原始位置会保留，不会被别的元素抢占；
参照物是自己本身原来的位置；

开发常用：父元素设置relative，给内部 absolute 子盒子做定位参照物。
💡默认值：position:static静态定位，就是普通文档流。

七、流式布局 float 浮动

复制代码

float:left; /*向左浮动 */
float:right; /*向右浮动 */

浮动会让块级元素横向并排排列，实现网页多栏布局、导航栏；
设置 float 之后元素会脱离普通文档流；

📌坑：父盒子全部子元素浮动，父盒子高度会塌陷！需要清除浮动。简单清除浮动写法：

复制代码

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

给父 div 加上class="clearfix"即可解决高度塌陷。

八、知识点复盘总结

CSS 全称层叠样式表，负责美化 HTML；三种引入：内联、内部 style、外联 link（项目首选）。
五大基础选择器：id (#)、标签、class (.)、组合逗号、后代空格；class 是开发最常用。伪类掌握 a 链接 LVHA 四状态。
常用属性：背景 background、文本 text、字体 font、list 列表样式。
元素分为行内元素、块级元素；div 块级做页面分块，span 行内选中局部文字。
盒子模型是 CSS 重中之重：content 内容、padding 内边距、border 边框、margin 外边距；注意 padding 撑大盒子尺寸。
position 定位：relative 相对（不脱流）、absolute 绝对、fixed 固定定位。
float 浮动实现横向流式布局，注意浮动带来的高度塌陷，需要清除浮动。