前端基础全（基础+实例）

一、html

标签全部作用
元素种类的划分
媒体查询
H5的语义化作用及语义化标签
Web Worker和Web Socket
SEO的概念及实现
HTML5的新特性

什么是DOCTYPE？

DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档。

文档解析类型有：

• BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。（如果没有声明DOCTYPE，默认就是这个模式）
• CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

HTML5新特性

1 新增的标签

有结构标签
、、
、
、
、
、
表单标签
、input 新增的属性有email url datetime rang	 number search
媒体标签

2 删除的标签

           //规定文本的字体、字体尺寸、字体颜色。
     //注释标签

       //将 HTML 网页中的文本进行水平居中处理：
            //规定页面上的默认字体颜色和字号
             //标签呈现大号字体效果。
               //标签定义 frameset 中的一个特定的窗口（框架）。
   //标签定义一个框架集
   // 元素可为那些不支持框架的浏览器显示文本

3 新增的属性

placeholder :占位符,当用户输入的时候,里面的文字消失

autofocus:规定当页面加载时 input 元素应该自动获得焦点 用法:

multiple:多文件上传 用法：

required:input框为必填项，内容不能为空。 用法：

html元素分类

块级元素

内联元素

可变元素

块级元素是什么？

块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域

块级元素有哪些

address - 地址，blockquote - 块引用， cente - 举中对齐块，  dir - 目录列表，div- 常用块级容易，也是css layout的主要标签，  dl - 定义列表， fieldset - form控制组 ，form- 交互表单，  h1 - 大标题， h2 - 副标题，  h3 - 3级标题，  h4 - 4级标题，  h5 - 5级标题，  h6 - 6级标题，  hr - 水平分隔线，  isindex - input prompt， menu - 菜单列表， noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容， noscript - 可选脚本内容（对于不支持script的浏览器显示此内容），ol - 排序表单，p - 段落， pr - 格式化文本（会保留空格和换行符）， table - 表格， ul - 非排序列表

特性： 默认占一行，两个块级元素不会并列占一行。元素从上往下顺序排序

内联元素（行内元素

特性：在一行内逐个显示
内联元素没有自己的形状，不能定义它的宽和高,input是个例外，可以独立设置宽/高.它显示的宽度、高度只能根据内联元素所包含内容的高度和宽度来确定，宽度就是它的文字或图片的宽度，不可改变。它的最小内容单元也会呈现矩形形状；如果需要设置高度，可以通过行高line-height撑起来。

有： img - 图片， a - 锚点， abbr - 缩写， acronym - 首字，b - 粗体(不推荐)，bdo - bidi override， big - 大字体， br - 换行， cite，dfn - 定义字段， em - 强调， font - 字体设定(不推荐)，i - 斜体， input - 输入框， kbd - 定义键盘文本， label - 表格标签， q - 短引用，s - 中划线(不推荐)，samp - 定义范例计算机代码 ，select - 项目选择， small - 小字体文本，span - 常用内联容器，定义文本内区块， strike - 中划线， strong - 粗体强调，sub - 下标， sup - 上标， textarea - 多行文本输入框，tt - 电传文本 ，u - 下划线， var - 定义变量

总结： 行内元素在一行中排列显示，内联元素的宽度是靠里面包含的内容撑开的，本身宽度不可改变，可以用line-height来设置高度

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素

根据上下文？？？怎么根据，谁来判断根据的？

元素

 applet - java applet。 button - 按钮，del - 删除文本， iframe - inline frame，ins - 插入的文本，map - 图片区块(map)， object - object对象， script - 客户端脚本

题1

块级标签可不可以嵌套在内联标签里面？

考察内联标签与块级标签的嵌套规则
（1）块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

（2）块级元素不能放在p里面。

（3）有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt

（4）li内可以包含div

（5）块级元素与块级元素并列、内联元素与内联元素并列。

　1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：
　
 —— 对 
　　 —— 对 
　　
 —— 错 
　　2. 块级元素不能放在
里面：(p也是块级元素，所以是特殊情况) 
　　
 —— 错 

　　
 —— 错 

	
——错
	块级元素不能包括内敛标签的特殊元素有
	有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是： 
　　h1、h2、h3、h4、h5、h6、p、dt 

html语义化理解

语义化标签有

header nav p article section aside footer

HTML语义化就是让页面内容结构化，它有如下优点

1、易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
2、有利于SEO（搜索引擎优化），搜索引擎根据标签来确定上下文和各个关键字的权重。
3、方便其他设备解析，如盲人阅读器根据语义渲染网页
4、有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐

SEO性能优化

seo是啥

搜索引擎化

html5哪些标签可以做SEO优化？

title

合理的title

怎么为合理怎么为不合理？

title强调重点，关键词不要重复出现超过两次，尽量靠前。description概括页面内容，长度合适。keyword列举重要关键词。

语义化的html标签，让搜索引擎更容易理解页面

header、footer、nav、article、aside

重要内容HTML代码放在最前：

搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取

重要内容不要用js输出：爬虫不会执行js获取内容。少用iframe：搜索引擎不会抓取iframe中的内容

非装饰性图片必须加alt。

alt是img的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

二、html DOM

document的对象

集合	描述
all	提供对文档中所有 HTML 元素的访问。
anchors	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
forms	返回对文档中所有 Form 对象引用。
images	返回对文档中所有 Image 对象引用。
links	返回对文档中所有 Area 和 Link 对象引用。

document 对象属性

属性	描述
body	提供对 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

document.domain
// "www.w3school.com.cn"

document 对象的方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById(‘id’)	返回对拥有指定 id 的第一个对象的引用。
getElementsByName(’类名‘)	返回带有指定名称的对象集合。
getElementsByTagName(’标签名‘)	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式 或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

打开并写入一个文档

open（）语法document.open(mimetype,replace)

mimetype 规定正在写的文档的类型。默认值是 “text/html”。

replace 当此参数设置后，可引起新文档从父文档继承历史条目

该方法将擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写。

setTimeout(function c()
  {
  var newDoc=document.open("text/html","replace");
  var txt="学习 DOM 非常有趣！";
  newDoc.write(txt);
  记得关闭close()
  newDoc.close();
  },0)

dom element 元素对象

在 HTML DOM （文档对象模型）中，每个部分都是节点：

• 文档本身是文档节点
• 所有 HTML 元素是元素节点
• 所有 HTML 属性是属性节点
• HTML 元素内的文本是文本节点
• 注释是注释节点

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点

element对象 （html的元素）的属性和方法

1 appendChild() 方法

作用

appendChild() 方法向节点添加最后一个子节点。

语法

document.getElementById("myList").appendChild(newListItem);

实例

// html
Coffee
Tea
// js
function appendChild() {
 // 创建节点
 var node = document.createElement('li')
 var textNode = document.createElement('water')
 node.appenChild(textNode)
 document.getElementById('myList').appendchild(node)
}

2 attributes 属性

作用

attributes 属性返回指定节点的属性集合

语法

node.attributes

3 getAttribute() 方法

getAttribute() 方法返回指定属性名的属性值。

4 innerHTML 属性

定义和用法

innerHTML 属性设置或返回元素的 inner HTML。

语法

HTMLElementObject.innerHTML=text

实例

微软

function changeLink()
{
document.getElementById('myAnchor').innerHTML="W3School";
document.getElementById('myAnchor').href="http://www.w3school.com.cn";
document.getElementById('myAnchor').target="_blank";
}

DOM 事件对象

dom事件是什么

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。

事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

详情：w

https://www.runoob.com/jsref/dom-obj-event.html

三、browser 浏览器

浏览器对象

1、 屏幕screen 对象

screen包括客户端显示屏幕的所有信息

availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计为单位。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。

console.log(screen.availHeight)
// 824

availWidth 属性声明了显示浏览器的屏幕的可用宽度，以像素计。

console.log(screen.availWidth)
//  1536

height 属性声明了显示浏览器的屏幕的高度，以像素计。

screen.height
864
screen.availHeight
824

width 属性声明了显示浏览器的屏幕的宽度，以像素计。

screen.width

1536
screen.availWidth
1536

2、 History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

length属性

console.log(history)
//  History {length: 4, scrollRestoration: "auto", state: null}
// length属性     返回当前页面的历史浏览列表的长度

back()方法

back() 方法可加载历史列表中的前一个 URL（如果存在（所以在回退的时候要判定能否回退））。

调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。

function goback () {
	window.history.back()
}

forward()方法

forward() 方法可加载历史列表中的下一个 URL。

调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

function goForward(){
    window.history.forward()
}

go()方法

go() 方法可加载历史列表中的某个具体的页面。

该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。

function goBack(){
    window.history.go(-2)
}

3 、location对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

console.log(window.location)
/* Location {
	hash: ""// hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。
	host: "www.runoob.com"// 返回一个URL的主机名和端口
	hostname: "www.runoob.com"
	href: "https://www.runoob.com/jsref/obj-location.html"// 返回完整的URL
	origin: "https://www.runoob.com"
	pathname: "/jsref/obj-location.html"// 返回的URL路径名。
	port: "" // 返回一个URL服务器使用的端口号
	protocol: "https:" //	返回一个URL协议
	search: "" //search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分
	// （问号 ? 之后的部分）。
	…}
*/

4 、存储对象

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

• localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage

sessionStorage

常见的浏览器内核

• Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。
• Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
• Presto内核：Opera7及以上。[现为：Blink]
• Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

主要分成两部分：渲染引擎和JS引擎。

• 渲染引擎：将代码转换成页面。负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
• JS引擎：解析和执行javascript来实现网页的动态效果。

默认样式

是什么 为什么要重置浏览器的默认样式？

浏览器的自带样式，因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

缺点：对seo有影响。 ？？

浏览器加载完一个页面之后

1、转换
2、令牌化
3、词法分析
4、DOM树构建
5、CSSOM树构建
6、DOM树与CSSOM树合并后形成渲染树
7、通过布局计算每个对象显示的位置和大小
8、绘制页面

按照上面的流程，浏览器会查看文档当中是否有“用户样式”，如果没有就使用浏览器的默认样式，如果有就会用“用户样式”，就使用用户样式覆盖“浏览器默认样式”进行后面的渲染

阻止默认事件

使用event.preventDefault()可以取消默认事件w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

阻止冒泡和捕获事件

js冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。

四、css

1、标签全部作用

2、用CSS画三角形

用border

.div{
	width: 0;
	height:0;
	border-left: 100px solid transparent;// transparent 相当于rgba(0,0,0,0)
	border-right: 100px solid transparent;
	border-top: 100px solid transparent;
	border-bottom: 100px solid blue;
	或者border: 100px solid transparent;
	border-bottom :100px solid blude
	
}

3、scope的作用

原理是：我们会发现在添加scoped之后，vue其实在背后做的操作是使得你的css样式添加了一个类似于 [data-v-76b126]的唯一标识，这样每个vue文件对应一个唯一标示，不同vue组件之间的样式就不会污染。

4、水平垂直居中（方案及比较）

对于宽高固定的元素

（1）我们可以利用margin:0 auto来实现元素的水平居中。

（2）利用绝对定位（absolved)，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。

（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。

（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。

（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐，然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

1.定位position

子绝对定位 父相对定位。

​ 优缺点： 可以在webkit内核的浏览器中使用 ie9以下不可使用transform

 

            

         
         
.father {
            position: relative;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置，
            transform: translate(-50%,-50%);
             translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。
            width: 100px;
            height: 100px;
            background: red;
            
        }

2.flex布局

优点：简单 快捷
缺点：兼容不好（不兼容ie10以下）

     

            

        
 .father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }

3.table布局 table-cell+vertical-align

优点：兼容到 IE8，可以和 flex 配合使用; CSS 的table属性布局更灵活，可以满足复杂的网页设计

缺点：不够语义化化，对搜索引擎不够友好，在不同浏览器呈现不一样

需要设置父元素为display:table-cell,利用vertical和text-align可以让所有的行内块级元素水平垂直居中
给子元素设置 display: inline-block

  .father {
            display: table-cell;
            width: 200px;
            height: 200px;
            background: skyblue;
            vertical-align: middle; // 垂直居中
            text-align: center; // 水平居中
        }
        .son {
            display: inline-block;
            
            background: red;
        }

4.grid布局

优点：grid 是二维网格布局，每个网格都是一个容器

缺点：grid 兼容性不是很好，不兼容 IE9(包括IE9)、QQ浏览器、百度浏览器和低版本的浏览器

        .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }

\5. 元素种类的划分

\6. 盒子模型及其理解

5、position定位方式及其区别（文档流）

static

默认方式，按正常的文档流top left bottom right这几个偏移属性还有z-index无效。不会影响其静态定位的正常显示

relative

relative是保留原来位置，不脱离文档流，相对于其元素本身所在正常位置进行定位。经常与z-index属性进行层次分级

absolute

absolute脱离文档流，是整个元素的左上角（含margin）相对于最近的、非static定位的父元素的padding外边界或者说border定位的;如果没有非static定位的父元素，则相对于“浏览器可视窗口”定位（不是body也不是html元素，而是屏幕的可视区的左上角（不含工具条）），经常与z-index属性进行层次分级

fixed

position:fixed脱离文档流，是相对于“浏览器的可视窗口”来定位的而不是html也不是body也不是屏幕！经常与z-index属性进行层次分级

问题1

position 的值 relative 和 absolute 定位原点是？

relative定位的元素，是相对于元素本身的正常位置来进行定位的。

absolute定位的元素，是相对于它的第一个position值不为static的祖先元素的padding box来进行定位的。这句话
我们可以这样来理解，我们首先需要找到绝对定位元素的一个position的值不为static的祖先元素，然后相对于这个祖先元
素的padding box来定位，也就是说在计算定位距离的时候，padding的值也要算进去。

6、margin塌陷及合并问题

7、浮动模型及清除浮动的方法

浮动模型属于布局模型的一种

布局模型：

在网页中，元素有三种布局模型：
1、流动模型（Flow）

2、浮动模型 (Float)

3、层模型（Layer）

浮动模型

作用是可以把块级元素并为一行

伪元素

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

清除浮动

.clearfix::after {//after伪元素
    content: '';//伪元素内容为空 不显示
    visibility: hidden;// 隐藏
 	clear: both;// 清除
    display: block;// clear 只能在块级元素中使用起作用  
    height: 0;
}

原理： clear: both;

clear是CSS中的定位属性，规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。

8、display及相关属性

css3弹性盒子 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

.flex-container {

 display: -webkit-flex;   

​ display: flex;

}

属性:

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 元素不显示，并从文档流中移除。
inline 行内元素类型。默认宽度为所包含的内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。

8、IFC与BFC

BFC

bfc的理解

是啥

格式化上下文：Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

块级格式化上下文：

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

所以是怎么渲染元素的，规则：

1、内部的块级元素会在垂直方向，一个接一个地放置。

2、块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻块级元素的margin会发生重叠。

3、对于从左往右的格式化，每个元素（块级元素与行内元素）的左边缘，与包含块的左边缘相接触，(对于从右往左的格式化则相反)。即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC。

4、BFC的区域不会与浮动元素重叠。(可以算是清除了浮动？？？)

5、BFC是一个隔离的独立容器，容器里面的子元素和外面的元素互不影响。

6、计算BFC容器的高度时，浮动元素也参与计算

怎么触发

只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

有啥子用

bfc的特性?

同一个格式块级格式上下文bfc会发生外边距折叠。不是bug是一个规则

可以包含浮动的元素

IFC

inline-level box

IFC指的是行级格式化上下文，它有这样的一些布局规则：

（1）行级上下文内部的盒子会在水平方向，一个接一个地放置。
（2）当一行不够的时候会自动切换到下一行。
（3）行级上下文的高度由内部最高的内联盒子的高度决定。

9、圣杯布局和双飞翼布局的实现

10、单位

绝对单位

• 英寸（in）：是使用最广泛的长度单位

• 厘米（cm）：生活中最常用的长度单位。

• 毫米（mm）：在研究领域使用广泛。

• 磅（pt）：在印刷领域使用广泛，也称点。CSS 也常用 pt 设置字体大小，12 磅的字体等于六分之一英寸大小。

• pica（pc）：在印刷领域使用，1 pica 等于 12 磅，所以也称 12 点活字。

相对单位

相对单位与绝对单位相比显示大小不是固定的，它所设置的对象受屏幕分辨率、可视区域、浏览器设置以及相关元素的大小等多种因素影响。

• px

px 单位是根据屏幕像素点来确定的。这样不同的显示分辨率就会使相同取值的 px 单位所显示出来的效果截然不同。

• em

  em 单位表示元素的字体高度，它能够根据字体的 font-size 属性值来确定单位的大小。

• %

  百分比也是一个相对单位值。百分比值总是通过另一个值来计算，一般参考父对象中相同属性的值。例如，如果父元素宽度为 500px，子元素的宽度为 50%，则子元素的实际宽度为 250px。

• ex

  ex 单位根据所使用的字体中小写字母 x 的高度作为参考。在实际使用中，浏览器将通过 em 的值除以 2 得到 ex 的值。

rem与em的区别

rem是根据根的font-size变化，而em是根据父级的font-size变化

rem：相对于根元素html的font-size，假如html为font-size：12px，那么，在其当中的div设置为font-size：2rem,就是当中的div为24px

em：相对于父元素计算，假如某个p元素为font-size:12px,在它内部有个span标签，设置font-size：2em,那么，这时候的span字体大小为：12*2=24px

11、实现响应式开发方案？

12、Less预处理语言

13、媒体查询

14、vh与vw

15、Web Worker和Web Socket

.16、CSS3及相关动画

16、如何实现响应式布局

17、Less和Sass使用

18、CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

19、选择器

css常用选择器

通配符：*
ID选择器：# ID
类选择器：. class
元素选择器：p、a    等
后代选择器：p span、div a   等
伪类选择器：a:hover 等
属性选择器：input[type="text"]  等

伪类选择器：a:hover 等

选择器权重 高到低

!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器

规则

!important 优先级最高，但也会被权重高的important所覆盖

行内样式总会覆盖外部样式表的任何样式(除了!important)

单独使用一个选择器的时候，不能跨等级使css规则生效

如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效

如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则.权重相同时，与元素距离近的选择器生效

不推荐使用!important，因为!important根本没有结构与上下文可言，并且很多时候权重的问题，就是因为不知道在哪里定义了一个!important而导致的

css引入方式

外部 CSS代码保存在扩展名为.css的样式表中或者是链接 在