这里写目录标题

初识
- 空元素的两种写法
- 元素之间的嵌套
- 标准的文档结构（告诉浏览器当前使用的 HTML 标准是 html5.）
语义化
- 什么是语义化？
- 为什么需要语义化?
文本元素
- h
- p
- span（无语意）
- pre
HTML 实体
a 元素
- href 属性
- target 属性
路径的写法
- 站内资源和站外资源
- 绝对路径和相对路径
图片元素
- img 元素
- 和 a 元素联用
- 和 map 元素(同文件的 img.html 有演示内容)
- 和 figure 元素
多媒体元素
- video 元素
- audio 元素
- 兼容性
列表元素
- 有序列表
- 无序列表
- 定义列表
容器元素
- div 元素
- 语义化容器元素（合理的划分区域）
元素包含关系
为网页添加样式（开始学习 CSS）
- 术语解释
- - 选择器
  - 声明块
- CSS 代码书写位置
常见样式声明
选择器
- 简单选择器
- 选择器的组合
- 选择器的并列
层叠
- 1. 比较重要性
- 2. 比较特殊性
- 3. 比较源次序
- 应用
继承
属性值的计算过程
盒模型
- 盒子的组成部分
盒模型应用
- 改变宽高范围
- 改变背景覆盖范围
- 溢出处理
- 断词规则
- 空白处理
行盒的盒模型
- 显著特点
- 行块盒
- 空白折叠
- 可替换元素和非可替换元素
常规流
- 常规流布局
浮动
- 应用场景
- 浮动的基本特点
- 盒子尺寸
- 盒子排列
- 高度坍塌
定位
- position 属性
- 相对定位（relative）
- 绝对定位（absolute）
固定定位（fixed）
- 定位下的居中
- 多个定位元素重叠时
- 补充
- - 弹出框练习
更多的选择器
- 更多伪类选择器
- 更多的伪元素选择器
更多的样式
- 透明度
- 鼠标
- 盒子隐藏
- 背景图
- - 和 img 元素的区别
  - 涉及的 css 属性
iframe 元素（嵌入网页）
表单元素
- input 元素
- - input 元素可以制作按钮（最大的兼容性）
- select 元素
- textarea 元素
- 按钮元素
- 表单状态
- 配合表单元素的其它元素
- - lable
  - datalist
  - form 元素
  - 重置表单
  - fieldset 元素
美化表单元素
- 新的伪类
- 常见用法
表格元素
其他元素
@规则
web 字体和图标
- web 字体
- 字体图标
块级格式化上下文
布局（BFC 的实际应用）
- 多栏布局
等高
- 元素书写顺序
- 后台页面的布局
浮动的细节规则【拓展】
行高的取值【拓展】
body 的背景【拓展】
- 画布 canvas
行盒的垂直对齐
- 多个行盒垂直方向上的对齐
- 图片的底部白边
参考线-深入理解字体【拓展.难点】
- 文字
- font-size
- 行高
- vertical-align
- 可替换元素和行块盒的基线
堆叠上下文
- 创建堆叠上下文的元素
- 同一个堆叠上下文中元素在 z 轴上的排列
svg【拓展】
- 怎么使用
- 书写 svg 代码
- - 矩形：rect
  - 圆形：circle
  - 椭圆：ellipse
  - 线条：line（用坐标书写的）
  - 折线：polyline
  - 多边形：polygon
  - 路径：path
  - 示例（没记录）
数据链接【拓展】
- 如何书写
- 意义
- base64（编码，解码）
浏览器的兼容性
- 问题产生原因
- 厂商前缀
- css hack
- 渐进增强和优雅降级
- caniuse
居中总结
- 行盒（行块盒）水平居中
- 常规流块盒水平居中
- 绝对定位元素的水平居中
- 单行文本垂直居中
- 行块盒或块盒内多行文本的垂直居中
- 绝对定位的垂直居中
样式补充
- display：list-item
- 图片失效时的宽高问题
- 行盒中包含行盒或可替换元素（css 无法完全控制属性的元素）
- text-align：justify
- direction 和 writing-mode

初识

整体：element (元素)

元素=起始标签（begin tag）+结束标签（end tag）+元素内容+元素属性

属性=属性名+属性值

属性的分类：

-局部属性：某些元素的特有属性

-全局属性：所有元素通用的属性

有些元素没有结束标签叫做“空元素”
比如说：

空元素的两种写法

1. <meta charset="UTF-8">
2. <meta charset="UTF-8"/>

元素之间的嵌套

不能交叉相互嵌套

父元素，子元素，祖先元素，后代元素，兄弟元素（拥有同一个父元素的元素）

标准的文档结构（告诉浏览器当前使用的 HTML 标准是 html5.）

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body></body>
</html>

根元素

<html lang="en">
</html>

lang 属性（全局属性）：
表示该元素内部的使用的文字是使用哪一中语言书写的。

head 元素：

文档头，文档头里面的内容，不会显示到页面上

meta 元素：

<meta charset="UTF-8">  charset（局部属性）：指定网页内容编码
<meta name="viewport"content="width=device-widthinitial-scale=1.0">  适配手机端的代码

是文档的元数据：附加信息（不是用于显示的）

body 元素：

文档体页面上所有要参与显示的，无特殊说明的都在这个元素里面。

语义化

什么是语义化？

每一个 html 元素都有一个具体的含义，
所有元素与展示效果无关（元素展示到页面的效果应该由 css 决定的）
：因为浏览器有默认的 css 样式，也就是说每个元素有一些默认样式。
重要：选择什么元素，取决于内容的含义，而不是显示出的效果！

为什么需要语义化?

为了搜索引擎优化（SEO）

每隔一段时间，搜索引擎会从互联网中抓取页面源代码，语义化可以让搜索引擎更容易理解。
为了让浏览器理解网页

阅读模式，语音模式

文本元素

HTML5 中支持的元素：HTML5 元素周期表

h

标题:head

h1*6>{内容}

p

表示一个段落：paragraphs

lorem：乱数假文

p*6>lorem

如果在 lorem 后面加个’1’,就是自动生成一个单词。

span（无语意）

仅用于样式的设置

某些元素在显示的时候会独占一行（块级元素），而有些元素则不会（行内元素）

到了 HTML5，已经弃用这种说法了（元素决定含义，与显示无关），块级元素与行内元素的区别至高出现在 4.01 标准中。

display：block（变块级）
display：inline（变行级）
切换 块、行级（个人看法）

pre

表示预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格，换行，制表），在页面显示时，会被折叠为一个空格。

pre 元素内部的代表就不会出现空白折叠，会按照源代码的格式显示出来，该元素一般用于网页中显示一些代码

pre 元素功能的本质是与 css 相关的，有一个默认的 css 属性

显示代码时，通常外面套 code 元素，code 表示代码区域。

HTML 实体

实体字符，HTML Entity

感觉就像是转义字符一样。

通常用于在页面中显示一些特殊符号。

&单词;
&#数字;

-小于符号 <

-大于符号 >

-空格符号
non-breaking space

-版权符号 ©

-&符号 &

a 元素

超链接

href 属性

hyper reference: 通常用于表示跳转地址

跳转地址
跳转到某个锚点（跳到当前页面的某个位置也叫做锚链接）

id 属性：（全局属性）表示元素在文档中的唯一编号

快捷写法
a>{章节$}*6((h2>{章节$})+p>lorem1000)*6
示例看本文件的  锚链接.html合在一起:
a[href="#chapter$"]*6>{章节$}((h2[id=chapter$]>{章节$})+p>lorem1000)*6

功能链接

点击后，触发某个功能

-执行 JS 代码，javascript:

-发邮件，mailto:
(要求用户计算机上安装有邮件发送邮件：exchang)

-电话 tel:

(在手机端触发，或者要求用户计算机上有拨号软件)

target 属性

表示跳转窗口的类型（默认情况下，是在原窗口，当前页面上打开也就是_self）

_self 在当前页面打开(默认属性)

_blank 打开一个新的窗口

路径的写法

站内资源和站外资源

站内资源：当前网站的资源

站外资源：非当前网站的资源

绝对路径和相对路径

站内资源：相对路径

站外资源：绝对路径

绝对路径的书写格式

url 地址：

协议名://主机名:端口号/路径
schema://host:port/path
例如：
https://map.baidu.com:443/@11590057.96,4489812.75,4z协议名：http、https、file（一个本地文件）主机名：域名（要购买，续费）、IP地址（可能是二者之一）
http://127.0.0.1:5500端口号：如果协议是http协议，默认端口号是80，如果协议是https协议的话，默认端口号是443

当跳转目标和当前页面的协议相同时，可以省略协议名（因为它使用的是当前页面的协议）站外资源的主机名是不会相同的

相对路径

以./开头 ./表示当前资源所在的目录

可以书写…/表示返回上一级目录

相对路径中./可以不写

图片元素

img 元素

image 的缩写，空元素

src 属性：source

alt 属性：当图片资源失效的时候，显示的文字

和 a 元素联用

将 img 元素嵌套进 a 元素即可

和 map 元素(同文件的 img.html 有演示内容)

map：地图（通过点击图片不同的地方，跳转到不同的地方）

需要给图片加一个 usemap 属性。

map 的子元素：area

<a href="https://de.wordpress.org/support/topic/a-page-or-script-is-accessing-at-least-one-of-navigator-useragent/" target="_blank"><img usemap="#杜伊Map"  src="//10.idqqimg.com/eth/ajNVdqHZLLCY8iaPzaU1OsuhR9Fe6xLWmAk7TCibyVJ3eZqCTFuwA0C6ZHaKciaK6pUib0Jc4mWPfec/" alt="杜伊教育">
</a>
<map name="杜伊Map"><area shape="circle" coords="1334,203,25" href="https://www.duyiedu.com/" alt="qit1" target="_blank">
</map>

衡量坐标时，为了避免衡量误差，需要用专业的衡量工具：

ps，pxcook

和 figure 元素

指代，定义，通常把图片，图片标题，描述包裹起来（计算机能够识别这些描述是和这个图片有关的信息）

figure 元素的子元素：figcaption（标题的含义，表示指代的内容的标题）也就是说通常是表明描述内容的标题。

多媒体元素

video 元素(视频)

一般来讲，网站上的大多数视频都是有版权受保护的，所以多半是引入的本地资源

默认情况是没有显示任何播放控件的

audio 元素（音频）

video 元素

controls 属性：控制控件的显示，取值只能为 controls

某些属性：只有两种状态 1. 不写 2. 取值为属性名，这种属性叫布尔属性，（在 HTML5 中可以不写）

autoplay 属性：（进入网页过后视频自动播放）布尔属性

muted 属性：（静音播放）布尔属性

loop 属性：（循环播放）布尔属性

audio 元素

与 video 元素一样！

兼容性

旧版本的浏览器不支持这两个元素
不同的浏览器支持的音、视频格式可能不一致

所以通常是做两个视频

在 video 元素中加入一个子元素 source

后缀：mp4、webm

列表元素

有序列表

ol:ordered list（有序列表）

有序列表的子元素只能是 li

type 属性：值为 1，a，i，A，I

a 表示小写英文字母编号
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1 表示数字编号（默认）
除非在封闭的的 <li> 元素中使用不同的type属性，否则类型集将用于整个列表。

这个 type 属性由于在 HTML4 中被弃用，于 HTML5 中被重新引入，所以除非列表中的序号很重要（比如：法律条文，技术文件中的条目通常需要被引用），否则请使用 CSS 来替代。

也就是说这个样式主要还是用 CSS 来控制。

li：list item（子元素，表示列表项）

无序列表

把 ol 改成 ul (同样具有 li 子元素)

ul: unordered list

无序列表经常用于制作菜单或新闻列表

定义列表

通常用于一些术语的定义

dl：definition list（定义列表）

两个子元素：

dt：definition title（定义的标题）

dd：definition description（术语的描述）

容器元素

容器元素：该元素代表一个块区域，内部放置其他元素。

div 元素

没有语义

语义化容器元素（合理的划分区域）

header：通常用于表示页头，也可以表示文章的头部。

footer：通常用于表示页脚，也可以表示文章的尾部。

article：通常用于表示整篇文章。

section：通常用于表示文章的章节。

aside：通常用于表示侧边栏。（附加的信息）

元素包含关系

以前：块级元素可以包含行级元素，反之不可行，a 元素除外

元素的包含关系由元素的内容类别决定，

例如：查看 h1 元素中是否包含 p 元素（去 MDN 查）

总结：

容器元素中可以包含任何元素
a 元素中几乎可以包含任何元素
某种元素中有固定的子元素
标题元素和段落元素不能相互嵌套，并且不能包含容器元素

为网页添加样式（开始学习 CSS）

术语解释

 h1{color: brown;background-color:blueviolet;text-align:center;}

css 规则=选择器+声明块

选择器

选择器：选择元素

存在优先级(重要性)：权重计算；

id 选择器：选中的是对应 id 值的元素
元素选择器
类选择器（推荐）

声明块

出现在大括号中

声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式规则

CSS 代码书写位置

内部样式表

书写在 style 元素内部（该元素通常在 head 元素中）

内联样式表（元素样式表）

写在元素内部

<h1 style="">现在开始添加样式
</h1>

外部样式表(推荐使用)

将样式写到独立的 css 文件中

在 head 标签中添加一个 link 元素

1）可以解决多页面样式重复的问题

2）有利于浏览器缓存，从而提高页面的响应速度

3）有利于代码分离（HTML 和 CSS 分开，阅读简洁）

常见样式声明

color

元素内部的文字颜色

预设值：已经定义好的颜色（单词）

三原色，色值：光学三原色（红，绿，蓝），每个颜色可以使用 0~255 之间的数字来表示，色值（red、green、blue）

rgb表示法
rgb（0，255，0）hex（16进制）表示法
#红绿蓝(每个颜色站两位)
#008c8c

淘宝红：#ff4400 #f40

background-color

元素背景颜色

font-size

元素内部文字的尺寸大小

1）px：（绝对单位）像素，简单的理解为文字的高度占多少个像素

2）em：（相对单位）相对于父元素的，

比如：

2em 指的是父元素字体大小的 2 倍

每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（ HTML）则使用基准字号（浏览器内部设置的字号）

user agent UA 用户代理（浏览器）

font-weight

文字粗细程度，可以取值数字，也可以取值为预设值

strong 属性值默认都有加粗效果

em 属性值默认是斜体

font-family

文字类型

必须用户计算机中存在的字体才会有效

使用多个字体以匹配环境

sans-serif 非衬线字体（一般结尾添加这个属性值，避免无法显示）

衬线字体通常用于打印的时候要好看一些

font-style

字体样式，通常用它设置斜体

i 元素，默认样式，是倾斜字体，实际使用中，通常用它表示一个图标（icon）

text-decoration

文本修饰：给文本加线

a 元素的默认演示就是：

text-decoration: underline

del 属性值:表示废弃、错误的内容

s 属性值：表示过期的内容（默认样式也是中间一条横线）

text-indent

首行文本缩进

line-height

行高：每行文本的高度，该值越大，每行之间的距离也就越大

设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字,表示为相对于当前元素的大小

width

宽度

height

高度

letter-space

文字之间的间隙

text-align

元素内部文本之间的水平排列方式

选择器

选择器：帮助你精准的选中想要的元素

简单选择器

id 选择器
元素选择器
类选择器
通配符选择器

*, 选中所有元素

属性选择器

根据属性名和属性值选中元素

[href="https://www.baidu.com/"]{
color: #008c8c;
}

伪类选择器

选中某些元素时的某种状态

a:hover{
color: brown;
}

hover：（鼠标悬停的状态）

active：（激活状态下的鼠标按下去的状态）

link：超链接未访问时的状态

visited：超链接访问过后的状态

和 hover 一样

书写顺序：link、visited、hover、active

爱恨法则（love hate）

伪元素选择器

before

after

span::before{content: "《";
}
span::after{content: "》";
}

选择器的组合

表示并且（两个选择器连着书写，不要空格）
后代元素——空格

.red li{

}

(在类选择器选中里面的 li 元素)
子元素—— >

相邻兄弟元素—— +

.special{
color:blue;
}.special+li{color:#008c8c;
}

后面出现的所有兄弟元素—— ~
（同上）

选择器的并列

多个选择器，用逗号分隔

（在两个选择器的样式相同时，将两个选择器用，隔开公用一个样式声明块即可）

语法糖（方便记忆）

层叠

声明冲突：当同一个样式多次应用到同一个元素时，就会产生声明冲突

层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

1. 比较重要性

重要性从高到低

作者样式表：开发者书写的样式

1）作者样式表中的！important 样式（最高级）

.text{color:red !important;
}

2）作者样式表中的普通样式

3）览器的默认样式

2. 比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器计算出一个四位数（xxxx），数字越大·越特殊

千位：如果是内联样式则记作 1，否则 0
百位：等于选择器中所有 id 选择器的数量
十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
个位：等于选择器中所有元素选择器、伪元素选择器的数量

3. 比较源次序

如果这个四位数相同

代码书写靠后的胜出

应用

重叠样式表

书写一些作者样式，覆盖浏览器的默认样式

重置样式表->浏览器的默认样式表

常见的重置样式表：normalize.css, reset.css, meyer.css

爱恨法则（按照顺序：未访问，访问过，悬停，按下）

注意源次序：也就是说靠后的代码会覆盖之前的

link > visited >hover > active

继承

子元素会继承父元素的某些 CSS 属性

通常：和字体，文字相关的属性都可以继承（bgc 是不可以被继承的）

属性值的计算过程

一个元素一个元素依次渲染，顺序按照页面文档的树形目录格式进行

渲染每个元素的前提条件：该元素的所有 css 属性必须有数值

通常将一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程叫做 CSS 属性值计算过程

确定声明值：参考样式表中没有冲突的声明，作为 css 属性值
层叠冲突：对样式表有冲突的声明使用层叠规则，确定 css 属性
使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
使用默认值：对仍然没有值的属性，使用默认值

强制继承（在需要继承父元素的属性的属性值的位置写 inherit ）

特殊的两个 css 取值：

inherit：手动（强制）继承，将父元素的值取出应用到该元素
initial：初始值，将该元素设置为默认值

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型：

行盒：display 属性等于 inline 的元素
块盒：display 属性等于 block 的元素

（display 的默认值时 inline）

display 属性：改变显示模式 none（隐藏,不占位置），block，inline

行盒在页面中不换行，块盒独占一行

盒子的组成部分

无论是行盒还是块盒都由以下几个部分组成、从内到外

内容 content

width，height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的内容盒 content-box

填充（内边距） padding

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom

padding：简写属性

padding：上右下左

padding：60px 30px 40px 80px;padding:60px 80px(上下，左右)padding:80px(四个一样)

设置 4 个参数：上，右，下，左
设置 3 个参数：上，左右，下
设置 2 个参数：上下，左右
设置 1 个参数：上下左右

填充区+内容区=填充盒 padding-box

边框 border

边框=边框样式 + 边框宽度 + 边框颜色

border-style ，border-width ，border-color

边框颜色默认是字体颜色

外边框 margin（盒子之间的距离）

边框到其他盒子的距离

盒模型应用

改变宽高范围

默认情况下，width 和 height 设置的是内容盒宽高

页面重构师：将 psd 文件（设计稿）制作为静态页面

衡量设计稿尺寸的时候，往往使用的是边框盒，但是设置的 width 和 height 设置的是内容盒

解决方法：

精确计算
css3 的属性：box-sizing（默认值是 content-box 内容盒，改成 border-box 边框盒）

改变背景覆盖范围

默认情况下，背景覆盖边框盒（就是 bgc 覆盖整个边框）

可以通过 background-clip 修改，整个背景颜色的覆盖范围

溢出处理

overflow，控制内容溢出边框后的处理方式

属性值：

scroll 生成滚动条（进一步可以控制生成横向，纵向的滚动条）
hidden 隐藏
visible 可见（默认值）
auto 表示自动的意思（浏览器根据边框和文本的大小来是否自动显示滚动条）

断词规则

换行由断词规则决定的

word-break，会影响文字在什么位置被截断换行

属性值

normal：普通方式，CJK 字符（文字位置截断），非 CJK 字符（在单词位置截断）
break-all：截断所有，所有字符都在文字处截断
keep-all：保持所有，所有字符在单词处截断

空白处理

white-space : nowrap

这和空白折叠的 pre 元素有联系

pre 元素的 white-space 属性值默认是“ pre ”

行盒的盒模型

常见的行盒：包含具体内容的元素

例如：span、strong、em、i、img、h1、p、video，audio

显著特点

盒子沿内容结束（只改变宽、高不改变内容，那么是无效的）
行盒不能设置宽、高

调整行盒应该使用字体大小、行高、字体类型、间接调整行盒

内边距（padding 填充区）

水平方向有效，会影响空间，垂直方向只会改变背景，不会实际占据空间

边框

和 padding 一样（水平方向有效，会影响空间，垂直方向只会改变背景，不会实际占据空间）

外边距

和 padding 一样（水平方向有效，会影响空间，垂直方向只会改变背景，不会实际占据空间）

总之：给行盒设置宽、高就是错误的（a 元素就是行盒）

行块盒

display：inline-block 的盒子

不独占一行
盒模型中所有尺寸都有效

这个经常用来做分页

空白折叠

空白折叠，发生在行盒（行块盒）内部或行盒之间

可替换元素和非可替换元素

大部分的元素，页面上显示的效果，取决于元素内容，称为非可替换元素

少部分元素，页面上显示的效果，取决于元素属性，称为可替换元素

可替换元素：img（取决于 src 属性）、video、audio、

绝大部分可替换元素均为行盒

可替换元素类似于行块盒（设置宽、高均有效）

常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子排列规则

视觉格式化模型大体上将页面中盒子的排列分为三种方法：

常规流
浮动
定位

常规流布局

常规流、文档流、普通文档流、常规文档流

所有元素默认情况下都属于常规流布局

总体规则：块盒独占一行，行盒水平排列

包含块（containing block）：每个盒子都有它的包含块，包含块决定了它的活动范围（决定了它的排列区域）

绝大部分情况下：盒子的包含块为其父元素的内容盒

块盒

每个块盒的总宽度，必须刚好等于包含块的宽度

宽度的默认值是 auto

margin 的取值也可以是 auto，默认值是 0

auto：将剩余空间吸收掉

width 吸收能力强于 margin

若宽度，边框，内边距，外边距计算后，任然有剩余空间，该剩余空间被 margin-right 全部吸收

在常规流中，要使块盒在其包含块中居中，可以定宽，然后左右 margin 设置为 auto

每个块盒垂直方向上的 auto 值

height：auto （这时子元素的高度会被内容撑开，子元素又会将父元素的高度撑开，因为也是 auto）

margin：auto 表示 0

百分比取值

padding、宽、margin 可以取值百分比

以上的所有百分比是相对于包含块的宽（宽度的百分比！）

高度的百分比：

1）包含块的高度取决于子元素的高度，设置百分比无效
2）包含块的高度不取决于子元素的高度，百分比相对于父元素的高度

（就是说父元素设置了高度，子元素才能运用百分比）

上下外边距的合并

两个常规流块盒，上下外边距邻相，会自动进行合并，

两个外边距取最大值

父子元素的外边距折叠也是这样（相邻）

将两个外边框加东西隔开就行了（padding、border 等）

浮动

视觉格式化模型，大体上将页面中的盒子排列分为三种方式

常规流
浮动
定位

应用场景

文字环绕
横向排列

浮动的基本特点

修改 float 属性值为：

left：左浮动，元素靠左靠上
right：右浮动，元素靠右靠上

元素默认值为 none

当一个元素浮动后，元素必定为块盒（强制将 display 属性修改为 block）
浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

宽度为 auto 时，适应内容宽度（也就是说如果没有内容，宽度就是 0）
高度为 auto 时，与常规流一样（适应内容的高度）
margin 为 auto 时，为 0（任意方向）
边框，内边距，百分比设置和常规流一样

盒子排列

左浮动的盒子靠左靠上排列
右浮动的盒子靠右靠上排列
浮动盒子在包含块中排列时，会避开常规流盒子
常规流块盒在排列时无视浮动盒子（将浮动盒子视而不见）
行盒在排列时会避开浮动盒子
外边距合并不会发生（常规流会发生）

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字
（将文字写在块盒中，会自动生成该行盒叫做匿名行盒，是看不到的）

高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

解决方式：清除浮动，涉及 css 属性：clear

默认值：none
left：清除左浮动，该元素必须出现在前面所有的左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有的右浮动盒子的下方
both：清除左、右浮动，该元素必须出现在前面所有浮动盒子的下方

也就是说通过 clear 属性，能过让特定的盒子出现在其它的下方，从而间接的实现，浮动盒子将高度支撑起来，以达到目的

解决高度坍塌：有两种方法见同文件示例

定位

视觉格式化模型，大体上将页面中的盒子的排列分为三类

常规流
浮动：float
定位：position

定位：手动控制元素再包含块中的精准位置

涉及的 css 属性：position

position 属性

默认值：static。静态定位（不定位）
relative：相对定位
absolute：绝对定位
fixed：固定定位

一个元素，只要 position 的取值不是 static，认为这个元素时一个定位元素

定位元素会脱离文档流（相对定位除外）

一个脱离了文档流的元素

文档流中的元素摆放时，会忽略脱离了文档流的元素
文档流中元素计算高度时，会忽略脱离了文档流的元素

相对定位（relative）

通常用于给绝对定位元素，做服务的，也就是为绝对定位（absolute）提供有定位元素的祖先元素

不会导致元素脱离文档流，只是让元素在原来的位置上进行偏移

可以通过四个 css 属性对设置其位置

left
right
top
bottom

相对定位下，盒子的偏移不会对其他盒子造成影响

出现矛盾：以上，左为基准（默认）

绝对定位（absolute）

通常用于做一个小图片，重叠在其上

宽高为 auto，适应内容，随内容变化
包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块，若找不到则它的包含块是一整个网页，（也叫初始化包含块）

固定定位（fixed）

其他情况盒绝对定位完全一样

区别就是：包含块不一样：固定为视口（浏览器的可视窗口）

固定定位的水平垂直居中,处理办法：

先取top，left，bottom，right（取其中两个）之后再通过margin-right···等取图片数值的一半，来达到效果

定位下的居中

某个方向上的居中：

三个方面的设置

定高（宽）
将左右（上下）的距离设置为 0（属性值必须都要设置）
将左右（上下）margin 设置为 auto

绝对定位和固定定位中，margin 为 auto 时，会自动吸收剩余空间

多个定位元素重叠时

堆叠上下文

设置 z-index（这个 z 轴相当于垂直屏幕）该值越大，越靠近用户

只有定位元素设置 z-index 有效

z-index 可以是负数，如果是负数，则遇到常规流，浮动元素，则会被该元素覆盖

补充

所有绝对定位、固定定位和浮动的元素的display属性一定是block
定位，浮动都会导致元素的宽、高自动
绝对定位，固定定位绝对是块盒
绝对定位，固定定位元素一定不会浮动
没有外边距合并
在涉及固定定位，绝对定位注意设计宽度，因为它默认是 auto

弹出框练习

制作透明

每个颜色都具有透明通道， 0 ~ 1 （1 是完全不透明，0 是完全透明）

rgba（红、绿、蓝、alpha）
hex： #红绿蓝透

类似于 a 元素的小手的光标（也是通过设置样式属性实现的）

cursor: pointer;:not-allowed;  //禁止

input 元素可以制作按钮（最大的兼容性）

当 type 属性为 reset、button、submit 时，input 表示按钮（重置、普通按钮、提交按钮）

默认选中一个选项需要添加一个布尔属性 “checked = ‘ checked’ ”

select 元素

让下拉列表选择框可以多选：添加 multiple 属性（布尔属性）

 <select multiple = "multiple"><option selected="selected">哈尔滨</option><option >北京</option><option >武汉</option></select>

通常和 option 元素配合使用，添加默认值需要添加布尔属性

<option selected="selected">哈尔滨</option>

分组:optgroup

<optgroup label="才艺表演"><option>东星耀阳</option>
</optgroup>

多选在 select 元素中，添加布尔属性：multiple

textarea 元素

文本域，多行文本框

一个重要的属性：

resize:none;  //不能改变:vertical  //垂直方向上可以改变:horizontal  //水平上可以改变:both  // 都可以

设置多行文本框是否可以被用户改变尺寸

按钮元素

button，

type 属性：button，reset，submit 默认值是 submit

表单状态

readonly 属性：布尔属性，是否只读，不会改变表单显示样式

disabled 属性：布尔属性，是否禁用，会改变表单显示样式

配合表单元素的其它元素

lable

普通元素，通常配合单选和多选框使用，表示一个标签文本，

显式关联
通过 for 属性，让 lable 元素关联一个表单元素，for 属性书写表单元素 id 的

男女
隐式关联
如下

男

datalist

数据列表

该元素不会显示到页面，通常用于和普通文本框配合，子元素是 option

也需要和表单元素关联起来不过是

在 datalist 给个 id 属性，给 input 元素一个 list 属性，属性值等于 id 的值

form 元素

通常情况下会将整个表单元素放置到 form 元素内

作用是当提交表单时，会将 form 元素内的表单内容以合适的方式提交到服务器

form 元素对开发静态页面没有什么影响

重置表单

这个重置的就是一整个 form 表单包含的区域（同时，从另一方面说明，一整个表单区域建议使用 form 元素，而不是 div）

<button type = "reset">重置表单</button>

fieldset 元素

表单分组，将表单内容分组，语义化

子元素：legend，表示这个分组的标题

美化表单元素

新的伪类

focus

元素聚焦时的样式

有许多的表单在聚焦时存在一个聚焦是的样式，一般取消这个样式就是

outline：none；

有时候可能会误认为是外边框，其实是聚焦的问题

checked

单选和多选框被选中的样式

常见用法

重置表单元素样式
设置 textarea 是否允许调整尺寸

设置 css 属性 resize

both：默认值，两个方向都可以调整尺寸
none：不能调整尺寸
horizontal：水平方向可以调整尺寸
vertical：垂直方向可以调整尺寸

文本框边缘到内容的距离

方式一：使用 padding
方式二：使用 text-indent 首行缩进

控制单选和多选的样式

表格元素

在 css 技术出现之前，网页通常使用表格布局。

后台管理系统中可能会使用表格

前台：面向用户

后台：面向管理员，对界面要求不高，对功能性要求高

表格不再适用于网页布局？表格的渲染速度过慢

表格 table、标题 caption、表头 thead、表体 tbody、表尾 tfoot、行 tr、标题单元格 th、普通单元格 td

其他元素

abbr 元素

缩写词

time

提供给浏览器、搜索引擎的时间

b （bold）

以前是一个无语义元素，主要用于加粗字体

q （）

表示一小段引用文本

属性 cite，表示引用的来源

blockquote

大段引用文本

属性 cite，表示引用的来源

无语义
在文本中换行

下划线，分割

meta

还可以用搜索引擎优化（SEO）

link

链接外部资源（CSS、图标等）

rel 属性：relation，链接的资源和当前网页的关系(shortcut icon \ stylesheet)

type 属性 1：链接的资源的 MIME 类型（可以省略）

@规则

at-rule：@规则、@语句、css 语句、css 指令

import（一般是用在 css 指令）

@import ”路径“;

导入另外一个 css 文件

charset

@charset ”utf-8“；（该指令必须写到第一行）

告诉浏览器该 css 文件，使用的字符编码集是 utf-8

web 字体和图标

web 字体

解决用户电脑上没有安装相应字体的问题，强制让用户下载该字体

使用@font-face 规则制作一个新字体，通过 src 属性指定字体文件

font-family:"good night";
src:url("");

字体图标

iconfont.cn 阿里矢量图标

Unicode 方式：不需要新建一个 css 文件
Font class 方式：

分为：在线和离线两种应用方式

块级格式化上下文

全称 Block Formatting Context，简称 BFC

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局

常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动元素，定位元素（行盒会避开浮动元素）

单纯的从内容上：
视觉格式化上下文>块级格式化上下文>具体的规则

BFC 渲染区域：

这个区域由某个 HTML 元素创建的，以下元素会在其内部创建 BFC 区域（常见的）：

根元素（意味着，元素创建的 BFC 区域，覆盖了网页中所有的元素）
浮动和绝对定位元素
overflow 属性值不等于 visible 的块盒（设置值为 hidden ，推荐）

怎么理解“独立的”呢？

不同的 BFC 区域，他们进行渲染时互不干扰

创建的 BFC 的元素，隔绝了它的内部和外部的联系，内部的渲染不会影响到外部

创建BFC 区域不仅仅解决的是margin坍塌的问题

具体规则：

创建的 BFC 元素，它的自动高度需要计算浮动元素（解决高度坍塌）（不会计算绝对定位、固定定位，因为他们已经完全脱离了常规流）
创建的 BFC 元素，它的边框盒不会与浮动元素重叠（创建了 BFC 区域的元素会主动避开浮动元素）
创建的 BFC 元素，不会和它的子元素进行外边距合并（原本是会出现外边距合并的）（就相当于父元素创建 BFC 区域后，就对子元素规定了特定区域，因此渲染互不干扰）

布局（BFC 的实际应用）

多栏布局

两栏布局：

（常见的两栏布局，侧边栏和主区域，一般侧边栏要定宽。在主区域不定宽的情况下，主区域创建 BFC 区域，会主动避开浮动元素，这种情况下，中间区域的宽度是自适应的）

三栏布局：

（常见的三栏布局，侧边栏和主区域，一般侧边栏要定宽。在主区域不定宽的情况下，主区域创建 BFC 区域，会主动避开浮动元素，这种情况下，中间区域的宽度是自适应的）

等高

css3 的弹性盒
js 控制
伪等高

元素书写顺序

后台页面的布局

浮动的细节规则【拓展】

左浮动的盒子向左像上排列
右浮动的盒子向右像上排列
浮动盒子的顶边不得高于上一个盒子的顶边（注意）
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能够容纳盒子，然后再向左或向右移动

行高的取值【拓展】

line-height（尽量不加单位）

px，像素值
直接书写无单位的数字（先继承，再计算）
em 单位（行高为字体大小的两倍，先计算像素值，再继承）
百分比

body 的背景【拓展】

画布 canvas

一块区域

特点：

最小宽度为视口宽度
最小高度为视口高度

HTML 元素的背景

覆盖画布

很多时候啊，我们设置了背景图片，但实际上背景图是不占用空间的，这就导致，当我们继续在这个有背景图片的区域再进行编写的时候，后面的会直接将背景覆盖掉，

解决办法：设置这个背景所在区域的padding，把后面的内容挤压到别的地方

body 元素的背景

如果 HTML 元素有背景，body 元素正常（背景覆盖边框盒）

如果 HTML 元素没有背景，body 元素的背景覆盖画布

关于画布背景图

背景图的宽度百分比，是相对于视口
背景图的高度百分比，是相对于 HTML 元素高度（网页高度）
背景图的横向位置百分比，预设值，都是相对于视口
背景图的纵向位置百分比，预设值，相对于网页高度

行盒的垂直对齐

多个行盒垂直方向上的对齐

给没有对齐的元素设置一个 vertical-align

预设值：top、bottom、middle、text-top、text-bottom、sub…等等

数值：

百分比：

图片的底部白边

图片的父元素是一个块盒，块盒高度自动，图片底部和父元素之间往往会出现空白

解决办法：

设置父元素的字体大小（font-size）为 0（会有副作用，文字会看不见）
将图片设置成块盒

参考线-深入理解字体【拓展.难点】

文字

文字是通过一些文字制作软件制作的比如：fontforge

制作文字时，会有几根参考线，不同的文字类型，参考线不一样，而同一种字体类型，参考线是一样的。

font-size

字体大小，设置的是文字的相对大小

文字的相对大小：1000、2048、1024

文字顶线到底线的距离，是文字的实际大小（content-area，内容区）

行盒的背景，覆盖 content-area

行高

顶线向上延申的空间，和底线向下延申的空间，两个空间相等，该空间叫做 gap（空隙）

gap 默认情况下，是字体设计者决定的

top 到 bottom，叫做 virtual-area（虚拟区域）

行高就是 virtual-area（当 gap 区域是负值的时候，会有问题）

line-height：normal，默认值，使用文字默认的 gap

行盒的背景设置的是顶线（text-top）到底线（text-bottom）之间的区域，上下的 gap 区域不会设置到

文字不一定出现在一行的最中间
content-area 一定出现在 virtual-area 的正中间（因为上下 gap 区域是等高的）

vertical-align

决定参考线：font-size、font-family、line-height

一个元素如果子元素出现行盒，该元素内也会产生参考线

vertical-align 的属性值：

baseline：该元素的基线与父元素的基线对齐

super：该元素的基线与父元素的上基线对齐

sub：该元素的基线与父元素的下基线对齐

text-top：该元素的 vertical-area 的顶边对齐父元素的 text-top

text-bottom：该元素的 vertical-area 的底边对齐父元素的 text-bottom

top：该元素的 vertical-area 的顶边对齐父元素的顶边（该元素的最高的顶边）

bottom：该元素的 vertical-area 的底边对齐父元素的底边（该元素的最低的底边）

middle：该元素的中线（content-area 的一半），与父元素二点 X 字母高度一半的位置对齐

行盒组合起来，可以形成多行，每一行的区域叫做 line-box，line-box 的顶边是该行行盒的最高的顶边，底边是该行行盒最低的底边

实际，一个元素的实际占用高度（高度自动），高度的计算是通过 line-box 计算

行盒：inline-box

数值：相对于基线的偏移量，向上为正数，向下为负数

百分比：相对于基线的偏移量，是相对于自身 vertical-area

line-box 是承载文字内容的必要条件，以下情况不生成行框：

某元素的内部没有任何行盒
某元素字体大小为 0

可替换元素和行块盒的基线

图片：基线位置位于图片的下外边距

表单元素：基线位置在内容的底边

行块盒：

行块盒最后一行是有 line-box，用最后一行的基线作为整个行块盒的基线
如果行块盒内部最后一行没有行盒，则使用下外边距作为基线

堆叠上下文

堆叠上下文（stack content）

它是一块区域，这个区域是由某个元素创建，它规定了该区域中的内容在 z 轴上排列的先后顺序

创建堆叠上下文的元素

html 元素（根元素）
设置了 z-index 数值（非 auto 值）的定位元素

同一个堆叠上下文中元素在 z 轴上的排列

从后到前的排列顺序：（远离到靠近）

创建堆叠上下文的元素的背景和边框
堆叠级别为负值的堆叠上下文
常规流非定位的块盒
非定位的浮动盒子
常规流非定位的行盒
任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
堆叠级别为正值的堆叠上下文

级别相同的按照源次序

每个堆叠上下文独立于其他堆叠上下文，他们之间不能相互穿插。（也就是要区别父子元素、兄弟元素）

svg【拓展】

svg：scalable vector graphics，可缩放的矢量图

该图片是使用代码书写组成的
缩放不会失帧
内容轻量

怎么使用

svg 可以嵌入浏览器，也可以单独成为一个文件

xml 语言，svg 使用该语言定义

这个 svg 可以用 embed、object、img、bgc、iframe 引入外部文件

<embed src="imgs/weixin.svg" type="imge/svg+xml">

书写 svg 代码

矩形：rect

圆形：circle

椭圆：ellipse

线条：line（用坐标书写的）

折线：polyline

多边形：polygon

、

路径：path

元素用于定义一个路径。

下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc

A 半径 1 半径 2 顺时针旋转角度劣弧（0）优弧（1）顺时针（1）逆时针（0）

<path d="M0 150 A150 150 0 0 1 150 0" fill="none" strock:#000; strock-width=5"/>

Z = closepath

示例（没记录）

数据链接【拓展】

data url

如何书写

数据连接：将目标文件的数据直接书写到路径位置（也就是不写文件名，直接书写数据链接）

语法：data:MIME,数据

意义

优点：

减少了浏览器中的请求

请求：

响应：

减少了请求中浪费的时间

有利于动态生成数据

缺点：

增加了资源的体积

导致了传输内容增加，从而增加了单个资源的传输时间

不利于浏览器的缓存

浏览器通常会缓存图片文件，css 文件，js 文件。（这种方式不会缓存，只会再读一次数据）

会增加源资源的体积到原来的 4/3（与 base64 的编码方式有关）

应用场景：

当请求单个单词体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接
图片由其他代码动态生成，并且图片较小，可以使用数据链接

base64（编码，解码）

一种编码方式

通常用于将一些二进制数据，用一个可书写的字符串表示

浏览器的兼容性

问题产生原因

市场竞争
标准版本的变化

厂商前缀

比如：box-sizing，谷歌旧版本浏览器中使用-webkit-box-sizing：border-box

市场竞争，标准未发布
标准仍在讨论，浏览器厂商希望先支持

常见的厂商前缀：

IE：-ms-
chrome,safari：-weblit-
opera：-o-
firefox：-moz-

浏览器再处理样式或元素时，使用以下方式：
当遇到无法识别的代码时，直接略过

谷歌浏览器的滚动条样式(谷歌特有)

::-webkit-scrollbar{

}

实际上，在开发中使用自定义的滚动条，往往是 div+css+js 来实现的

多个背景图中选一个作为背景

background-image：-webkit-image-set(url(“img/small.jpg”) 1x ，url(“img/big.jpg”) 2x );

css hack

跟据不同的浏览器(主要针对 IE)，设置不同的样式和元素

样式

IE 中，css 的特殊符号

*属性，兼容 IE5\IE6\IE7
_属性，兼容 IE5\IE6
属性值\9，兼容 IE5~IE11
属性值\0，兼容 IE8~IE11
属性值\9\0，兼容 IE9~IE10

条件判断

渐进增强和优雅降级

两种解决兼容性问题的思路，会影响代码的书写风格

渐进增强：先适应大部分的浏览器，然后针对新版本的浏览器加入新的样式

书写代码时，先尽量避免书写有兼容性的代码，完成之后，再逐步加入新的代码

优雅降级：先制作完整的功能，然后针对低版本的浏览器进行特殊处理

书写代码时，先不用特别在意兼容性，完成整个功能后，在针对低版本浏览器处理样式

caniuse

查找 css 兼容性问题

caniuse.com

居中总结

居中：盒子在其包含块中居中

行盒（行块盒）水平居中

直接设置行盒（行块盒）父元素的 text-align：center

常规流块盒水平居中

定宽，设置左右 margin 为 auto

绝对定位元素的水平居中

定宽，设置左右的坐标为零（left：0，right：0），将左右 margin 设置为 auto

实际上固定定位是绝对定位的特殊情况

单行文本垂直居中

设置文本所在元素的行高为整个区域的高度（line-height 属性值=height 属性值）

行块盒或块盒内多行文本的垂直居中

没有完美方案，设置盒子上下内边距相同，来达到类似的效果。不过这样不能知晓盒子的高度

绝对定位的垂直居中

定高，设置上下的坐标为零（top：0，bottom：0），将上下的 margin 设置为 auto

样式补充

display：list-item

设置为该属性值的盒子本质上仍然是一个块盒，但同时该盒子会附带另一个盒子

元素本身生成的盒子叫做主盒，附带的盒子称为次盒子，次盒子和主盒子水平排列

ul li 的 display 属性就是 list-item

涉及的 css 属性

list-style-type（可继承属性）

设置次盒子中内容类型

list-style-position

设置次盒子相对于主盒子的位置（默认值是 outside）

速写属性 list-style

清空次盒子

list-style：none

图片失效时的宽高问题

如果 img 元素的图片链接失效，img 元素的特性和普通行盒一样，无法设置宽高

将 img 元素的 display 属性设置为行盒或者行块盒时，图片在失效时设置的宽高有效

行盒中包含行盒或可替换元素（css 无法完全控制属性的元素）

行盒的高度与他内部的行块盒或可替换元素的高度无关，行盒的高度和字体大小有关系，但是高度会被块盒撑开

text-align：justify

text-align：

left：左对齐
right：右对齐
center：居中
justify：除最后一行外，分散对齐（可以给元素设置一个伪元素 after，那么最后一行就是 after，从而实现全部分散对齐）

direction 和 writing-mode

开始 start -> 结束 end
左 left -> 右 right

direction 设置的是开始到结束的方向

writing-mode：设置文字书写方向

关于前端的HTML+CSS基础知识汇总（较为全面）相关推荐

前端html+css基础知识汇总（个人学习内容总结，希望对你有帮助内含部分代码）
*小知识点 0.定位和浮动做布局,移动transform做效果例如;京东盒子上升效果快捷键:ctrl+f 快速查找 ctrl+g 快速跳转行号 1.text-aline:center可以让什么元素 ...
前端html和css基础知识
第一天常用的浏览器和内核 1.谷歌(chrome)前端工程师必备 2.firefox 火狐 3.safari iphone ipad 苹果 4.IE/Edge微软 5.Opera 欧鹏 HTML骨架 ...
CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}
1.CSS的作用: 通过css达到美化网页的效果 2.选择器: ✔ 基础选择器(重点) ◆标签选择器(重点学习) ◆类选择器(重点学习) ◆ID选择器 ◆通配符选择器 ✔ 复合选择器(重点) ◆后代选 ...
前端开发入门：html和css基础知识回顾2
HTML+CSS基础知识 1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被 ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
CSS基础知识（一）：选择器
文章目录前言一.CSS基础知识二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
【2022前端面试】CSS面试题汇总（加紧收藏）
[2022前端面试]CSS面试题汇总(加紧收藏) 更新时间:2022年3月2日. 本文致力于建设前端面试题库,欢迎兄弟们投稿哈! 大纲 CSS整体的在上次的篇幅上有了较大的变化,画一个思维导图及时更新 ...
脑科学与脑电基础知识汇总
点击上面"脑机接口社区"关注我们更多技术干货第一时间送达脑科学与脑电基础知识汇总该部分汇总了社区分享的部分脑科学.EEG.fNIRS.BCI.人机交互等相关知识. 脑电与情绪 ...

关于前端的HTML+CSS基础知识汇总（较为全面）