前端笔记
HTML和CSS
注：两者在浏览器运行中缺一不可
一、HTML概述：超文本标记语言(用于定于文档的内容结构)
HTML:HyperText Markup Language
w3c:官网地址 w3.org
基本术语
1、HTML注释
注释书写格式：<！-- 书写内容–>
2、HTML元素
1、元素的组成部分：元素=起始标记+元素内容+结束标记， 示例：
<head(起始标记)> 元素内容</head（结束标记）>
在起始标记中可能赋予元素不同的结构含义
例：
<a href="/classroom">立即加入</a>"
a（元素名）：表示这是一个超链接
元素内容：表示在页面显示立即加入
href属性:属性名，表示用户点击它后，会跳转到classroom中
classroom:属性值（属性名和属性值写在起始标记中）
2、空元素（自闭合元素）（常见：img , mate）
<img src="/assets...." alt="编程入门">
img元素没有元素内容和结束标记
书写方式
<标记名 属性>
或
<标记名 属性/>
另 ：XHTML,旧的web标准
（1）要求所有元素必须小写
（2）所有属性名和属性值必须成对出现
（3）所有属性值必须成对出现。
（4）所有的空元素必须自闭合
（5）元素的层次结构
3、表格元素 table
表格中的结构元素（表格中只能书写的元素）
1、caption 表格的标题
2、thead 表头
3、tbody 表体
4、tfoot 表尾
5、tr 行
6、th 表头中的列
7、td 表体表尾中的列
表格中的折叠边框元素：border-collapes:collapes;
跨行、跨立元素：
<td colspan="3">合并3列
<tr rowspan="3">合并3行
4、其他元素
h1~h6 1级标题~6级标题
p 段落
blockquote 整段引用
cite 对参考文献的引用
q 小段文本的引用
abbr 对缩写词的引用
strong 重要文本
em 强调的文本
b 应突出显示的文本
i 应区别对待的文本
div 没有任何意义，仅表示一个容器，用于包含其他元素，在页面布局时，它通常用于划分页面的区域
可用以下元素代替div
header 页头
nav 菜单（导航栏）
aside 跟周围主题相关的附加信息
article文章
section 表示一个整体，一部分主题
footer 页脚
span 无语义，仅用于一小段文本添加样式（span规定的文本长度有限）
br 无语义，空元素，用于页面换行
hr 空元素，用于页面中国定义一个分隔符
pre 空元素，预格式化内容，使页面格式按html代码中编写的格式输出，一般用于代码输出
img 书写格式
<img src="图片地址" alt="图片无法显示时显示的内容" title="鼠标悬停时显示的内容">
ul(unordered lise 无序列表) ul元素中内容只能是li元素，li元素中可以是其他元素
ol(ordered list 有序列表) ol元素中叶只能是li元素
table 表格元素
可在table元素中使用的元素（表格的结构元素）
1 caption 表格的标题
2 thead 表头
3 tbody 表体
4 ftoot 表尾
5 tr 行
6 th 表头中的列
7 td 表提及表尾的列
table{
width:100% 表格宽度
border-collapes:collapse;折叠边框
}
<td rowspan="3">(跨)合并3行
<td colspan="3">(跨)合并3列；
给表格加边框：
table td{
border:1px solid black;
}
5、元素的层次结构
一个元素内容中也可以包含其他元素，形成嵌套的层次结构
<p> 正确格式 <p> 错误格式
<strong> <strong>
</strong> </p>
</p> </strong>
元素嵌套可以形成树状结构，其中：
（1）若A元素直接包含B元素，则A称为B的父元素，B称为A的子元素
（2）若两个元素有同一个父元素，则它们互为兄弟元素
（3）若A元素直接或间接包含B元素，则A元素为B元素的祖先元素，B为A的后代元素
3、文档声明
出现在HTML代码的第一行
书写代码：
<!DOCTYPE html> (作用：通知浏览器当前文档正在使用哪一个HTML版本)
4、HTML文档结构
1、HTML元素：根元素，所有元素的祖先元素
相关属性：lang(language的缩写，指定文档使用的语言)
例：
<html lang="en"><html>
表示这个文档使用的是英语作为自然语言（简体中文：zh-cmn-Hans）
2、head元素：文档头，是html的第一个子元素，描述页面的附加信息
注：head元素中的内容不会显示到页面上
head元素中通常包含的元素
（1）mate：标志页面的其他元数据，示例：
<mate charset="UTF-8">
（2）title：标志文档标题，该标题显示在浏览器的标题栏
3、body元素：文档体，html的第二个子元素
友情提示快捷键
注释：将光标放到在需要注释的那一行，ctr+?
选中相同文本：ctr+d
插入行：ctr+shift
统一代码：alt+shift+f
快建列表项：ul>li*n(列表的数量)>{列表内容$}+tab
快捷建立标题项和段落：(（h1>lorem4）+(p>lorem1000))34和1000表示标题和段落里面的字数，3表示建立多少个标题和段落*
5、html元素的语意化
（1）什么是语意化
文档的内容具有的含义只与它使用的元素有关，与css样式无关
（2）语意化的作用
有利于浏览器理解HTML文档
有利于搜索引擎理解HTML文档
（3）HTML元素表
a元素（超链接）
书写方式一（href属性）：
<a href="目标">内容</a>（内容会像是到页面上）
目标包含：
1、页面路径 ：网页地址
2、锚点 ：
建立锚点（在body中）：<a href="锚点名1">内容</a>
使用锚点：<h1 id="锚点名">内容</h1>
回到顶部：<a href="">回到顶部</a>
3、功能链接
<a href="mailto:邮件发送地址">发送邮件</a>
<a href="javascript:alert('a')">弹出</a>
书写方式二：(target属性)
<a target="页面打开位置" href="目标">内容</a>
页面打开位置：_blank 新窗口中打开 _self 在当前窗口中打开
实体字符（可用于显示html中某些有特殊意义的字符）
书写格式：&实体名； &实体编号；
常见实体字符： 显示结果 描述 实体名称 实体编号
、 空格 &160
< 小于符号 < &60
> 大于符号 > &62
& 并且符号 & &38
版权符号 © &169
6、相对路径和相对路径
（1）绝对路径（访问站外资源）
http://www.baidu.com/ (协议：http 域名：www.baidu.com 目录：根目录
（2）相对路径（访问站内资源）
./../../css/main.css
./表示当前资源所在的目录，从当前位置出发去寻找需要的文件的目录
../表示返回上一级目录
在区域中填充内容
1、页面的制作过程
1、得到设计图
2、划分页面区域
1、html：结构元素
2、CSS：块盒
3、填充区域中的内容
1、html：文字、图片和多媒体元素
2、CSS：行盒
2、html中的图片和多媒体
1、img属性
src：图片路径
alt : 图片无法显示时使用的替代文本
title属性：鼠标悬停是显示的文字（全局属性，所有元素通用的属性）
注：同一张图片里面有不同的超链接的设置方法
map元素：图片地图，划分区域
<img usemap="a" src="dfgd">
<map id="a" name="a">
<area shape="区域的形状" coordes="坐标（x,y,x,y）" href="跳转地址" target="_blank"> 其中，（x,y,x,y）表示矩形的两个点，对角点
2、video属性
书写方式：
<video src="dfgb" controls autoplay loop>
src属性：视频路径
controls属性：bool属性 显示播放控件（controls=controls）
autoplay属性：自动播放，必须先静音
muted属性：静音
loop属性：bool属性，指定后视频将进入循环播放
3、audio属性（格式：mp3）
src属性：音频路径
controls属性：bool属性 显示播放控件（controls=controls）
autoplay属性：自动播放，必须先静音
muted属性：静音
loop属性：bool属性，指定后音频将进入循环播放
4、figure和figcaption（语义化，让搜索引擎可以理解）
一起表示一个图片和多媒体单元
1、figure包起来的表示一张图片的所有相关信息
2、figcaption图片的标题
5、可替换元素和非可替换元素
可替换元素：元素的显示内容，由其属性决定，自身没有元素内容，比如img video audio
非可替换元素：元素显示的内容，由元素内容决定，绝大部分元素都是非可替换元素
6、嵌入式元素
概述：嵌入式元素用于向网页中嵌入外部资源
img map arae 向网页中嵌入图片资源
video 向页面中嵌入视频
audio 向页面中嵌入音频
embed object 向页面中嵌入flash动画
iframe 向网页中嵌入另一个页面
7、iframe元素
<iframe src="其他页面的链接">
8、embed object元素
1、使用object元素嵌入动画
<object data="地址" type="嵌入的东西的格式">
<内容>
</object>
<type="application/x-shockwave-flash">type嵌入的标准格式
2、使用embed原始嵌入动画
<embed src="路径" type="application/x-shockwave-flash" 内容>
行盒（行盒即内容）
概述：display属性为inline的元素,具体的内容都会生成行盒
1、常见行盒元素
1、大部分文字元素：span、abbr、en、i、strong、b
2、图片和多媒体
2、行盒的含义
文字：必须放到行盒内，否则会生成匿名行盒
老标准：块盒可以包含行盒，行盒不可以包含块盒，但a元素例外
新标准：完全抛弃以上规则，但标题中不要包含段落，段落中不要包含区域或标题
3、行盒的规则
1、行盒可被折断，因为内容可被折断换行，可通过word-break设置截断位置
2、同一个包含块中，多个行盒依次水平排列
3、空白折叠仅适用于行盒之间
4、行盒与行盒之间，可通过padding和margin来设置距离
注：1、多个盒子在一行排列时，谨慎使用行盒，因为行盒之间有空白折叠
2、单行文字垂直居中。可以设置行高为包含块的高度
3、给某一个区域统一设置行高时，建议设置无单位的行高，通常，直接给Body元素设置即
4、{display:block ; float:left}，可简化为{float:left}，浮动和绝对定位元素自动为块盒
5、当需要调整行盒之间的垂直对齐方式时，可以通过vertical-align设置
6、图片底部出现白边，（1）图片设置为块盒（2）调整图片的vertical-align属性
4、行盒的尺寸
1、行盒：可替换元素：图片和多媒体
（1）与块盒完全一致
（2）对于图片和视频，仅设置宽高中的一个是，另一个会自动按比例适应
（3）对于图片和视频，如果同时设置宽高，可通过object-fit属性设置适应方式
object-fit：内容尺寸如何适应，仅用于可替换元素，不可继承
默认值：fill 表示完全填充，不考虑宽高比
contain 宽高比例保持一致，且保证不会超出内容盒
cover 覆盖 宽高比例一致，充满设置的尺寸，某些地方会被隐藏
none 不进行任何缩放，会导致很大一部分一处
2、行盒：不可替换元素：文字类
（1）宽高无效
（2）垂直方向上的margin border padding不占据布局空间
（3）可使用Line-height设置一行文字的高度（line-height=行盒高度，可将文字垂直居中）
默认值：normal 可继承
20px:固定值，20个像素的行高
2em：相对值，按照当前元素字体大小计算，**计算后**被子元素继承，与子元素字体大小无关
200%：同2em
2：相对值，按照当前元素字体大小计算，**计算前**被子元素继承，相对于子元素字体代销的比值计算
1、单行文字垂直居中。可以设置行高为包含块的高度
2、给某一个区域统一设置行高时，建议设置无单位的行高，通常，直接给Body元素设置即
5、行盒的位置
（1）行盒的定位体系必定是常规流，若是将行盒设置为浮动或绝对定位，会自动变为块盒
（2）行盒在包含块中，避开浮动和常规流盒子
（3）包含行盒的块盒，可使用text-align调整行盒在它内部的对齐方式，行盒会在块盒中排成一排
（4）行盒之间的对齐方式，可使用vertical-align调整
vertical-align：baseline 默认基线对齐
bottomline 底线对齐
topline 顶线对齐
当需要调整行盒之间的垂直对齐方式时，可以通过vertical-align设置
图片底部出现白边，（1）图片设置为块盒（2）调整图片的vertical-align属性
行块盒
概述：display属性值为inline-block元素生成的盒子，行块盒在某些方面的表现像行盒，某些方面的表现像块盒
1、与行盒的区别
能设置宽高
2、与块盒的区别
某个元素宽度适应内容，并且需要一些垂直方向上的尺寸，同时需要居中，可以考虑设置为行块盒，设置父元素的text-align:center
块级格式化上下文：BFC（Block Formatting Context）
概念：它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局规则
1、渲染区域：这个区域有某个html元素常见，以下元素会在其内部创建BFC区域：
-
根元素：意味着，元素创建的BFC区域，覆盖了网页中所有的元素
-
浮动和绝对定位元素
-
overflow不等于visible的块盒
-
弹性盒
-
表格
2、计算规则
1、创建BFC的元素，它的自动高度需要计算浮动元素
2、创建BFC的元素，它的边框盒不会与浮动元素重叠
3、创建BFC的元素，不会和它的子元素进行外边距合并
二、CSS（定义HTML文档的样式（外观））
css:Cascading Style Sheets
CSS术语
1、CSS注释
书写格式：/注释内容/
2、CSS规则
CSS规则组成了CSS代码，表示对哪些元素应用什么样式，例：
h1{color:red; text-align:center;}意思是所有标题为h1字体的颜色为红色，文本内容剧中
h1为选择器，规定大括号中的样式应该运用到哪些元素上。大括号中的为声明块
2、声明块：声明块中包含定义的属性名和属性值，例：
{color:red; text-align:center; font-size:18px;}
其中color为属性名，red为属性值
CSS引用
1、外部样式表（后缀名 .css）
通过link元素引用到html代码中
2、内部样式表(位置在head元素的style元素中)
<head>
<style type="test/css">
h1{color:red; test-align:center;}
</style>
</head>
3、行内样式表（直接写到元素的style属性中，不写选择器（h1））
<h1 style="color；red;...;"><h1>(直接选中了元素h1)
CSS属性
常见CSS属性：颜色、字体大小。。。。
CSS选择器
（作用是：决定了将规则运用到哪些元素上）
选择器分为：
1、简单选择器
（1）元素选择器
书写格式：元素名{声明块}，例子见上，该选择器会选中所有h1的元素，并将声明块的内容应用到h1中
（2）类选择器
书写格式： .类名{声明块} ，会选中所有class(类)属性为指定类名的元素，例
CSS代码
.bigfont{font-size:18px}
.redcolor{color:red;}
html代码
<p class="bigfont redcolor">
表示元素p中的字体大小都为18px，颜色都为红色
（3）ID选择器
书写格式： id值{声明块} 示例：
big{font-size:18px;}
注：id值只能是唯一的
（4）通配符（选中所有的元素，并将其变为制定的样式）
书写格式：*
（5）属性选择器（指定属性值）
例：<a href="http://www.baidu.com/">
<a href="www.sina.com/" >
<a href="google.com" class="redcolor">
使用属性选择器
[href='http://www.baidu.com/']{color:red;}
意思是：选中属性值是http://www.baidu.com的元素，将其变为红色
或者是a[href='...']{color:red;}意思是要改变的属性值必须是a元素中包含的
a[href$='baidu.com']{color:red;}意思是以baidu.com结尾的都变为红色
a.redcolor 等同于 a[class~=redcolor] 意思是选中class中包含redcolor的a元素
（6）伪类选择器（选中带有某种状态的元素）
例：a:hover{color:red;}意思是当鼠标悬停在a元素的内容上面是，内容的颜色变为红色
其中，a为元选择器，hover为伪类选择器（选择器的组合）
爱恨原则：
a:link 链接未被访问的样式
a:visited 连接已被访问的样式
a:hover 鼠标悬停的样式
a:active 链接被**的样式
在列表中的应用：
例：1、如果li是父元素的第一个子元素，则将其变为红色
li:frist-child{color:red;}
li是父元素的最后一个子元素。。。
li:last-child(color:red;)
2、如果li是父元素的第奇数个元素，颜色变为红色
li:nth-child(2n+1 或者是 odd){color:red;}
如果li是父元素的第偶数个元素，颜色变为红色
li:nth-child(2n 或者是 even){color:red;}
（7）伪元素选择器（在指定元素的第一个位置和最后一个位置添加一些东西）
例如：span::before{content:"《";}意思是在span元素的第一个位置添加一个书名号
span::after{content:"》";}意思是在span元素的最后一个位置添加一个书名号
2、选择器的组合
例如：选中类名（class）为nav2的后代元素a,当鼠标在其上面悬停时变为红色
.nav2 a:hover{color:red;}
或者是选中nav中class名为nav2的后代元素a，当鼠标在其上面悬停时变为红色
nav.nav2 a:hover{color:red;}
等同于：nav[class~=.nav2] a:hover{color:red;}
另，可精确选择，书写方式为（大于符号后面的元素表示后代元素（子元素））
.nav1>ul>li>ul a{color:red;}意思是选中nav1的子元素ul中的子元素li中的子元素ul中的子元素a，将其变为红色
3、选择器的分组
例：要同时选中p元素和h1元素，将其颜色变为红色
p,h1{color:red;} p和h1之间用逗号隔开
CSS声明冲突
什么是声明冲突：多个相同的css属性应用到同一个元素上
CSS层叠
1、css层叠的概念
层叠是一种机制，用于解决css声明冲突
影响它层叠的css规则：作者样式表、浏览器默认样式表、用户样式表（用户在浏览器中浏览时手动写入的css样式）
2、层叠的过程
1、比较优先级
规则：优先级高的保留，优先级低的淘汰
优先级的高低与他的来源及重要性有关
来源：作者样式表、浏览器默认样式表、用户样式表
重要性：加了 !important的声明表示特别重要
优先级：用户样式表中的重要声明>作者样式表中的重要声明>作者样式表中的普通声明>用户样式表中的普通声明>浏览器默认样式表中的声明
2、比较特殊性
特殊性高的保留，特殊性低的淘汰
如何比较：
总规则：使用范围越大，特殊性越小
行内样式>ID选择器>类选择器>元素选择器>通配符
具体规则：
比较a,b,c,d
- a: 若声明是行内样式，则为1，否则为0
- b：规则中ID选择器的个数
- c：规则中类选择器、伪类选择器的个数
- d：规则中元素选择器、伪元素选择器的个数
注：当计算选择器分组的时候，要分开计算
3、比较原次序
原次序靠后的保留，原次序靠前的淘汰
CSS继承
1、继承的概念
继承，是指子元素会自动拥有父元素的某些CSS属性，继承过程自动发生
不是所有CSS属性都可以被继承，不鞥被继承的属性：
background-color
2、继承发生的场景
- 该属性是可继承的属性
- 该属性在样式表中没有声明
3、强制继承
强制继承的概念：也叫做显式继承，是指将CSS属性值设置为inherit
4、强制继承发生的场景
- 继承某些不可继承的属性
- 继承已经被声明过的属性
属性值计算过程简介
1、确定声明值
找出无冲突的声明，作为最终的属性值
2、层叠冲突
对有冲突的声明进行层叠，确定CSS属性
3、使用继承
对仍无值的属性，若可以继承，就继承
4、使用默认值
定位和布局的基本概念
一、基本概念
1、视觉格式化模型
视觉格式化模型是CSS的一种机制，它规定了页面中的多个盒子如何布局
2、视口（viewport）
视口：浏览器的可视窗口，视口的尺寸只与浏览器的可视窗口大小有关，与内容无关，如果页面内容尺寸超过可视窗口大小，会出现滚动条
3、包含块（containning block）
每个元素都有一个包含块，它是指元素在页面中摆放的区域，通常情况下，元素的包含块是它父元素的内容块，其中，html没有父元素，它的包含块就是初始化包含块。
二、定位体系的概述
1、元素的尺寸和位置受两个因素的影响
1、盒模型
2、定位体系：常规流、浮动、绝对定位
任何一个元素，都必须且仅有一个定位体系，不同的定位体系，元素在包含块中的尺寸和位置有差异
2、定位体系的判定
默认情况下为常规流
3、盒模型和定位体系之间的相互影响
1、盒模型影响元素的尺寸，定位体系影响元素的位置
2、定位体系会影响盒模型中auto值的计算
4、盒模型中的尺寸
1、尺寸单位： %（可自动适应窗口的大小）
表示元素的尺寸是包含块宽度的百分比
可使用该尺寸单位的元素有：width、height、margin（可为负值）
height的百分比：
（1）若包含块的高度与内容无关，则相对于包含块的高度（包含块的高度固定）
（2）若包含块的高度与内容有关，则高度设置无效
2、尺寸取值：auto
尺寸受到定位体系的影响，按照不同定位体系的规则计算
视觉格式化模型之常规流
概念：常规流又称为文档流、普通流、普通文档流，所有元素默认为常规流
一、常规流中的auto值
1、水平方向的auto值
常规流盒子水平方向上的尺寸（margin+width），必须等于包含块的宽度
其中，padding、border没有auto值
若margin与width值都为默认值，则默认margin值为0,width撑满包含块
涉及到的居中方式：
边框盒居中：左右margin值为auto，width等于固定值，margin会撑满内容块
常规流盒子如何撑满包含块：
1、width 、margin为auto，width撑满
2、width固定，margin撑满
3、width、margin都固定，margin-right的值会被强制设置为auto，使margin撑满
2、使盒子左右伸出包含块
宽度为auto，左右margin为负数
3、水平方向上的auto
margin默认为0，若取值为auto，则是自动适应内容
二、常规流中盒子位置的摆放
规则：从上到下依次摆放，垂直方向上，若两个外边距相邻（相邻的意思是两个外边距之间没有padding、congtent），则进行合并（折叠），合并规则：
均为正数取最大，均为负数取最小，一正一负则相加
1、弹性布局
概念；一个盒子，如果将其display属性设置为flex，该盒子变为弹性盒，也叫做弹性容器，该盒子的所有子元素，自动变为弹性项目，弹性盒本身按照自身的定位体系排列，弹性布局影响的仅仅是弹性盒中的弹性项目（子元素）。
2、弹性盒在线上的对齐方式
1、flex-direction：更改主轴方向
flex-direction:row 默认值，从左到右依次排列
row-reverse 改变主轴方向，从右到左排列
column 从上到下排列
column-reverse 从下到上排列
2、justify-content:更改主轴对齐方式
justify-content:flex-start 默认值，从主轴起点依次排列
flex-end 从主轴终点往前排列
center 在主轴中线对齐
space-between 左右靠边，中间平均
space-around 所有项目平均分布
3、align-items:侧轴对齐方式
align-items;strech 默认值，拉伸（前提，弹性盒本身有高度）
flex-start 在侧轴起点对齐
flex-end 在侧轴终点对齐
center 在侧轴中线对齐
4、align-content:多根主轴在侧轴的对齐方式
align-content:space-between 两边靠边，中间平均
5、flex-wrap:弹性项目换行
flex-wrap:nowrap默认值，不换行
wrap 换行
3、弹性项目的规则和高度
规则：弹性项目宽度和高度为auto时，适应内容的高度和宽度，margin为auto时，会吸收弹性容器的剩余空间
弹性项目的属性：
1、order 更改弹性项目的排列顺序，顺序从小到大
style="order:0" style="order:0"
2、flex-shink：更改弹性项目的压缩比例
flex-shink：1 默认值为1，所有项目压缩比例一致
flex-shink：0，不压缩
style="flex-shink:1"
3、flex-grow：更改弹性项目的增长比例
flex-grow：1 默认值为1，所有项目压缩增长一致
flex-grow：0，不增长
style="flex-grow:1"
4、flex-basis：弹性项目在压缩或增长之前的基础宽度，若不设置，默认为auto，表示与width相同，速写：
flex:grow shink basis;
视觉格式化模型之常浮动
概念：当元素的float属性取值为Left或right时，元素属于浮动定位体系。默认取值为none，主要是为了做文字环绕效果，文字在排列时，会自动绕开浮动盒子。
注：如果一个元素已经是弹性项目（父元素是弹性盒），则不能浮动
一、浮动定位体系下，auto值的计算
1、margin 取值为auto 时，则默认为0
2、width、height:auto，默认为适应内容宽高
二、浮动中盒子位置摆放规则
1、float:left 左浮动，盒子向左上排列
2、float:right 右浮动，盒子向右上排列
3、若剩余空间无法容纳浮动的盒子，则该盒子向下移动，直到具备足够的空间容纳盒子
4、上一个盒子的顶边不得高于上一个盒子的顶边
5、父元素会无视浮动盒子的位置及高度，造成高度坍塌
解决方法：
（1）清除浮动
clear；none 默认值，不清除
left 清除左浮动
fight 清除右浮动
both 清除所有浮动
（2）给浮动盒子高度
.clearfix::fter{
content:"";
display:block
clear:both;
] 添加一个伪类选择器，给浮动盒子的最后一个盒子后面添加一个空元素
视觉格式化模型之常绝对定位
一、绝对定位取值
1、position:static 默认值，静态位置，是指相对于盒子在原本定位体系下的位置
2、position：relative 相对位置，该盒子可以相对于原本位置进行偏移，可通过left right top bottom进行设置，不会对其他盒子造成影响，值可为负数
例：{
position:relative 设置盒子为相对位置
left:10px; 相对于原来的位置，距离左边10px
top:20ps; 距离上边20px;
} 注：相对位置不会改变盒子的定位体系，仅设置相对位置（不设置偏移量），盒子不会有任何变化。
3、position:absolute 绝对定位
（1） 如果元素被设为绝对定位，其他定位会被强制设置为none（一个元素只能有一个定位体系）
（2）绝对定位不会对其他元素造成影响
（3）绝对定位的元素位置可通过left right top bottom进行设置，相对于包含块的偏移量
4、position:flex 固定位置
二、绝对元素的包含块
通常情况下，元素的包含块是父元素的内容盒，但绝对元素除外。
1、absolute的包含块：往上依次判断元素是否拥有position值不等于static（position值被改动过）的祖先元素，若有，则该祖先元素的填充盒就是元素的包含块，若没有，则该元素的包含块为初始化（整个网页）的填充盒（padding box）
2、flex包含块：视口，上下左右仅相对于距离视口而言
三、绝对定位中的auto值
1、绝对定位的元素，宽高为auto时，适应内容。
2、大部分情况下，盒子中的auto值与浮动盒子的计算规则相同。少部分情况下，auto值需要适应盒子的位置。
四、绝对定位中的居中
1、水平居中
定宽，左右距离为0，左右margin为auto
2、垂直居中
定高，上下距离为0，上下margin为auto
五、绝对定位中的撑满
1、width:auto 上下左右为0，margin：0 ，宽撑满
2、height:auto 上下左右为0 ，margin：0 ，高撑满
六、半透明
rgba(0,0,0,.5)
七、堆叠级别（z-index）
概念：堆叠级别决定了绝对定位的元素距离客户的距离，通常情况下，堆叠级别越高，显示越靠前
z-index:auto默认值，可将默认值改为具体数值，以决定堆叠级别
注：堆叠级别仅对改动过position的元素而言，不能用于static的元素
美化变形动画
一、美化盒子
1、美化文本
第一部分
1、font-size字体大小
font-size：字符框的高度 、 可继承 、 默认值：medium
其他取值：
px 绝对字体大小
em：相对于父元素的字体带下，若没有福元素，则使用基准字号（若是margin / padding 取值为em，则相对于当前元素的字体大小），大部分浏览器的基准字号，默认为16px，基准字号通常可以被用户修改
%：同em
rem：相对于根元素（html）字体大小，若根元素没有设置，则相对于基准字号
2、font-weight字体重量
font-weight：默认值为nomal，加粗：bold
3、font-style:字体倾斜
font-style:默认值为nomal，倾斜：italic
4、letter-spacing:字间距
letter-spacing：可设置为px或em设置间距
5、text-indent:文字首行缩进，设置2em可设置缩进2个字符
6、text-decoration修饰，给文字划线
text-decoration默认值：none
其他取值：
overline：文字顶部划线
unduiline：文字底部划线
through：文字中部划线
7、del表达不精准的内容或过期的内容，浏览器默认样式表中，对该元素使用text-decoration:through
8、ins:表示新增的内容
注：可表示商品的前售价及折后价
第二部分（前三为伪元素选择器）
1、::first-letter修饰首字母
2、::first-line 修饰首行
3、::selection 修饰选中文字
4、sans-serif 非衬线字体：文字边缘未经过修饰，在电子设备上视觉效果良好
5、serif 衬线字体：文字边缘经过修饰，在纸张上视觉效果良好
6、font-family修改字体类型，可继承（可设置在body或html里面）
font-family:"consolas"（只能对英文）,"翩翩体","sans-serif"
设置ont-family时，可设置多个值
浏览器会依次读取设置的值，若一个值失效。则读取下一个值
因此，为了避免全部都失效的情况，通常将最后一个值设置为“sans-serif”或“serif”
由于font-family属性石可继承的属性，并且一个网页通常情况下字体都是统一的，因此，通常对body元素使用font-family属性即可
7、@font-face加载web字体，强行给浏览器加载字体（@表示一个指令，在css中的前面通常加@表示指令）
8、字体图标（字体图标就是一个web字体）
2、美化边框
border-redius:圆角边框，可设置百分比（50%可将举行变成圆）
二、美化背景
1、背景图
1、background-img:设置背景图片
background-img：url("图片地址");
2、background-repeat:设置图片重复方式
background-repeat：repeat默认值
no-repeat不重复
repeat-x仅在x轴上重复
repeat-y仅在y轴上重复
3、background-position：设置图片在边框盒中的位置
（1）预设值
background-position：（left right（横坐标） top bottom（纵坐标））
background-position:left top （默认情况）靠左靠上
background-position：center bottom靠中靠下
background-position：center center居中
（2）数值(可实现从sprit图（小图组成的大图）中取出需要的图像)
background-position：20px 10px（距左20px 距上10px）
background-position：-20px 10px;值可为负数
sprit图
取sprit图的步骤
- 给盒子定宽定高
- 设置盒子背景图为sprit图
- 调整盒子的背景位置，直到取到合适的区域
4、backgroun-size 设置背景图的尺寸
contain：默认值，表示包含，按比例显示
cover：背景图将盒子撑满，会导致图片溢出
数值：破坏比例
%：可能破坏比例
% auto:横向撑满，纵向自动，不会破坏比例
5、backgroun-attachment固定背景图
scroll：默认值，背景跟着元素移动
fixed：背景图固定
速写：background：背景图位置/尺寸 重复方式 固定方式 背景颜色
6、使用多背景图
设置顺序：不重复的先设置，再设置重复的
background:url("顶部") no-reapt;
url("底部") reapt bottom;
url("中间") no-reapt;
2、背景渐变
1、线性渐变：
横向 background-img:linear-gradient(to right,red,blue);
纵向：background-img:linear-gradient(to bottom,red,blue);
2、角度渐变
3、重复的渐变
background-img:repeating-linear-gradient(to right,red, blue 50% , red 100%);
4、镜像渐变
background-img:radial-gradient(lightblue ,black)
三、透明度盒鼠标样式
1、透明度
1、opacity:可调整整个盒子的透明度，该属性的取值范围时0~1，其中，0表示全透明，1表示完全不透明
2、rgba：可调整某个元素的透明度
rgba表示：r：红色 g： 绿色 b：蓝色 a：alpha
书写格式：rgba(r,g,b,a)
其中，a表示透明通道，取值时0~1之间，0表示全透明，1表示完全不透明
也可以用十六进制表示，例如rgba(0,0,0,0.5),也可以写成00,00,00,80；
2、鼠标样式
cursor:auto默认值
可以自己制作图片作为鼠标样式
cursor：url(imgs/target.ico),auto
四、阴影
1、文字阴影
text-shadow:2px 2px 4px rgba(0,0,0,0.5)
第一个参数：2px,表示阴影的位置向x轴（横坐标）的偏移量为2px
第二个参数：表示阴影的位置向y轴（纵坐标）的偏移量
第三个参数：表示阴影的模糊半径，该数值越大，阴影越模糊
第四个参数：表示阴影的透明度
2、盒子阴影
box-shadow:2px 2px 4px rgba(0,0,0,.5)同文字阴影
box-shadow:2px 2px 4px 7px rgba(0,0,0,.5)
第五个参数：7px 表示阴影的扩散半径，该数值越大，阴影越大
box-shadow:inset 2px 2px 4px 7px rgba(0,0,0,.5)
inset表示阴影效果由外向内
五、隐藏盒子
1、display:none不生成盒子,不占据空间
2、visiblility:hidden，隐藏盒子，会占据空间
盒子动画与变形
一、盒子动画
1、简单动画
简单动画通常称之为“过度 transition”：css属性在一定时间内，从一个值变化到另一个值
1、transition-property：需要过度的属性，需要过度的属性
例：
transition-property:backgruond,height;
颜色、尺寸、透明度类的属性通常都支持过渡效果
transition-property:all 所有可过度属性都过度
2、transtition-duration:1s;(在1秒钟类完成过度)
简写：transition:all,1s，inler;此函数写在可表示所有子元素的div里面(时间可为小数)
例子：
html
<div class="face">
<diV class="face1">正面</diV>
<div class="face2">背面</div>
</div>
css
.face div{
transition:all 1s;
}
3、transition-dalie:延迟
2、渐变时间函数
transition-timing-founction:CSS属性一何种速度进行简便
1、cubic-bezier:贝塞尔曲线
示例：
transition-timing-founction:cubic-bezier(0.25,0.1,0.24,0.96)；值可为负数
2、cubic-bezier:贝塞尔曲线预设值
（1）默认值：transition-timing-founction:cubic-bezier(0.25,0.1,0.24,0.96)
（2）ease:渐快，
（3）ease-in
（4）
3、复杂动画
1、动画定义：
@keyframes 定义动画指令：关键帧
@keyframes scroll(动画的名称){
from{left:100px;border-radius:0;}起始状态 left:距离起点的位置
20%{left:100px;border-radius:50px;}状态1
50%{left:100px;border-radius:100px;}状态2
to{left:100px;border-radius:0px;}结束状态
}
animation-name:scroll(指定动画名称)
animation-duration:3s(指定单次动画的时间)
animation-iteration-count:播放次数infinite(无限播放)
animation-direction:播放顺序 normal:正常播放 aiternate:轮流反向播放
@charset 定义字符编码集
二、盒子变形
1、概念
通过变形可以改变盒子的视觉效果，变形不会改变盒子原本的位置和尺寸，
2、变形属性：transform
1、transform:rotate(45deg) 需要变形的属性：旋转45度
transform：rotateX（10deg）：在X轴上旋转10度
rotateY(10deg):在Y轴上旋转10度
rotateZ(10deg):在Z轴上旋转10度
rotate3d(x,y,z,角度);
2、transform：scale 缩放
transform：scale X（1）；X轴缩放
transform：scaleY（2）：Y轴缩放
transform：scale(1.5):XY一起缩放
3、transform：translate 在某一个方向上移动
transform：translateX（1px）；在X轴移动
4、transform：shew 倾斜
transform：shew（10dgr,20dgr）在X轴上倾斜10度，在Y轴上倾斜20度
简写：
transfrom: rotate() scale() ;
3、定义原点：transform-origin（盒子的旋转中心）
transform-origin: left top ;靠左，靠上
transform-origin：10px 20px:距左10 距右20
4、其他属性
1、透视距离，产生3D效果perspective:none默认值
观察者距离Z轴原点的距离，该属性设置到变形元素的父元素上
perspective:1000px 常用值，设置在包含所有子元素的父元素里面
2、背面可见性：backface-visibility：visible默认值，可见
backface-visibility：hidden隐藏
表单
HTML部分
一、表单元素概述
1、概述
表单是一块可采集用户数据的区域，表单对后端开发者至关重要
2、如何创建表单区域
1、用form元素表示表单区域
2、用action属性表示表单的提交地址
3、用method属性表示表单的提交方式
4、在制作静态页面时，可不用书写上述属性
5、在制作静态页面时，建议不要设置form元素的样式，若要用form元素，则在设置样式时不能使用元素选择器，要使用类选择器
例子：
<form action="地址" method="GET（或者POST）">
GET适合提交少量数据
POST适合提交大量数据
3、表单中可放置的元素
1、对于静态页面的开发者，表单只是只是一个普通的快和，内部可以放置任何元素
2、通常情况下，表单中会放置一些可以与用户进行交互的元素
（1）文本框
（2）按钮
（3）单选框
（4）多选框
（5）下拉列表
3、由于这些交互元素通常出现在表单中
4、表单元素中两个重要属性
1、name：表示发送到服务器的键名
2、value：表示发送到服务器的值
二、表单元素
1、文本框
1、使用Input元素表示一个文本框，input是一个空元素
2、可通过type（默认值text）属性设置文本框类型
3、最常用的文本框
（1）默认（type=“text”）
1、<input type="text" value="默认的东西" placeholder=“”>
普通文本框：type="text" 简写input：text
2、value="默认的东西"，带默认文本的文本框
3、placeholder 占位符，当文本无内容时
4、maxlength 指输入最大输入字符数
（2）密码框（type=“password”）
<input type="password">
（3）文件选择框(type=“file”)，文件选择框的样式在不同的浏览器中有差异，不同的操作系统中也会有差异，此差异无法通过CSS控制，因此，前端开发时往往不适用原生的文件选择框
<input type="file">；简写：input:file
4、其他文本框
（1）隐藏框 type=“hidden”
（2）数字文本框 type=“numer”
（3）数字滑动选择框 type=“range”，可通过min max设置最小最大值
intput type="range" min="0" max="30" value="30"
(4)邮件文本框 type=“email”
(5)用于输入url地址的文本框 type=“url”
(6)用于输入电话的文本框 type=“tel”，要指定pattern=""
(7)用于选择日期的文本框 type=“date”,带默认日期的文本框 value=“2017-01-01”
(8)用于选择日期的文本框 type=“time”
(9)用于选择日期时间的文本框type=“datetime-local”
2、单选和多选框
1、单选框 type=“radio”，单选框没有内容，需要自行写入 ，如果要将两个单选框分在一组，则将name属性值写为一致，如果要将一个值选中，加上默认属性checked
<input type="radio" checked>
可his用label元素社会自表单元素的含义，然后将其与表单元素进行关联，关联的好处在于：
-
用户通过点击label，就可以聚焦到被关联的表单元素
-
搜索引擎和浏览器可以通过该关联，读取出
显示关联
隐式关联
2、多选框 type=“checkbox”
3、按钮
使用input或button元素表示按钮
1、普通按钮type="button"或type=“input”：点击后没有任何效果,使用button，里面可以写其他元素
2、重置按钮type=“reset”，必须要在form元素里面，只是重置form里面的元素
<input type="reset">
3、提交按钮
4、input和button的比较
（1）input是空元素，button是普通元素
（2）input
4、下拉列表
由select和选项option元素组合而成
1、普通下拉列表
<select>
<option>四川</option>
</select>
<select>
<option>北京</option>
</select>
2、分组下拉列表
<select>
<optgroup>
<option>四川</option>
<option>北京</option>
</optgroup>
<optgroup>
<option>四川</option>
<option>北京</option>
</optgroup>
</select>
5、数据列表和多行文本框
1、数据列表 datalist，本身不显示，需要与文本框连用
<label>填写你使用的浏览器
<input list="browsers" type="reset">
<label>
<datalise id="browsers">
<option>四川</option>
<option>北京</option>
</datalise>
2、使用textarea表示多行文本框
<textarea></textarea>
6、表单元素的分组
1、
使用fieldset字段集元素进行分组
使用legend元素表示标题
2、
使用disable和readonly更改表单元素的状态
被禁用的元素（设置了disable）中的内荣不会发送到服务器，只读（readonly）的元素内容会被发送到服务器，尽管不能修改
CSS部分
1、伪类元素focus，表示元素聚焦
取消浏览器默认的focus样式，在reset中加入
:focus{
outline:none;
outline-offset:0;
}
当聚焦时，聚焦效果
input:focus{
outline:2px red solid;
}
2、伪类元素checked 选中被选中的表单元素
3、表单元素的默认样式
1、表单元素均默认为行盒——水平排列
2、表单元素均为可替换元素——可设置和模型各个部分的尺寸，可当做行块盒。
3、表单元素在聚焦时会有outline
4、元素被选中的书写方式
例如input元素被选中
input：checked
浏览器的兼容性和格式化
一、兼容性
概述：指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。大多数情况下，我们的需求是，用户用任何浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
造成浏览器兼容问题的根本原因是浏览器内核不一致
can i use 网站，在这个网站中可以查询HTML中的兼容性问题
1、浏览器内核
浏览器也称为引擎，可译为渲染引擎，我们一般称之为“浏览器内核”
常见浏览器内核：
1、IE 内核：Trident
2、Firefox 内核：Gecko
3、Chrome 内核：Webkit , Blink
4、Safari 内核:Webkit
5、Opera 内核：Presto
2、使用CSSHack解决兼容性问题
浏览器在读取css代码的时候可能会遇到一些无法识别的代码，造成这种现象的原因通常有两种
1、代码本身有问题
2、浏览器无法识别，遇到无法识别的代码，会自动忽略，继续执行下面的代码
浏览器的特性：
1、不同内核的浏览器可以识别自己特有的css属性
2、浏览器遇到无法识别的css属性，会直接跳过
常见的厂商前缀
前缀 厂商
-ms- Microsoft
-moz- Mozilla
-o- Opera
-webkit- IE
3、渐进增强和优雅降级
1、渐进增强：针对低版本浏览器进行构建页面，保证最基本功能，然后在针对高级浏览器进行效果、交互等改进和遍加功能达到更好的用户体验
2、优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
它们的区别：
1、渐进增强考虑的是旧版本
2、优雅降级考虑的是新版本
4、使用现代化的CSS插件解决兼容问题
二、CSS工程化
1、CSS编译器
@import:“其他文件路径”，可以再CSS中引用其他文件
概述：CSS编译器，也叫做CSS预编译器，是指开发者使用某种类似css语言编写代码，然后通过编译器，将其转换为浏览器真正能执行的css代码
三、SASS代码
$darkcolor : 2E2E2E; //定义一个颜色变量，值为2E2E2E
$lightcolor : c1c1c1; //定义一个颜色变量，值为c1c1c1
.site-footer {
background: $darkcolor; //使用变量$darkcolor的值作为背景色
color: $lightcolor; //使用变量$lightcolor的值作为前景色
padding: 50px 0;
}
.site-header {
background: $darkcolor; //使用变量$darkcolor的值作为背景色
color: $lightcolor; //使用变量$lightcolor的值作为前景色
position: fixed;
left: 0;
top: 0;
}
四、SASS代码编译器（SASS中文网）
安装第三方工具：Koala,是一个预编译工具集，它内置了SASS、LESS等多种前段的预编译器
五、变量
概述：可以将反复使用的css属性定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，使其语意化
1、变量的声明
用$符号表示一个变量
单个变量值的书写方式：$变量名：变量值
多个变量值的书写方式：$变量名：变量值 变量值 变量值
2、变量的声明位置
定义在css规则块外面的变量，适用于整个css，定义在规则块里面的变量，只适用于该规则块
3、变量的引用
.selected {
border: 1px solid $highlight-color;
}
六、嵌套css规则
嵌套选择器
1、嵌套规则
1、可以将子元素放在父元素选择器的大括号下面
2、如果是父元素选择器的追加样式，则可使用&符号表示
.parent{
.other{
}
}
.parent{
&.other{
}
}
以上代码的编译结果如下
.parent .other{
}
.parent.other{
}
2、嵌套属性
在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写 border-style 、 border-width 、 border-color 以及 border-* 等也是非
常烦人的。在sass中，你只需敲写一遍border：
nav {
border: {
style: solid;
width: 1px;
color: ccc;
}
}
3、SASS中的注释
SASS中提供了两种注释方式，分别是：
1. CSS标准注释 /* 注释内容 */ ,该注释会出现在编译结果中
2. 静默注释 // 注释内容 该注释仅会出现在SASS代码中
body {
color: 333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
七、混合器
通过sass的混合器可以实现大段样式的重用。
1、混合器定义使用
简单混合器
使用@mixin定义混合器
@mixin fixed（fixed为混合器名称）
//使用@mixin定义一个混合器，混合器的书写跟CSS代码块一样，可以定义多个规则
@mixin flex-container{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
使用@include 使用混合器
@include fixed
//其他的代码块中均可以使用该混合器
.main{
font-size:1.1em;
color:inherit;
@include flex-container;//使用混合器
}
编译后生成
.main{
font-size:1.1em;
color:inherit;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
2、混合器传参
混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。
@mixin link-colors($normal,$hover, $visited) { //$normal,$hover, $visited为需要自行输入的变量值
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺
序。为了解决这个问题，sass允许通过语法 $name: value 的形式指定每个参数的值。这种形式的
传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
3、混合参数的默认值
为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使
用 $name: default-value 的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的
引用，如下代码：
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
响应式布局
三种总体布局方案
1、定宽：元素宽度和设计稿一致，并不受其它因素影响（定宽，但宽度不一定是定死的，例如B包含块的宽度为auto，A包含块为1000px，A包含B，则B也是定宽的，虽然它的取值为auto）
2、流式：元素宽度随包含块宽度的变化而变化（设百分比时大部分是流式，除去外面的包含块是定宽的情况）
3、响应式布局：视口的尺寸发生变化时，元素的样式发生改变
一、响应式布局
概述：一个网站能够适应多个终端
1、如何实现响应式布局
核心技术：媒体查询（media query）
书写格式：
@media screen and (min‐width:1200px){ /* 视口 ≥ 1200px 要应用的样式 */}
@media screen and (min‐width:992px) and (max‐width:1200px){ /* 992px ≤ 视口 < 1200px 要应用的样式 */}
@media screen and (max‐width:992px){/* 视口 < 992px 要应用的样式 */}
下面是一个简单的媒体查询的例子：
.item {background: red;}
@media screen and (min‐width:1200px) {
.item {
background: blue;
}
}
@media screen and (min‐width:992px) and (max‐width:1200px) {
.item {
background: green;
}
}
上面的代码应该这样阅读：
1. 有一个样式规则 .item
2. 如果当前的视口尺寸大于等于1200px，则再加入一个样式规则 .item
3. 如果当前的视口尺寸大于等于992px，并且小于1200px，则再加入一个样式规则 .item
2、常见视口尺寸和设备关系
1、大于等于1200px：大屏幕：投影仪、电视、PC端
2、992~1200px：中屏：上网本、小型笔记本
3、768~992px：小屏幕：平板
4、小于768px：超小屏幕：手机
3、在SASS中使用媒体查询
SASS中@media指令与css中用法一样，但是允许@media在css规则中嵌套
例子：
.sidebar {
width: 300px;
@media screen and (min‐width:768px) {
width: 500px;
}
}
编译为
.sidebar {
width: 300px;
}
@media screen and (min‐width:768px) {
.sidebar {
width: 500px;
}
}
开发移动端页面
移动端页面的特性：
1、移动端视口宽度问题
2、移动端误触造成的缩放问题
3、移动端元素的尺寸问题
一、移动端的视口宽度问题
视口指的是浏览器的可视区域
设置移动端视口宽度：在head元素中加入meta元素
<meta name="viewport" content="width=375px">
但是不同的移动端，视口的尺寸不一致，所以，用device-width这个关键字可以读取当前移动设备的宽度
<meta name="viewport" content="width=device-width">
二、移动端误触造成的缩放问题
当用户用手指在移动端滑动网页时，手机往往提供以下功能：
1、快速双击，可放大页面
2、双指收放，可放大缩小页面
对此，可以对移动端进行禁止用户缩放网页的操作
具体做法：在meta元素中继续加入内容
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
在这句代码中，
initial-scale=1.0：初始化缩放比例为1.0（原始大小），这句代码并不是防止用户缩放的代码
minimum-scale=1.0：网页最小的缩小比例为1.0（原始大小），设置这句代码的目的是为了防止某些程序（如js）无意中修改了网页的缩小比例
maximum-scale=1.0：网页最大的放大比例为1.0（原始大小），设置这句代码的目的是为了防止某些程序（如js）无意中修改了网页的放大比例
user-scalable=0：这句代码才是不允许用户对网页进行缩放
移动端元素的尺寸问题
同一个网页在不同尺寸的手机中的效果是不同的，网页中很多元素。随着视口的宽度变大，尺寸也会变大，无论是字体、高度、间隙都有这样的特点，这样做的目的是为了保证网页元素在不同尺寸的移动端中，显示最优的尺寸。
我们要实现的是尺寸随着视口宽度的变化而变化。
1、首先，需要一段js代码
/**
- Created by lovo_bdk on 15-12-17.
*/
!(function(win, doc) {
function setFontSize() {
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 设计稿宽度) * 比例- ‘px’;
}
var evt = ‘onorientationchange’ in win ? ‘orientationchange’ : ‘resiz
e’;
var timer = null;
win.addEventListener(evt, function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener(“pageshow”, function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
//初始化
setFontSize();
}(window, document));
- ‘px’;
将其中的设计稿宽度替换为设计稿的实际宽度，将上述代码中的比例替换为一个合适的值，比如100
这段代码的作用是不断监视视口宽度的变化，始终保证：
根元素html的字体大小 = (视口宽度 / 1080) * 100
2、css中的所有像素值变化为使用rem单位
rem 单位是相对于根元素html字体大小的，而现在，根元素的字体大小，正好反应了视口的宽度
于是，只需要将各种尺寸的值，使用rem作为单位，就可以适应视口宽度的变化了
一个元素某个尺寸的rem值计算公式如下
rem值=设计稿中的尺寸/100
面试题
一、BFC：块级格式化上下文
触发BFC的方式
1、根元素
2、浮动、绝对定位
3、overflow不等于visible
4、表格
5、弹性盒
6、行块盒
二、vertical-align的作用
1、设置行盒与外层行框的参考线对齐方式（
baseline 基线对骑
top 顶线对齐
bottom 底线对齐
middle 中线对齐
）
2、设置表格的单元格内部的垂直对齐方式
三、css spirits 精灵图/雪碧图的作用
1、减少文件请求数
2、减小总体尺寸（存储空间）
3、提高响应速度
4、浏览器会缓存雪碧图，进一步提高响应速度
四、vlink的作用
vlink：是html的全局属性，设置元素内部a元素已被访问过的样式
书写方式：
<body vlink="red">
<a href=""></a>
</body>
五、一级标题、表单元素的默认字体大小
h1:2em
input/textarea/select:13.33333px