前端知识总结-CSDN博客

1. 从 URL 输入到页面展现背后发生了什么事？

解析：分为以下几个过程：1. DNS解析：将域名解析为ip地址；2.TCP连接：三次握手；3.发送http请求；4.服务器处理请求并返回http报文；5.浏览器解析渲染页面；6.断开链接：四次挥手；

一.什么是URL？url全称uniform resource locator（统一资源定位符），用于定位互联网上的资源，俗称网址。语法规则： scheme://host.domain:port/path/filename，各部分名词解释：

scheme: 定义因特网服务的类型，比如http，https, ftp,file,其中最常见的http类型，https是进行加密的网络传输协议。
host: 定义域主机，http默认的域主机是www
domain: 域名
port: 端口 path: 定义服务器上的路径（如果省略，则文件必须位于网站的根目录）
filename: 资源名称

二. 域名解析
浏览器并不能直接通过域名找到对应的服务器，而是通过ip地址。IP 地址是指互联网协议地址，是 IP Address 的缩写。IP 地址是 IP 协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。IP 地址是一个 32 位的二进制数，比如 127.0.0.1 为本机 IP。

DNS: DNS 协议提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。DNS 是一个网络服务器，我们的域名解析简单来说就是在 DNS 上记录一条信息记录。例如：

例如 baidu.com 220.114.23.56（服务器外网IP地址）80（服务器端口号）

浏览器如何通过域名查询ip？（就近原则）

浏览器缓存：浏览器会按照一定的频率缓存 DNS 记录。
操作系统缓存：如果浏览器缓存中找不到需要的 DNS 记录，那就去操作系统中找。
路由缓存：路由器也有 DNS 缓存。
ISP 的 DNS 服务器：ISP 是互联网服务提供商(Internet Service Provider)的简称，ISP 有专门的 DNS 服务器应对 DNS 查询请求。
根服务器：ISP 的 DNS 服务器还找不到的话，它就会向根服务器发出请求，进行递归查询（DNS 服务器先问根域名服务器.com 域名服务器的 IP 地址，然后再问.baidu 域名服务器，依次类推）

三. TCP三次握手
在客户端发送数据之前会发起 TCP 三次握手用以同步客户端和服务端的序列号和确认号，并交换 TCP 窗口大小信息。具体过程如下：

第一次握手，由浏览器发起，告诉服务器我要发送请求了
第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧
第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧

谢希仁著《计算机网络》中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”

四，五略六. 浏览器解析渲染页面

浏览器解析渲染页面分为五个步骤：

根据html页面解析出dom树（DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点，注意：在读取html页面构建dom树的过程中遇到script标签会停下来执行完脚本之后再继续构建dom树，前端优化的一个点就是让script脚本放在最后）
根据css解析生成css规则树（解析css规则树过程中遇到script也会暂停，css规则树渲染完成前不会渲染页面）
结合dom树和css规则树生成渲染树（精简 CSS，加快 CSS 规则树的构建，从而加快页面相应速度是前端优化的一个点）
根据渲染树计算每一个节点的信息（布局）（布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸；回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染）
根据计算好的信息绘制页面（绘制阶段：系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上；重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘；回流：某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染；回流必引起重绘，重绘不一定引起回流）

七. 断开连接

当数据传送完毕，需要断开 tcp 连接，此时发起 tcp 四次挥手

第一次挥手：由浏览器发起的，发送给服务器，我请求报文发送完了，你准备关闭吧
第二次挥手：由服务器发起的，告诉浏览器，我请求报文接受完了，我准备关闭了，你也准备吧
第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完了，你准备关闭吧
第四次挥手：由浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧

2.一次完整的 HTTP 事务是怎么一个过程？

域名解析；
发起TCP的3次握手；
建立TCP连接后发起http请求；
服务器响应http请求，浏览器得到html代码；
浏览器解析html代码并请求html中的资源（js，css，图片等）；
拼接好渲染树之后，浏览器渲染页面呈现给用户。

3.TCP和HTTP的联系与区别？

tcp是传输层协议，定义数据传输与连接方式的规范，握手过程中传送的包里不包含数据，三次握手之后，客户端和服务器才正式开始传送数据
http是应用层协议，定义传送数据内容的规范；
HTTP协议中的数据是利用TCP协议传输的，特点是客户端发送的每次请求都需要服务器回送响应，它是TCP协议族中的一种，默认使用 TCP 80端口；

好比网络是路，TCP是跑在路上的车，HTTP是车上的人。每个网站内容不一样，就像车上的每个人有不同的故事一样。

4.浏览器是如何渲染页面的？

处理HTML标记并构建DOM树
处理CSS标记并构建CSSOM树
将DOM与CSSOM合并成一个渲染树
根据渲染树来布局，计算每个节点的布局信息
将各个节点绘制到屏幕上

5.浏览器的内核有哪些？分别有什么代表的浏览器？

5大浏览器：ie ，firefox， chrome，safari，opera
4大内核：trident, Gecko(开源),最早chrome使用webkit，2013年以后使用webkit分支blink

6.刷新页面，js 请求一般会有哪些地方有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

7.doctype 有什么作用？怎么写？

DOCTYPE是document type的简写，它并不是 HTML 标签，也没有结束标签，它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。DOCTYPE的声明必须是 HTML 文档的第一行，位于html标签之前。

8.列出常用标签，并简单介绍使用场景

* <a> 用于超链接。<a href="">some text</a>
* <article> 用于一篇文章。<article>a self-contained article</article>
* <aside> 用于页面的侧边栏。<aside>some content</aside>
* <blockquote> 用于大段的引用内容。<blockquote>some big texts</blockquote>
* <body> 页面上显示的所有内容都被包含在<body></body>里
* <br> 用于显示一个换行
* <button> 用于显示一个按钮
* <code> 用于一包裹一段代码内容
* <dd> 用于一个dl列表的某个dt名词的描述
* <del> 用于删除一些不需要的文字
* <div> 用于包裹住一些其他的标签，制造一个容器
* <dl> 用于制作一个名词和对应解释的列表
* <dt> 用于一个dl列表的某个dt名词
* <em> 用于强调一些文本内容
* <figcaption> 用于一张图表的说明文字
* <figure> 用于一张图表
* <footer> 用于包裹页面的底部内容
* <form> 用于制作一个表单
* <h1>-<h6> 用于标记标题，从h1到h6重要性依次递减
* <head> 用于包裹页面的元数据，如<meta>, <link>, <title>等
* <header> 用于包裹页面的头部内容
* <hr> 用于制造出一条分隔线
* <html> 整个 HTML 文档的根元素，包裹住其他所有的元素
* <iframe> 用于嵌入另一个小页面到一个页面中
* <img> 用于显示一张图片
* <input> 用于显示一个表格输入控件
* <label> 用于给一个表格输入控件打上一个标签，说明输入控件的作用
* <li> 用于<ul>和<ol>标签，代表一个列表项
* <link> 用于链接外部CSS文件
* <mark> 用于高亮显示某些文本
* <meta> 用于下达一些元数据指令，或者对页面进行说明
* <nav> 用于包裹住一个导航条的内容
* <ol> 用于制作一个有序列表
* <p> 用于显示一个段落
* <q> 用于一小段引用文字
* <script> 用于一段JavaScript脚本代码，或者引入一个外部JavaScript脚本文件
* <section> 用于包裹一部分有逻辑关第的页面内容
* <select> 用于制作一个下拉列表选框
* <span> 用于包裹住一小段文字，作为一个容器
* <strong> 用于着重强调重要的文本内容
* <style> 用于给页面元素加上样式
* <sub> 用于下标文本
* <sup> 用于上标文本
* <table> 用于制作一个表格
* <tbody> 用于表格里的主体部分
* <td> 用于表格里的某一个单元格
* <textarea> 用于制作一大块文本输入框
* <tfoot> 用于表格里的底部
* <th> 用于表格里的表头的单元格
* <thead> 用于表格里的表头
* <time> 用于页面内容中的时间
* <title> 用于显示整个页面的标题（显示在浏览器的tab上）
* <tr> 用于标记表格里的一行
* <ul> 用于制作一个无序列表   
复制代码

9.页面出现了乱码，是怎么回事？如何解决？

页面编码不对，html文件头部设置编码格式，一般设置为utf-8

10.title 属性和 alt 属性分别有什么作用？

alt属性：使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明；
title属性：
1. title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息（tool tip），然而这又由制造商来决定如何渲染title文字。
2. title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。
3. title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的.

11.html注释怎么写？

 <!-- 注释 -->
复制代码

12.HTML5 为什么只写？

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为.

13.data- 属性的作用？

<div id="box" data-name='ghostwu' data-age='22' , data-sex='man'>ghostwu tell you how to learn html5</div>
    <script>
        var oBox = document.querySelector("#box");
        console.log( oBox.dataset ) ;
        var myName = oBox.dataset.name;
        var myAge = oBox.dataset.age;
        var mySex = oBox.dataset.sex;
        if( oBox.dataset.name ) {
            console.log( oBox.dataset.name );
        }
    </script>
复制代码

HTML5规定可以为元素添加非标准的属性，但要添加前缀 data- ，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data- 开头即可添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。

14. 的 title 和 alt 有什么区别？

有两个必需的属性，src和alt；
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的；
title是对图片的说明和额外补充，如果需要在鼠标经过图片时出现文字提示应该用属性title

15.WEB 标准以及 W3C 标准是什么？

web标准简单来说可以分为结构，表现，行为，web标准是三部分分开，使其模块化；但一般产生行为时，就会有结构和表现的变化，使三者界限不那么清晰。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点：

标签字母要小写；
标签要闭合；
标签不允许随意嵌套；
css和js
（1）尽量使用外链css样式表和js脚本；（2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版；（3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

16.严格模式与混杂模式如何区分？它们有何意义?

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码

注意：DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现

17.HTML 全局属性（global attribute）有哪些？

accesskey   设置访问元素的键盘快捷键。
class   规定元素的类名（classname）
contenteditable 规定是否可编辑元素的内容。
contextmenu 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*  用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggable   指定某个元素是否可以拖动
dropzone    指定是否将数据复制，移动，或链接，或删除
hidden  hidden 属性规定对元素进行隐藏。
id  规定元素的唯一 id
lang    设置元素中内容的语言代码。
spellcheck  检测元素是否拼写错误
style   规定元素的行内样式（inline style）
tabindex    设置元素的 Tab 键控制次序。
title   规定元素的额外信息（可在工具提示中显示）
translate   指定是否一个元素的值在页面载入时是否需要翻译
复制代码

18.如何在 html 页面上展示 div div 这几个字符？

使用转义符号,/无需转义

19.你是如何理解 HTML 语义化的？

讲到语义化，我们首先来聊聊html语义化的背景，HTML结构语义化，是最近几年才提出来的，以前的html结构，都是一堆的没有语义的冷冰冰的标签。最泛滥的就是div+css,以前的页面，你一打来就是一堆的div+css, 为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且官方w3c，也在HTML5给出了几个新的语义化的标签。
1，首先、语义化，故名思意，就是你写的HTml结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。怎么知道，自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。 2，其次、其实语义化，也无非就是自己在使用标签的时候多使用有英文语义的标签，比如标签，以为head(头)，在HTML中就是就是用来定义标题，还有p标签，英文是pagrapph段落，table表格标签,等等。

20.前端需要注意哪些 SEO?

合理的title,description,keyword;
html语义化标签，符合w3c标准；
最重要的html代码放在最前面；
重要的内容不要用js输出，爬虫不会获取js获取内容；
少用iframe，因为搜索引擎不会抓取iframe中的内容；
非装修性的图片必须加alt；
提高网站速度，网站速度是搜索引擎排序的一个重要指标；

21.post 和 get 方式提交数据有什么区别？

其实，GET和POST本质上两者没有任何区别。他们都是HTTP协议中的请求方法。底层实现都是基于TCP/IP协议。上述的所谓区别，只是浏览器厂家根据约定，做得限制而已。
幂等性原本是数学上的概念，即使公式：f(x)=f(f(x)) 能够成立的数学性质。用在编程领域，则意为对同一个系统，使用同样的条件，一次请求和重复的多次请求对系统资源的影响是一致的。幂等性是分布式系统设计中十分重要的概念，具有这一性质的接口在设计时总是秉持这样的一种理念：调用接口发生异常并且重复尝试时，总是会造成系统所无法承受的损失，所以必须阻止这种现象的发生。

OPTIONS 返回服务器所支持的请求方法
GET 向服务器获取指定资源
HEAD 与GET一致，只不过响应体不返回，只返回响应头
POST 向服务器提交数据，数据放在请求体里
PUT 与POST相似，只是具有幂等特性，一般用于更新
DELETE 删除服务器指定资源
TRACE 回显服务器端收到的请求，测试的时候会用到这个
CONNECT 预留，暂无使用

22.HTTP状态码

HTTP协议中提供了好多状态码，列举我们常用的：

200 返回正常
304 服务端资源无变化，可使用缓存资源
400 请求参数不合法
401 未认证
403 服务端禁止访问该资源
404 服务端未找到该资源
500 服务端异常

23.在 input 里，name 有什么作用？

用途1：作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
用途2： HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
用途3：建立页面中的锚点，我们知道link是获得一个页面超级链接，如果不用href属性，而改用Name，如：，我们就获得了一个页面锚点。
用途4：作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
用途5：在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
用途6：某些特定元素的属性，如attribute，meta和param。例如为Object定义参数或Meta中。

24.label 有什么作用？如何使用？

Label标签有两个属性，一个是for，一个是 accesskey。 for功能：表示这个Label是为哪个控件服务的，Label标签要绑定了for指定HTML元素的ID或name属性，你点击这个标签的时候，所绑定的元素将获取焦点，点击label所包裹内容，自动指向for指定的id或name accesskey则定义了访问这个控件的热键( 所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键)

<label for="username">姓名</label><input id="username" type="text">
<label for="username" accesskey＝"N">姓名</label><input id="username" type="text">
复制代码

25.radio 如何分组？

  <form>
    <input type="radio" name="sex" value="male"> 男 <br>
    <input type="radio" name="sex" value="female"> 女<br>
    <input type="radio" name="age" value="adult"> 已成年<br>
    <input type="radio" name="age" value="child"> 未成年
  </form>
复制代码

26.placeholder 属性有什么作用？

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。
复制代码

27.type=hidden 隐藏域有什么作用？举例说明

1、隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
2、有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。
3、有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上 οnclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
4、有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
5、javascript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
6、还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉

28.CSRF 攻击是什么？如何防范？

我们首先来认识一下CSRF。CSRF（Cross-site request forgery）也被称为 one-click attack或者 session riding，中文全称是叫跨站请求伪造。一般来说，攻击者通过伪造用户的浏览器的请求，向访问一个用户自己曾经认证访问过的网站发送出去，使目标网站接收并误以为是用户的真实操作而去执行命令。常用于盗取账号、转账、发送虚假消息等。攻击者利用网站对请求的验证漏洞而实现这样的攻击行为，网站能够确认请求来源于用户的浏览器，却不能验证请求是否源于用户的真实意愿下的操作行为。
1. 验证 HTTP Referer 字段
2. 使用验证码
3. 在请求地址中添加token并验证
4. 在HTTP 头中自定义属性并验证

29.网页验证码是干嘛的？是为了解决什么安全问题？

防止恶意注册和暴力破解,为了网络安全。

30.常见 web 安全及防护原理？

sql 注入；
Xss攻击；
CSRF攻击

31.CSS 加载方式有几种？

外部样式表

通过link引用css；
导入样式 @important；

内部样式表
内联样式

32.@import 有什么作用？如何使用？

@import（url），@import先加载html，后加载css；link先加载css再加载html，现在一般都采用link的方式。

33. CSS 选择器常见的有几种？

标签；
类；
id；
通用；
并集；
交集；
后代；
子代；
伪类；

34.id 选择器和 class 选择器的使用场景分别是什么？

同一个html页面中，id唯一，class不唯一

35. @charset 有什么作用？

在外部样式表文件内使用。指定该样式表使用的字符编码。

36.简述 src 和 href 的区别？

src用于替换当前元素，是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。href用于在当前文档和引用资源之间确立联系，是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

37.伪类选择器有哪些？

:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
复制代码

38.伪元素选择器有哪些？

::after
::before
::first-letter
::first-line
::selection
::backdrop
复制代码

39.伪类与伪元素区别？

在选择器系列文章的第三篇中，我们讨论伪选择器，该选择器不是选择元素，而是元素的某些部分，或仅在某些特定上下文中存在的元素。它们有两种主要类型：伪类和伪元素。
伪类：一个 CSS 伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。
伪元素：伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ，同样是添加到选择器后面去选择某个元素的某个部分

40.选择器的优先级是如何计算的？

第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
第六优先级：通配选择器，如*{marigin:6px;}

41.什么是 CSS 继承？哪些属性能继承，哪些不能？

CSS继承可定义为特定的css属性向下传递到子孙元素，就是指被包在内部的标签将拥有外部标签的样式，即子元素可以继承父元素的属性。
可以继承的属性：

字体系列属性：font,font-family,font-weight,font-size,font-style;
文本系列属性：

内联元素：color,line-height,word-space,letter-space,text-transform;
块级元素：text-indent,text-align

元素可见性：visibility
表格布局属性: caption-side、border-collapse、border-spacing、empty-cells、table-layout;
列表布局属性: list-style
生成内容属性: quotes
光标属性: cursor
页面样式属性: page、page-break-inside、windows、orphans;
声音样式属性: speak、speech-rate、volume、voice-family、pitch、stress、elevation;

不可以继承的属性：

display：规定元素应该生成的框的类型；
文本属性： vertical-align、text-decoration;
盒子模型的属性：width、height、margin 、border、padding;
背景属性：background、background-color、background-image;
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip;
生成内容属性：content、counter-reset、counter-increment（实现标签添加序号）;
轮廓样式属性：outline-style、outline-width、outline-color、outline;
页面样式属性：size、page-break-before、page-break-after;
声音样式属性：pause、cue、play-during;