01-HTML初识

hs 6/6/2022

# 一、认识前端

# 1，了解前后端开发

web前端开发：WEB Front-end Development

HTML / CSS / JS, Vue / React / NG

结构→盖房子→搭建结构→网页结构的布局→HTML

样式→装修房子→结构的布局与装修→CSS

逻辑→房子内的东西可以动起来→网页动态交互→JavaScript

web后端开发：WEB Back-end Development

服务器程序开发，对数据进行操作，逻辑处理，给前端提供数据，开发API接口

java/PHP/Python/C#/javascript js NodeJs（服务器程序）

# 2，认识网页和网站

什么是网页？

网页的专业术语叫做 Web Page

打开浏览器查看到的页面，是网络中的一“页”

网页的内容可以非常丰富：包括文字、链接、图片、音乐、视频等等

网站是什么呢？

网站是由多个网页组成的

通常一个网站由N个网页组成（N >= 1）

问题1：网页由哪些部分组成

文字、图片、音频、视频、超链接

问题2：我们看到的网页背后本质是什么

前端程序员写的代码

问题3：前端的代码是通过什么软件转换成用户眼中的页面的

通过浏览器转化（解析和渲染）成用户看到的网页

# 3，世界上第一个网页和现在的网页

上世纪90年代，Berners-Lee上线了世界上第一个网站

info.cern.ch/hypertext/W…

001

现在的网页： 001

# 4，前端发展

网页网站开发
后台管理系统
网页游戏开发
移动端页面开发
微信小程序、公众号、订阅号
微信小游戏
APP 混合式开发

# 二、网页的组成

# 1，网页组成

阶段一：HTML元素；网页的内容结构

阶段二：HTML元素 + CSS样式；网页的视觉体验

阶段三：HTML元素 + CSS样式 + JavaScript语言；网页的交互处理

001 001

# 三、浏览器介绍

# 1，浏览器介绍

我们已经明确知道了网页的组成部分：HTML + CSS + JavaScript。 那么这些看起来枯燥的代码，是如何被渲染成多彩的网页呢？

我们知道是通过浏览器来完成；

浏览器是网页显示、运行的平台，是前端开发必备利器

常见的五大浏览器: IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）

001

# 2，渲染引擎

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分

浏览器出品的公司不同，内在的渲染引擎也是不同的

001

Trident （三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；

Gecko（壁虎）：Mozilla Firefox

Presto（急板乐曲）-> Blink （眨眼）：Opera

Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）

Webkit -> Blink ：Google Chrome

注意点

渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的

谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）

查看网站：tongji.baidu.com/data/browse…

# 3，为什么要遵循WEB标准呢？

通过以上浏览器的内核不同，我们知道他们渲染或者排版的模式就有些许差异，显示就会有差别。导致用户在不同的浏览器看到同一个页面是不同的效果。

Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

52462176900

# 四、第一个网页

# 1，认识HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

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

HTML元素是构建网站的基石；

什么是标记语言（markup language ）？

由无数个标记（标签、tag)组成

是对某些内容进行特殊的标记，以供其他解释器识别处理

比如使用h2标记的文本会被识别为“标题”进行加粗、文字放大显示

由标签和内容组成的称为元素（element）

什么是超文本（ HyperText ）

表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容

还可以表示超链接（HyperLink），从一个网页跳转到另一个网页

# 2，开发第一个网页 – 记事本

在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为：第一个网页.txt
双击这个文件，输入代码等内容 → 记得保存！
在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html
第一个网页.html ，浏览器会自动打开文件并显示之前输入的内容

52462176900

HTML文件的特点 – 扩展名（后缀名）

因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以使用.htm

现在统一使用 .html

# 3，HTML文件的基本骨架

52462176900

<!doctype  html>
<html>
    <head>
         <title></title>
    </head> 
    <body>
    </body>
</html>

注意:

我们在以后写代码(html,css,js...)遇到特殊符号,必须都是英文输入下的符号

制作一个网页必须按照html的结构去写.

# 4，编辑器

常见的前端使用的编辑器：WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver

智能提示、高亮识别、语法检测、集成环境、开发效率高

前端开发神器：VS Code → 速度快、体积小、插件多

vscode下载地址：code.visualstudio.com/Download

编辑器的几个插件

安装插件（增加功能）：右侧图标最后一项，Extensions，查找需要的插件（联网）

中文插件：Chinese

颜色主题：atom one dark

文件夹图标：VSCode Great Icons

在浏览器中打开网页：open in browser、Live Sever

自动重命名标签：auto rename tag

VSCode的配置： Auto Save 自动保存

Font Size 修改代码字体大小

Word Wrap 代码自动换行

Render Whitespace 空格的渲染方式(个人推荐) p Tab Size 代码缩进

推荐2个空格（公司开发项目基本都是2个空格）

# 5，HTML的注释

什么是注释？

简单来说，注释就是一段代码说明

注释是只给开发者看的，浏览器并不会把注释显示给用户看

浏览器不会，浏览器执行代码时会忽略所有的注释

注释的意义:

帮助我们自己理清代码的思路, 方便以后进行查阅

与别人合作开发时, 添加注释, 可以减少沟通成本.(同事之间分模块开发)

开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)

可以临时注释掉一段代码, 方便调试

注释快捷键：ctrl + /

# 五、标签，元素，属性

# 1，标签

标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名

常见标签由两部分组成，称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容

少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

HTML元素不区分大小写，但是推荐小写

1654399351890

# 3，元素

什么是元素（Element）呢？

元素是网页的一部分

一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含

52462176900

那么HTML有哪些元素呢？

developer.mozilla.org/zh-CN/docs/…

# 4，元素的属性

属性包含元素的额外信息，这些信息不会出现在实际的内容中。

一个属性必须包含如下内容

一个空格，在属性和元素名称之间

如果已经有一个或多个属性，就与前一个属性之间有一个空格

属性名称，后面跟着一个等于号

一个属性值，由一对引号“ ”引起来

属性的分类

有些属性是公共的，每一个元素都可以设置，比如class、id、title属性

有些属性是元素特有的，不是每一个元素都可以设置，比如meta元素的charset属性、img元素的alt属性等

元素的结构总结

# 5，元素的嵌套关系

# 六、骨架标签

# 1，文档声明

HTML最上方的一段文本我们称之为文档类型声明，用于声明文档类型

<!DOCTYPE html>

作用

HTML文档声明，告诉浏览器当前页面是HTML5页面

让浏览器用HTML5的标准去解析识别内容

必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题

# 2，html元素

html元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素，所有其他元素必须是此元素的后代。

lang属性

帮助语音合成工具确定要使用的发音

帮助翻译工具确定要使用的翻译规则

lang=“en”表示这个HTML文档的语言是英文

lang=“zh-CN”表示这个HTML文档的语言是中文

# 3，head

HTML head 元素规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。

常见配置：

网页的标题：title元素
网页的编码：meta元素

配置编码：

可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码

一般都使用utf-8编码，涵盖了世界上几乎所有的文字

# 4，body

body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构，之后学习的大部分HTML元素都是在body中编写呈现的

02-HTML常用标签

hs 6/6/2022

# 一、常见标签

HTML元素本身很多，但是常用的元素就是那么几个。

developer.mozilla.org/zh-CN/docs/…

我们只需要记住常用的，不常用的学会查看文档即可

# 1，标题标签

单词：Heading是头部的意思，通常会用来做标题

场景:在新闻和文章的页面中，都离不开标题，用来突出显示文章主题\

语义:1~6级标题，重要程度依次递减，h1级别最高，而h6级别最低\

特点：
1.文字都有加粗
2.文字都有变大，并且从h1 → h6文字逐渐减小
3.独占一行\

注意点：
1.h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
2.h元素通常和SEO优化有关系（什么是SEO，后续再介绍）\

# 2，段落标签

单词：p元素是paragraph单词的缩写，是段落、分段的意思

场景:在新闻和文章的页面中，用于分段显示\

语义:段落\

特点：
1.段落之间存在间隙
2.独占一行\

注意点：
1.p元素多个段落之间会有一定的间距
2.可以配合br标签进行换行\

# 3，换行标签

场景:让文字强制换行显示\

语义:换行\

特点：
1.单标签
2.让文字强制换行\

# 4，水平线标签(认识)

场景:分割不同主题内容的水平线\

语义:主题的分割转换\

特点：
1.单标签
2.在页面中显示一条水平线\

# 5，文本格式化（修饰）标签[双标签]

场景:需要让文字加粗、下划线、倾斜、删除线等效果\

001

语义:突出重要性的强调语境\

特点：
1.对人：好理解，好记忆
2.对机器：有利于机器解析，对搜索引擎（SEO）有帮助
3.strong、ins、em、del，表示的强调语义更强烈！\

# 6，图片标签【多媒体标签】

单词：img是image单词的所以，是图像、图像的意思

场景:在网页中显示图片\

语义:显示一张图片\

特点：
1.单标签
2.img标签需要展示对应的效果，需要借助标签的属性进行设置
3.img并排显示（人妖标签）\

属性注意点：
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分\

src属性：
1.source单词的缩写，表示源，目标图片的路径
2.是必须的，它包含了你想嵌入的图片的文件路径
2.当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
3.路径的情况有很多，稍后会详细介绍\

alt属性：
1.不是强制性的，用来替换文本
2.当图片加载失败时，才显示alt的文本
2.当图片加载成功时，不会显示alt的文本
3.屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；\

title属性：
1.提示文本，当鼠标悬停时，才显示的文本
2.title属性不仅仅可以用于图片标签，还可以用于其他标签\

width和height属性：
1.如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
2.如果同时设置了width和height两个，若设置不当此时图片可能会变形\

图片的格式：
001

img属性小结：
001

# 8，图片路径（重点）

场景:页面需要加载图片，需要先找到对应的图片\

分类：
1.绝对路径（了解）
2.相对路径（常用）\

绝对路径：
1.指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径，如：D:\day01\images\1.jpg
2.完整的网络地址：www.baidu.com/images/logo…

相对路径：
1.从当前文件开始出发找目标文件的过程
2.分同级目录，下级目录，上级目录
3..代表当前文件夹（1个.），可以省略
3... 代表上级文件夹（2个.）\

注意点：
1.对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是
2.VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！\

# 9，超链接(重点)

单词：anchor，a标签，或叫锚（anchor）元素、超链接、锚链接

场景:点击之后，从一个页面跳转到另一个页面\

语义:超链接\

特点：
1.双标签，内部可以包裹内容
2.如果需要a标签点击之后去指定页面，需要设置a标签的href属性
3.a标签默认文字有下划线
4.a标签从未点击过，默认文字显示蓝色
5.a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）\

href属性：
1.Hypertext Reference的简称
1.点击之后跳转去哪一个网页（目标网页的路径）
2.指定要打开的URL地址，外部链接
2.也可以是一个本地地址，内部链接\

target属性：
1.该属性指定在何处显示链接的资源
1._self：默认值，在当前窗口打开URL；
2._blank：在一个新的窗口中打开URL
2.其他不常用\

注意点：
1.空链接空链接, 点击之后回到网页顶部
2.空链接应用场景：开发中不确定该链接最终跳转位置，用空链接占个位置\

# 10，div元素、span元素

单词：div元素：division，分开、分配的意思。span元素：跨域、涵盖的意思。

场景:实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签\

语义:无语义，无所用、无所不用\

特点：
1.div标签：一行只显示一个（独占一行）
2.span标签：一行可以显示多个\

产生的历史：
1.网页的发展早期是没有css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示
2.后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可
3.比如h1元素可以是一段普通的文本+CSS修饰样式
4.这个时候就出现了div、span来编写HTML结构所有的结构，样式都交给css来处理\

注意点：
1.理论上来说，我们的页面可以没有div、span
2.理论上来说，我们的页面也可以全部都是div、span\

两者区别：
1.div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的
2.div元素：多个div元素包裹的内容会在不同的行显示，用于把网页分割为多个独立的部分
3.一般作为其他元素的父容器，把其他元素包住，代表一个整体
4.多个span元素包裹的内容会在同一行显示,默认情况下，跟普通文本几乎没差别
5.用于区分特殊文本和普通文本，比如用来显示一些关键字\

# 11，列表元素

在开发一个网页的过程中, 很多数据都是以列表的形式存在的

场景:在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等\

种类:无序列表、有序列表、自定义列表\

001 001

无序列表（unordered list） ：
1.场景：在网页中表示一组无顺序之分的列表，如：新闻列表
2.ul标签：表示无序列表的整体，ul标签中只允许包含li标签
3.li标签：表示无序列表的每一项，li标签可以包含任意内容
4.li标签可以包含任意内容
5.列表的每一项前默认显示圆点标识\

有序列表（ordered list） ：
1.场景：在网页中表示一组有顺序之分的列表，如：排行榜。
2.ol标签中只允许包含li标签
3.li标签可以包含任意内容
4.列表的每一项前默认显示序号标识\

自定义列表（definition list） ：
1.场景：在网页的底部导航中通常会使用自定义列表实现。
2.dl标签中只允许包含dt（definition term）/dd（definition description）标签
3.dt/dd标签可以包含任意内容
4.dd前会默认显示缩进效果
5.列表中每一项的具体描述，是对 dt 的描述、解释、补充
6.一个dt后面一般紧跟着1个或者多个dd\

总结
1.无序列表最常用，有序列表偶尔用，自定义列表底部导航用\

# 12，表格元素

在网页中, 对于某些内容的展示使用表格元素更为合适和方便\

单词：
1.table 表格
2.tr(table row) 表格中的行
3.td(table data) 行中的单元格
4.thead 表格的表头
5.tbody 表格的主体
6.tfoot 表格的页脚
7.caption 表格的标题
8.th 表格的表头单元格\

001

场景:在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表\

相关属性:
1.border, width, height。实际开发时针对于样式效果推荐用CSS设置
2.border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。 3.table { border-collapse: collapse; } 合并单元格的边框

表格标题和表头单元格标签: 1.在表格中表示整体大标题和一列小标题
2.caption定义表格大标题，caption标签书写在table标签内部
3.th定义表头单元格， th标签书写在tr标签内部（用于替换td标签）\

表格的结构标签（了解） : 1.场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
2.thead表示表格头部， tbody表示表格主体， tfoot表示表格底部
3.表格结构标签内部用于包裹tr标签
4.表格的结构标签可以省略
001

合并单元格:
001

1.场景：将水平或垂直多个单元格合并成一个单元格
2.合并单元格步骤：
3.只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
001

# 13，表单元素

HTML表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单\

场景:在网页中显示收集用户信息的表单效果，如：登录页、注册页\

常见的表单元素和表单项元素：
1.form 表单一般情况下，其他表单相关元素都是它的后代元素
2.input 单行文本输入框、单选框、复选框、按钮等元素
3.textarea 多行文本框
4.select、option 下拉选择框
5.button 按钮
6.label 表单元素的标题\

input元素的使用:
1.表单元素使用最多的是input元素
2.input标签可以通过type属性值的不同，展示不同效果\

input元素中的type属性:
1.text：文本输入框（明文输入）场景：在网页中显示输入单行文本的表单控件, 可以使用placeholder，提示用户输入内容。
2.password：文本输入框（密文输入）场景：在网页中显示输入密码的表单控件, 可以使用placeholder，提示用户输入内容。
3.radio：单选框场景：在网页中显示多选一的单选表单控件，可以使用name实现多选一，可以使用checked表示默认选中。
4.checkbox：复选框场景：在网页中显示多选多的多选表单控件，可以使用checked表示默认选中。
5.button：普通按钮场景：在网页中显示不同功能的按钮表单控件。
6.reset：重置按钮场景：点击之后，恢复表单默认值。
7.submit：提交表单数据给服务器场景：提交按钮，点击后之后提交数据给后端服务器。
8.file：文件上传场景：在网页中显示文件选择的表单控件，可以使用multiple表示多文件选择。
9.注意点：type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框

input元素中的其它属性:
1.readonly：只读
2.disabled：禁用
3.checked：默认被选中，只有当type为radio或checkbox时可用
4.autofocus：当页面加载时，自动聚焦
5.name：名字，在提交数据给服务器时，可用于区分数据类型，当前控件的含义，
提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 = value的属性值
6.value：取值用户输入的内容，提交之后会发送给后端服务器

button元素的使用:
1.场景：在网页中显示用户点击的按钮
2.button的type的取值，可以是button,submit,reset
3.谷歌浏览器中button默认是提交按钮
3.button标签是双标签，更便于包裹其他内容：文字、图片等\

select下拉菜单元素:
1.场景：在网页中提供多个选择项的下拉菜单表单控件
2.select标签：下拉菜单的整体, option标签：下拉菜单的每一项
3.selected：下拉菜单的默认选中\

textarea文本域元素:
1.场景：在网页中提供可输入多行文本的表单控件
2.cols：规定了文本域内可见宽度
3.rows：规定了文本域内可见行数
4.右下角可以拖拽改变大小
5.禁止缩放：resize: none;
6.水平缩放：resize: horizontal;
7.垂直缩放：resize: vertical;
8.水平垂直缩放：resize: both;\

label元素:
1.场景：常用于绑定内容与表单标签的关系
2.使用方式一：label for id
3.使用方式二：label包裹整个元素\

布尔属性（boolean attributes） :
1.常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
2.布尔属性可以没有属性值，写上属性名就代表使用这个属性
3.如果要给布尔属性设值，值就是属性名本身

form常见的属性:
1.form通常作为表单元素的父元素，将整个表单作为一个整体来进行操作
2.对整个表单进行重置或对整个表单的数据进行提交
3.action属性：用于提交表单数据的请求URL
4.method属性：请求方法（get和post），默认是get
5.target属性：在什么地方打开URL（参考a元素的target）

03-额外补充

hs 6/6/2022

# 一、HTML全局属性

经过上面的学习，我们发现某些属性只能设置在特定的元素中，如：img元素的src、a元素的href。

也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为 “全局属性（Global Attributes），全局属性有很多：developer.mozilla.org/zh-CN/docs/…

常见的全局属性如下：\

id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素\
class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素\
style：给元素添加内联样式\
title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的\

# 二、字符实体

如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格\

场景:场景：在网页中展示特殊符号效果时，需要使用字符实体替代

# 三、emmet语法

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具
在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生成相应代码\

快捷写法:\

!和html:5可以快速生成完整结构的html5代码\
子代）和+（兄弟）如：div>ul>li， div+div>p>span+i， div+p+ul>li\
*（多个）和^（上一级）如：ul>li x 5， div+div>p>span^h1， div+div>p>span^^^^h1\
()（分组）如：div>(header>ul>li*2>a)+footer>p\
属性(id属性、class属性、普通属性) {}（内容）如：div#header+div#main>.container>a[href]， a[href="www.baidu.com"]{百度一下}\
$（数字）如：ul>li.item$ *5\
隐式标签如：<div> .box+.container </div>， ul>item*3\

04-初识CSS

hs 6/9/2022

# 一、认识CSS

CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表）是为网页添加样式的代码。

CSS的历史：\

早期的网页都是通过HTML来编写的，但是我们希望HTML页面可以更加丰富\
这个时候就增加了很多具备特殊样式的元素：比如i、strong、del等等\
后来也有不同的浏览器实现各自的样式语言，但是没有统一的规划\
1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS，在1996年的时候发布了CSS1\
直到1997年初，W3C组织才专门成立了CSS的工作组，1998年5月发布了CSS2\
在2006~2009非常流行 “DIV+CSS”布局的方式来替代所有的html标签\
从CSS3开始，所有的CSS分成了不同的模块（modules），每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容\
直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation\

总结：\

CSS的出现是为了美化HTML的，并且让结构（HTML）与样式（CSS）分离\
美化方式一：为HTML添加各种各样的样式，比如颜色、字体、大小、下划线等等\
美化方式二：对HTML进行布局，按照某种结构显示（CSS进行布局 – 浮动、flex、grid）\

问:\

MDN解释：CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言\
维基百科解释：是一种计算机语言，但是不算是一种编程语言\

# 二、编写CSS样式

写在哪里，先体验一把:\

css写在style标签中，style标签一般写在head标签里面，title标签下面\

常见属性:

注意:\

CSS 标点符号都是英文状态下的\
每一个样式键值对写完之后，最后需要写分号\

语法规则:\

声明（Declaration）一个单独的CSS规则，如 color: red; 用来指定添加的CSS样式\
属性名（Property name）：要添加的css规则的名称\
属性值（Property value）：要添加的css规则的值\

# 三、CSS引入方式

CSS引入方式:\

内部式：CSS 写在style标签中, 提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中\
外部式：CSS 写在一个单独的.css文件中, 提示：需要通过link标签在网页中引入\
行内式：CSS 写在标签的style属性中, 提示：之后会配合js使用\

CSS常见三种引入方式的特点区别:\

行内样式（inline style） :\

行内样式（inline style），也有人翻译成行内联式\
行内样式表存在于HTML元素的style属性之中\
CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号\
在原生的HTML编写过程中确实这种写法是不推荐的，之后会配合JS使用\
在Vue的template中某些动态的样式是会使用内联样式的\

内部样式（internal style sheet） :\

将CSS放在HTML文件 head元素里的 style元素之中\
在Vue的开发过程中，每个组件也会有一个style元素，和内部样式表非常的相似（原理并不相同）\

外部样式（external style sheet） :\

外部样式表（external style sheet）是将css编写一个独立的文件中，并且通过元素引入进来\
link元素的作用，后续单独讲解\
可以在style元素或者CSS文件中使用@import导入其他的CSS文件\

# 三、CSS的注释

CSS的注释:\

CSS代码也可以添加注释来方便阅读\
CSS的注释和HTML的注释是不一样的\
/* 注释内容 */

05-CSS选择器与补充内容

hs 6/9/2022

# 一、CSS基础选择器（selector）

开发中经常需要找到特定的网页元素进行设置样式：\

思考：如何找到特定的那个元素？\

选择器的作用：\

选择页面中对应的标签（找她），方便后续设置样式（改她）\

选择器的种类繁多，大概可以这么归类：\

通用选择器（universal selector）\
元素选择器（type selectors）\
类选择器（class selectors）\
id选择器（id selectors）\
属性选择器（attribute selectors）\
组合（combinators）\
伪类（pseudo-classes）\
伪元素（pseudo-elements）\

通用选择器：\

结构：* { css属性名：属性值； }\
通用选择器（universal selector）\
所有的元素都会被选中;\
一般用来给所有元素作一些通用性的设置，比如内边距、外边距，比如重置一些内容\
效率比较低，尽量不要使用;\

简单选择器：\

简单选择器是开发中用的最多的选择器\
元素选择器（type selectors）, 使用元素的名称\
类选择器（class selectors）, 使用 .类名\
id选择器（id selectors）, 使用 #id\

元素选择器：\

结构：标签名 { css属性名：属性值； }\
作用：通过标签名，找到页面中所有这类标签，设置样式\
标签选择器选择的是一类标签，而不是单独某一个\
标签选择器无论嵌套关系有多深，都能找到对应的标签\

类选择器：\

结构：.类名 { css属性名：属性值； }\
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式\
所有标签上都有class属性，class属性的属性值称为类名（类似于名字）\
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头\
一个标签可以同时有多个类名，类名之间以空格隔开\
类名可以重复，一个类选择器可以同时选中多个标签\

id选择器：\

结构：#id属性值 { css属性名：属性值； }\
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式\
所有标签上都有id属性\
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的\
一个标签上只能有一个id属性值\
一个id选择器只能选中一个标签\

id注意事项：\

一个HTML文档里面的id值是唯一的，不能重复\
id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识\
最好不要用标签名作为id值\
中划线又叫连字符（hyphen）\

类与id的区别：\

class类名相当于姓名，可以重复，一个标签可以同时有多个class类名\
id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值\
类选择器以 . 开头\
id选择器以 # 开头\
实际开发的情况，类选择器用的最多\
实际开发的情况，id一般配合js使用，除非特殊情况，否则不要使用id设置样式\

# 二、CSS高级选择器（selector）

属性选择器(attribute selectors) ：\

拥有某一个属性 [att]\
属性等于某个值 [att=val]\

[attr*=val]: 属性值包含某一个值val （了解）\
[attr^=val]: 属性值以val开头（了解）\
[attr$=val]: 属性值以val结尾（了解）\
[attr|=val]: 属性值等于val或者以val开头后面紧跟连接符（了解）\
[attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割（了解）\

后代选择器（descendant combinator） ：\

后代选择器一: 所有的后代(直接/间接的后代)，选择器之间以空格分割\
后代选择器二: 直接子代选择器(必须是直接子代)\

兄弟选择器(sibling combinator) ：\

兄弟选择器一:相邻兄弟选择器，使用符号 + 连接\
兄弟选择器二: 普遍兄弟选择器，使用符号 ~ 连接\

交集选择器：\

交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)\
在开发中通常为了精准的选择某一个元素\

并集选择器：\

并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)\
在开发中通常为了给多个元素设置相同的样式;\

动态伪类（dynamic pseudo-classes) ：\

a:hover 鼠标挪动到链接上(重要)\
除了a元素，:hover也能用在其他元素上\
选中鼠标悬停在元素上的状态，设置样式\
伪类选择器选中的元素的某种状态\

总结：

# 三、补充内容（selector）

link元素：\

link元素是外部资源链接元素，规范了文档与外部资源的关系\
link元素通常是在head元素中\
最常用的链接是样式表（CSS），此外也可以被用来创建站点图标（比如 “favicon” 图标）\
href属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的\

CSS颜色的表示方法：\

颜色关键字\
RGB颜色\

颜色关键字（color keywords） ：\

是不区分大小写的标识符，它表示一个具体的颜色\
developer.mozilla.org/zh-CN/docs/…

RGB颜色：\

RGB是一种色彩空间，通过R（red，红色）、G（green，绿色）、B（blue，蓝色）三原色来组成了不同的颜色\
就是通过调整这三个颜色不同的比例，可以组合成其他的颜色\

3. 方式一：十六进制符号：#RRGGBB[AA]
4. R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；A是可选的
5. 方式二：函数符： rgb[a](R, G, B[, A])
6. R（红）、G（绿）、B （蓝）可以是number（数字），或者percentage（百分比），255相当于100%
7. A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）\

Chrome浏览器开发者工具：\

打开Chrome调试工具，方式一：右键 – 检查，方式二：快捷键 – F12\
快捷键：ctrl+ 可以调整页面或者调试工具的字体大小\
可以通过删除某些元素来查看网页结构\
可以通过增删css来调试网页样式\

06-CSS属性-字体和文本

hs 6/9/2022

# 一、CSS属性-字体

font-size(重要) ：\

font-size决定文字的大小\
常用的设置：具体数值+单位\
常用的设置：百分比，基于父元素的font-size计算，比如50%表示等于父元素font-size的一半\
谷歌浏览器默认文字大小是16px\
单位需要设置，否则无效\

font-family (重要, 不过一般仅设置一次) ：\

font-family用于设置文字的字体名称\
可以设置1个或者多个字体名称\
浏览器会选择列表中第一个该计算机上有安装的字体\
渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体，如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体\
或者是通过 @font-face 指定的可以直接下载的字体\
如果字体名称中存在多个单词，推荐使用引号包裹\
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示\
window上默认字体是微雅黑，macOs上默认字体是苹方\

font-weight(重要) ：\

font-weight用于设置文字的粗细（重量）\
常见的取值：normal：等于400\
常见的取值：bold：等于700\
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量\
strong、b、h1~h6等标签的font-weight默认就是bold\
不是所有字体都提供了九种粗细，因此部分取值页面中无变化\
实际开发中以：正常、加粗两种取值使用最多\

font-style(一般) ：\

font-style用于设置文字的常规、斜体显示\
normal：常规显示\
italic(斜体)：用字体的斜体显示(通常会有专门的字体)\
em、i、cite、address、var、dfn等元素的font-style默认就是italic\

font-variant(了解) ：\

font-variant可以影响小写字母的显示形式，variant是变形的意思;\
normal：常规显示，small-caps：将小写字母替换为缩小过的大写字母\

line-height(常用) ：\

line-height用于设置文本的行高\
行高可以先简单理解为一行文字所占据的高度\
取值：数字+px\
取值：倍数（当前标签font-size的倍数）\
网页精准布局时，会设置 line-height : 1 可以取消上下间距\

行高的严格定义是：两行文字基线（baseline）之间的间距\
基线（baseline）：与小写字母x最底部对齐的线\

区分height和line-height的区别：\

height：元素的整体高度\
line-height：元素中每一行文字所占据的高度\
应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中？答：让line-height等同于height\

font：\

font是一个缩写属性\
font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写\
font-style font-variant font-weight font-size/line-height font-family\
font-style、font-variant、font-weight可以随意调换顺序，也可以省略\
line-height可以省略，如果不省略，必须跟在font-size后面\
font-size、font-family不可以调换顺序，不可以省略\

# 二、CSS属性-文本

text-decoration(常用) ：\

text-decoration用于设置文字的装饰线\
decoration是装饰/装饰品的意思;\
decoration取值：none，无任何装饰线，可以去除a元素默认的下划线\
decoration取值：underline，下划线\
decoration取值：overline，上划线\
decoration取值：line-through，中划线（删除线）\
a元素有下划线的本质是被添加了text-decoration属性\
开发中会使用 text-decoration : none ; 清除a标签默认的下划线\

text-transform(一般) ：\

text-transform用于设置文字的大小写转换\
text-transform取值：capitalize(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写\
text-transform取值：uppercase(大写字母)将每个单词的所有字符变为大写\
text-transform取值：lowercase(小写字母)将每个单词的所有字符变为小写\
text-transform取值：none：没有任何影响\

text-indent(一般) ：\

text-indent用于设置第一行内容的缩进\
取值：数字+px\
取值：数字+em（推荐：1em = 当前标签的font-size的大小）\
text-indent: 2em; 刚好是缩进2个文字\

text-align(重要) ：\

text-align: 直接翻译过来设置文本的对齐方式\
如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置\
取值：left 左对齐\
取值：right 右对齐\
取值：正中间显示\
取值：两端对齐\

text-align : center 能让哪些元素水平居中？ ：\

文本\
span标签、a标签\
input标签、img标签\
如果需要让以上元素水平居中， text-align : center 需要给以上元素的父元素设置\

letter-spacing、word-spacing(一般) ：\

letter-spacing、word-spacing分别用于设置字母、单词之间的间距\
默认是0，可以设置为负数
07-CSS继承性,层叠性,元素类型

hs 6/12/2022

# 一、CSS继承性

继承性(Inherited) ：\

如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性\
如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高)\
常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性\
这些不用刻意去记, 用的多自然就记住了\
可以通过调试工具判断样式是否可以继承\
好处：可以在一定程度上减少代码\
应用场景：可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式\
应用场景：直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小\

继承失效的特殊情况：\

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式\
a标签的color会继承失效，其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了\
h系列标签的font-size会继承失效，其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了\

# 二、CSS层叠性

设置样式特性：\

给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上\
给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效\

层叠性：\

对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置\
那么属性会被一层层覆盖上去，但是最终只有一个会生效\
那么多个样式属性覆盖上去, 哪一个会生效呢?\
判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;\
判断二: 先后顺序, 权重相同时, 后面设置的生效;\
按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）\

!important：10000
内联样式：1000
id选择器：100
类选择器、属性选择器、伪类：10
元素选择器、伪元素：1
通配符：0
优先级公式: 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important\

# 三、元素类型

元素的类型：\

块级元素（block-level elements）: 独占父元素的一行\
行内级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示\
行内块级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示\

块级元素：\

独占一行（一行只能显示一个）\
宽度默认是父元素的宽度，高度默认由内容撑开\
可以设置宽高\
标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……\

行内元素：\

一行可以显示多个\
宽度和高度默认由内容撑开\
不可以设置宽高\
标签：a、span 、b、u、i、s、strong、ins、em、del……\

行内块元素：\

一行可以显示多个\
可以设置宽高\
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline\
标签：input、textarea、button、select……\

通过CSS修改元素类型：\

事实上元素没有本质的区别\
div是块级元素, span是行内级元素\
div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已\
我们可以通过display来改变元素的类型\
CSS中有个display属性，能修改元素的显示类型，有4个常用值\

block：让元素显示为块级元素
inline：让元素显示为行内级元素
inline-block：让元素同时具备行内级、块级元素的特征
none：隐藏元素\

总结：\

编写HTML时的注意事项：\

块级元素、inline-block元素\

一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）
特殊情况，p元素不能包含其他块级元素\

行内级元素（比如a、span、strong等）\

一般情况下，只能包含行内级元素，a标签不能嵌套a标签\

居中：
\

元素隐藏方法：\

方法一: display设置为none，元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样)\
方法二: visibility设置为hidden，设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间\
方法三: rgba设置颜色, 将a的值设置为0，rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素\
方法四: opacity设置透明度, 设置为0，设置整个元素的透明度, 会影响所有的子元素\

overflow：\

overflow用于控制内容溢出时的行为\
visible：溢出的内容照样可见\
hidden：溢出的内容直接裁剪\
scroll：溢出的内容被裁剪，但可以通过滚动机制查看，会一直显示滚动条区域，滚动条区域占用的空间属于width、height\
auto：自动根据内容是否溢出来决定是否提供滚动机制\

CSS样式不生效技巧：\

选择器的优先级太低\
选择器没选中对应的元素\
元素不支持此CSS属性，比如span默认是不支持width和height的\
浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性\
被同类型的CSS属性覆盖，比如font覆盖font-size\
充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错
08-CSS盒子模型

hs 6/12/2022

# 一、CSS盒子模型

生活中的盒子：\

每个元素都是盒子：\

盒子模型(Box Model)的组成：\

内容（content），元素的内容width/height\
内边距（padding），元素和内容之间的间距\
边框（border），元素自己的边框\
外边距（margin），元素和其他元素之间的间距\
背景（background），分背景颜色和背景图片\

浏览器的开发工具中的盒子：\

盒子模型的四个方向：\

因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边\

内容 – 宽度和高度：\

设置内容是通过宽度和高度设置的，对于行内级元素来说, 设置宽高是无效的\
min-width：最小宽度，无论内容多少，宽度都大于或等于min-width\
max-width：最大宽度，无论内容多少，宽度都小于或等于max-width\
移动端适配时, 可以设置最大宽度和最小宽度\
min-height（了解）：最小高度，无论内容多少，高度都大于或等于min-heigh\
max-height（了解）：最大高度，无论内容多少，高度都小于或等于max-height\

内边距 - padding：\

padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距\
四个方向\

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距\

padding单独编写是一个缩写属性\

padding-top、padding-right、padding-bottom、padding-left的简写属性
padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左\

padding并非必须是四个值, 也可以有其他值\

边框 - border：\

border用于设置盒子的边框\
边框相对于content/padding/margin来说特殊一些\

边框具备宽度width;
边框具备样式style;
边框具备颜色color;\

边框宽度\

border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性\

边框颜色\

border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性\

边框样式\

border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性\

同时设置宽度,样式,颜色\

border-top
border-right
border-bottom
border-left
border\

快捷键：bd + tab\
border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状\
利用border或者CSS的特性我们可以做出很多图形\
css-tricks.com/the-shapes-…

圆角 – border-radius：\

border-radius用于设置盒子的圆角\
常见的值: 数值: 通常用来设置小的圆角, 比如6px;\
常见的值: 百分比: 通常用来设置一定的弧度或者圆形\

border-radius事实上是一个缩写属性\

将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性
开发中比较少见一个个圆角设置\

如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆\

外边距 - margin：\

margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距\
margin包括四个方向, 所以有如下的取值\

margin-top：上内边距
margin-right：右内边距
margin-bottom：下内边距
margin-left：左内边距\

margin单独编写是一个缩写属性\

margin-top、margin-right、margin-bottom、margin-left的简写属性
margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左\

margin也并非必须是四个值, 也可以有其他值\

margin塌陷：\

margin有重叠问题，这个重叠问题，也叫margin的塌陷\
兄弟元素之间的margin塌陷，之间的间隙，取决于最大的marign，并不是margin相加\
兄弟元素之间的margin塌陷是发生在垂直方向，在水平方向上是没有塌陷\
解决：你要设置时，一定要小心，要么设置上面盒子的下marign，要么设置下面盒子的上margin\

<style>
*{ margin: 0px; padding: 0px; }
    /* 按理说，两个盒子之间的间隙是420px，实际是220px */
    .box1{ width: 200px; height: 200px; background-color: gold; margin-bottom: 200px; }
    .box2{ width: 200px; height: 200px; background-color: skyblue; margin-top: 220px; }

    /* .box1{ width: 200px; height: 200px; float: left; background-color: gold; margin-right: 200px;}
    .box2{ width: 200px; height: 200px; float: left; background-color: skyblue; margin-left: 220px; } */
</style>

<div class="box1"></div>
<div class="box2"></div>

父子元素之间margin也会塌陷, 给父元素设置margin-top，给子元素也设置margin-top,此时，就产生了margin的塌陷\
解决

1）给父加边框
2）添加overflow:hidden overflow表示溢出的意思
3）给父元素设置padding-top
4）给父元素或子元素设置浮动陷\

利用margin可以让一个盒子水平居中\
margin也可以是负值，当margin为负值时，就会向另一个方向移动\
对于女标签(盒子)来，margin垂直方向无效\

清除默认内外边距：\

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

1）比如：body标签默认有margin：8px
2）比如：p标签默认有上下的margin
3）比如：ul标签默认由上下的margin和padding-left
4）……\

解决方法\

外轮廓 - outline：\

outline表示元素的外轮廓,不占用空间,默认显示在border的外面\
outline相关属性有\

1）outline-width: 外轮廓的宽度
2）outline-style：取值跟border的样式一样，比如solid、dotted等
3）outline-color: 外轮廓的颜色
4）outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似\

应用场景：去除a元素、input元素的focus轮廓效果\

盒子阴影 – box-shadow：\

box-shadow属性可以设置一个或者多个阴影\
每个阴影用shadow表示，多个阴影之间用逗号,隔开，从前到后叠加\
常见格式\

第1个值：offset-x, 水平方向的偏移，正数往右偏移
第2个值：offset-y, 垂直方向的偏移，正数往下偏移
第3个值：blur-radius, 模糊半径
第4个值：spread-radius, 延伸半径
color：阴影的颜色，如果没有设置，就跟随color属性的颜色
inset：外框阴影变成内框阴影\

通过一个网站测试盒子的阴影: html-css-js.com/css/generat…

文字阴影 - text-shadow：\

text-shadow用法类似于box-shadow，用于给文字添加阴影效果\
以通过一个网站测试文字的阴影: html-css-js.com/css/generat…

行内级元素的注意事项：\

以下属性对行内级元素不起作用\

width、height、margin-top、margin-bottom\

以下属性对行内级元素的效果比较特殊\

padding-top、padding-bottom、上下方向的border\

box-sizing设置新的盒子模型：\

box-sizing用来设置盒子模型为新的盒子模型\
border-box：padding、border都布置在width、height里边
\
content-box：padding、border都布置在width、height外边
\

水平居中方案：\

盒子背景之背景颜色：\

属性名：background-color（bgc）\
颜色取值：关键字、rgb表示法、rgba表示法、十六进制……\
背景颜色默认值是透明： rgba(0,0,0,0) 、transparent\
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色\

盒子背景之背景图片：\

在开发中, 为了让网页更加美观, 我们经常会设置各种各样的背景\
属性名：background-image（bgi）,会盖在(不是覆盖)background-color的上面\
背景图片中url中可以省略引号\
设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面\
如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的\
背景图片默认是在水平和垂直方向平铺的\
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的\

背景图片之背景平铺：\

属性名：background-repeat（bgr）\

计算机中坐标系\

背景图片之置背景图片的大小：\

属性名：background-size\
取值\

auto：默认值, 以背景图本身大小显示
cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
percentage：百分比，相对于背景区（background positioning area）
ength：具体的大小，比如100px\

背景图片之背景位置：\

属性名：background-position（bgp）\

方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直\

背景相关属性的连写形式：\

属性名：background（bg）\
属性值：单个属性值的合写，取值之间以空格隔开\
background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面\
其他属性也都可以省略，而且顺序任意\
书写顺序：推荐(background：color image repeat position)\
省略问题：可以按照需求省略\
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()\

显示一张图片的两种方案：\

img标签是一个标签，不设置宽高默认会以原尺寸显示\
div标签 + 背景图片，需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签\
img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片\
background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息\

认识字体图标：\

字体图标特点：放大不会失真，可以任意切换颜色，用到很多个图标时，文件相对图片较小\
使用：

第一步：登录阿里icons（www.iconfont.cn/），下载代码，并且拷贝… 第二步: 通过link引入iconfont.css文件
第三步: 使用字体图标
方式一: 通过对应字体图标的Unicode来显示代码;
方式二: 利用已经编写好的class, 直接使用即可;\

精灵图 CSS Sprite：\

精灵图是CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分\
CSS雪碧、CSS精灵\
CSS精灵图的好处\

减少网页的http请求数量，加快网页响应速度，减轻服务器压力
减小图片总大小
解决了图片命名的困扰，只需要针对一张集合的图片命名\

制作\

方法1：Photoshop, 设计人员提供
方法2：www.toptal.com/developers/…

使用\

精灵图的原理是通过只显示图片的很小一部分来展示的
设置对应元素的宽度和高度
设置精灵图作为背景图片
调整背景图片的位置来展示
获取精灵图的位置：www.spritecow.com/

09-层布局

hs 6/15/2022

# 一、CSS层布局

标准文档流：\

默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布\
块级元素独占一行 → 垂直布局\
行内元素/行内块元素一行显示多个 → 水平布局\
默认情况下，互相之间不存在层叠现象\
在标准流中，可以使用margin、padding对元素进行定位，其中margin还可以设置负数\
设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果，不便于实现元素层叠的效果\
如果我们希望一个元素可以跳出标准文档流,可以通过position属性来进行设置\
可以让元素自由的摆放在网页的任意位置\
一般用于盒子之间的层叠情况，定位之后的元素层级最高，可以层叠在其他盒子上面\

定位方式和设置偏移值\

静态定位 - static：\

静态定位是默认值，就是之前认识的标准流，元素按照normal flow布局\
left 、right、top、bottom没有任何作用\
说白了，就是不定位\
之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定\

相对定位 - relative：\

相对于自己之前的位置进行移动\
可以通过left、right、top、bottom进行定位\
定位参照对象是元素自己原来的位置\
left、right、top、bottom用来设置元素的具体位置\
在页面中占位置，没有脱标\
应用场景：1）配合绝对定位组CP（子绝父相） 2）在不影响其他元素位置的前提下，对当前元素位置进行微调\

固定定位 - fixed：\

元素脱离normal flow（脱离标准流、脱标）\
可以通过left、right、top、bottom进行定位\
相对于浏览器进行定位移动\
固定定位元素的特点\

可以随意设置宽高
宽高默认由内容决定
不再受标准流的约束
不再严格按照从上到下、从左到右排布
不再严格区分块级、行内级，块级、行内级的很多特性都会消失
脱标元素内部默认还是按照标准流布局\

5.应用场景：\

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

绝对定位 - absolute：\

在页面中不占位置，元素脱离normal flow（脱离标准流、脱标）\
定位参照对象是最邻近的定位祖先元素\
如果找不到这样的祖先元素，参照对象是视口\
定位元素（positioned element）是指position值不为static的元素\
子绝父相：在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位\

子元素相对于父元素进行定位，又不希望父元素脱标\

如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性\

left: 0、right: 0、top: 0、bottom: 0、margin:0\

如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性\

left: 0、right: 0、top: 0、bottom: 0、margin: auto
另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）\

z-index：\

z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）\
取值可以是正整数、负整数、0\
如果是兄弟关系\

z-index越大，层叠在越上面
z-index相等，写在后面的那个元素层叠在上面\

如果不是兄弟关系\

各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
而且这2个定位元素必须有设置z-index的具体数值\

粘性定位 - sticky：\

可以看做是相对定位和固定定位的结合体;\
它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;\
当达到这个阈值点时, 就会变成固定定位;\
sticky是相对于最近的滚动祖先包含视口的\

position值对比：\

10-浮动布局

hs 6/15/2022

# 一、CSS浮动布局

浮动的作用：\

早期的作用：图文环绕\

现在的作用：网页布局（让块级盒子可以并排显示）\

属性名：float\

left 左浮动
right 右浮动\

浮动的特点：\

浮动元素会脱标，在标准流中不占位置\
包裹性\

如果一个块级元素，在没有设置widht的情况下（前提条件），一旦使用float，那么它的宽度就会发生变化，尽量最小，包裹其内容，能够完全包裹其中的内容。
如果我们对一个块级元素设置了width，那么它就不具备包裹性\

破坏性\

在一个块级容器中，如果它的子元素，都浮动了，并且没有清除这个浮动，那么块级容器将会塌陷。这就是浮的破坏性。
如果父元素中的所有子元素都浮动了，那么会让父元素的高度塌陷，也就是说对你父元素造成了影响，我们需要清除这种影响，也叫清除浮动。也就是说，清除浮动，就是清除浮动所造成的影响。
清除浮动，就是清除对父元素造成的影响和清除去兄弟元素造成的影响\

块级框\

如果女标签浮动了，它会自动地变成男标签，盒子模型的6大属性都会起作用。\

清除浮动：\

浮动会对其它元素造成影响\

1）对父元素造成影响
2）对后面的兄弟元素造成影响\

对父元素造成影响：\

如果父元素内部的所有的子元素都浮动了，如果父元素没有设置高度，那么它的高度就会塌陷，就是高度变成0了。
有了影响，就需要我们清除这种影响，清除这种影响，叫清除浮动。\

清除对父元素造成影响：\

1）加高法
2）overflow:hidden;
3）内墙法在父元素内部的最后面添加一堵墙 clear: both;专门用来清除影响的
4）使用伪元素来清除浮动

叫真正的元素\

对后面的兄弟元素造成影响：\

clear: both; clear后面可以跟left，表示清除左浮动造成的影响 clear后面可以跟right，表示清除右浮动造成的影响。通常情况下，我们会直接写clear:both。表示清除左右浮动造成的影响哪个兄弟受了影响，就写在哪个兄弟上面的。\

大量案例练习：\

要想玩转浮动，必须做大量的练习实践。\

BFC – Block Formatting Context：\

FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的\
块级元素的布局属于Block Formatting Context（BFC）\

也就是block level box都是在BFC中布局的；。\

行内级元素的布局属于Inline Formatting Context（IFC）\

而inline level box都是在IFC中布局的；\

MDN上有整理出在哪些具体的情况下会创建BFC\

根元素（html）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、> thead、tfoot 的默认属性）或 inline-table）
overflow 计算值(Computed)不为 visible 的块元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
display 值为 flow-root 的元素\

BFC有什么作用呢：\

在BFC中，box会在垂直方向上一个挨着一个的排布；\
垂直方向的间距由margin属性决定；\
在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；\
在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；\

那么这个东西有什么用呢\

解决margin的折叠问题；\
解决浮动高度塌陷问题；\

BFC的作用一：解决折叠问题\

在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；\
让两个box是不同的BFC，那么就可以解决折叠问题；\

BFC的作用二：解决浮动高度塌陷\

BFC解决高度塌陷需要满足两个条件\

浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）
浮动元素的父元素的高度是auto的

11-Flex布局

hs 6/15/2022

# 一、Flex布局介绍

弹性盒子是一种用于按行或按列布局元素的一维布局文案。

flex布局是目前web开发中使用最多的布局方案：\

flex 布局（Flexible 布局，弹性布局）;\
目前特别在移动端可以说已经完全普及;\
在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;\
之前布局有floats 和 positioning，但是这两种方法本身存在很大的局限性。\

# 二、Flex重要概念

两个重要的概念：\

开启了 flex 布局的元素叫 flex container\
flex container 里面的直接子元素叫做 flex item\

当flex container中的子元素变成了flex item时, 具备一下特点：\

flex item的布局将受flex container属性的设置来进行控制和布局;\
flex item不再严格区分块级元素和行内级元素;\
flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;\

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container：\

flex： flex container 以 block-level 形式存在\
inline-flex： flex container 以 inline-level 形式存在\
flex布局的模型\

# 三、相关的属性

应用在 flex container 上的 CSS 属性：\

flex-flow\
flex-direction\
flex-wrap\
flex-flow\
justify-content\
align-items\
align-content\

应用在 flex items 上的 CSS 属性：\

flex-grow\
flex-basis\
flex-shrink\
order\
align-self\
flex\

# 四、容器属性之flex-direction

flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布：\

flex-direction 决定了 main axis 的方向，有 4 个取值\
row（默认值）、row-reverse、column、column-reverse\

# 五、容器属性之flex-wrap

flex-wrap 决定了 flex container 是单行还是多行：\

fnowrap（默认）：单行\
wrap：多行\
wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）\

# 六、容器属性之flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的简写。 ：\

顺序任何, 并且都可以省略\

# 七、容器属性之justify-content

justify-content 决定了 flex items 在 main axis 上的对齐方式：\

顺序任何, 并且都可以省略\
flex-start（默认值）：与 main start 对齐\
flex-end：与 main end 对齐\
center：居中对齐\
space-between：\

flex items 之间的距离相等
与 main start、main end两端对齐\

space-around：\

flex items 之间的距离相等
flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半\

space-evenly：\

flex items 之间的距离相等
flex items 与 main start、main end 之间的距离等于 flex items 之间的距离\

# 八、容器属性之align-item

align-items 决定了 flex items 在 cross axis 上的对齐方式：\

normal：在弹性布局中，效果和stretch一样\
stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container\
flex-start：与 cross start 对齐\
flex-end：与 cross end 对齐\
center：居中对齐\
baseline：与基准线对齐\

# 九、容器属性之align-content

align-content 决定了多行flex items 在cross axis上的对齐方式，用法与 justify-content 类似：\

stretch（默认值）：与 align-items 的 stretch 类似\
flex-start：与 cross start 对齐\
flex-end：与 cross end 对齐\
center：居中对齐\
space-between：\

flex items 之间的距离相等
与 cross start、cross end两端对齐\

space-around：：\

flex items 之间的距离相等
flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半\

space-evenly：\

flex items 之间的距离相等
flex items 与 cross start、cross end 之间的距离等于 flex items 之间的距离\

# 十、项目属性之order

order 决定了 flex items 的排布顺序：\

可以设置任意整数（正整数、负整数、0），值越小就越排在前面\
默认值是 0\

# 十一、项目属性之align-self(了解)

Align-self 可以通过 align-self 覆盖 flex container 设置的 align-items：\

auto（默认值）：遵从 flex container 的 align-items 设置\
stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致\

# 十二、项目属性之flex-grow(了解)

flex-grow 决定了 flex items 如何扩展(拉伸/成长) ：\

可以设置任意非负数字（正小数、正整数、0），默认值是 0\
当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效\

如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为：\

flex container 的剩余 size * flex-grow / sum\

flex items 扩展后的最终 size 不能超过 max-width\max-heigh

# 十三、项目属性之flex-shrink(了解)

flex-shrink 决定了 flex items 如何收缩(缩小) ：\

可以设置任意非负数字（正小数、正整数、0），默认值是 1\
当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效\

如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为：\

flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和\

flex items 收缩后的最终 size 不能小于 min-width\min-height

# 十四、项目属性之flex-basis(了解)

flex-basis 用来设置 flex items 在 main axis 方向上的 base size：\

auto（默认值）、具体的宽度数值（100px）\
当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效\

决定 flex items 最终 base size 的因素，从优先级高到低：\

max-width\max-height\min-width\min-height\
flex-basis\
width\height\
内容本身的 size\

# 十五、项目属性之flex属性

flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。 ：\

最最常用的：一个无单位数(number): 它会被当作flex-grow的值。

12-企业级布局实战套路

hs 6/20/2022

# 什么是布局

简单来说就是HTML页面的整体结构或骨架，类似于传统的报纸或杂志中的排版；布局不是某个技术内容，而是一种设计思想；CSS知识体系的重中之重，早期以table为主(简单)，后来以技巧性布局为主(难)，现在有flexbox/grid(偏简单)。

# table布局(out了，了解)

父级容器—display: table

子级容器—display:table-cell

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            display: table;
            width: 100%;
            height: 100px;
        }
        .left{
            display: table-cell;
            height: 100px;
            background-color: blue;
        }
        .right{
            display: table-cell;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

# float布局

特点:

元素"浮动"
脱离文档流
但不脱离文本流

对自身的影响: 形成"块"(BFC，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素)、位置尽量靠上、位置尽量靠左(右)，无法满足会靠下

对兄弟的影响: 上面贴非float元素、旁边贴float元素、不影响其它块级元素位置、影响其它块级元素内部文本

对父级的影响: 从布局上"消失"、高度塌陷(可以通过overflow:hidden | clearfix)

# float 布局实战

两列布局解决方案(一边固定，另外一边动态变化)

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .left{
            width: 400px;
            height: 300px;
            background-color:gold;
            float: left;
        }
        .right{
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right">ABC</div>
</body>
</html>

三列布局解决方案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #left {
            width: 200px;
            /* 定宽 */
            height: 300px;
            background-color: #c9394a;
            float: left;
        }

        #center {
            width: 200px;
            /* 定宽 */
            height: 300px;
            background-color: green;
            float: left;
        }

        #right {
            height: 300px;
            background-color: pink;
            margin-left: 400px;
        }
    </style>
</head>

<body>
    <div id="parent">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>

</html>

# 清除浮动的例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>清除浮动</title>
    <style>
      .clearfix::after {
        content: '';
        display: block;
        clear: both;
      }
      .float {
        float: left;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="clearfix">
      <div class="float" style="background-color: pink;"></div>
      <div class="float" style="background-color: silver;"></div>
    </div>
    <div style="width: 500px; height: 300px; background-color: orange;"></div>
  </body>
</html>

# inline-block 布局 (了解)

inline-block 在CSS中通过display:inline-block对一个对象指定inline-block属性，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。

因为现在使用的是 inline-block 元素，为了方便理解，可以将 inline-block 元素看成是两个文字，文字与文字之间不可能是连在一起的，肯定是有间隙的。

既然知道了是文字的问题，那我们就将父元素 container 的字体大小设置为 0，可是这个时候会发现 left 和 right 这两个单词也没有了，这是因为 left 和 right 元素继承了父级元素的字体大小，这时候我们只需要分别设置 left 和 right 元素的字体大小即可。

<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 800px;
        height: 200px;
        font-size: 0;
      }
      .left {
        font-size: 14px;
        background-color: red;
        display: inline-block;
        width: 200px;
        height: 200px;
      }
      .right {
        font-size: 14px;
        background-color: blue;
        display: inline-block;
        width: 500px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">
        left
      </div>
      <div class="right">
        right
      </div>
    </div>
  </body>
</html>

# flexbox布局

(opens new window)

布局的传统解决方案，基于盒状模型

(opens new window)，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中

(opens new window)就不容易实现；2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性；任何一个容器都可以指定为Flex布局，行内元素也可以使用Flex布局; webkit内核的浏览器，必须加上-webkit-前缀。

弹性盒子
盒子本来就是并列的
指定宽度即可

# 水平竖直居中 flex 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: gold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

# 两列布局flex的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .container{
            width: 100%;
            height: 200px;
            display: flex;
        }
        .left{
            background-color: gold;
            width: 200px;
            height: 100%;
        }
        .right{
            flex: 1;
            background-color: blue;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 
        一侧固定，另一个侧自适应
     -->
     <div class="container">
         <div class="left">
             左
         </div>
         <div class="right">
            右
        </div>
     </div>
</body>
</html>

# Grid布局（了解）

(opens new window)

网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的CSS框架达到的效果，现在浏览器内置了;Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比Flex布局强大。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* https://blog.csdn.net/ancartoon/article/details/121514585 */
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrapper{
            display: grid;
            grid-template-columns: repeat(3,1fr);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
    </div>
</body>
</html>

# columns布局（了解）

(opens new window)

CSS属性 columns 用来设置元素的列宽和列数。

例子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .content{
            columns: 3 auto;
        }
    </style>
</head>
<body>
    <div class="content">
        Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
        Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
        Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
    </div>
</body>
</html>

# 水平居中

文本 .parent{text-align:center}
单个块级元素 .son{width:1000px(定宽)，margin:0 auto}
多个块级元素 .parent{text-align:center} .son{display:inline-block}
使用绝对定位: 父相子绝，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到水平居中的目的;
任意个元素(flex): #parent{display: flex; justify-content: center; }

# 文本居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">我是文本</div>
</body>
</html>

# 单个块级元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 100%;
            height: 200px;
            background-color: gold;
        }
        .child{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中布局</div>
    </div>
</body>
</html>

# 多个块级元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 100%;
            height: 200px;
            background-color: gold;
            text-align: center;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中布局</div>
        <div class="child">居中布局</div>
        <div class="child">居中布局</div>
    </div>
</body>
</html>

# 使用绝对定位（已知父子宽高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            position: relative;
            width: 800px;
            height: 200px;
            background-color: gold;
        }
        .child{
            position: absolute;
            left: 300px;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

# 父知道宽高，子不知道（使用transform）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            position: relative;
            width: 800px;
            height: 200px;
            background-color: gold;
        }
        .child{
            position: absolute;
            /* 50%是指父宽度的50% */
            left: 50%;
            height: 200px;
            background-color: skyblue;
            /* 50%是指父宽度的50% 不行 */
            /* margin-left: -50%; */

            /* -50% 是子宽度的50% */
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">123456789</div>
    </div>
</body>
</html>

# 水平竖直居中布局解决方案-flex+justify-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 100%;
            height: 200px;
            background-color: gold;
            display: flex;
            justify-content: center;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中布局</div>
    </div>
</body>
</html>

# 竖直居中方法

单行文本 .parent{height:150px;line-height:150px;} 高度等于行高的值；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 200px;
            background-color: gold;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        Hello，CSS~
    </div>
</body>

多行文本 .parent{height:150px;line-height:30px;} 行高等于height/行数；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 50px;
            height: 150px;
            background-color: gold;
            text-align: center;
            margin: 0 auto;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        Hello Hello Hello
    </div>
</body>
</html>

图片元素: .parent{height:200px;line-height:200px;font-size:0;} .son{vertical-align:middle}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            text-align: center;
            line-height: 200px;
        }
        /* 让一张图片垂直居中：父中写 line-height=height; 子中写vertical-align: middle; */
        .son{
            /* vertical-align设置垂直对齐 */
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box">
        <img width="100px" class="son" src="./images/02.webp" alt="">
    </div>
</body>
</html>

单个块级元素:
- 使用table-cell实现: .parent{display:table-cell;vertical-align:middle}
- 使用position实现: 子绝父相，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到垂直居中的目的；
- 利用flex实现 .parent{display:flex; align-items: center;}
任意个元素：.parent{display:flex; align-items: center;} 或者 .parent{display:flex;flex-direction: column;justify-content: center;}

<!-- flex -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 200px;
            background-color: gold;
            display: flex;
            align-items: center;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

<!-- table-cell -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 200px;
            background-color: gold;
            /* 两个属性都要写 */
            display: table-cell;
            vertical-align: middle;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

<!-- 定位 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            position: relative;
            height: 200px;
            background-color: gold;
        }
        .son{
            position: absolute;
            top: 50%;
            /* margin-top: -50px; */
            transform: translateY(-50%);
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

<!-- 多个盒子 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 600px;
            background-color: gold;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .son{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>

# 居中布局(水平+垂直)

table + margin实现水平方向居中，table-cell + vertical-align实现垂直方向居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 1000px;
            height: 600px;
            background-color: gold;
            display: table-cell;
            vertical-align: middle;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

postion + transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            position: relative;
            width: 1000px;
            height: 600px;
            background-color: gold;
        }
        .son{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

flex + align-items + justify-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .parent{
            width: 1000px;
            height: 600px;
            background-color: gold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

# 圣杯布局

圣杯布局是来源于该布局效果类似圣杯而得名。简单来说，就是指三行三列布局；圣杯布局核心：主要是实现中间主体部分中的左右定宽+中间自适应的布局效果；

这里为什么center 要放在前面呢？这样做并不是说为了让主内容先渲染出来，而是说在样式加载慢或无样式的时候先向用户呈现主要内容。但最主要的还是因为SEO和无障碍方面做出的考虑。

<!-- 使用浮动实现圣杯布局 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            /* 新的盒子模型 */
            box-sizing: border-box;
        }
        .box{
            height: 300px;
            padding: 0 300px;
        }
        .left, .center, .right{
            height: 300px;
            float: left;
        }
        .left, .right{
            width: 300px;
        }
        .center{
            width: 100%;
            background-color: gold;
        }
        .left{
            background-color: red;
            /* % 是相对于父的宽的% */
            margin-left: -100%;
            position: relative;
            left: -300px;
        }
        .right{
            background-color: blue;
            margin-left: -300px;
            position: relative;
            right: -300px
        }
    </style>
</head>
<body>
    <!-- 
        圣杯布局：三行三列    左右定宽   中间自适应
        特点：center写在前面
     -->
    <div class="box">
        <div class="center">中</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

<!-- 使用flex实现圣杯布局 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .container {
            display: flex;
            flex-direction: column;
            /* 100vh表示整个页面的高度 视口高度的100% */
            height: 100vh;
        }

        .content {
            flex: 1;
            display: flex;
        }

        .content-left {
            background: blue;
            /* flex  第一个参数是放大因了了 第二个参数是缩小因子  第三个参数是flex-base */
            flex: 0 0 100px;
        }
        .content-mid {
            background: yellow;
            flex: 1;
        }
        .content-right {
            background: red;
            flex: 0 0 100px;
        }
    </style>
</head>

<body>
    <!-- header标签，section标签，footer标签是有语义化的div -->
    <div class="container">
        <header>
            头部
        </header>
        <section class="content">
            <div class="content-left">左左左左左左</div>
            <div class="content-mid">中中中中中中</div>
            <div class="content-right">右右右右右右</div>
        </section>
        <footer>
            底部
        </footer>
    </div>
</body>

</html>

# 双飞翼布局

双飞翼布局最早是淘宝团队提出，是针对圣杯布局的优化解决方案。主要是优化了圣杯布局中开启定位的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 500px;
        }
        .left, .right, .center{
            float: left;
        }
        .left, .right{
            width: 300px;
            height: 300px;
        }
        .center{
            width: 100%;
            background-color: green;
        }
        .left{
            background-color: red;
            margin-left: -100%;
        }
        .right{
            background-color: blue;
            margin-left: -300px;
        }
        .inner{
            margin-left: 300px;
            margin-right: 300px;
            background-color: pink;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="center">
            <div class="inner">中</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

# 全屏布局

全屏布局就是指HTML页面铺满整个浏览器窗口，并且没有滚动条。而且还可以跟着浏览器的大小变化而变化；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        header{
            height: 100px;
            background-color: gold;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }
        footer{
            height: 100px;
            background-color: pink;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .content{
            background-color: blue;
            position: fixed;
            top: 100px;
            bottom: 100px;
            left: 0;
            right: 0;
        }
        .content .left{
            width: 300px;
            height: 100%;
            background-color: red;
            position: fixed;
            top: 100px;
            bottom: 100px;
            left: 0;
        }
        .content .right{
            background-color: skyblue;
            position: fixed;
            left: 300px;
            right: 0px;
            bottom: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <header>Header</header>
    <div class="content">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <footer>Footer</footer>
</body>
</html>

css

01-HTML初识

# 一、认识前端

# 1，了解前后端开发

# 2，认识网页和网站

# 3，世界上第一个网页和现在的网页

# 4，前端发展

# 二、网页的组成

# 1，网页组成

# 三、浏览器介绍

# 1，浏览器介绍

# 2，渲染引擎

# 3，为什么要遵循WEB标准呢？

# 四、第一个网页

# 1，认识HTML

# 2，开发第一个网页 – 记事本

# 3，HTML文件的基本骨架

# 4，编辑器

# 5，HTML的注释

# 五、标签，元素，属性

# 1，标签

# 3，元素

# 4，元素的属性

# 5，元素的嵌套关系

# 六、骨架标签

# 1，文档声明

# 2，html元素

# 3，head

# 4，body

02-HTML常用标签

# 一、常见标签

# 1，标题标签

# 2，段落标签

# 3，换行标签

# 4，水平线标签(认识)

# 5，文本格式化（修饰）标签[双标签]

# 6，图片标签【多媒体标签】

# 8，图片路径（重点）

# 9，超链接(重点)

# 10，div元素、span元素

# 11，列表元素

# 12，表格元素

# 13，表单元素

03-额外补充

# 一、HTML全局属性

# 二、字符实体

# 三、emmet语法

04-初识CSS

# 一、认识CSS

# 二、编写CSS样式

# 三、CSS引入方式

# 三、CSS的注释

05-CSS选择器与补充内容

# 一、CSS基础选择器（selector）

# 二、CSS高级选择器（selector）

# 三、补充内容（selector）

06-CSS属性-字体和文本

# 一、CSS属性-字体

# 二、CSS属性-文本

07-CSS继承性,层叠性,元素类型

# 一、CSS继承性

# 二、CSS层叠性

# 三、元素类型

08-CSS盒子模型

# 一、CSS盒子模型

09-层布局

# 一、CSS层布局

10-浮动布局

# 一、CSS浮动布局

11-Flex布局

# 一、Flex布局介绍

# 二、Flex重要概念

# 三、相关的属性

# 四、容器属性之flex-direction

# 五、容器属性之flex-wrap

# 六、容器属性之flex-flow

# 七、容器属性之justify-content

# 八、容器属性之align-item

# 九、容器属性之align-content

# 十、项目属性之order