01Web前端入门笔记

黑马前端H5+CSS基础笔记整理（自用）

一、HTML初识

（一）基础认知

1.基础概念铺垫

（1）认识网页

组成部分-文字、图片、音频、视频、超链接

本质 - 代码

转换 - 浏览器（解析+渲染）

（2）浏览器

网页显示、运行的平台（必备）

五大：IE、火狐Firefox、谷歌Chrome、Safari、欧朋

渲染引擎（浏览器内核）不同，解析代码时的速度、性能、效果也不同

（3）Web标准

使不同的浏览器展示效果统一

结构 - HTML - 页面元素和内容

表现 - CSS - 网页元素的外观和位置等页面样式

行为 - JavaScript - 网页模型的定义与页面交互

Web标准要求页面实现：结构、表现、行为三层分离

2.HTML初体验

HTML（Hyper Text Markup Language）超文本标记语言

• 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

标签标记：成对<><>

HTML页面固定结构：整体html、头部head、标题title、主体body

• 通过特定的HTML标签进行描述

开发工具使用：VSCode

• 添加骨架：英文状态 -> shift+!
• 运行：右键 -> open in default browsers

3.语法规范

HTML注释

• 快捷键：ctrl+/

HTML标签结构

• 双标签：开始标签+内容+结束标签

• 单标签

  • <br> <hr> <img>

HTML标签之间的关系

• 父子关系（嵌套关系）
  

• 兄弟关系（并列关系）

（二）HTML标签学习

1.排版标签

标题标签 h1 - h6

• 特点：自动换行（独占一行）、文字加粗变大、从h1→h6文字逐渐减小

段落标签 p

• 特点：自动换行、段落之间存在间隙

换行标签 br

水平线标签 hr

2.文本格式化标签

加粗 b / strong

下划线 u / ins

倾斜 i / em

删除线 s / del

注意：后一种语义突出重要性的强调语境

3.媒体标签

（1）图片标签 img

<img src="地址" alt="替换文本" title="提示文本" width="宽度" height="高度">

src属性：目标图片的路径

alt属性：替换文本（加载失败时显示的文本）

title属性：提示文本（鼠标悬停显示的文字）

width和height属性：宽度和高度（数字）

• 只需设置其中一个，另一个自动等比例缩放（图片不会变形）
• 同时设置两个，若设置不当此时图片可能会变形

（*）标签介绍

注意：

• 写在开始标签内部

• 可以同时存在多个属性

• 属性之间以空格隔开

• 标签名与属性之间必须以空格隔开

• 属性之间没有顺序之分

（*）路径

绝对路径：目录下的绝对位置（从盘符开始、完整的网址）

相对路径（常用）：从当前文件开始出发找目标文件的过程

• 同级目录 - 当前文件和目标文件在同一目录中

  <img src="目标图片">
  <img src="./目标图片">
  

• 下级目录 - 目标文件在下级目录中

  <img src="文件夹名/目标图片">
  

• 上级目录 - 目标文件在上级目录中

  • …/返回上一级（…/…/返回上两级）

  <img src="../目标图片">
  

（2）音频标签 audio

<audio src="地址" controls autoplay loop></audio>

src属性：音频的路径

controls属性：显示播放的控件

autoplay属性：自动播放（部分浏览器不支持）

loop属性：循环播放

注意：支持三种格式-MP3、Wav、Ogg

（3）视频标签 video

<video src="地址" controls autoplay muted loop></video>

src属性：视频的路径

controls属性：显示播放的控件

autoplay属性：自动播放（谷歌浏览器中需配合muted实现静音播放）

loop属性：循环播放

muted：视频中音频的默认值（初始为静音）

注意：支持三种格式-MP4 、WebM 、Ogg

4.链接标签 a

<a href="地址" target="_blank">超链接文本</a>
<a href="#">空链接</a>

显示特点

• 默认文字有下划线

• 未点击过时，默认文字显示蓝色

• 点击过后，文字显示紫色（清除浏览器历史记录可恢复蓝色）

属性

• href 跳转地址（网址或本地）

  • 若还不知道跳转地址，href书写为#（空链接），此时点击后返回网页顶部

• target 目标网页的打开形式

  • _self：默认值，在当前窗口中跳转（覆盖原网页）_
  • _blank：在新窗口中跳转（保留原网页）

二、HTML基础

（一）列表标签

1.应用场景

在网页中按照行展示关联性的内容

无序列表最常用，有序列表偶尔用，自定义列表底部导航用

2.无序列表 ul

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

标签组成

• ul 表示无序列表的整体，用于包裹li标签
• li 表示无序列表的每一项，用于包含每一行的内容

显示特点：每一项前默认显示圆点标识

注意：ul标签只允许包含li标签，li标签可以包含任意内容

3.有序列表 ol

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

标签组成

• ol 表示有序列表的整体，用于包裹li标签
• li 表示有序列表的每一项，用于包含每一行的内容

显示特点：每一项前默认显示序号标识

注意：ol标签同样只允许包含li标签，li标签可以包含任意内容

4.自定义列表 dl

<dl>
    <dt>主题一</dt>
    <dd>主题一项目1</dd>
</dl>  

标签组成

• dl 表示自定义列表的整体，用于包裹dt/dd标签
• dt 表示自定义列表的主题
• dd 表示自定义列表的针对主题的每一项内容

显示特点：dd前会默认显示缩进效果

注意：dl标签只允许包含dt/dd标签，dt/dd标签可以包含任意内容

（二）表格标签 table

1.标签组成

table 表格整体，可用于包裹多个tr

• border = “数字” --> 边框宽度
• width = 数字 --> 表格宽度
• height = 数字 --> 边框高度
• 注意：实际开发时针对样式效果推荐用CSS设置

caption 表格标题，默认在表格整体顶部居中显示

tr 表格每行，可用于包裹td

th 表头单元格，通常用于表格第一行，默认内部文字加粗并居中显示

td 表格单元格，可用于包裹内容

标签的嵌套关系：table > caption + tr > th + td

2.结构标签

thead 表格头部

tbody 表格主体

tfoot 表格底部

注意：表格结构标签用于包裹tr标签，可省略

标签的嵌套关系：table > thead/tbody/tfoot > tr > th/td

3.合并单元格

rowspan = “合并单元格的个数” 跨行合并，将多行的单元格垂直合并

colspan = “合并单元格的个数” 跨列合并，将多列的单元格水平合并

注意：

• 通过左上原则，上下合并保留最上，左右合并保留最左
• 同一个结构标签中的单元格才能合并，不能跨结构合并
• 写在保留的td/th标签中

（三）表单标签 form

1.input系列标签

 <input type=" +++ ">

（1）基本介绍

场景：在网页中显示收集用户信息的表单效果

通过type属性值的不同，展示不同的效果，默认无自动换行

（2）表单域 form

（3）文本框 text

场景：用于输入单行文本（默认值）

<input type="text" placeholder="占位符">

常用属性：

• value = “” 用户输入的内容，代码中设置好相当于默认值（提交之后会发送给后端服务器）
• name = “” 当前控件的含义
• placeholder = “” 占位符，提醒用户输入内容的文本

注意：后端接收到数据的格式是 name的属性值 = value的属性

（4）密码框 password

场景：用于输入密码

<input type="password" placeholder="占位符">

常用属性（同文本框）

（5）单选框 radio

场景：用于多选一

<input type="radio" name="分组名" id="" checked>

常用属性：

• value = “” 用户选择的数据
• name = “” 分组，拥有相同name属性的单选框为一组，一组中只选其一
• checked 默认选中，一组只能设置一个

（6）复选框 checkbox

场景：用于多选多

<input type="checkbox" name="" checked>

常用属性：

• value 用户选择的数据
• name = “” 当前控件的含义
• checked 默认选中

（7）文件选择 file

场景：用于之后上传文件

<input type="file" multiple>

常用属性：

• multiple 多文件选择

（8）按钮

提交按钮 submit 用于提交，点击之后提交数据给后端服务器

重置按钮 reset 用于重置，点击之后恢复表单默认值

普通按钮 button 默认无功能，之后配合js添加功能

• value = " " 按钮显示文字

注意：需要与form配合才能使用功能，具体为将提交或重置的表单标签放入表单域标签

<form action="">
    <input type="text" placeholder="占位符">
    <input type="submit" value="提交按钮">
    <input type="reset">
    <input type="button" value="普通按钮">
</form>

2.按钮标签 button

<button type="reset">重置按钮</button>

type = " submit / reset / button "

注意：谷歌浏览器中button默认是提交按钮

3.下拉列表 select

<select>
    <option>北京</option>
    <option selected>深圳</option>
</select>

标签组成

• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项

属性：selected 下拉菜单的默认选中

4.文本域标签 textarea

<textarea cols="60" rows="30"></textarea>

属性：

• cols = “数字” 文本域的可见宽度
• rows = “数字” 文本域的可见行数

注意：

• 右下角可以拖拽改变大小
• 实际开发时针对于样式效果推荐使用CSS设置

5.标签 lable

场景：常用于绑定内容与表单标签的关系

使用方法1：

• 使用label标签将内容包裹

• 在表单上添加id属性

• label标签for属性的属性值设置与表单id的属性值相同

  <input type="radio" name="sex" id="man"> <label for="man">男</label>
  

使用方法2：

• 使用label标签将内容与表单标签一起包裹

• 删除label标签的for属性

  <label><input type="radio" name="sex">女</label>
  

（四）语义化标签

没有语义的网页布局标签div和span

• div标签：独占一行、宽度默认占满一行，高度默认由内容撑开

• span标签：一行可显示多个、宽度和高度都默认由内容撑开

有语义的布局标签（了解）

• header：网页头部

• nav：网页导航

• footer：网页底部

• aside：网页侧边栏

• section：网页区块

• article：网页文章

• 注意：

  • HTML5推出，手机端网页使用
  • 标签显示特点与div相同

（五）字符实体

在网页中展示特殊符号效果时，使用字符实体替代

结构：&英文;

常见字符实体：

• 空格  
• 大于 >
• 小于 <

注意：多个空格网页只认识一个（HTML空格合并现象），需字符实体表示

三、CSS基础

（一）CSS引入方式

CSS：层叠样式表

1.内嵌式

<style>
    选择器{
      
      
        属性名:属性值;
    }
</style>

CSS写在style标签中

位置：head标签中的title标签下边

注意：选择器-查找标签

作用范围：当前页面

使用场景：小案例

2.外联式

<link rel="stylesheet" href="my.css" />

CSS写在一个单独的.css文件中

位置：head标签中的title标签下边，通过link标签在网页中引入

作用范围：多个页面

使用场景：项目中

• rel属性 - 关系，stylesheet样式表
• href属性 - .css文件地址

3.行内式

<标签名 style="属性名:属性值;">内容</标签名>

CSS写在标签的style属性中

作用范围：当前标签

使用场景：配合js使用

（二）基础选择器

选择器的作用：选择页面中对应的标签，方便后续设置样式

1.标签选择器

标签名 {CSS属性名:属性值;}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意：无论嵌套关系多深，都能找到对应的标签

2.类选择器

.类名 {CSS属性名:属性值;}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意：

• 所有标签上都有class属性，其属性值称为类名
• 类名可以由数字、字母、下划线、中划线组成，不能以数字或中划线开头
• 一个标签可以同时有多个类名，类名之间以空格隔开
• 类名可以重复，一个类选择器可以同时选中多个标签
• 实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）

3.id选择器

#id属性值 {CSS属性名:属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意：

• 所有标签上都有id属性
• id属性值在页面中唯一不可重复
• 一个标签上只能有一个id属性
• 一个id选择器只能选中一个标签
• 配合js一起使用（获取DOM方法getElementById，页面出现多个id则获取不到）

4.通配符选择器

* {CSS属性名:属性值;}

作用：找到页面中所有的标签，设置样式

注意：

• 极少使用
• 小页面中常用于除去标签默认的内外边距
  • margin:0;
  • padding:0;

（三）字体和文本样式

1.字体样式

（1）字体大小 font-size

取值：数字+px

注意：

• 谷歌浏览器默认文字大小是16px
• 单位需设置，否则无效

（2）字体粗细 font-weight

取值：

• 关键字：
  • 正常 normal
  • 加粗 bold
• 纯数字：100~900的整百数（400正常700加粗）

注意： 不是所有字体都提供了九种粗细，部分取值页面中无变化

（3）字体样式 font-style

取值：

• 正常（默认值）normal
• 倾斜 italic

（4）字体系列 font-family

常用取值：具体字体1,具体字体2,具体字体3,…,字体系列名;

常见字体系列:

• 无衬线字体 sans-serif
• 衬线字体 serif
• 等宽字体 monospance

渲染规则：

• 从左往右按照顺序查找，若电脑中未安装该字体，则显示下一个
• 如果都不支持，会根据操作系统，显示最后字体系列的默认字体

注意：

• 如果字体名称中存在多个单词，推荐使用引号包裹
• 最后一项字体系列不需要引号包裹
• 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

（*）样式层叠问题

若同一标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效。

（5）字体font复合属性

font : style weight size family;

速记：稍微舒服swsf

省略要求：只能省略前两个，若省略相当于设置了默认值

单独和连写形式同时设置方法：

• 单独样式写在连写的下面
• 单独样式写在连写的里面

2.文本样式

（1）文本缩进 text-indent

取值：

• 数字+px
• 数字+em（推荐）
• 1em = 当前标签的font-size的大小

（2）文本水平对齐方式 text-align

取值：

• 左对齐 left
• 右对齐 right
• 居中对齐 center

注意：

• 内容对齐，可用于文本、span标签/a标签、input标签/img标签
• 以上元素的对齐方式需在其父元素中设置

（3）文本修饰 text-decoration

取值：

• 下划线 underline
• 删除线 line-through
• 上划线 overline
• 无装饰线 none

注意：开发中常用 text-decoration:none 清除a标签默认的下划线

（4）行高 line-height

取值：数字+px 或 倍数（当前标签font-size的倍数）

应用：

• 让单行文本垂直居中，可以设置line-height:文字父元素高度
• 网页精准布局时，会设置line-height:1，用来取消上下间距

行高与font复合属性：

• 注意覆盖

  font:style weight size/line-height family;
  

（四）Chrome调试工具

1.打开方式

右击 --> 检查

elements：显示当前页面的html结构

styles：显示当前标签的样式

2.元素

方法一：在左侧elements中点击需要调试的元素

方法二：点击左上角按钮后，直接在网页中点击需要调试的元素

3.功能

控制样式

• 修改属性值：直接点击属性值修改
• 添加属性：在上一个属性的分号后点击一下，直接添加
• 控制样式生效：点击属性前的小框即可
• 注意：调试工具仅仅只是当前的调试效果，需要在代码中修改才能永久保留

4.特殊情况

styles中没有设置的选择器

• 含义：选择器写错
• 原因：
  • 选择器单词拼错
  • 选择器结构写错

样式上有删除线

• 含义：样式失效
• 原因：
  • 样式被注释了
  • 样式被覆盖了

样式前有小三角

• 含义：样式报错
• 原因：
  • 属性值后没写分号
  • 出现中文标点
  • 属性名或属性值单词拼错

拓展-颜色

属性名：

• 文字颜色 color
• 背景颜色 background-color

属性值：

• 关键词：预定义的颜色名
  • 例：red green blue yellow
• rgb表示法：红绿蓝三原色，每项取值范围0~255
  • 例：rgb(0,0,0) rgb(255,0,0)
• rgba表示法：红绿蓝三原色,加上a表示透明度，取值范围0~1
  • 例：rgba(0,0,0,0.3) rgba(255,0,0,0.6)
• 十六进制表示法：#开头，将数字转换成十六进制表示
  • 例：#000000 #ff0000 #e92322

拓展-标签水平居中

 margin:0 auto

实现div、p、h（大盒子）水平居中

直接给当前元素本身设置

一般用于固定宽度的盒子，若大盒子没有设置宽度，默认占满父元素的宽度

四、CSS进阶

（一）选择器进阶

复合选择器

1.后代选择器

父选择器 后代选择器{CSS}

作用：根据HTML标签的嵌套关系，选择父元素 后代中 满足条件的元素

结果：在父选择器所找到标签的后代（儿子、孙子、重孙子…）中，找到满足后代选择器的标签，设置样式

注意：

• 选择器可以用任意一种基础选择器
• 后代包括儿子、孙子、重孙子…
• 后代选择器中，选择器与选择器之间以空格隔开

2.子代选择器

父选择器 > 子代选择器{CSS}

作用：根据HTML标签的嵌套关系，选择父元素 子代中 满足条件的元素

结果：在父选择器所找到标签的子代（儿子）中，找到满足子代选择器的标签，设置样式

注意：

• 子代只包括儿子
• 子代选择器中，选择器与选择器之间以>隔开

3.并集选择器

选择器1,选择器2{CSS}

作用：同时选择多组标签，设置相同的样式

结果：找到选择器1和选择器2选择的标签，设置样式

注意：

• 每组选择器以,分隔
• 每组选择器既可以是基础选择器也可以是复合选择器
• 每组选择器通常一行写一个，提高代码的可读性

4.交集选择器

选择器1选择器2{CSS}

作用：选中页面当中 同时满足 多个选择器的标签

结果：（既又原则）找到页面中，既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意：

• 选择器之间紧挨着，没有分隔
• 选择器中的标签选择器必须写在最前面

5.hover伪类选择器

选择器:hover{CSS}

作用：选中鼠标悬停在元素上的状态，设置样式

注意：

• 伪类选择器选中元素的某种状态
• 任何标签都可以添加

6.Emmet语法

作用：简写，快速生成代码

语法：

• 标签名 div

  <div></div>
  

• 类选择器 .red

  <div class="red"></div>
  

• id选择器 #one

  <div id="one"></div>
  

• 交集选择器 p.red#one

  <p class="red" id="one"></p>
  

• 子代选择器 ul>li

  <ul> <li></li> </ul>
  

• 内部文本 ul>li{li的内容}

  <ul> <li>li的内容</li> </ul>
  

• 创建多个

  • ul>li*3

    <ul> <li></li> <li></li> <li></li> </ul>
    

  • ul>li{$}*3

    <ul> <li>1</li> <li>2</li> <li>3</li> </ul>
    

（二）背景相关属性

1.背景颜色 background-color(bgc)

属性值：颜色取值-关键字、rgb表示法、rgba表示法、十六进制…

注意：

• 背景颜色默认是透明：rgb(0,0,0,0)/transparent
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景色

2.背景图片 background-image(bgi)

属性值：url('图片地址')

注意：

• url中的引号可省略
• 背景图片默认在水平和垂直方向平铺
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开图片的

3.背景平铺 background-repeat(bgr)

属性值：

• repeat （默认值）水平和垂直方向都平铺
• no-repeat 不平铺
• x-repeat 沿着水平方向（x轴）平铺
• y-repeat 沿着垂直方向（y轴）平铺

4.背景位置 background-position(bgp)

background-position:水平方向位置 垂直方向位置

属性值：

• 方位名词（最多只能表示9个位置）
  • 水平方向：left center right
  • 垂直方向：top center bottom
• 数字+px（坐标）
  • 坐标系：原点(0,0)-盒子的左上角，x轴-水平向右，y轴-垂直向下
  • 作用：图片左上角与坐标点重合

注意：

• 方位名词与坐标取值可以混合使用
• 背景图与背景色只显示在盒子内部

5.背景图片大小 background-size(bgs)

background-size:宽度 高度；

作用：设置背景图片的大小
取值：

• 数字+px
• 百分比
• contain 包含，将背景图片等比例缩放，直到不会超出盒子的最大（盒子可能有留白）
• cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白（图片可能显示不全）

6.背景的复合属性 background

background:color image repeat position/size（不分先后顺序）

省略问题：

• 可以按需求省略
• 在pc端，若盒子大下与背景图片大小相同，可以直接写background:url()

单独和连写形式同时设置方法：

• 单独样式写在连写的下面
• 单独样式写在连写的里面

拓展-在网页中展示图片

方法一：img标签

• 不设置宽高会默认原尺寸

方法二：div+背景图片

• 背景图片属于装饰，不能撑开div标签，需要设置div的宽高

（三）元素显示模式

1.块级元素 block

显示特点：

• 独占一行
• 宽度默认是父元素的宽度。高度默认由内容撑开
• 可以设置宽高

代表标签：

• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…

2.行内元素 inline

显示特点：

• 一行可以显示多个
• 宽度和高度默认由内容撑开
• 不可以设置宽高

代表标签：

• a、span、b、u、i、s、strong、ins、em、del…

3.行内块元素 inline-block

显示特点：

• 一行可以显示多个
• 可以设置宽高

代表标签：

• input、textarea、button、select…

注意：img标签有行内块元素特点，但是在Chrome调试工具中显示结果是inline

4.元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

• dispaly:block 转换成块级元素 使用较多
• dispaly:inline-block 转换成行内块元素 使用较多
• dispaly:inline 转换成行内元素 使用较少

拓展-HTML嵌套规范

块级元素一般作为大容器，可以嵌套文本、块级元素、行内元素、行内块元素等等

• 注意：p标签中不要嵌套div、p、h等块级元素

a标签内部可以嵌套任意元素，但不能嵌套a标签

拓展-居中方法总结

水平居中

text-align : center;

文本

行内元素，如span/a

行内块元素，如img/input

注意：如果需要让以上元素水平居中，需在元素的父级中设置

margin : 0 auto;

块级元素

注意：直接给当前元素设置

垂直居中

line-height

单行文本

（四）CSS特性

1.继承性

特性：子元素有默认继承父元素样式的特点（子承父业）

常见可继承的属性（文字控制属性均可以继承）：

• color
• font-style/weight/size/family
• text-indent/align
• line-height
• …

注意：

• 可以通过调试工具判断样式是否可以继承

继承失效情况：

• 原因：元素有浏览器默认样式，此时继承性依然存在，但优先显示浏览器的默认样式
• a标签的color会继承失效
• h系列标签的font-size会继承失败
• div的高度不能继承，但是宽度有继承的效果（因为div有独占一行的特性）

应用：

• 去除列表默认的样式（小圆点）

  ul {list-style ：none;}
  

• 统一不同浏览器默认文字大小

  • 谷歌浏览器默认文字大小：16px
  • 不同浏览器可能显示的默认字体大小不一致，开发的时候通常会给body标签设置统一的font-size保证不同浏览器效果一致

2.层叠性

特性：

• 同一标签设置不同样式 --> 样式层层叠加 --> 共同作用在标签上
• 同一标签设置相样式 --> 样式层层覆盖 --> 最后写的样式生效

注意：当样式冲突时，只有选择器优先级相同时，才能够通过层叠性判断

3.优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

优先级公式：

• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意：

• !important写在属性后面，分号前面
• !important不能提升继承的优先级
• 实际开发时不建议使用!important
• 越精准地找到标签，优先级越高

权重叠加计算：

• 场景：复合选择器通过权重叠加计算方法判断最终哪个选择器优先级最高

• 权重叠加计算公式（每一级之间不存在进位）：

  • (一：行内样式个数 , 二：id选择器个数 , 三：类选择器个数 , 四：标签选择器个数)

  

• 比较规则：

  • 先比较第一个数字，比较出结果不必看后边的
  • 再比较第二个数字，比较出结果不必看后边的
  • …
  • 若所有数字都相同，表示优先级相同，此时比较层叠（写在下边的起作用）
  • 除了继承，!important权重最高

五、CSS布局-盒子模型

1.盒子模型的介绍

盒子：

• 页面的每一个标签都可以看作一个盒子，以盒子的视角更方便布局
• 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，称之为盒子

盒子模型：

• CSS规定每个盒子分别由内容区域content、内边距区域padding、边框区域border、外边距区域margin构成

记忆：联想现实中的包装盒

2.内容区域的宽度和高度

作用：利用width和height属性默认设置是盒子内容区域的大小

属性：width/height

取值：数字+px

3.边框 border(bd)

单个属性：

• 边框粗细border-width
• 边框样式border-style
  • 实线solid 虚线dashed 点线dotted
• 边框颜色border-color

属性值（复合属性）：单个取值的连写，取值之间以空格隔开

border:粗细 线条种类 颜色（不分先后顺序）

单方向设置：只给盒子某个方向单独设置边框

border-方位名词:粗细 线条种类 颜色

注意：

• 设置border会撑大盒子（width和height是内容的宽高）

• 实际开发中，从内到外写代码，宽高背景色 --> 放内容并调节位置 --> 控制文字细节

4.内边距 padding

可以当做复合属性使用，表示单独设置某个方向的内边距

属性值：数字+px

简写识别顺序：

• 四个值：上 右 下 左
• 三个值：上 左右 下
• 两个值：上下 左右
• 记忆规则：从上开始顺时针赋值，没有设置赋值的看对面的

单方向设置：

padding-方位名词（left/right/top/buttom）: 数字+px

5.外边距 margin

设置方式同内边距

正常情况：水平布局的盒子，左右的margin互不影响，两者距离为左右margin的和

注意：外边距折叠现象

合并问题：垂直布局的块级元素，上下margin会合并

• 结果：最终距离为margin的最大值
• 解决：只设置一个

塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

• 结果：导致父元素一起往下移动
• 解决：
  • 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
  • 给父元素设置overflow:hidden
  • 转换成行内块元素display: inline-block
  • 设置浮动

6.CSS3盒子模型

手动内减：

• 能够撑大盒子的CSS属性：width、height、border、padding
  • 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
  • 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
• 特殊情况（块级元素）：如果子盒子没有设置宽度，宽度默认是父盒子的宽度，此时给子盒子设置左右的padding或者左右的border，不会撑大子盒子

自动内减：设置固定尺寸的盒子时可以使用自动内减方法避免手动内减

box-sizing: border-box;

7.清除默认内外边距

浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置

* {
  margin: 0;
  padding: 0;
}

8.版心居中

版心：网页的有效内容

margin:0 auto;

9.行内元素内外边距的问题

margin和padding无法改变行内标签的垂直问题

margin-top/bottom padding-top/bottom

解决：使用line-height改变行高

六、CSS浮动

（一）结构伪类选择器

1.作用与优势

作用：根据元素在HTML中的结构关系查找元素

优势：减少对于HTML中类的依赖，有利于保持代码的整洁

场景：常用于查找某父级选择器中的子元素

2.选择器

E:first-child{} 匹配父元素中第一个子元素，并且是E元素

E:last-child{} 匹配父元素中最后一个子元素，并且是E元素

E:nth-child(n){} 匹配父元素中第n个子元素，并且是E元素

E:nth-last-child(n){} 匹配父元素中倒数第n个子元素，并且是E元素

E:nth-of-type(n){} 只在父元素的同类型(E)子元素范围中，匹配第n个

注意：n的取值

• 0,1,2,3,4,5,6…（从0开始取值）
• 公式：
  • 偶数2n/even 奇数2n+1/2n-1/odd
  • 找到前五个-n+5 找到从第五个往后n+5

（二）伪元素

作用：一般用于页面中的非主体内容

区别：元素-HTML设置的标签 伪元素-由CSS模拟出的标签效果

种类：

• E::before 在父元素E内容的最前添加一个伪元素
• E::after 在父元素E内容的最后添加一个伪元素

注意：

• 必须设置content属性才能生效

   content: ''
  

• 伪元素默认是行内元素（宽高不生效）

（三）标准流

标准流又称文档流，是浏览器在渲染显示页面内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。

常见标准流排版规则：

• 块级元素：从上到下，垂直布局，独占一行
• 行内元素或行内块元素：从左往右，水平布局，空间不够自行折行

（四）浮动

float: left/right

作用：

• 页面布局：让垂直布局的盒子变成水平布局

• 浏览器解析行内块或行内标签时，若标签换行书写会产生一个空格的距离

特点：

• 浮动元素会脱离标准流，在标准流中不占位置（脱标）
• 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
• 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
• 浮动会受到上面元素边界的影响
• 浮动元素有特殊的显示效果：一行可以显示多个，可以设置宽高（浮动后的标签具备行内块的特点）

注意：

• 浮动后的元素不能通过text-align:center或margin:() auto居中
• 默认状态下，浮动的标签是顶对齐的，可加外边距进行调整

（五）清除浮动

1.介绍

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素（父子级标签，子级浮动、父级没有高度，后面的标准流盒子会受影响而显示到上面的位置）

原因：子元素浮动后脱标，不占位置

目的：需要父元素有高度，从而不影响其他网页元素的布局

2.方法

（1）直接设置父元素高度

优点：简单粗暴

缺点：有些布局中不能固定父元素的高度

（2）额外标签法

操作：

• 在父元素内容的最后添加一个块级元素
• 给添加的块级元素设置clear:both/left/right

缺点：会在页面中添加额外的标签，让页面的HTML结构变得复杂

（3）单伪元素清除法

.clearfix::after {
    content: "";
	/* 伪元素添加的标签是行内, 要求块 */
    display: block;
    clear: both;
    /* 补充代码：在网页中看不到伪元素，解决兼容性 */
    height: 0;
    visibility: hidden;
}

操作：用伪元素替代了额外标签

优点：项目中使用，直接给标签加类即可清除浮动

（4）双伪元素清除法

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after{
    clear: both;
}

优点：项目中使用，直接给标签加类即可清除浮动

注意：.clearfix::before解决外边距塌陷问题（display: table转为表格形式）

（5）overflow:hidden

overflow:hidden

操作：直接给父元素设置overflow:hidden

特点：方便

拓展-CSS书写顺序

不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯

CSS选择器书写顺序

布局属性：display float position clear visibility overflow

盒子模型+背景：width height margin border padding background

文字内容属性：color font text-decoration text-align line-height

点缀属性：cursor border-radius text-shadow box-shadow

注意：开发中推荐多用类+后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐不要超过3个

拓展-BFC

概念：块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

创建BFC方式：

• html标签
• 浮动元素
• overflow取值不为visible

特点：BFC是一种块级元素的布局空间，在BFC这个布局空间中存在以下两个特点

• BFC盒子会默认包裹住内部子元素（标准流、浮动）
  • 应用：清除浮动
• BFC盒子与子元素之间不存在margin的塌陷现象
  • 应用：解决margin的塌陷

七、项目

根目录：网站的第一级文件夹（英文名字）

• 图片文件夹：images
• 样式文件夹：CSS --> index.css（美化首页）
• 网站的首页：index.html（固定命名）

注意：

• 布局：从外到内，从上到下，从左到右
• CSS：浮动/display，盒子模型，文字样式

八、CSS定位装饰

（一）定位 position

1.网页常见布局方式

标准流

• 块级元素独占一行 --> 垂直布局
• 行内元素/行内块元素一行显示多个 --> 水平布局

浮动

• 让原本垂直布局的块级元素变为水平布局

定位

• 让元素自由地摆放在网页的任意位置
• 一般用于盒子之间的层叠情况

2.定位常见的应用场景

解决盒子与盒子之间的层叠问题

让盒子始终固定在屏幕中的某个位置

3.使用步骤

设置定位方式：

• 属性名：position
• 属性值：静态定位static 相对定位relative 绝对定位absolute 固定定位fixed

设置偏移值：

• 原则：就近原则
• 属性名：水平left/right + 垂直top/bottom
• 属性值：数字+px/%
• 注意：
  • left和right都有，以left为准；top和bottom都有，以top为准
  • 数字+% 按照参照物大小的百分比移动

4.静态定位 static

position: static;

介绍：标准流中的元素默认是静态定位

注意点：不能通过方位属性进行移动

5.相对定位 relative

position: relative;
left/right: 数字+px/%
top/bottom: 数字+px/%

介绍：自恋型定位，相对于自己之前的位置进行移动

特点：

• 需要配合方位属性实现移动
• 相对于自己原来位置进行移动
• 在页面中占位置 --> 没有脱标
• 仍然具有原有的显示模式特点

应用场景：

• 配合绝对定位组CP（子绝父相）
• 用于小范围的移动

6.绝对定位 absolute

position: absolute;
left/right: 数字+px/%
top/bottom: 数字+px/%

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

特点：

• 需要配合方位属性实现移动
• 以已经定位的父级为参照物进行定位，若父级没有定位，相对于浏览器可视区域进行移动
  • 父级为广义的父级，就近找定位的父级，逐级查找不到则以浏览器为参照
  • 父级更常用相对定位
• 在页面中不占位置 --> 已经脱标
• 改变标签的显示模式特点，具备了行内块特点（在一行共存且宽高生效）
  • 需要设置宽高，或添加内容撑开盒子

应用场景：配合绝对定位组CP（子绝父相）父级

7.子绝定位应用

position: absolute;
left: 50%;
top: 50%;
/* 方法一-手动调节参数为半个盒子宽高 */
margin-left: -150px; 
margin-top: -150px;
/* 方法二-按盒子百分比自动调节移动距离 */
transform: translate(-50%, -50%);

使用子绝父相，让子盒子在父盒子中居中（父子元素任意宽高下都能实现）

注意：标准流盒子使用margin:0 auto水平居中，但绝对定位的盒子并不适用

操作：

• 参照浏览器大小移动50%，使得整个盒子移动到浏览器中间偏右下
• 再向左移动半个盒子宽度，向上移动半个盒子高度

注意：若发现父元素已经有绝对定位了，此时直接子绝即可

8.固定定位 fixed

position: fixed;
left/right: 数字+px/%
top/bottom: 数字+px/%

介绍：死心眼型定位，相对于浏览器进行定位移动
特点：

• 需要配合方位属性实现移动
• 相对于浏览器可视区域进行移动
• 在页面中不占位置 --> 已经脱标

应用场景：让盒子固定在屏幕中的某个位置

9.元素的层级关系

不同布局方式元素的层级关系：标准流 < 浮动 < 定位

不同定位之间的层级关系：

• 相对、绝对、固定默认层级相同
• 默认情况下，在HTML中写在下面的元素层级更高，会覆盖上面的元素

自定义定位的层级：

• z-index:数字

注意：

• 数字默认为0，取值越大显示顺序越靠上
• z-index必须配合定位才生效

（二）装饰

1.垂直对齐方式 vertical-align

问题：当图片和文字在一行显示时，其底部不对齐

• 浏览器文字类型元素排版中存在用于对齐的基线（baseline）

• 行内标签和行内块标签在浏览器中默认按照文字解析，默认文字是按基线对齐

属性值：

• baseline 默认，基线对齐
• top 顶部对齐
• middle 中部对齐
• bottom 底部对齐

注意：

• 还可以将其变为块级元素解析
• 水平居中 text-line: center
• 优先给img标签设置

作用：

• 文本框和表单按钮无法对齐问题

• input和img无法对齐问题

• div中的文本框，文本框无法贴顶问题

• div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

• 使用line-height让img标签垂直居中问题

2.光标类型 cursor

场景：设置鼠标光标在元素上时显示的样式

属性值：

• default 默认值，通常是箭头
• pointer 小手效果，提示用户可以点击
• text 工字型，提示用户可以选择文字
• move 十字光标，提示用户可以移动

3.边框圆角 border-radius

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

取值：圆角半径数值+px/%

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角

常用圆角：

• 正圆
  • 盒子必须为正方形
  • 设置边框圆角为盒子宽高的一半 border-radius: 50%
• 胶囊按钮
  • 盒子要求为长方形
  • 设置 border-radius: 盒子高度的一半

4.溢出部分显示效果 overflow

溢出部分：盒子内容部分超出盒子范围的区域

场景：控制内容溢出部分的显示效果-显示/隐藏/滚动条…

属性值：

• visible 默认值，溢出部分可见
• hidden 溢出部分隐藏
• scroll 无论是否溢出，都显示滚动条
• auto 根据是否溢出，自动显示或隐藏滚动条

5.元素本身隐藏

场景：让某元素本身在屏幕中不可见

常见属性：

• 占位隐藏 visibility: hidden
• 不占位隐藏 display: none

6.元素整体透明度 opacity

场景：让某元素整体（包括内容）一起变透明

属性值：0-1之间的数字

• 1：完全不透明
• 0：完全透明

7.边框合并 border-collapse

border-collapse：collapse

场景：让相邻表格边框进行合并，得到细线边框效果

（三）选择器扩展

1.链接伪类选择器

场景：选中标签的不同状态

选择器语法：

• E:link{} 选中（a链接） 未访问过 的状态
• E:visited{} 选中（a链接） 访问之后 的状态
• E:hover{} 选中 鼠标悬停 的状态
• E:active{} 选中 鼠标按下 的状态

注意：同时实现以上四种伪类状态效果，需要按照LVHA顺序书写

2.焦点伪类选择器

场景：用于选中元素获取焦点时状态，常用于表单控件

选择器语法：

• E:focus{}

效果：表单控件获取焦点时默认会显示外部轮廓线

3.属性选择器

场景：通过元素上的HTML属性来选择元素，常用于选择input标签

选择器语法：

• E[attr] 选择具有attr属性的E元素
• E[attr="val"] 选择具有attr属性并且属性值等于val的E元素

input::placeholder 修改input的placeholder样式

九、综合项目

（一）CSS样式补充

1.精灵图

background-image: url(大图地址);
background-position: 水平方向位置  垂直方向的位置;

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

使用步骤：

• 创建一个盒子，设置盒子大小为小图片大小
• 将精灵图设置为盒子的背景图片
• 通过PxCook测量小图片左上角坐标(x,y)（在大图中的位置），分别取负值设置给盒子的背景图位置 background-position：-x -y

注意：精灵图标签一般用行内标签（span b i）

2.文字阴影 text-shadow

作用：给文字添加阴影效果，吸引用户注意

属性名：text-shadow

取值：

• h-shadow 必须，水平偏移量，允许负值
• v-shadow 必须，垂直偏移量，允许负值
• blur 可选，模糊度
• color 可选，阴影颜色

拓展：阴影可以叠加设置，每组阴影取值之间以逗号隔开

3.盒子阴影 box-shadow

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

取值：

• h-shadow 必须，水平偏移量，允许负值
• v-shadow 必须，垂直偏移量，允许负值
• blur 可选，模糊度
• color 可选，阴影颜色
• spread 可选，阴影扩大
• inset 可选，将阴影改为内部阴影

4.过渡 transition

transition: all/属性名 过度的时长;

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

常见取值：

• 过度的属性
  • all：所有能过度的都过度
  • 具体属性名E：只有属性E过度
• 过度的时长 数字+s（秒）

注意：

• 过渡需要：默认状态和hover状态样式不同，才能有过渡效果
• transition属性给需要过渡的元素本身加
• transition属性设置在不同状态中，效果不同的
  • 给默认状态设置，鼠标移入移出都有过渡效果
  • 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

（二）项目前置认知

1.网页与网站的关系

网页：网站中的每一“页”

网站：提供特定服务的一组网页集合

2.骨架结构标签

文档说明

<!DOCTYPE html>

文档类型声明，告诉浏览器该网页的HTML版本

注意：DOCTYPE需要写在页面的第一行，不属于HTML标签

网页语言

<html lang="en">

标识网页使用的语言

作用：搜索引擎归类+浏览器翻译

常见语言：zh-CN简体中文 / en英文

字符编码（了解）

<meta charset="UTF-8">

标识网页使用的字符编码

作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码

常见字符编码：

• UTF-8 万国码，国际化的字符编码，收录了全球语言的文字
• GB2312 6000+汉字
• GBK：20000+ 汉字

注意：开发中统一使用UTF-8字符编码即可

其他

<meta http-equiv="X-UA-Compatible" content="IE=edge">

解决兼容性差问题：ie / edge

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

移动端网页 宽度 = 设备宽度

3.SEO三大标签

SEO简介

SEO（Search Engine Optimization）：搜索引擎优化

作用：让网站在搜索引擎上的排名靠前

提升SEO的常见方法：

• 竞价排名
• 将网页制作成html后缀
• 标签语义化（在合适的地方使用合适的标签）

SEO三大标签

title：网页标题标签

<title>标题文案</title>

description：网页描述标签

<meta name="description" content="描述文案">

keywords：网页关键词标签

<meta name="keywords" content="关键词文案">

4.ico图标设置

<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">

场景：浏览器标题栏图标，显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

注意：.ico图标放入根目录里

5.版心

.container {
    width: 1240px;
    margin: 0 auto;
}

场景：把页面的主体内容约束在网页中间

作用：让不同大小的屏幕都能看到页面的主体内容

注意：版心类名常用container、wrapper、w等

（三）项目结构搭建

1.文件和目录准备

新建项目文件夹 xtx-pc-client，在开发工具中打开

• 在实际开发中，项目文件夹不建议使用中文
• 所有项目相关文件都保存在 xtx-pc-client 目录中

复制 favicon.ico 到 xtx-pc-client 目录

• 一般习惯将ico图标放在项目根目录

复制 images 和 uploads 目录到 xtx-pc-client 目录中

• images ：存放网站固定使用的图片素材，如：logo、样式修饰图片… 等
• uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片…等

新建 index.html 在根目录

新建 css 文件夹保存网站的样式，并新建以下CSS文件：

• base.css：基础公共样式
• common.css：该网站中多个网页相同模块的重复样式，如：头部、底部
• index.css：首页样式

完成后的目录及文件结构：

• xtx-pc-client 项目目录
  • index.html 首页的html文件
  • favicon.ico ico图标
  • images 固定使用的图片素材
  • uploads 非固定使用的图片素材
  • css CSS文件夹
    • base.css 基础公共样式
    • common.css 该网站中多个网页相同模块的重复样式
    • index.css 首页样式

2.基础公共样式

场景：一般项目开始前，首先会去除掉浏览器默认样式，设置为当前项目需要的初始化样式

作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发

要求：已经准备好base.css代码，项目中可以直接引入使用