浏览器大致由外壳（Shell）和内核（Core）两个部分组成，其中内核包括了JS执行引擎和渲染引擎
常用浏览器的内核：
- IE：Trident
- Firefox：Gecko
- Chrome、Opera：Blink
- Safari：Webkit
第一个网页
元素
元素（Element），也常称为标签、标记
大部分元素都包含起始标记（begin tag）和结束标记（end tag）
起始标记与结束标记之间可以添加元素内容，元素内容可以是一段字符，也可以是其他元素
在起始标记中可以加入元素属性，属性 = 属性名 + 属性值
属性名中必须是全小写的形式，若属性包含多个单词，则使用短横线进行分隔
属性可分为局部属性与全局属性：
- 局部属性：某些元素特有的属性，如a元素的href
- 全局属性：所有元素都可具有的属性，如title、class、id、style、data-*
小部分元素没有结束标记，它们被称为空元素
文档声明
<!DOCTYPE html>
上面的文档声明，它的作用是告诉浏览器，当前HTML文档使用的标准是HTML5标准，请使用最新的 HTML5标准来解析渲染页面
若不加入文档声明，将导致浏览器进入怪异渲染模式
严格模式与怪异模式
严格模式： 又称为标准模式，指浏览器按照W3C标准解析代码
怪异模式： 又称混杂模式、兼容模式，是指浏览器用自己的方式解析代码，混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作
两者的区别：
-
标准模式下，宽高设置的是元素的内容盒
而老版本的IE浏览器，在怪异模式下，宽高设置的是元素的边框盒
-
在标准模式下，给span等行内元素设置width和height都不会生效，而在怪异模式下，则会生效
-
使用margin: 0 auto在标准模式下可以使元素水平居中，但在怪异模式下会失效
-
怪异模式下white-space: pre会失效
-
怪异模式下设置图片的padding会失效
-
标准模式下，子元素高度为百分比，但父元素高度自动，则子元素设置高度无效
怪异模式下，子元素高度为百分比在任何情况下都能被正确应用
html元素
html元素，也叫根元素，一个页面中最多只能有一个，并且该元素是所有其他元素的父元素或祖先元素
在HTML5中，没有强制要求必须书写该元素，但为了考虑到兼容性，最好还是写上
html的lang属性：language，全局属性，表示该元素内部使用的文字是使用何种自然语言书写的
head元素
head元素及其内容属于HTML文档的头部，其内容不会直接显示在页面上
head元素中通常会包含以下元素：
-
meta元素
meta表示HTML文档的元数据，元数据可以理解为一种附加信息
如
<meta charset="UTF-8">就表示指示浏览器使用UTF-8的字符编码规则解析HTML文档<meta http-equiv="X-UA-Compatible" content="ie=edge">则是为了处理IE浏览器的问题，它表示当使用IE浏览器来渲染页面时，请使用edge内核进行渲染 -
title元素
title元素中的内容会作为网页的标题进行显示
-
link元素
通常用于连接外部CSS文件（也可以用于连接网站图标）
-
style元素
内部书写css代码
将CSS代码放在HTML文档的头部可以确保在HTML内容在解析之前，CSS样式就已经完成解析了，这有助于减少页面渲染时的样式闪烁（FOUC，Flash of Unstyled Content），即页面内容在样式表加载并应用之前短暂地以无样式状态显示
body元素
文档主体，文档中所有要在页面中显示的元素，都应该放置在文档体中
语义化
概念
HTML5的语义化指的是使用语义化的标签来创建页面结构，如header，footer，nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div
语义化包含两个层面：
-
每一个元素都有具体的含义
-
元素展示在页面中的效果，应该由CSS决定，跟选择哪个元素无关
因此选择使用某个元素时，应该根据内容的含义，而不应该根据内容的样式进行元素选择
作用
-
为了搜索引擎优化（SEO）
语义化的元素能够让搜索引擎更好地理解页面（搜索引擎理解得越好，网页显示时就可能越靠前）
-
方便其他设备解析（如屏幕阅读器）网页
-
代码结构清晰，易于阅读，利于维护
常见语义化元素
- article
- aside
- nav
- main
- section
- header
- footer
文本元素
空白折叠
在源代码中的连续空白字符（如空格、回车、制表等），在页面显示时，会被折叠为1个空格
空白折叠发生在行盒（行块盒）内部以及行盒（行块盒）之间
pre元素
pre元素中的文本内容，不会出现空白折叠，其文本会按照源代码格式显示在页面上
该元素通常用于在网页中显示一些代码
pre本身不带有某种语义，因此显示代码时，通常还会在pre元素外套上code元素以增强语义
pre元素的特点是由css属性white-space: pre导致的
HTML实体
实体字符（HTML entity），通常用于在页面中显示一些特殊符号
书写方式
-
&word;小于符号：
<大于符号：
>&符号：
&由于&符号在HTML实体中有特殊作用，因此&符号本身也有对应的实体
空格：
使用实体字符书写的连续空格，不会出现空白折叠现象
-
&#数字;小于符号：
<、<
UTF-8字符
每一个字符，在UTF-8字符集中都对应着一个十六进制数，可以使用类似于实体字符的书写方式展示该字符
“姬成”对应的UTF-8字符为姬成
<p>姬成</p>
在CSS中，UTF-8字符的书写方式如下：
::after{
content: "\69EC\6210";
}
a元素
href属性
hyper reference：通常用于表示跳转页面的地址
其他表示方式：
-
普通链接：href后面直接书写某个页面的url路径
-
锚链接：href后面书写
#id的形式id属性：全局属性，表示元素在文档中的唯一编号
回到顶部：将href属性直接书写为
#，即可在点击a元素时跳转到当前页面的顶部这种写法本质上是通过改变地址栏中url的hash来实现的，只修改hash不会导致页面刷新，因此正常使用时可以直接跳转到页面中的某个锚点而不刷新页面
如果将其书写为
页面地址#id的形式，最终结果是导致跳转到另一个页面中的某个锚点处 -
功能链接
执行JS代码：将href书写为
javascript:JS代码的形式发送邮件：将href书写为
mailto:收件人邮箱的形式，要求用户计算机上安装有邮件发送软件拨号：将href书写为
tel:电话号码的形式，要求用户计算机上安装有拨号软件，或使用移动端访问
target属性
表示跳转窗口的位置
取值：
- _self：在当前页面窗口中打开，默认值
- _blank：在新窗口中打开
路径的写法
站内资源：当前网站的资源
站外资源：非当前网站的资源
绝对路径与相对路径
引用站内资源时既可使用绝对路径又可使用相对路径，推荐使用相对路径
引用站外资源时只能使用绝对路径
绝对路径
完整形式：schema://host:port/path
当引用资源与当前页面的协议相同时，资源的绝对路径可以省略schema:部分，即书写为//host:port/path（主机名前的//不可省略）
当引用资源与当前页面的协议 + 主机号 + 端口号相同时，资源的绝对路径可以省略schema://host:port部分，即可以只剩下/path（路径前的/不可省略）
在对某个资源进行请求时，如果省略了上面的某个部分，则浏览器会自动根据当前页面的url补全请求资源的url
相对路径
相对路径通常以./或../开头
./表示当前资源所在的目录，../表示返回上一级目录
./是可以省略的
如相对路径
href="./index.html"可简写为href="index.html"
扩展
外部css文件中的相对路径是以当前css文件为基准的
例如：在root目录下使用live server打开index.html
root
|—— imgs
|—— a.png
|—— css
|—— index.css
|—— index.html
index.html中的内容
<link href="./css/index.css">
index.css中的内容
body{
background: url("../imgs/a.png"); /* 相对路径是以index.css为基准的 */
}
结果：图片能正确显示
图片元素
alt属性
当图片资源失效时，将使用该属性的内容替代图片
该属性有利于SEO，也有助于屏幕阅读器读取图片内容
map元素
<img src="xxx.jpg" usemap="#imgMap">
<map name="imgMap">
<area shape="" coords="" href="" alt="" target="_blank">
</map>
area是一个空元素，作为map元素的唯一子元素存在，其属性包括：
-
shape：区域的形状，取值可以为：circle（圆形）、rect（矩形）、poly（多边形）
-
coords：区域的坐标
<area shape="circle" coords="圆心x坐标, 圆心y坐标, 圆半径"> <area shape="rect" coords="矩形左上角x坐标, 矩形左上角y坐标, 矩形右下角x坐标, 矩形右下角y坐标"> <area shape="poly" coords="坐标1, 坐标2, 坐标3...">对于浏览器页面来说，x轴向右表示正方向，y轴向下表示正方向
-
href：点击这片区域后跳转的地址
-
alt：图片显示不出时这片区域显示的代替文字
-
target：同a元素的target
figure元素
figure元素把图片、图片标题、图片描述包裹在一起时，能够让文字与图片相关联，利于搜索引擎更好地理解图片
figure元素可以包含figcaption子元素，该元素可以将与图片相关的标题元素进行包裹，用于增强语义
<figure>
<img src="太阳系.jpg">
<figcaption>
<h2>太阳系</h2>
</figcaption>
<p>太阳系的介绍...</p>
</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的编号类型
W3C官方建议使用css属性list-style-type控制编号类型，不建议使用元素的type属性控制
-
reversed：布尔属性，倒序排列
无序列表
ul元素：unordered list
唯一子元素li
ul的属性：
- type：控制子元素li的编号类型
定义列表
dl元素：definition list，通常用于一些术语的定义
两种子元素：dt（definition title），dd（definition description）
容器元素
容器元素代表一块区域，内部用于放置其他元素
div元素
无语义的容器元素
语义化容器元素
header：表示页头，也可以表示文章的头部
footer：表示页脚，也可以表示文章的尾部
article：表示整篇文章
section：表示文章的章节
aside：表示侧边栏
元素包含关系
以前：块级元素可以包含块级和行级元素，行级元素不可以包含块级元素，a元素除外
现在：由于语义化的出现，元素包含关系变得十分复杂，要查看每种元素所能包含的元素，需要到MDN上查找，不过大致可以分为以下几种情况：
- 容器元素中可以包含任何元素
- a元素中几乎可以包含任何元素（a元素不可以包含a元素）
- 某些元素有固定的子元素
- 标题元素和段落元素不能相互嵌套，并且他们都不能包含容器元素
为页面添加样式
div {
text-align: center;
background: lightblue;
color: red;
}
上面的这段CSS代码就是一条CSS规则
CSS规则由选择器和声明块两部分构成
选择器用于选择元素，声明块中包含很多声明（属性），每一个声明表达了某一方面的样式
CSS代码书写的位置
-
行内样式表
书写在style元素中
-
内联样式表，元素样式表
书写在元素的style属性中
-
外部样式表（推荐）
将样式书写到独立的css文件中
推荐使用外部样式表，原因在于：
- 单独的样式文件有利于解决多页面样式重复的问题
- 有利于浏览器缓存，从而提高页面的响应速度
- 有利于代码分离，更容易阅读和维护
常见样式声明
color
取值：
-
预设值：定义好的单词，如：red、blue
-
三原色：
rgb(0~255, 0~255, 0~255)、#000000~#ffffff当hex表示法的三个部分中，每一个内部的数值都相同时，可以简写，如
#ff4400可简写为#f40
font-size
单位：
- px，绝对单位
- em，对于font-size属性，相对于父元素的字体大小；对于其它属性，相对于元素本身的字体大小
每个元素必须要有字体大小，如果没有声明，则继承父元素的字体大小
如果元素是根元素，则使用基准字号（浏览器默认设置的字体大小，Chrome默认为16px）
font-family
设置文字字体
必须用户计算机中存在的字体才能够正确显示
该属性常常会声明多个字体，以保证能够匹配到可用的字体
div{
font-family: consolas, 微软雅黑, sans-serif;
}
sans-serif：非衬线字体，是一大类字体的总称
当用户计算机中有靠前声明的字体时，就会应用该字体，从而忽略后面的字体，否则一个一个向后寻找，直到找到合适的字体
consolas只作用在英文字符，中文没有consolas字体的类型，因此显示中文时，consolas字体就会略过
font-family的改变可能会导致重排
font-style
字体样式，通常用于设置字体倾斜
i元素：默认样式为倾斜字体，其中的内容在朗读时会用一种特别的声调进行朗读
em元素：表示强调，默认样式为倾斜字体
text-indent
首行文本缩进
line-height
每行文本的高度，该值越大，文本行间的距离就越大
行高设置为容器的高度，（通常）可以让单行文本垂直居中
行高可以设置为纯数字，表示相对于当前元素的字体大小
letter-spacing
字体间间隙
text-align
设置文本、行盒以及行块盒的水平排列方式
选择器
简单选择器
-
id选择器
-
元素选择器
-
类选择器
-
通配符选择器
*：表示所有元素 -
属性选择器
[href]：选中所有具有href属性的元素[href="xxx"]：选中所有href="xxx"的元素 -
伪类选择器
:hover：鼠标悬停的状态:active：鼠标按下的状态:link：超链接未访问过的状态:visited：超链接访问过的状态上面四个伪类共同作用于一个元素时，需要按照一定的顺序进行书写：
l v h a -
伪元素选择器
::before：生成一个元素，并且将其作为第一个子元素::after：生成一个元素，并且将其作为最后一个子元素这两个伪元素也支持使用
:xxx的写法，但推荐使用::xxx的写法伪元素必须要有content属性，否则伪元素将不会生成到页面中
选择器的组合
-
并且
如
div.class、div#id、div[attr]... -
空格
表示选中子代或后代元素
-
>表示选中子代元素
-
+表示选中下一个兄弟元素
-
~表示选中后面出现的兄弟元素
选择器的并列
div, span, p{
color: red;
}
层叠
声明冲突：同一个元素，出现了多次同一样式的声明
层叠：解决声明冲突的过程，浏览器自动处理
层叠的过程可分为三步：
- 比较重要性
- 比较特殊性
- 比较源次序
比较重要性
重要性从高到低：
- 作者样式表中的
!important样式 - 作者样式表中的普通样式（无
!important的样式） - 浏览器默认样式表（user agent stylesheet）中的样式
若样式表中的两个样式，它们的重要性相同，则进入下一步
比较特殊性
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（_ _ _ _）：
- 千位：行内样式，记1，否则记0
- 百位：选择器中所有id选择器的数量
- 十位：选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位：选择器中所有元素选择器、伪元素选择器的数量
每一位并非是逢十进一，据说是逢256进一
对于通配符选择器，它的“权重”为0
若样式表中的两个样式，它们的特殊性相同，则进入下一步
比较源次序
代码书写靠后的胜出
爱恨法则
包含伪类选择器的样式，如果它们的重要性和特殊性相同，就需要按照一定的次序书写它们
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属性值
全局css属性值，是指每个css属性都可以书写的属性值
inherit：强制继承，表示将父元素的值取出应用到该元素initial：初始值，设置默认值为css的属性值
注意：【使用继承】这一步是让可以继承的属性自然继承自它父元素的属性值，而属性值为inherit的属性是让属性强制继承它父元素的属性值。前者只有可以继承的属性才能自然继承，继承动作发生在属性值的计算过程的第三步；后者无论什么属性都会发生继承，继承动作发生在属性值的计算过程的前两步（initial的原理也相似）
由于元素是一个一个依次渲染的，因此在子元素渲染之前，其父元素的所有属性值一定都是确定下来的了，这时候再继承就一定能继承到
盒模型
能够显示出来的元素，在页面中都会生成一个矩形区域，可以将这块矩形区域描述为盒子
盒子的类型：
- 行盒：
display为inline的元素 - 块盒：
display为block的元素
行盒在页面中不换行，块盒独占一行
盒子的组成部分
无论是行盒还是块盒，都由以下几个部分组成，从内到外依次为：
-
内容（content）
该部分也称为盒子的内容盒（content box）
标准模式下的块盒，width，height默认设置的就是内容盒的宽高
-
内边距（padding）
盒子的边框内侧到内容盒之间的区域就是内边距
内边距 + 内容区 = 填充盒（padding box）
-
边框（border）
边框 = 边框宽度 + 边框样式 + 边框颜色
边框宽度：
border-width边框样式：
border-style，solid实线边框边框颜色：
border-color，若没有设置边框颜色，则默认使用元素的字体颜色边框 + 填充盒 = 边框盒（border box）
-
外边距（margin）
注意：
-
当元素内部出现滚动条时，滚动条会使得元素的内容盒尺寸变小
<!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，在页面上的表现形式为空白折叠且必要时文本会换行
行盒盒模型
常见的行盒：span、strong、em、i、img、video、audio
特点
-
盒子宽度随内容进行延伸
行盒高度不计算内部的行块盒以及可替换元素
-
设置宽高无效
可以通过调整字体大小、字体类型等间接调整宽高
也可以通过左右
padding间接调整 -
内边距在水平方向有效，垂直方向上仅会导致背景覆盖区域变化，不会实际占据空间
-
边框在水平方向有效，垂直方向上仅会导致边框覆盖区域变化，不会实际占据空间
-
外边距在水平方向上设置有效，垂直方向无效
行块盒
display属性为inline-block的盒子，其有以下特点：
- 不独占一行
- 所有尺寸都有效
可替换元素与非可替换元素
大部分元素，其显示在页面中的内容，取决于元素内部的内容，称为非可替换元素
常见的可替换元素有：div，span、p、h1 ~ h6等
少部分元素，在显示在页面中的内容，取决于元素的属性，称为可替换元素
常见的可替换元素有：img、video、audio、canvas、iframe等
可替换元素的特点：
- 通常为行盒
- 设置所有尺寸都有效
- CSS不能完全控制其样式
object-fit
该属性通常设置在img或video元素上，默认值为fill
默认情况下，图片的显示比例会受到img元素设置的宽高影响
如果只设置
img的宽（高），则img的高（宽）会随着图片比例进行调整，除非宽高都手动设置
如果设置为cover，就能在保证图片宽高比例的前提下，让图片的显示区域撑满img元素，但可能导致图片的一部分区域被隐藏
常规流
视觉格式化模型
视觉格式化模型规定了页面中多个盒子的排列规则
视觉格式化模型，大体上将页面中盒子的排列方式分为三种：
- 常规流
- 浮动
- 定位
常规流布局
常规流，也称为文档流，标准流
所有元素，默认情况下，都属于常规流
总体规则：常规流块盒独占一行，常规流行盒水平依次排列
包含块
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域（活动范围）
绝大部分情况下，盒子的包含块，为其父元素的内容盒
常规流块盒
常规流块盒的具体规则：
-
每个块盒的总宽度（
margin+border+padding+content）必须等于包含块的宽度width: auto表示将包含块的剩余水平空间吸收，width的默认值就是auto
左右margin: auto表示将包含块的剩余水平空间吸收，margin的默认值为0
当width和margin都为auto，则剩余水平空间会归width所有，因为width的空间吸收能力强于margin
若常块盒width为auto，左右margin为负值，则会导致块盒的content-box宽度增加
要设置块盒在包含块中水平居中，可以将块盒定宽，并将左右margin设置为auto
-
块盒在垂直方向上的
autoheight: auto：表示适应内容高度垂直
margin: auto：等于0 -
百分比取值
width、padding、margin可以取值为百分比，百分比都是相对于包含块的宽度height百分比：- 如果子元素的高度设置为百分比，但包含块高度取决于子元素，则高度百分比无效
- 包含块高度固定，不取决于子元素，则子元素设置的高度百分比相对于包含块高度
注意：border的尺寸不能设置为百分比
-
外边距合并
两个常规流块盒，若上下外边距无缝相邻，会发生合并
所谓的上下外边距可以是一上一下，也可以是都为上，后者通常出现父子元素之间
-
忽略脱离常规流的元素
常规流元素会无视浮动和定位元素的原因
-
计算自动高度时，会忽略其内部的脱离了常规流的元素
高度坍塌的原因
浮动
左浮动：设置元素属性float: left，左浮动的元素在包含块中（先）靠上（再）靠左排列
右浮动：设置元素属性float: right，右浮动的元素在包含块中（先）靠上（再）靠右排列
常规流中的元素，默认float为none，即不浮动
特点
-
浮动后的元素，一定为块盒
-
浮动元素是脱离常规流的
-
浮动盒子的尺寸
宽高度为
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：固定定位，会导致元素脱离常规流sticky：粘性定位
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，0right： 100%，bottom: 100%是指其margin区域的左上角距离包含块右下角的距离分别为0，0 -
定位元素的width、padding、margin百分比和常规流块盒一样，相对于包含块的宽度，height百分比相对于包含块的高度
只是包含块发生了变化
更多选择器
伪类选择器
-
:first-child选中第一个子元素
-
:first-of-type选中第一个指定类型的子元素
-
:last-child选中最后一个子元素
-
:last-of-type选中最后一个指定类型的子元素
-
:nth-child(n)选中第n个子元素
n可以为数值、变量如
2n、也可以为关键字如even（偶数，同2n）、odd（奇数，同2n+1） -
:nth-of-type(n)选中第n个指定类型的子元素
伪元素选择器
-
::first-letter选中第一个字符
-
::first-line选中第一行文字
-
::selection选中被用户选择的文字
更多样式
透明度
-
opacity
该属性设置的是整个元素（包括后代元素和文本内容）的透明度，取值为0 ~ 1
-
在颜色位置设置alpha通道
给某个属性设置alpha通道，只会影响该属性，不允许其他属性以及元素的内容
鼠标
设置cursor属性
cursor可以设置为外部图片文件（大部分浏览器支持.ico和.cur的文件）
cursor属性可以给予多个属性值，当前一个属性值失效时，会使用下一个属性值
cursor: url("xxx.ico"), default;
盒子隐藏
-
display: none不生成盒子，但元素仍存在于DOM tree中
-
visibility: hidden生成盒子，盒子仍然占据空间，只是视觉上隐藏了
背景图
与img图片的区别：
-
img元素属于html的范畴，背景图属于css的范畴
-
当图片属于网页内容时，使用img元素
当图片属于网页修饰时，使用背景图
涉及的css属性：
-
background-imagebackground-image: url("xxx.jpg"); -
background-repeat设置重复，默认情况下，背景图会在横向和纵向上进行重复
-
background-size设置背景图的比例和大小
取值可以为具体数值（px，em，rem等）、预设值、百分比
当取值为预设值时，效果与
object-fit类似当宽或高取值为百分比时，表示相对于设置背景图的元素的填充盒宽或高的百分比
-
background-position设置背景图的位置，取值可以为具体数值
或预设值：
left、right、center、top、bottom或百分比：
0% 0%等价于left top，50% 50%等价于center center，100% 100%等价于right bottom预设值的left表示背景图的左边缘距离元素填充盒的左边缘为0，right表示背景图的右边缘距离元素填充盒的右边缘为0，top表示背景图的上边缘距离元素填充盒的上边缘为0，bottom表示背景图的下边缘距离元素填充盒的下边缘为0
-
background-attachment将其设置为
fixed后，则背景图的位置是相对于当前视口的，滑动滚动条不会导致背景图移动
精灵图
精灵图（Sprite Image）是通过设置属性background-image、background-position达到只显示背景图的一部分的效果
背景图与背景颜色混用
background-image: url("xxx.jpg");
background-color: #f40;
元素中背景图没有覆盖到的位置，使用背景颜色进行填充
iframe元素
通常用于在网页中嵌入另一个网页
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>
美化表单元素
新的伪类
-
: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"; -
@media：实现媒体查询@media (min-width:400px) { body { text-align: center; } } -
@keyframe：定义动画@keyframe animation-name { 0% {} 100% {} }
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的元素，它的边框盒不会与兄弟浮动元素的margin-box重叠
当浮动元素书写靠前时，两者会在水平方向上依次排列而没有重叠区域
利用这个特点可以实现多栏布局
-
创建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; */ /* chrome浏览器默认的字体大小为16px */
}
.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值）的定位元素（包括相对定位）
- 设置transform为非none的元素
- 设置opacity小于1的元素
创建堆叠上下文的元素，其元素本身是并不是处在它所创建的堆叠上下文中
处于堆叠上下文F中的元素，在Z轴上的排列顺序（从后向前）为：
-
创建堆叠上下文F的元素的背景和边框
-
z-index为负值的定位元素所创建的子堆叠上下文S
-
常规流块盒
-
非定位浮动盒子
-
行盒
-
z-index为auto的定位元素（不会创建堆叠上下文），以及z-index为0的定位元素创建的子堆叠上下文S
-
z-index为正值的定位元素创建的子堆叠上下文S
若同处于该级别的两个元素，z-index越大，越靠前
若处于同一堆叠上下文的两个元素，它们同属于上面的某一种情况，则位于文档后面的元素覆盖位于文档前面的元素
每个堆叠上下文，独立于其他堆叠上下文，它们之间不可相互穿插
数据链接
数据链接（data url）是指将目标文件的数据直接书写到路径位置
语法：data:MIME,数据
<link href="data:text/css,body{color:red;}">
优点：
- 减少浏览器请求的次数
- 有利于动态生成数据
缺点：
-
增加了页面资源的体积
-
不利于浏览器缓存
base64
一种编码方式，通常用于将一些二进制数据用一个字符串表示
<img src="data:image/png;base64,xxx">
base64编码会导致资源体积比原来多出1/3
浏览器兼容性
常见厂商前缀
厂商前缀使用在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 ~ IE11background: orange\9; -
属性值 +
\0：兼容IE8 ~ IE11background: 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 -
定位元素
① 给元素定宽，设置left、right为相同的绝对值，再设置左右
margin为auto② 给元素定宽，设置left为50%，再设置margin-left为负的元素宽度的一半
③ 无需给元素定宽，设置left为50%，再设置transform的translateX为
-50% -
使用flex布局，设置弹性容器
justify-content: centent -
使用grid布局，设置网格容器为单列，再设置
justify-items: center
垂直居中
-
单行文本
设置文本所在元素的
line-height为包含块的高度 -
行块盒 & 块盒内的多行文本
设置盒子的上下
padding为相同的绝对值 -
定位元素
① 给元素定高，设置top、bottom为相同的绝对值，再设置上下
margin为auto② 给元素定高，设置top为50%，再设置margin-top为负的元素高度的一半
③ 无需给元素定高，设置top为50%，再设置transform的translateY为
-50% -
使用flex布局，设置弹性容器
align-items: center -
使用grid布局，设置网格容器为单行，再设置
align-items: center
样式补充
display: list-item
设置该属性值的盒子，会附带另一个盒子
元素本身的盒子叫做主盒子，附带的盒子称为次盒子，次盒子与主盒子水平排列
li元素的默认display属性值就是list-item
涉及的css属性：
list-style-type：设置次盒子中内容的类型，是可继承属性list-style-position：设置次盒子相对于主盒子的位置list-style：上面两个css属性的速写属性
图片失效时的宽高问题
如果img元素的图片链接无效，则img元素的特性会和普通行盒一样，无法设置宽高
行盒中包含行块盒或可替换元素
当行盒中包含行块盒或可替换元素，则行盒的自动高度与它内部的行块盒或可替换元素无关
这种情况通常发生在a元素中
text-align: justify
除最后一行的行盒&行块盒&文本外，其它行行盒&行块盒&文本分散对齐
