HTML + CSS浏览器大致由外壳（Shell）和内核（Core，其中包括了JS执行引擎，渲染引擎）两部分组成常用浏

浏览器大致由外壳（Shell）和内核（Core，其中包括了JS执行引擎，渲染引擎）两部分组成

常用浏览器的内核：

IE：Trident
Firefox：Gecko
Chrome：Webkit、Blink
Safari：Webkit
Opera：Presto、Blink

第一个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
</html>

元素

元素（Element），也常称为标签、标记

大部分元素都包含起始标记（begin tag）和结束标记（end tag）

起始标记与结束标记之间可以添加元素内容，元素内容可以是一段字符，也可以是其他元素

在起始标记中还可以加入元素属性

属性 = 属性名 + 属性值

属性名中必须是全小写的形式，若存在多个单词，则使用短横线分隔

属性可分为局部属性与全局属性：

局部属性：某些元素特有的属性，如a元素的href
全局属性：所有元素都可具有的属性，如title

小部分元素没有（也不能有）结束标记，它们被称为空元素

文档声明

<!DOCTYPE html>

上面的文档声明，它的作用是告诉浏览器，当前HTML文档使用的标准是HTML5标准

若不加入文档声明，将导致浏览器进入怪异渲染模式

html元素

html元素，也叫根元素，一个页面中最多只能有一个，并且该元素是所有其他元素的父元素或祖先元素

在HTML5中，没有强制要求必须书写该元素（但为了考虑到兼容性，还是最好写上）

lang属性：language，全局属性，表示该元素内部使用的文字是使用何种自然语言书写的

head元素

head元素及其内容属于HTML文档的头部，其内容不会直接显示在页面上

meta元素

meta元素书写在head元素中，表示HTML文档的元数据，元数据可以理解为一种附加信息

如<meta charset="UTF-8">就表示指示浏览器使用UTF-8的字符编码规则解析HTML文档

<meta http-equiv="X-UA-Compatible" content="ie=edge">则是为了处理IE浏览器的问题，它表示当使用IE浏览器来渲染页面时，请使用edge内核进行渲染

title元素

title元素中的内容会作为网页的标题进行显示

body元素

文档体，文档中所有要在页面中显示的元素，都应该放置在文档体中

语义化

语义化的概念

语义化包含两个层面：

每一个元素都有具体的含义
元素展示到页面中的效果，应该由CSS决定，跟选择哪个元素无关

因此选择使用某个元素时，应该根据内容的含义，而不应该根据内容的样式进行元素选择

语义化的作用

为了搜索引擎优化（SEO）

也可以说是为了让搜索引擎更好地理解页面（搜索引擎理解得越好，网页显示时就可能越靠前）
为了让浏览器更好地理解网页

如方便浏览器实现阅读模式、语言模式等功能

文本元素

空白折叠

在源代码中的连续空白字符（空格、回车、制表），在页面显示时，会被折叠为0个或1个空格

行盒与块盒之间的空格会被折叠为0个空格
行盒内部以及行盒与行盒之间的空格会被折叠为1个空格

pre元素

pre元素中的内容，不会出现空白折叠

pre元素内部出现的内容，会按照源代码格式显示在页面上

该元素通常用于在网页中显示一些代码

pre本身不带有某种语义，因此显示代码时，通常还会再pre元素外套上code元素以增强语义

pre元素的特点是由css属性white-space: pre导致的

HTML实体

实体字符（HTML entity），通常用于在页面中显示一些特殊符号

书写方式

&word;

小于符号：<

大于符号：>

&符号：&

由于&符号在HTML实体中有特殊作用，因此&符号本身也有对应的实体

空格： 

使用实体字符书写的连续空格，不会出现空白折叠现象
&#number;

小于符号：<、<

UTF-8字符（了解）

每一个字符，在UTF-8字符集中都对应着一个十六进制数，可以使用类似于实体字符的书写方式展示该字符

“姬成”对应的UTF-8字符为姬成

<p>&#x59EC;&#x6210;</p>

在css中，UTF-8字符的书写方式如下：

::after{
    content: "\69EC\6210";
}

a元素

href属性

hyper reference：通常用于表示跳转页面的地址

其他表示方式：

普通链接：href后面直接书写某个页面的完整HTML路径
锚链接：href后面书写#id的形式

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

回到顶部：将href属性直接书写为#，即可在点击a元素时跳转到当前页面的顶部

其实这种写法本质上是通过改变地址栏中的url的hash部分来实现的，而只修改hash不会导致页面刷新，因此正常使用时可以直接跳转到页面中的某个锚点而不刷新页面。如果将其书写为页面地址#id的形式，最终结果是导致跳转到另一个页面中的某个锚点处
功能链接
1. 执行JS代码：将href书写为javascript:JS代码的形式
2. 发送邮件：将href书写为mailto:收件人邮箱的形式
  
  要求用户计算机上安装有邮件发送软件
3. 拨号：将href书写为tel:电话号码的形式
  
  要求用户计算机上安装有拨号软件，或使用移动端访问

target属性

表示跳转窗口的位置

取值：

_self：在当前页面窗口中打开，默认值
_blank：在新窗口中打开

路径的写法

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

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

绝对路径与相对路径

引用站内资源时既可使用绝对路径又可使用相对路径，推荐使用相对路径

引用站外资源时只能使用绝对路径

绝对路径

格式：schema://host:port/path

当引用资源的协议与当前页面的协议相同时，资源的绝对路径可以省略schema:，即//host:port/path（主机名前的//不可省略）

当引用资源的协议与当前页面的协议 + 主机号 + 端口号相同时，资源的绝对路径可以省略schema://host:port，即/path（路径前的/不可省略）

相对路径

相对路径通常以./开头

./表示当前资源所在的目录，../表示返回上一级目录

相对路径中，./可以省略

如相对路径href="./index.html"可简写为href="index.html"

扩展

外部css文件中的相对路径是以css文件为基准的，而外部js文件中的相对路径是以html页面为基准的

例如：

在root目录下使用live server打开index.html

root
    |—— imgs
        |—— a.png
	|—— css
		|—— index.css
    |—— js
        |—— index.js
	|—— index.html

index.html中的内容

<link href="./css/index.css">
<script src="./js/index.js"></script>

index.css中的内容

body{
    background: url("../imgs/a.png");			/*相对路径是以index.css为基准的 */
}

index.js中的内容

var img = document.createElement("img");

img.src = "./imgs/a.png";						// 路径是以index.html为基准

document.body.appendChild(img);

两者引用的图片都能正确显示

图片元素

alt属性

当图片资源失效时，将使用该属性的内容替代图片

和map元素联用

<img href="xxx.jpg" usemap="#imgMap">
<map name="imgMap">
    <area shape="" coords="" href="" alt="" target="_blank">
</map>

area元素

area是一个空元素，作为map元素的唯一子元素存在

其属性包括：

shape：区域的形状

circle：圆形

rect：矩形

poly：多边形
croods：区域的坐标

<area shape="circle" croods="圆心x坐标, 圆心y坐标, 圆半径">

<area shape="rect" croods="矩形左上角x坐标, 矩形左上角y坐标, 矩形右下角x坐标, 矩形右下角y坐标">

注意：对于浏览器页面来说，x轴向右表示正方向，y轴向下表示正方向
href：点击这片区域后跳转的地址
alt：图片显示不出时这片区域显示的代替文字
target：同a元素的target

与figure元素联用

通常用于把图片、图片标题、图片描述包括到一起，有利于搜索引擎理解图片内容

多媒体元素

video视频元素，audio音频元素

属性

controls：是否显示播放控件，取值只能为"controls"

某些属性，只有两种状态，一个是不写，另一个是取值和属性名相同，这种属性称为布尔属性

布尔属性在HTML5中可以不书写属性的值
autoplay：布尔属性，自动播放
muted：布尔属性，静音播放
loop：布尔属性，循环播放

兼容性

旧版本浏览器可能不支持这两个元素

不同浏览器能够识别的视频格式可能不同

因此考虑到多媒体元素的兼容性问题，一般采用下面的书写形式：

<video controls>
    <source src="xxx.mp4"></source>
	<source src="xxx.webm"></source>
	<p>您的浏览器不支持video元素，请下载最新版本浏览器</p>
</video>

如上，如果浏览器能识别mp4格式的视频，则video中后面的部分就直接忽略。如果不支持，则会再次向后寻找合适格式的视频。如果浏览器都不支持多媒体元素，则会在多媒体元素位置处显示p元素的内容

列表元素

有序列表

ol元素：ordered list

唯一子元素li：list item

ol的属性：

type：控制子元素li的编号类型

官方建议使用css属性list-style-type控制编号类型，不建议使用元素的type属性控制
reversed：布尔属性，倒序排列

无序列表

ul元素：unordered list

唯一子元素li

ul的属性：

type：控制子元素li的编号类型

官方建议使用css属性list-style-type控制编号类型，不建议使用元素的type属性控制

定义列表

di元素：definition list，通常用于一些术语的定义

两种子元素：dt（definition title），dd（definition description）

容器元素

容器元素代表一款区域，内部用于放置其他元素

div元素

没有语义

语义化容器元素

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

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

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

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

aside：通常用于表示侧边栏

元素包含关系

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

现在：由于语义化的出现，元素包含关系变得十分复杂，要查看每种元素所能包含的元素，需要到MDN上查找，不过大致可以分为以下几种情况：

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

为页面添加样式

div{
    text-align: center;
    background: lightblue;
    color: red;
}

上面的一段CSS代码就是一条CSS规则

CSS规则由选择器和声明块两部分构成

选择器用于选择元素，选择器的种类可分为：

元素选择器
类选择器
id选择器

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

CSS代码书写的位置

内部样式表

书写在style元素中
内联样式表，元素样式表

书写在元素的style属性中
外部样式表（推荐）

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

推荐使用最后一种css的引用发法，原因在于：

外部样式可以解决多页面样式重复的问题
有利于浏览器缓存，从而提高页面的响应速度
有利于代码分离，更容易阅读和维护

常见样式声明

color

取值：

预设值：定义好的单词，如：red、blue
三原色：rgb(0~255, 0~255, 0~255)、#000000~#ffffff

当hex表示法的三个部分中，每一个内部的数值都相同时，可以简写，如#ff4400可简写为#f40

font-size

单位：

px，绝对单位
em，相对单位，相对于父元素的字体大小

每个元素必须要有字体大小，如果没有声明，则继承父元素的字体大小，如果元素为根元素，则使用基准字号（浏览器中设置的字体大小，Chrome浏览器默认为16px）

font-family

设置文字类型

必须用户计算机中存在的字体才能够正确显示

因此该属性常常会声明多个字体，已匹配不同的环境

div{
    font-family: consolas, 微软雅黑, sans-serif;
}

sans-serif：非衬线字体，是一大类字体的总称

当用户计算机中有前面的字体时，应用该字体，并忽略后面的字体，否则一个一个向后寻找，直到找到合适的字体

consolas只作用在英文字符，中文没有consolas字体的类型，因此显示中文时，consolas字体也会略过

font-style

字体样式，通常用于设置字体倾斜

i元素：默认样式为倾斜字体，其中的内容在朗读时会用一种特别的声调进行朗读

em元素：表示强调，默认样式为倾斜字体

text-indent

首行文本缩进

line-height

每行文本的高度，该值越大，每行文本的距离就越大

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

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

letter-spacing

字体间间隙

text-align

元素内部，行盒以及行块盒的水平排列方式

选择器

简单选择器

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

*：表示所有元素
属性选择器

[href]：选中所有具有href属性的元素

[href="xxx"]：选中所有href="xxx"的元素
伪类选择器

:hover：鼠标悬停的状态

:active：鼠标按下的状态

:link：超链接未访问过的状态

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

上面四个伪类共同作用于一个元素时，伪类选择器需要按照一定的顺序进行书写，lvha
伪元素选择器

::before：生成一个元素，并且将其作为第一个子元素

::after：生成一个元素，并且将其作为最后一个子元素

这两个伪元素也支持使用:xxx的写法，但推荐使用::xxx的写法

选择器的组合

并且

如div.class、div#id、div[attr]...
空格

表示选中子代或后代元素
>

表示选中子代元素
+

表示选中下一个兄弟元素
~

表示选中后面出现的兄弟元素

选择器的并列

div, span, p{
    color: red;
}

层叠

声明冲突：同一个样式，多次应用于同一个元素

层叠：解决声明冲突的过程，浏览器自动处理

层叠的过程可分为3步：

比较重要性
比较特殊性
比较源次序

比较重要性

重要性从高到低：

作者样式表中的!important样式
作者样式表中的普通样式（无!important的样式）
浏览器默认样式表（user agent stylesheet）中的样式

若样式表中的两个样式，它们的重要性相同，则进入下一步

比较特殊性

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

具体规则：通过选择器，计算出一个4位数（_ _ _ _）：

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

对于这四位数字，不用担心出现进位的情况

若样式表中的两个样式，它们的特殊性相同，则进入下一步

比较源次序

代码书写靠后的胜出

爱恨法则

包含伪类选择器的样式，如果它们的重要性和特殊性相同，则需要按照一定的源次序书写它们

a:link{
    color: green;
}

a:visited{
    color: blue;
}

a:hover{
    color: red;
}

a:active{
    color: yellow;
}

继承

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

通常跟文字内容相关的属性都能被继承

如：font-size、font-style、text-align等属性

属性值的计算过程

页面上的所有元素，是一个元素一个元素依次渲染的，渲染顺序按照文档的树形目录结构进行

元素进行渲染的前提条件：该元素的所有CSS属性都必须有唯一的值

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

步骤：

确定声明值
层叠冲突
使用继承
使用默认值

确定声明值

参考样式表（包括作者样式表和浏览器默认样式表）中没有冲突的声明，作为CSS属性的值

层叠冲突

对于样式表中有冲突的声明，使用层叠规则确定CSS属性的值

比较重要性
比较特殊性
比较源次序

使用继承

对仍然没有值的属性，若可以继承，则继承父元素的值

使用默认值

对仍然没有值的属性，使用默认值

每一个CSS属性都天生带有一个默认值，它不是浏览器默认样式表中属性的值

不管是哪个CSS属性，只要在某一步中确定了具体的值，就不需要再继续进行规则比较了

特殊的两个CSS属性值

inherit：强制继承，表示将父元素的值取出应用到该元素
initial：初始值，将该属性设置为默认值

注意：使用继承这一步是让可以继承的属性自然继承自它父元素的属性值，而属性值为inherit的属性是让属性强制继承它父元素的属性值。前者只有可以继承的属性才能自然继承，继承动作发生在属性值的计算过程的第三步；后者无论什么属性都会发生继承，继承动作发生在属性值的计算过程的前两步（initial的原理也相似）

由于元素是一个一个依次渲染的，因此在子元素渲染之前，其父元素的所有属性值一定都是确定下来的了，这时候再继承就一定能继承到

盒模型

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

盒子的类型：

行盒：display为inline的元素
块盒：display为block的元素

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

display的默认值为inline

盒子的组成部分

无论是行盒还是块盒，都由以下几个部分组成，从内到外依次为：

内容（content）

该部分也称为整个盒子的内容盒（content box）

在标准的块盒盒模型中，width，height默认设置的就是内容盒的宽高

IE的块盒盒模型的width和height设置的是border-box
内边距（padding）

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

填充区 + 内容区 = 填充盒（padding box）
边框（border）

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

边框样式：border-style，solid实线边框

边框宽度：border-width

边框颜色：border-color，若没有设置边框颜色，则默认使用元素的字体颜色

边框 + 填充盒 = 边框盒（border box）
外边距（margin）

可以理解为盒子之间的距离

注意：

当元素内部出现滚动条时，滚动条会使得元素的内容盒尺寸变小，但滚动条实际所在区域却是在元素padding-box边缘

<!DOCTYPE html>
<style>
	#div{
        width: 100px;
        height: 100px;
        padding: 30px;
        border: 10px solid #000;
        overflow: scroll;
    }
</style>

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

盒模型应用

改变宽高作用范围

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

box-sizing：设置宽高作用在哪个区域上，默认为content-box

改变背景覆盖范围

默认情况下，背景颜色和背景图片会覆盖边框盒

background-clip：设置背景覆盖哪个区域上，默认为border-box

溢出处理

overflow：控制内容溢出边框盒后的处理方式，默认为visible

断词规则

word-break：影响文字在什么位置被截断（换行）

normal：CJK字符在文字位置截断，非CJK字符在单词位置截断
break-all：所有字符都在文字位置截断
keep-all：所有文字都在单词位置截断（对于连续的中文字符会造成不换行现象）

空白处理

div{
	/* 设置固定宽度 */
    white-space: nowrap;	/* 设置文本不换行（但会有空白折叠） */
    overflow: hidden;
    text-overflow: ellipsis;
}

white-space：默认为normal，在页面上的表现形式为空白折叠且必要时文本会换行

pre元素之所以不会空白折叠就是因为设置了white-space: pre;

行盒盒模型

常见的行盒：span、strong、em、i、img、video、audio

特点

盒子沿着内容延伸

行盒高度不计算内部的行块盒以及可替换元素
设置宽高无效

可以通过调整字体大小、字体类型等间接调整宽高

宽度也可以通过左右padding间接调整
内边距在水平方向有效，垂直方向上仅会导致背景覆盖区域变化，不会实际占据空间
边框在水平方向有效，垂直方向上仅会导致边框覆盖区域变化，不会实际占据空间
外边距在水平方向上设置有效，垂直方向无效

行块盒

display属性为inline-block的盒子

特点

不独占一行
所有尺寸都有效

注意：空白折叠发生在行盒或行块盒内部，以及行盒或行块盒之间

可替换元素与非可替换元素

大部分元素，在页面上显示的效果，取决于元素的内容（包含哪些元素和文本），称为非可替换元素。如：div，span

少部分元素，在页面上显示的效果，（通常）取决于元素的属性，称为可替换元素。如：img、video、audio

可替换元素的特点：

通常为行盒
设置所有尺寸（margin + border + padding + content）都有效
除一些表单元素外，显示的内容通常取决于元素的属性
css不能完全控制其样式

object-fit

该属性通常设置在img或video元素上，默认值为fill

默认情况下，图片的显示比例会受到img元素设置的宽高影响

如果只设置img的宽（高），则img的高（宽）会随着图片比例进行调整，除非宽高都手动设置

而如果设置为cover，就能在保证图片比例不失调的前提下，让图片的显示区域撑满img元素（这就可能导致图片的一部分区域被隐藏）

常规流

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

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

常规流
浮动
定位

常规流布局

常规流，也称为文档流，标准流

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

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

包含块

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

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

常规流块盒

常规流块盒的具体规则：

每个块盒的总宽度（margin + border + padding + content）必须等于包含块的宽度

width: auto：表示将包含块的剩余水平空间吸收，auto是width的默认值

margin: auto：表示将包含块的剩余水平空间吸收，margin的默认值为0

若一个块盒，width和margin都为auto，则剩余水平空间归width所有（可以认为，width的空间吸收能力强于margin）

若一个块盒，它的border-box宽度设置得小于包含块宽度，且margin为0，则剩余水平空间会被margin-right吸收（为了满足常规流块盒独占一行的布局规则）

若一个块盒，width为auto，左右margin为负值，则会导致块盒的content-box宽度增加

在常规流中，要设置块盒在包含块中水平居中，可以将块盒定宽，并将左右margin设置为auto
块盒在垂直方向上的auto

height: auto：表示适应内容高度

垂直margin: auto：等于0
百分比取值

width、padding、margin可以取值为百分比
- 上面的百分比都是相对于包含块的宽度
height百分比：
- 如果子元素的高度设置为百分比，但其包含块的高度有取决于子元素（即包含块的高度也取决于内容），则高度百分比无效
- 包含块高度固定，不取决于子元素，则子元素设置的高度百分比相对于包含块高度
注意：border的尺寸不能设置为百分比
上下外边距合并

两个常规流块盒，上下外边距相邻（且外边距之间没有间隔）时，会发生合并

浮动

左浮动：设置元素属性float: left，左浮动的元素在包含块中（先）靠上（再）靠左排列

右浮动：设置元素属性float: right，右浮动的元素在包含块中（先）靠上（再）靠右排列

常规流中的元素，默认float为none，即不浮动

特点

浮动后的元素，一定为块盒
浮动元素会脱离常规流
浮动盒子的尺寸

宽度为auto时，为适应内容的宽度

高度为auto时，为适应内容的高度

margin为auto时，均为0
没有上下外边距合并

盒子排列

左浮动的盒子靠上靠左排列
右浮动的盒子靠上靠右排列
浮动盒子在包含块中排列时，会避开先前的兄弟常规流块盒
常规流块盒在排列时，无视先前的兄弟浮动盒子
行盒在排列时，会避开浮动盒子

利用这个特点可以实现文字环绕

如果文字没有直接在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒

高度坍塌

指常规流盒子的自动高度，在计算时不考虑浮动盒子

解决方法：清除浮动

清除浮动涉及css属性clear：

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

<!DOCTYPE html>
<style>
    .clearfix::after{
        content: "";
        display: block;
        clear: both;
    }

    li{
        float: left;
    }
</style>

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

定位

定位用来手动控制元素在包含块中的精确位置

position属性：

static：静态定位（不定位）
relative：相对定位，不会导致元素脱离常规流
absolute：绝对定位，会导致元素脱离常规流
fixed：固定定位，会导致元素脱离常规流

position不为static的元素就是定位元素

脱离常规流的元素的特点

常规流中的元素在摆放时，会忽略脱离了常规流的元素

常规流元素会忽略浮动元素的原因
常规流中的元素计算自动高度时，会忽略脱离了常规流的元素

高度坍塌的原因

相对定位

相对定位不会导致元素脱离文档流，只是允许元素在原来位置进行偏移

相对定位元素的偏移相对的是元素原来的位置

相对定位元素的偏移不会对其他盒子造成任何影响

绝对定位

特点

绝对定位元素，它的宽高为auto时，表示适应内容的宽高

注意第3种的特殊情况

绝对定位元素，它的包含块：

若祖先元素中存在定位元素，则从下往上找，找祖先元素中第一个定位的祖先元素的填充盒为其包含块

若祖先元素中均没有定位元素，则包含块为网页最左上端的视口区域（初始包含块）

试滑动横向及纵向滚动条，并关注div所在的位置：

<!DOCTYPE html>
<style>
    html {
        width: 200vw;
        height: 200vh;
    }

    div {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        position: absolute;
        right: 0;
        bottom: 0;
    }
</style>

<div></div>

绝对定位元素，不给其定宽，并且为其left、right同时设置为0，则定位元素宽度会撑满包含块

绝对定位元素，不给其定高，并且为其top、bottom同时设置为0，则定位元素高度会撑满包含块
绝对定位、固定定位元素的left、right百分比取值，相对于包含块的宽度；top、bottom百分比取值，相对于包含块的高度

固定定位

除包含块外，其它情况与绝对定位相同

固定定位的包含块始终为视口

定位下的居中

以下的居中只能使用在绝对定位和固定定位的元素上，相对定位元素无效

定位下的居中是指在定位元素在包含块中居中

水平居中：将定位元素定宽，并将left与right同时设置为相同的绝对值，并将左右margin设置为auto

垂直居中：将定位元素定高，并将top与bottom同时设置为相同的绝对值，并将上下margin设置为auto

补充

只有定位元素，设置z-index才有效
绝对定位、固定定位的盒子一定是块盒
除相对定位外，绝对定位与固定定位都会导致元素脱离常规流

相对定位不会改变元素原始特征，因此设置了浮动的相对定位元素也会脱离常规流
绝对定位、固定定位元素一定不会是浮动元素
绝对定位、固定定位元素没有外边距合并

只有常规流块盒之间会出现外边距合并的现象
定位元素设置left: 0，top: 0是指其margin区域的左上角距离包含块左上角的距离为分别为0，0；left： 100%，top: 100%是指其margin区域的左上角距离包含块右下角的距离分别为0，0
定位元素的width、padding、margin百分比和常规流块盒一样，相对于包含块的宽度，height百分比相对于包含块的高度

iframe元素

通常用于在网页中嵌入另一个网页

与a元素联用

<a href="https://www.baidu.com" target="myframe">百度</a>
<a href="https://www.douyu.com" target="myframe">斗鱼</a>
<a href="https://www.taobao.com" target="myframe">淘宝</a>

<iframe name="myframe" src="https://www.baidu.com"></iframe>

点击a元素后，相应页面会在iframe元素中显示

表单元素

input元素

输入框

type属性：输入框类型

text：普通文本输入框

password：密码框

date：日期选择框

search：搜索框

number：数字输入框

checkbox：多选框，绑定name属性以对单选框进行分类，使用布尔属性checked来默认选中一个选项

radio：单选框，绑定name属性以对单选框进行分类，使用布尔属性checked来默认选中一个选项
value属性：输入框的值
placeholder属性：显示提示的文本，文本框没有内容时显示

input元素可以制作按钮

当type属性值为reset、button、submit时，input表示按钮

select元素

下拉列表选择框

select元素需要和option元素配合使用

在option元素中使用布尔属性selected来默认选中一个选项

可以对select中的option进行分组，使用optgroup元素进行分组，并在其元素上使用lable属性来展示分类信息

<select>
    <optgroup lable="xxx">
    	<option>xxx</option>
    	<option>xxx</option>
    	<option>xxx</option>
    </optgroup>
    <optgroup lable="xxx">
    	<option>xxx</option>
    	<option>xxx</option>
    	<option>xxx</option>
    </optgroup>
</select>

默认只能选中select中的一个选项，在select元素上加入布尔属性multiple即可选择多项

name属性书写在select元素上，value属性书写在option元素上

textarea元素

多行文本框

注意：多行文本框中输入的内容实际是存在于元素之中的，而不是元素的value属性

<textarea>内容</textarea>

设置textarea元素的css属性reset可以设置是否允许在某个方向上调整元素尺寸

button元素

type属性：reset、submit、button，默认值为submit

form元素

通常将整个表单元素放置到form元素中，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器

form元素中的所有表单元素，要求加上name属性

对于通过form元素提交的GET请求，表单元素的name和value会作为url的query部分中某个键值对的键和值存在

对于通过form元素提交的POST请求，表单元素的name和value会作为请求体中某个键值对的键和值存在

属性：

action：数据提交到的目的地地址
method：提交方式

表单状态

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

label元素

该元素不属于表单元素，但是它经常配合表单元素使用

使用label元素，就可以实现点击某个标签来选中或聚焦相关联的表单元素（不一定需要是单选框或多选框）

显式关联

将label元素的for属性值设为要关联的表单元素的id值

<input type="radio" id="male" name="gender">
<label for="male">男</label>

<input type="radio" id="female" name="gender">
<label for="female">女</label>

隐式关联

将表单元素作为label的内容

<label>
	<input type="radio" name="gender">
    男
</label>

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

注意：label元素上能出现for属性

美化表单元素

新的伪类

:focus：选中处于聚焦状态的元素，所有元素都具有聚焦状态

按下tab可切换聚焦元素，给元素设置tabindex属性可以调整切换的顺序
:checked：选中被选中的单选框或多选框

案例

<!DOCTYPE html>
<style>        
	.radio{
        width: 11px;
        height: 11px;
        display: inline-block;
        border: 1px solid;
        border-radius: 50%;
        position: relative;
    }

    input[type="radio"]{
        display: none;
    }

    input[type="radio"]:checked + .radio::after{
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #000;
        margin-top: 2px;
        margin-left: 2px;
    }
</style>

<div>
    请选择性别：
    <label>
        <input type="radio" name="gender">
        <span class="radio"></span>
        <span>男</span>
    </label>
    <label>
        <input type="radio" name="gender">
        <span class="radio"></span>
        <span>女</span>
    </label>
</div>

表格元素

对于表格元素，浏览器需要解析完一整套的表格元素后才能开始渲染表格，不能像其他元素一样解析一个渲染一个

由于表格元素的渲染速度过慢，因此表格不再适用于网页布局

具体元素

table：表格元素
caption：表格标题
thead：表头
tbody：表格主体
tfoot：表尾
tr：表格行
th：标题单元格
td：单元格

<!DOCTYPE html>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    table{
        width: 100%;
        border-collapse: collapse;
    }

    th, td{
        border: 1px solid #000;
    }
</style>

<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
            <th>列4</th>
            <th>列5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="3">列1</th>
            <td>数据2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
        </tr>
        <tr>
            <td>数据2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
        </tr>
        <tr>
            <td>数据2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
        </tr>
        <tr>
            <th>字段1</th>
            <td>数据2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
        </tr>
        <tr>
            <th>字段1</th>
            <td>数据2</td>
            <td>数据3</td>
            <td>数据4</td>
            <td>数据5</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">合计</td>
        </tr>
    </tfoot>
</table>

其它元素

meta元素

meta元素可以用于搜索引擎优化（SEO）

<meta name="keywords" content="关键字1,关键字2,关键字3">
<meta name="description" content="网页描述">
<meta name="author" content="作者姓名,作者邮箱">

link元素

链接外部资源，如：外部css文件，icon图标

属性：

rel：relation，链接资源与当前网页的关系
type：链接资源的MIME类型

该属性可以省略，此时浏览器会自动根据rel属性的值确定资源的MIME类型

<link rel="stylesheet" type="text/css" href="xxx.css">
<link rel="shortcut icon" type="image/x-icon" href="xxx.ico">

若没有在HTML文档中手动设置网页图标，则浏览器会在第一次访问网站时会读取网站根目录下的favicon.ico文件来作为网站图标，如果第一次没读取到之后将不再读取

@规则

@import：导入另一个css文件，通常在外部css中使用，该规则必须书写在最前面（但需要在@charset之后）
```
@import "xxx.css";
```
可以认为该规则就是将另一个css文件的内容粘贴到@import的位置
@charset：告诉浏览器css文件使用的字符编码集

该指令必须写在最开头
```
@charset "utf-8";
```

web字体和图标

web字体

不管用户计算机中有没有安装相应字体时，都强制让用户下载该字体

@font-face：自定义一个新字体

@font-face{
    font-family: "font-name";	/* 自定义字体的名称 */
    src: url("xxx.ttf");		/* 字体文件的路径 */
}

p{
    font-family: "font-name"	/* 使用自定义字体 */
}

使用这种方式下载的字体，只是临时安装，当用户退出网页时就会失效

字体图标

利用@font-face指令，可以制作出字体图标

以阿里巴巴矢量图标库生成的字体图标文件的使用为例，具体步骤为：

在页面中引用字体图标对应的css文件

本地使用：下载字体图标文件到工程目录中，然后引入工程目录中的相应css文件

在线使用：直接引用网站提供的css文件url来引入css文件
给元素添加.iconfont类
给元素添加对应的字体图标类

注意：当需要给css中添加新图标时，都需要更新css并重新下载css文件

块级格式化上下文

块级格式化上下文（BFC，Block Formatting Context），它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局规则

常规流块盒的布局规则：

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

BFC是一块渲染区域，可以由某个元素创建

以下元素会在内部创建BFC：

html元素
行块盒
浮动元素，绝对定位和固定定位元素
overflow不为visible的块盒

<!DOCTYPE html>
<html>
 <body>
     <div class="A" style="float: left;">
         <div class="B"></div>
     </div>

     <div class="C" style="position: absolute;">
         <div class="D"></div>
     </div>

     <div class="E">
         <div class="F"></div>
     </div>

     <div class="G" style="overflow: hidden;">
         <div class="H"></div>
     </div>
 </body>
</html>
在上面的这些元素中

元素A、C、E、F、G处在根元素创建的BFC中

注意：虽然浮动元素和绝对定位元素不是常规流块盒，但不影响它们处在某个BFC中

元素B处在元素A创建的BFC中

元素D处在元素C创建的BFC中

元素G处在元素H创建的BFC中

“独立的渲染区域”意味着不同的BFC，它们进行渲染时互不干扰

因此创建BFC的元素，隔绝了它内部与外部（外部包括创建BFC的元素自身以及其祖先元素）的联系，内部的渲染不会影响到外部

BFC的具体规则

基于“BFC渲染的独立性”，使得创建BFC的元素具有以下几个特点：

创建BFC的元素，它的自动高度需要计算内部的浮动元素

可以理解为：为了隔绝内部与外部的联系，创建BFC的元素的自动高度就需要计算浮动元素以保证浮动元素不会超出其覆盖范围，从而防止浮动元素影响到其他BFC中的元素

会计算浮动元素，但绝对定位和固定定位元素不会计算，因为它们实在太“飘”了
创建BFC的元素，它的边框盒不会与兄弟浮动元素重叠

当浮动元素书写靠前时，两者会在水平方向上依次排列而没有重叠区域

利用这个特点可以实现多栏布局
创建BFC的元素，不会和它的子元素进行外边距合并

只有处在同一个BFC中的两个元素才有可能发生外边距合并，因此处在不同BFC中的两个元素，一定不会出现外边距合并

布局

两栏布局

左浮动 + 右浮动

<!DOCTYPE html>
<style>
    * {
        margin: 0;
        padding: 0;
    }

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

    .container{
        width: 80%;
        background-color: lightblue;
        margin: 0 auto;
    }

    .aside{
        width: 200px;
        height: 500px;
        background-color: pink;
        float: left;
    }

    .main{
        float: right;
        width: 300px;
        height: 500px;
        background-color: #008c8c;
    }
</style>

<div class="container clearfix">
    <div class="aside"></div>
    <div class="main"></div>
</div>

利用这种方式实现的两栏布局，两栏都必须定宽，因此当容器宽度需要随着网页宽度变化时，这种方法就不可行

浮动 + overflow:hidden

<!DOCTYPE html>
<style>
    * {
        margin: 0;
        padding: 0;
    }

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

    .container{
        width: 80%;
        background-color: lightblue;
        margin: 0 auto;
    }
 
    .aside{
        width: 200px;
        height: 500px;
        background-color: pink;
        float: left;
        /* margin-right: 30px; */
    }

    .main{
        overflow: hidden;
        height: 500px;
        background-color: #008c8c;
    }
</style>

<div class="container clearfix">
    <div class="aside"></div>
    <div class="main"></div>
</div>

利用这种方式实现的两栏布局，只需要给侧边栏定宽，主区域就能自动适应容器剩余部分的宽度

当需要让侧边栏与主区域之间留有一些间隔时，需要设置侧边区域的左右margin，而不能设置主区域的左右margin

注意：需要将主区域的div书写在最后

三栏布局

<!DOCTYPE html>
<style>
    * {
        margin: 0;
        padding: 0;
    }

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

    .container{
        width: 80%;
        background-color: lightblue;
        margin: 0 auto;
    }

    .left{
        width: 200px;
        height: 500px;
        background-color: pink;
        float: left;
        /* margin-right: 30px; */
    }

    .right{
        width: 150px;
        height: 500px;
        background-color: chocolate;
        float: right;
        /* margin-left: 30px; */
    }

    .main{
        overflow: hidden;
        height: 500px;
        background-color: #008c8c;
    }
</style>

<div class="container clearfix">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

注意：需要将主区域的div书写在最后

后台页面布局

特点：单个页面撑满视口，页面内部的某个区域若显示不下则出现滚动条

<!DOCTYPE html>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .app{
        width: 100%;
        height: 100%;
        position: fixed;
    }

    .head{
        width: 100%;
        height: 60px;
        left: 0;
        top: 0;
        position: absolute;
        background-color: #000;
    }

    .container{
        width: 100%;
        height: 100%;
        padding-top: 60px;
        box-sizing: border-box;
    }

    .aside{
        width: 200px;
        height: 100%;
        float: left;
        background-color: pink;
        overflow: auto;
    }

    .main{
        overflow: hidden;
        background-color: lightblue;
        height: 100%;
        overflow: auto;
    }
</style>

<div class="app">
    <div class="head"></div>
    <div class="container">
        <div class="aside"></div>
        <div class="main"></div>
    </div>
</div>

浮动的细节规则

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

行高的取值

line-height的取值：

像素值
无单位的数值X

设置行高为元素字体大小的X倍

先直接将X继承给子元素，再根据子元素的字体大小计算出对应的像素值
带单位的数值Xem

设置行高为元素字体大小的X倍

先根据元素的字体大小计算出对应的像素值，再将像素值继承给子元素
百分比

100%等价于1em

示例：

<!DOCTYPE html>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container{
        line-height: 2;
        /* line-height: 2em; */
    }

    .p1{
        font-size: 40px;
        line-height: inherit;
    }

    .p2{
        font-size: 12px;
        line-height: inherit;
    }
</style>

<div class="container">
    <p class="p1">多行文本...</p>
    <p class="p2">多行文本...</p>
</div>

body的背景（了解）

画布

画布是网页上的一片区域

特点：

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

html的背景

覆盖画布

body的背景

如果html元素设置了背景，则body的背景正常
如果html元素没有设置背景，则body的背景覆盖画布

关于html或body的背景图

html或body的背景图尺寸的宽度百分比，相对于视口宽度
html或body的背景图尺寸的高度百分比，相对于html的高度
html或body的背景图横向位置的百分比、预设值，相对于视口
html或body的背景图纵向位置的百分比、预设值，相对于html

行盒的垂直对齐

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

调整元素的css属性vertical-align

行块盒是一种特殊的行盒，也可以使用上面的方法

图片的底部白边

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

解决方法：

给其父元素设置字体大小为0（不推荐）
将图片元素设置为块盒

参考线-深入理解字体

参考线

制作文字时，需要几根参考线，不同的字体，参考线相对位置不同，同一字体，参考线相对位置一致

font-size

文字的实际大小是指文字的顶线到底线的距离，这段空间也叫作content-area

给包含文本的行盒设置背景颜色覆盖的就是content-area，文字所占的实际高度，就是content-area的高度

而font-size实际上设置的是文字的相对大小

常见的文字相对大小有1000、1024、2048

文字的实际大小会随着文字相对大小的变化而变化

以consolas字体为例，当相对大小为2000时，该字体的实际大小为2398

因此如果设置consolas字体的font-size为200px，则文字实际大小2398 / 2048 * 200px = 234px

line-height

除了上面展示的五条参考线外，还包括两条特殊的参考线：top和bottom

top到text top之间的距离叫做上line gap，text bottom到bottom之间的距离叫做下line gap

上下line gap可以为正，也可以为负，但两者一定相等

line gap的大小默认是字体设计者决定的

从top到bottom的这段空间，叫做virtual-area

line gap小于0时，virtual-area的空间小于content-area

line gap大于0时，virtual-area的空间大于content-area

网页制作者，可以通过设置line-height属性来调整virtual-area的大小（高度），即用户可以更改top和bottom的位置

line-height: normal表示行高为默认的virtual-area的大小

vertical-align

一个元素如果子元素中出现了行盒，则该元素内部也会生成参考线

line-box：行盒组合起来，可以形成多行，每一行区域叫做一个line-box，line-box的top是该行内所有行盒的最高top，bottom是该行内所有行盒的最低bottom

一个元素的自动高度，就是通过line-box计算的

设置vertical-align的元素:

baseline：默认值，表示该元素的基线与父元素的基线对齐
super：该元素的基线与父元素的上基线对齐
sub：该元素的基线与父元素的下基线对齐
text-top：该元素的top与父元素的text-top对齐
text-bottom：该元素的bottom与父元素的text-bottom对齐
top：该元素的top与其所在的line-box的top对齐
bottom：该元素的bottom与其所在的line-box的bottom对齐
middle：该元素的中线（content-area的中间）与父元素中字母x高度的一半对齐
数值：该元素的基线相对于父元素基线的偏移量
百分比：该元素的基线相对于父元素基线的偏移量，百分比相对于自身的virtual-area的高度

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

img元素：基线位于图片的下外边距
表单元素：基线位置在内容底边
行块盒：

若行块盒中最后一行是line-box，则最后一行的基线作为整个行块盒的基线

若行块盒中最后一行不是line-box，则使用行块盒的下外边距作为整个行块盒的基线

堆叠上下文

堆叠上下文（Stack Context），它是一块区域，由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序

会创建堆叠上下文的元素：

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

创建堆叠上下文的元素，其元素本身是并非处在它所创建的堆叠上下文中

同一个堆叠上下文F中的元素，在Z轴上的排列顺序（从后向前）为：

创建堆叠上下文F的元素的背景和边框

该级别比较特殊，因为创建堆叠上下文的元素，它所处的堆叠上下文其实并不是它所创建的堆叠上下文F，但该元素的背景和边框却可以与它所创建堆叠上下文中的元素进行比较，这点需要注意
z-index为负值的定位元素所创建的子堆叠上下文S

若同处于该级别的两个元素，z-index越大，越靠前
常规流非定位块盒
非定位浮动盒子
常规流非定位行盒
任何z-index为auto的定位元素（不会创建堆叠上下文），以及z-index为0的定位元素创建的子堆叠上下文S
z-index为正数的定位元素创建的子堆叠上下文S

若同处于该级别的两个元素，z-index越大，越靠前

若处于同一堆叠上下文的两个元素，它们同属于上面的某一种情况，则位于文档后面的元素覆盖位于文档前面的元素

每个堆叠上下文，独立于其他堆叠上下文，它们之间不可相互穿插

注意：

创建堆叠上下文的元素的背景和边框与处在该堆叠上下文中的元素具有可比性，即使这两个元素不在同一堆叠上下文中
除上面的特殊情况外，只有处在同一堆叠上下文中的两个元素才具有可比性，因此如果要比较两个元素谁前谁后，就需要找到能够对应它们两个的同一堆叠上下文，然后根据上面的七条堆叠规则进行比较

数据链接

数据链接（data url）是指将目标文件的数据直接书写到路径位置

语法：data:MIME;base64,数据

<link href="data:text/css.h1{color:red;}">

优点：

减少浏览器请求的次数
有利于动态生成数据
base64会增加资源体积为原来的4/3

缺点：

增加了页面资源的体积
不利于浏览器缓存

浏览器通常会缓存图片文件、css文件、js文件

base64

一种编码方式，通常用于将一些二进制数据用一个字符串表示

浏览器兼容性

常见厂商前缀

厂商前缀使用在css属性之前，或css的属性值之前

使用厂商前缀，可以让某些css属性更好地某些低版本的浏览器

IE：-ms-

Chrome，safari：-webkit-

opera：-o-

firefox：-moz-

当浏览器遇到无法识别的样式或属性时，会直接略过，而不会报错，添加厂商前缀解决浏览器兼容性问题就是利用这个特点来实现的

以Chrome浏览器为例：
h1{
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}
以上的css样式，经过属性值的计算后，最终得到的结果如下：

对于box-sizing和-webkit-box-sizing，Chrome会把它们当做同一个样式看待，因此书写靠后的覆盖书写靠前的
div{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
}

css hack

根据不同的浏览器（主要针对IE）设置不同的样式和元素

css hack就是利用了浏览器的“遇到无法识别的样式和元素时直接略过”的特点来实现的

针对样式

加入厂商前缀其实就是css hack的一种做法，除了加入厂商前缀外，还可以加入一些特殊的符号：

* + 属性名：兼容IE5 ~ IE7版本

*background: red;

IE5，IE6，IE7能够识别这种css属性
_ + 属性名：兼容IE5，IE6版本

_background: blue;
属性值 + \9：兼容IE5 ~ IE11

background: orange\9;
属性值 + \0：兼容IE8 ~ IE11

background: orange\0;
属性值 + \9\0：兼容IE9，IE10

上面的这些特殊符号，只有IE浏览器能识别

针对元素

IE浏览器不同于其他浏览器，IE浏览器能够识别注释中的一些特殊字符

<!--[if IE]>
<p>这是IE浏览器</p>
<![endif]-->

<!--[if !(IE)]><-->
<p>这是非IE浏览器</p>
<!--<![endif]-->

IE浏览器会识别出上面的注释的含义，从而只渲染第一个p元素，不渲染第二个p元素

对于非IE浏览器，会直接略过这些注释，从而渲染第二个p元素

<!--[if lt IE8]>
<p>这是版本小于IE8的IE浏览器</p>
<![endif]-->

含义：对于版本低于IE8的IE浏览器，会渲染这个p元素

渐近增强和优雅降级

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

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

书写代码时，先尽量避免书写有兼容性问题的代码，之后再逐步加入新标准中的代码

优雅降级：先制作出完整的网页，之后再针对低版本浏览器进行特殊处理

书写代码时，先不用特别关心兼容性，等到完成了整个功能后，再针对低版本浏览器进行样式和功能处理

查看代码兼容性：caniuse

居中总结

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

行盒&行块盒水平居中

设置行盒&行块盒的父元素text-align:center

行盒&行块盒一定是常规流盒子，因此浮动与定位盒子一会变为是块盒

常规流块盒水平居中

做法：给元素定宽，并设置左右margin为auto

绝对定位元素的水平居中

给元素定宽，设置左右偏移量为相同的绝对值，再设置左右margin为auto

固定定位是绝对定位的特殊情况，居中方式也一致

单行文本垂直居中

设置文本所在元素的line-height为包含块的高度

行块盒&块盒内多行文本垂直居中

设置盒子的上下padding为相同的绝对值

绝对定位元素的垂直居中

给元素定高，设置上下偏移量为相同的绝对值，再设置上下margin为auto

样式补充

display: list-item

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

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

涉及的css属性：

list-style-type：设置次盒子中内容的类型，是可继承属性
list-style-position：设置次盒子相对于主盒子的位置
list-style：上面两个css属性的速写属性

图片失效时的宽高问题

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

行盒中包含行盒或可替换元素

当行盒中包含行盒或可替换元素，则行盒的自动高度与它内部的行块盒或可替换元素无关

text-align: justify

除最后一行的行盒&行块盒&文本外，其它行行盒&行块盒&文本分散对齐