前端面试题集锦——HTML+CSS篇

前端面试题集锦——HTML篇

1. 你是怎么理解 HTML 语义化

1、HTML的语义化就是从代码层次表达人的想法、思路，同时描绘出网站页面的结构，因为页面不止是给人看的，机器也要看。
2、网页结构清晰更方便开发维护，html语义化就是规定一些html的标签、属性有着特定的作用。
3、语义化的HTML，不关心内容的显示效果。 说的简单一点就是： 标题脱了CSS这层外衣渲染，它还是一个标题。例如

/

/

等等，在没有css渲染样式时让人一看就知道是头部，尾部，导航栏。
4、语义化使得html标签有了实际意义。
为什么要语义化？

1.为了在没有CSS的情况下，页面也能呈现出很好地**内容结构、代码结构:**为了裸奔时好看；
2.用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
3.有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
4.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
5.便于团队开发和维护，语义化更具可读性，是下一步把网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

优点：

1、标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。
2、有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读？
3、有利于构建清晰的机构，有利于团队的开发、维护。

1. 你是怎么理解 HTML 语义化

Step 1：先举例说明

HTML 语义化简单来说就是用正确的标签来做正确的事。

比如表示段落用 p 标签、表示标题用 h1-h6 标签、表示文章就用 article 等。

Step 2：说说为什么需要使用语义化标签

前期：前端工作主要由后端人员完成，也就是打野阶段，使用的是 table 布局

中期：美工人员使用 div+css 来完成

当前：专业的前端开发应该使用合适的标签来表达正确含义的页面结构

让页面具有良好的结构和含义，可以有效提高：

可访问性：帮助辅助技术更好的阅读和转译你的网页，利于无障碍阅读；

可检索性：有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量；

国际化：全球只有 13%的人口是英语母语使用者，因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；

互用性：减少网页间的差异性，帮助其他开发者了解你网页的结构，方便后期开发和维护

2. 你用过哪些 HTML5 标签

表示结构的标签 
    <header>头部标签 		
    <nav>导航标签 
    <article>内容标签 
    <section>定义文档某个区域   
    <aside>侧边栏标签 	
    <footer> 尾部标签
多媒体音频标签
    音频 -- audio
<audio src="media/music.mp3">audio>
    视频 -- video
 <video src="media/mi.mp4">video>
 canvas标签 :    
是HTML5 提供的一种新标签，它本身并不具备绘画能力，只是一个画布，一个容器。        

3. meta viewport 是做什么用的，怎么写？

Step 1：使用目的 
是为了在移动端不让用户缩放页面使用的 

Step 2：怎么写 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale-1, minimum-scale=1"> 

Step 3：解释每个单词的含义 

with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度 
initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度 
maximum-scale=1 指定用户能够放大的最大比例 
minimum-scale=1 指定用户能够缩小的最大比例 

4.H5 是什么

简单粗暴：就是一种移动端页面

深入点：微信上的一种移动营销页面

总之不是 HTML5

广义的解释
广义上，H5 指的是 HTML5，即网页使用的 HTML 代码 —— 第五代超文本标记语言。

狭义的解释
狭义上的解释，H5 就是——互动形式的多媒体广告页面。

5.label 标签的作用

目标：label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
概念：label 标签为 input 元素定义标注（标签）。
作用：
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面

如何绑定元素呢？
第一种用法就是用label直接包括input表单。
<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   label>
适合单个表单选择
第二种用法 for 属性与表单的id关联，用于规定 label 与哪个表单元素绑定。
<label for="sex">男label>
<input type="radio" name="sex"  id="sex">

6.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

首先：CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素。

常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、 <blockquote> 、<form> 

常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、 <code> 

常用的内联块状元素有： <img>、<input> 

知名的空元素： <br/> <hr/> <img/> <input/> <link/> <meta/> <br />

7.a 标签中 如何禁用 href 跳转页面 或 定位链接

e.preventDefault();href="javascript:void(0);
//禁用 href 跳转页面
<a href="javascript:void(0)"> a标签 a>
<a href="javascript:;">暂时不设置目标地址a>

8.canvas 在标签上设置宽高 和在 style 中设置宽高有什么 区别

canvas 标签的 width 和 height 是画布实际宽度和高度，绘制的图形都是在这个上面。而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度。如果 canvas 的 width 和 height 没指定或值不正确，就被设置成默认值 。

canvas相当与我们电脑中自带的“画图”工具，有画布，画板，绘图工具构成。当我在canvas中设置宽高，相当于使用鼠标拖动了画布的边框使画布变大，但是里面的内容不会变化。当我在style中设置了宽高，相当于点击放大镜对整个图像进行方法，使得里面的内容也会跟着变化。

9.你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么?

浏览器	内核
IE	trident
Firefox	gecko
Safari	Webkit
Opera(以前presto )/GoogleChrome	Blink

Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)

10.iframe 有哪些优缺点？

iframe 是一种框架，也是一种很常见的网页嵌入方法

iframe标签规定一个内联框架，一个内联框架被用来在当前HTML文档中嵌入另一个文档

iframe 的优点：

1.iframe 能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。

iframe 的缺点：

1.会产生很多页面，不容易管理。

2.iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。

3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理 iframe 中的内容，所以使用 iframe 会不利于搜索引擎优化。

4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

5.iframe 框架页面会增加服务器的 http 请求，对于大型网站是不可取的。

6.阻碍主页面的onload事件

现在基本上都是用 Ajax 来代替 iframe，所以 iframe 已经渐渐的退出了前端开发。

11.HTML5 新特性

1.语义特性（Semantic）

HTML5赋予网页更好的意义和结构。

2.本地存储特性（OFFLINE & STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。

3.设备访问特性 (DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

4.连接特性（CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

5.网页多媒体特性(MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。

6.三维、图形及特效特性（3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

7.性能与集成特性（Performance & Integration）

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。

12.HTML5 离线储存

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理： HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

在开始之前要先了解下 manifest（即.appcache文件），上面的解析清单要怎么写。

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

在线的情况下,用户代理每次访问页面，都会去读一次manifest.如果发现其改变, 则重新加载全部清单中的资源。

在 cache.manifest 文件的编写离线存储的资源；

CACHE MANIFEST 
\#v0.11 
CACHE: 
js/app.js 
css/style.css 
NETWORK: 
resourse/logo.png 
FALLBACK: 
/ /offline.html 

在离线状态时，操作 window.applicationCache 进行需求实现。

13.浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第 一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。

如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。

14.Doctype 作用?严格模式与混杂模式如何区分它们有何意义?

（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。

（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。你知道多少种 Doctype 文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

15.HTML 与 XHTML——二者有什么区别

区别：

1.所有的标记都必须要有一个相应的结束标记

2.所有标签的元素和属性的名字都必须使用小写

3.所有的 XML 标记都必须合理嵌套

4.所有的属性必须用引号""括起来

5.把所有<和&特殊符号用编码表示

6.给所有属性赋一个值

7.不要在注释内容中使“–”

8.图片必须有说明文字

一、其基础语言bai不同

1、XHTML是基于可扩展标记语言（daoXML）。
2、HTML是基于标准通用标记语言（SGML）。
二、语法严格程度不同

1、XHTML语法比较严格，存在DTD定义规则。
2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。
三、可混合应用不同

1、XHTML可以混合各种XML应用，比如MathML、SVG。
2、HTML不能混合其它XML应用。
四、大小写敏感度不同

1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
2、HTML对大小写不敏感。
五、公布时间不同

1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准。

前端面试题集锦——CSS 篇

1.盒子模型

CSS的盒子模型有哪些：标准盒子模型、IE盒子模型

CSS的盒子模型区别：
	标准盒子模型：margin、border、padding、content
	IE盒子模型 ：margin、content（ border +  padding  + content ）

通过CSS如何转换盒子模型：
	box-sizing: content-box;	/*标准盒子模型
盒子大小为 width + padding + border  （以前默认的）*/
	box-sizing: border-box;	  /*IE盒子模型
盒子大小为 width*/

如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

content-box (W3C 标准 盒模型 ) border-box (IE 盒模 型) padding-box (FireFox 曾经 支持 ) margin-box (浏览器未实现)

Tips: 理论上是有上面 4 种盒子，但现在 w3c 与 mdn 规范中均只支持 content-box 与 border-box；

2.几种获得宽高的方式 :

1.document.querySelector('.box').style.width/height   
这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

2.document.querySelector('.box').currentStyle.width/height   
这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。

3.window.getComputedStyle(dom).width/height   
这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。

4.document.querySelector('.box').getBoundingClientRect().width/height   
这种方式是根据元素在视窗中的绝对位置来获取宽高的

5.document.querySelector('.box').offsetWidth/offsetHeight   
这个就没什么好说的了，最常用的，也是兼容最好的。

6.获取屏幕的高度和宽度（屏幕分辨率）：
window.screen.height/width

7.获取屏幕工作区域的高度和宽度（去掉状态栏）：
window.screen.availHeight/availWidth

8.网页全文的高度和宽度：
document.body.scrollHeight/Width

9.滚动条卷上去的高度和向右卷的宽度：
document.body.scrollTop/scrollLeft

10.网页可见区域的高度和宽度（不加边线）：
document.body.clientHeight/clientWidth

11.网页可见区域的高度和宽度（加边线）：
document.body.offsetHeight/offsetWidth

3.边距重叠解决方案(BFC) BFC 原理 :

BFC: 块级格式化上下文
BFC基本概念：BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。
父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。

BFC原理（渲染规则|布局规则）：

（1）内部的 Box 会在垂直方向，从顶部开始一个接着一个地放置；
（2）Box 垂直方向的距离由 margin (外边距)决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠；
（3）每个元素的 margin Box 的左边， 与包含块 border Box 的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动也是如此；
（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置 float；
（5）BFC 的区域不会与 float Box 重叠（清浮动）;
（6）计算 BFC 的高度时，浮动元素也参与计算。

CSS在什么情况下会创建出BFC（即脱离文档流）

0、根元素，即 HTML 元素（最大的一个 BFC）
1、浮动（ float 的值不为 none ）
2、绝对定位元素（ position 的值为 absolute 或 fixed ）
3、行内块（ display 为 inline-block ）
4、表格单元（ display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性 )
5、弹性盒（ display 为 flex 或 inline-flex ）
6、默认值。内容不会被修剪，会呈现在元素框之外（overflow 不为 visible）

BFC作用（使用场景）

1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行）
2、避免元素被浮动元素覆盖
3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内）
4、去除边距重叠现象，分属于不同的 BFC 时，可以阻止 margin 重叠

/*上下 margin 重合的问题
在重合元素外包裹一层容器，并触发该容器生成一个 BFC。*/


    



 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

4.css reset 和 normalize.css 有什么区别：

两者都是通过重置样式，保持浏览器样式的一致性

前者几乎为所有标签添加了样式，后者保持了许多浏览器样式，保持尽可能的一致 。后者修复了常见的桌面端和移动端浏览器的 bug：包含了 HTML5 元素的显示设置、预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的 bug。

前者中含有大段的继承链 ；后者模块化，文档较前者来说丰富 。

总之，Normalize.css是一种CSS reset的替代方案。

5.居中方法：

1. 水平方向上 
针对 inline, 内联块 inline-block, 内联表 inline-table, inline-flex 元素及 img,span,button 等元素
.text_div{ 
text-align:center; 
}
不定宽块状元素居中 
.text_div{ 
margin:0 auto;//且需要设置父级宽度 
}
通过给父元素设置 float，然后给父元素设置position:relative和left:50%，子元素设置position:relative 和 left: -50% 来实现水平居中。
.wrap{ 
float:left; position:relative; left:50%; clear:both; }
.wrap-center{ left:-50%; 
}
2. 垂直居中 
单行内联(inline-)元素垂直居中 
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。 
.text_div{ 
height: 120px; line-height: 120px; } 
利用表布局
.father { display: table; }.children { 
display: table-cell; vertical-align: middle; text-align: center; 
}
flex 布局 
.center-flex { display: flex; 
flex-direction: column;//上下排列 
justify-content: center; } 
绝对布局方式 
已知高度.parent { position: relative; }.child { 
position: absolute; 
top: 50%; height: 100px; 
margin-top: -50px; } 
未知高度.parent { position: relative; }.child { 
position: absolute;  
top: 50%; 
transform: translateY(-50%); } 
3. 垂直水平居中根据上方结合 
flex 方 式 .parent { display: flex; justify-content: center; align-items: center; }grid 方 式 
.parent { 
    height: 140px; 
    display: grid; }
.child { margin: auto; } 

6.CSS 选择器列表优先级及权重：

优先级

每个选择器都有权值，权值越大越优先

继承的样式优先级低于自身指定样式

CSS属性+!important > 内联样式 > id选择器 > class选择器=伪类选择器=属性选择器 > 标签选择器=伪元素选择器 > 通用选择器 > 继承的样式

权重

!important 规则会覆盖任何其他的声明，只在需要覆盖全站或外部 CSS 的补丁页面中使用。
内联样式,行内样式：1000
id选择器：100
class选择器,伪类选择器，属性选择器：10
标签选择器,元素选择器：1
通用选择器,继承，通配符(*)，权重为0

注意： 当权重相同时，采取就近原则，与元素距离近的选择器生效。

优先级

每个选择器都有权值，权值越大越优先

继承的样式优先级低于自身指定样式

CSS属性+!important > 内联样式 > id选择器 > class选择器=伪类选择器=属性选择器 > 标签选择器=伪元素选择器 > 通用选择器 > 继承的样式

7.如何清除浮动：

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。 
浮动元素会漂浮在文档流的块框上。 浮动带来的问题： 
父元素的高度无法被撑开，影响与父元素同级的元素 
与浮动元素同级的非浮动元素（内联元素）会跟随其后 
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。 

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷） 

1.第一种方式—给父级盒子添加高度
//造成高度塌陷的原因就是父盒子没有高度，我们只需要给父盒子添加一个高度即可
 	.father {
        width: 100%;
        border: 2px solid red;
        height: 300px;
      }
2.第二种方式—额外标签法
额外标签法会在浮动元素末尾添加一个空的标签。给这个标签设置clear属性，注意这个标签必须是块级元素
  .clear {
        clear: both;
      } //为标签设置清除浮动
3.第三种方式—给父级添加 overflow 属性
这个方法是向浮动元素的父级盒子添加voerflow：hidden属性，这样就可以达到清除浮动的效果
	.father {
        width: 100%;
        border: 2px solid red;
        overflow: hidden;
      }
4.第四种方式—给父级添加after伪元素
.clearfix::after {
        content: "";/生成内容作为最后一个元素/ 
        display: block;/使生成的元素以块级元素显示,占满剩余空间/ 
        height: 0;/避免生成内容破坏原有布局的高度/
        clear: both;/清除浮动元素对当前元素的影响/
        visibility: hidden;/使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互/ 
      }
      .clearfix {
        /* IE6、7 专有 *//用于兼容 IE, 触发 IE hasLayout/ 
        *zoom: 1;
      }
5.第五种方法: 给父元素添加 双伪元素清除法   推荐  
        .clearfix:before,
        .clearfix:after {
      /* 这里用display:block也可以,用table是可以解决盒子塌陷问题 */
            display: table;           
            content: '';/* content必须要有 不然伪元素无法生效 */
        } 
        .clearfix:after {            
            clear: both;/* 这里是清除浮动的关键代码 */
        }
 		.clearfix {
   				 *zoom:1;
		 } 

8.自适应布局：

自适应布局是网页内容根据设备的不同而进行适应；通过检测视口分辨率，来判断当前访问的设备是pc端、平板还是手机，从而请求服务层，返回不同的页面；需要根据不同使用场景开发多套界面。

左侧浮动或者绝对定位，然后右侧 margin 撑开使用 div 包含，然后靠负 margin 形成 bfc

使用 flex

9.画三角形：

#item { 
    wwidth: 0;
	height: 0;
	border-top: 50px solid red;
	border-bottom: 50px solid blue;
	border-right: 50px solid green;
	border-left: 50px solid black;

}
选取需要的三角形，将其他的三个三角形设置为透明
#item{
      width: 0;
      height: 0;
      /*第一种写法*/
     /* 
      border-top: solid 50px  transparent;
      border-right: solid 50px  transparent;
      border-bottom: solid 50px blue  ;
      border-left: solid 50px  transparent;*/
      /*第二种写法*/
      border: 50px solid transparent;
	  border-bottom-color:  blue ;
}     

10.link 和@import 导入css的区别：

link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴， 只能加载 CSS。

link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。

link 是html标签，因此无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。

link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。

"index.css" rel="stylesheet">


推荐

结论：import与link样式权重主要取决于代码加载顺序，后面样式覆盖前面样式。
注意：一般尽量避免使用import方式，且import方式引入放在最下方，用于页面美化

11.长宽比方案：

/*padding-top or padding-bottom*/
div class="aspectration" data-ratio="16:9">
     

.aspectration { height: 0; width: 100%; } .aspectration[data-ratio="16:9"] { padding-top: 56.25%; } /*结合伪元素*/ .aspectration:after { content: ""; display: block; width: 1px; margin-left: -1px; } .aspectration[data-ratio="16:9"]:after { padding-top: 56.25%; } /*使用 padding 方式结合 calc 实现 */ .aspectration[data-ratio="16:9"] { padding-top:calc(100% * 9 / 16); } .aspectraion[data-ratio="4:3"] { padding-top:calc(100% * 3 / 4 ); } 长宽一项设置百分比另一项 aspect-ratio 实现（需借助插件实现） /* CSS新特性中提供了一种新的单位vw 浏览器100vw表示的是浏览器的视窗宽度(ViewPort) 视窗(ViewPort)是你的浏览器实际显示内容的区域——也就是不包括工具栏和按钮的网页浏览器 比如你的浏览器是1334px，那么对应的100vw = 1334px 这时1vw = 13.34px 这里的100vw对应前面方案的100%，把前面的%单位换成vw单位 16 : 9 对应的是 100vw * 9 / 16 = 56.25vw 4 : 3 对应的是 100vw * 4 / 3 = 75vw */ .aspectration[data-ratio="16:9"] { width: 100vw; height: 56.25vw } /*css新特性 CSS Grid Layout*/ .aspectration { display: grid; grid-template-columns: repeat(16, 6.25vw); grid-auto-rows: 6.25vw; } .aspectration[data-ratio="16:9"] .content { grid-column: span 16; grid-row: span 9; }

12.display 相关：

定义: display规定元素应该生成的框的类型

display使用不谨慎，可能会违反HTML中定义的显示层次结构

display的取值

常用的取值：

none：表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间 ，然visibility：hidden就保留

block：显示为块级元素，元素前后会带有换行符
inline：默认，元素会被显示为内联元素
inline-block：行内块元素
list-litem：作为列表显示 指定对象为列表项目
flex：弹性盒子布局
grid：网格布局

不常用的取值

run-in：会根据上下文作为块级元素或内联元素显示
table：块级表格 指定对象作为块元素级的表格。
inline-table：内联表格 指定对象作为内联元素级的表格。
table-row：此元素会作为一个表格行显示（类似tr）。
table-row-group：元素作为一行或多行的分组，类似tbody
table-header-group 此元素会作为一个或多个行的分组来显示，类似thead。
table-footer-group 此元素会作为一个或多个行的分组来显示，类似tfooter。
table-column 此元素会作为一个单元格列显示（类似col）
table-column-group： 指定对象作为表格列组显示。类同于html标签colgroup（CSS2）
table-cell 此元素会作为一个表格单元格显示（类似 td 和th）
table-caption 此元素会作为一个表格标题显示（类似 caption）
inherit：规定应该从父元素继承 display 属性的值。
box： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
flex： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

13.CSS 优化、提高性能的方法有哪些？

• 层级扁平，避免过于多层级的选择器嵌套；

• 减少使用通配符与属性选择器；有选择地使用选择器

• 减少不必要的多余属性；

• 使用 link 替 代原生 @import；

• 不要在ID选择器前面进行嵌套，ID本来就是唯一的而且权限值大，嵌套完全是浪费性能。

• 建立公共样式类，把相同样式提取出来作为公共类使用。

• 避免过分重排

• 使用 动画属性 实现动画，动画时脱离文档流，开启硬件加速，优先使用 css 动画；

• 硬件加速的好坏

• 避免过度约束

• 避免后代选择符

• 避免链式选择符使用紧凑的语法

• 避免不必要的命名空间

• 避免不必要的重复

• 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

• 避免！important，可以选择其他选择器

• 尽可能的精简规则，你可以合并不同类里的重复规则

14.CSS开启 GPU加速

为 动 画 DOM 元 素 添 加 CSS3 样 式 -webkit-transform:transition3d(0,0,0) 或 -webkit- transform:translateZ(0);，这两个属性都会开启 GPU 硬件加速模式，从而让浏览器在渲染动画时从CPU转 向GPU ，其 实 说 白 了 这 是 一 个 小 伎 俩 ， 也 可 以 算 是 一 个 Hack ，-webkit-transform:transition3d 和-webkit- transform:translateZ 其实是为了渲染 3D 样式，但我们设置值为 0 后，并没有真正使用 3D 效果，但浏览器却因此开启了 GPU 硬件加速模式。

-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
或
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

开启 GPU 硬件加速可能触发的问题：

通过-webkit-transform:transition3d/translateZ 开启 GPU 硬件加速之后，有些时候可能会导致 浏览器频繁闪烁或抖动，可以尝试以下办法解决之：

-webkit-backface-visibility:hidden; 

-webkit-perspective:1000;

总结：

通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题，但使用仍需谨慎，使用前一定要进行严谨的测试，否则它反而会大量占用浏览网页用户的系统资源，尤其是在移动端，肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量，降低电池寿命等问题。

15.display:none 和 visibility:hidden 的区别：

display:none ： 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。 如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。

visibility:hidden ： 隐藏对应的元素，但是在文档布局中仍保留原来的空间。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

16.position 的 absolute 与 fixed 共同点与不同点：

共同点：

1.改变行内元素的呈现方式，display 被置为 block；

2.都是用来给元素定位的属性，具有定位元素的一切特点（例如脱离文本流、不占据空间等等）；

3.默认会覆盖到非定位元素上

不同点：
1、fixed的父元素永远是浏览器窗口，不会根据页面滚动而改变位置；absolute的父元素是可以设置的，他会永远跟随父元素的位置的改变而改变。

2.absolute 的”根元素“是可以设置的，而 fixed 的”根元素“固定为浏览器窗口。当你滚动网页，fixed 元素与浏览器窗口之间的距离是不变的。

17.CSS 选择符有哪些？

• id 选择器（ # myid）

• 类选择器（.myclassname）

• 标签选择器（div, h1, p）

• 相邻选择器（h1 + p）

• 子选择器（ul > li）(相邻后代选择器)

• 后代选择器（li a）

• 通配符选择器（ * ）

• 属性选择器（a[rel = “external”]）

• 伪类选择器（a: hover, li:nth-child）

• 伪元素选择器（::before, ::after）

• 兄弟选择器（li ~ a）

• 相邻兄弟选择器（li + a）

18.哪些属性可以继承？

对于一些可以继承的属性，可以只设置上级的CSS样式表树形，子级（下级）不用设置，会自动继承此CSS属性，可以减少CSS代码，便于维护。

有继承性的属性：
字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x"的高度与"font-size" 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。
文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
text-shadow：设置文本阴影
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
元素可见性：visibility
表格布局属性：caption-side	border-collapse	empty-cells
列表属性：list-style-type
list-style-image	list-style-position、list-style
设置嵌套引用的引号类型：quotes
光标属性：cursor
还有一些不常用的；speak，page等属性，

无继承的属性
1、display
2、文本属性：vertical-align	text-decoration
3、盒子模型的属性:宽度、高度、内外边距、边框等
4、背景属性：背景图片、颜色、位置等
5、定位属性：浮动、清除浮动、定位position等
6、生成内容属性:content、counter-reset、counter-increment
7、轮廓样式属性:outline-style、outline-width、outline-color、outline
8、页面样式属性:size、page-break-before、page-break-after

继承中比较特殊的几点
a 标签的字体颜色不能被继承
-
标签字体的大下也是不能被继承的
因为它们都有一个默认值

19.CSS3 新增伪类有哪些：

CSS3 新增伪类举例：

E:first-child匹配父元素的第一个子元素E
E:last-child匹配父元素的最后一个子元素E
elem:last-child选中最后一个子元素。
elem:nth-child(n)选中父元素下的第n个子元素，并且在这个子元素的标签名为
	elem，n可以接受具体的数值，也可以接受函数。
elem:nth-last-child(n)作用同上，不过是从后开始查找。
elem:only-child如果elem是父元素下唯一的子元素，则选中之。

elem:nth-of-type(n):查找第n个elem标签的元素。可以为一个函数。
elem:first-of-type:选中父元素下第一个elem类型的元素。
elem:last-of-type:选中父元素下最后一个elem类型的元素。
elem:only-of-type:如果父元素下的子元素只有一个elem类型的元素，则选中该元素。
elem:empty:选中不包含子元素和内容的elem类型的元素。
elem:target:选中当前活动的elem元素。
:not(elem):选择非elem元素的每一个元素。
:enabled:控制表单控件的禁用状态。
:disabled:控制表单的禁用状态。
:checked单选框和复选框被选中。

20.position 的值，relative 和 absolute分别是相对于谁进行定位的：

• static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

• absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

• fixed （老 IE 不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。

• relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

• sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

inherit 规定从父元素继承 position 属性的值。

21.CSS3 有哪些新特性：

边框:

    border-radius	用于指定边框的圆角属性，
    box-shadow	该属性用于添加阴影
    border-image	该属性可以使用图片来创建一个边框

文字效果
text-shadow	用于给文字添加阴影
box-shadow（即边框的box-shadow）
text-overflow	该属性指定当文本溢出时，内部内容应该有啥效果
word-wrap	该属性用于是否自动换行
word-break	该属性规定非中日韩文本的换行规则
text-justify	该属性指定应怎样对齐文本以及对齐间距
text-outline	该属性设置文本的轮廓，但是这个样式现在所有浏览器都不支持

2D/3D转换
在CSS3中2D转换增加transform属性，并添加了下列方法：
    translate()—设置元素的位置，可以设置上或下移动，可分为translateX()和translateY()两个方法
    rotate(angle)—规定元素的旋转角度，角度可为负，顺时针为正，逆时针为负
    scale()—缩放或放大元素，有scaleX()和scaleY()两个方法
    skew()—规定元素在X轴和Y轴的倾斜角度，有skewX(angle)和skewY(angle)两个方法
    matrix()—定义2D变换，有六个参数，包含了旋转、缩放、平移和倾斜功能
在3D变换中，transform属性主要有下列方法：
        rotateX()— 绕其在一个给定度数X轴旋转的元素
        rotateY()—绕其在一个给定度数Y轴旋转的元素
        rotateZ()—绕其在一个给定度数Z轴旋转的元素

新增 RGBA，HSLA 模式  使用RGBA实现透明效果；

盒子模型：box-sizing
用于定于盒模型，主要有标准盒模型(content-box)和怪异盒模型(border-box)

过渡：transition，可实现动画
    CSS3过渡是指元素从一种样式逐渐变换为另一种样式
   必须要指定两项内容
        指定要添加效果的CSS属性
        指定效果的持续时间

自定义动画  animate @keyfrom
    该规则用于创建动画
    规则内指定一个CSS样式和动画将逐步从目前的样式改为新的样式
如果遇到浏览器可能不兼容的情况，需要添加前缀：-webkit-、-ms-、-moz-，其他的属性也是如此

渐变效果；
    渐变(gradients)可以让两个或多个颜色之间平稳的过渡
    CSS3定义了两种类型的渐变：
        线性渐变(linear gradients)：向上/向下/向左/向右/对角线方向
        径向渐变(radial gradients)：从中心向外扩散

使用“@Font-Face”实现定制字体；@font-face
允许使用任何字体，只是需要将字体的网址添加进来，用户使用时就会自动下载

背景；
    background-image可以添加背景图片，并且可以添加多张，不同的图片用逗号隔开，显示在最顶端的是第一张图片可以添加背景图片，并且可以添加多张，不同的图片用逗号隔开，显示在最顶端的是第一张图片
    background-size	可用于指定背景图片的大小
    background-origin	该属性用于指定背景图像的位置区域
content-box、padding-box、border-box值表示放置的背景图像区域
    background-clip	用于背景裁剪属性是从指定位置开始绘制
content-box、padding-box、border-box值表示裁剪的区域


文字或图像的变形处理；

多栏布局；
CSS3可以将文本 内容设计成像报纸一样多列布局。关于多列布局有以下属性：
    column-count	指定将元素分割的列数
    column-gap	属性指定了列与列间的间隙
    column-rule-style属性指定了列与列间的边框样式
    column-rule-width属性指定了两列的边框厚度
    column-rule-color属性指定了两列的边框颜色
    column-rule
    column-span
    column-width	属性指定了列的宽度

媒体查询
使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询
@media mediatype and|not|only (media feature){
      css-code;
}   
/*  用@media开通 注意@符号       
mediatype：媒体类型，包含（all，print，screen，speech）
1.all–所有设备
2.print–打印机和打印预览
3.screen–电脑屏幕，平板电脑，智能手机等
4.屏幕阅读器等发声设备   
关键字 将媒体类型或多个特性连接到一起做为媒体查询的条件
    and：可以将多个媒体特性连接到一起，相当"且"于的意思
    not：排除某个媒体类型，相当于"非"的意思，可以省略
    only：指定某个特定的媒体类型，可省略
media feature 媒体特性，必须有小括号包含	每种媒体类型都具备各自不同的特性，根据不同媒体类型特性设置不同的展示风格，
如：width：屏幕可见宽度；max-height：页面最大可见区域高度

22.为什么要初始化 CSS 样式

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

当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）

弊端

初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

23.canvas 在标签上设置宽高和在 style 中设置宽高有什么区别：

canvas相当与我们电脑中自带的“画图”工具，有画布，画板，绘图工具构成。当我在canvas中设置宽高，相当于使用鼠标拖动了画布的边框使画布变大，但是里面的内容不会变化。当我在style中设置了宽高，相当于点击放大镜对整个图像进行方法，使得里面的内容也会跟着变化。 如果 canvas 的 width 和 height 没指定或值不正确，就被设置成默认值 。

24. 什么是 css HACK？

CSS hack 是通过在 CSS 样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的 CSS 样式的目的

什么是CSS hack？

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

hack：本意：修改，引申为对软件的二次修改 css hack的意思是浏览器兼容

25. Less/Sass/Scss 的区别

Scss 其实是 Sass 的改进版本 Scss 是 Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面，因此 Sass 语法进行了改良，Sass 3 就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

Less 环境较 Sass 简单 Sass 的安装需要安装 Ruby 环境，Less 基于 JavaScript，需要引入 Less.js 来处理代码

输出 css 变量符不一样，Less 是@，而 Sass 是$，而且变量的作用域也不一样。

Sass 没有局部变量，满足就近原则。Less 中{}内定义的变量为局部变量。

Less 没有输出设置，Sass 提供 4 中输出选项:

输出样式的风格可以有四种选择，默认为 nested

• nested：嵌套缩进的 css 代码
• expanded：展开的多行 css 代码
• compact：简洁格式的 css 代码
• compressed：压缩后的 css 代码

Sass 支持条件语句，可以使用 if{}else{},for{}循环等等。而 Less 不支持。

Less 与 Sass 处理机制不一样 Less 是通过客户端处理的，Sass 是通过服务端处理，相比较之下 Less 解析会比 Sass 慢一点

Sass 和 Less 的工具库不同 Sass 有工具库 Compass, 简单说，Sass 和 Compass 的关系有点像 Javascript 和 jQuery 的关系,Compass 是 Sass 的工具库。在 它的基础上，封装了一系列有用的模块和模板，补充强化了 Sass 的功 能。

Less 有 UI 组件库 Bootstrap, Bootstrap 是 web 前端开发中一个比较有名的前端 UI 组件库， Bootstrap 的样式文件部分源码就是采用 Less 语法编写，不过 Bootstrap4 也开始用 Sass 编写了。

总结

sass/scss或是less，都可以看作为一种基于css之上的高级语言，其目的是使得css开发更灵活和更强大，sass的功能比less强大,基本可以说是一种真正的编程语言了，less则相对清晰明了,易于上手,对编译环境要求比较宽松，在实际开发中更倾向于选择less。但如果认真深入scss之后还是建议切换到scss，因为更加强大，更好用。

26. css 与 js 动画差异：

css 性能好 css 代码逻辑相对简单

js 动画控制好 js 兼容性好 js 可实现的动画多 js 可以添加事件

JS动画（逐帧动画）

首先，在js动画是逐帧动画，是在时间帧上逐帧绘制帧内容，由于是一帧一帧的话，所以其可操作性很高，几乎可以完成任何想要的动画形式。但是由于逐帧动画的帧序列内容不一样，会增加制作负担，且资源占有比较大。

但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。正是由于js对动画的操作复杂度比较高，能对动画有一个比较好的控制，如开始、暂定、回放、终止、取帧等，可以很精确的做到。因此可以js可以通过操作DOM和BOM来做一些酷炫的动态效果，以及爆炸特效，且兼容性比较好。

但是，如果帧率过低的话，会导致帧与帧之间的过渡很可能会不自然、不连贯。

缺点：

js是单线程的脚本语言，当js在浏览器主线程运行时，主线程还有其他需要运行的js脚本、样式、计算、布局、交互等一系列任务，对其干扰线程可能出现阻塞，造成丢帧的情况。
其次，js在做动画的时候，其复杂度是高于css3的，需要考虑一些计算，操作等方便问题。

优点：

JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成
CSS3有兼容性问题，而JS大多时候没有兼容性问题

css3（补间动画）

css3动画的制作方法简单方便。只需确定第一帧和最后一帧的关键位置即可，两个关键帧之间帧的内容由Composite线程自动生成，不需要人为处理。当然也可以多次添加关键帧的位置。

因为只设置几个关键帧的位置，所以在进行动画控制的时候时比较弱的。不能够在半路暂停动画，或者在动画过程中不能对其进行一些操作等。

css3在实现一些简单的滑动，翻转等特效的时候会很方便，但是想要做到一些酷炫的效果的时候，其操作往往可能会比js操作有更多的冗余。

css3在做动画的时候，浏览器可以对其进行一些优化，会比js使用更少的占用cpu资源，但是效果足够流畅。

缺点：

运行过程控制较弱，无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告
代码冗长。如果想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。

优点：

浏览器可以对动画进行优化。
代码相对简单,性能调优方向固定
对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

总结

如果动画只是一些简单的状态切换，滑动等效果，不需要中间的控制过程，css3是比较好的选择，它直接在css文件中就可以实现，并不需要引入太多的js库。

而想做一些复杂的客户端界面，开发一个复杂ui的app，实现一个复杂纹理动画等，需要对页面进行精准的控制计算，应该使用js动画，这样动画可以保持高效，并且工作流也更可控。

因此，在实现一些小的交互动效的时候，就多考虑考虑CSS动画。对于一些复杂控制的动画，使用javascript比较可靠。

27.CSS 预处理器(Sass/Less/Postcss)：

CSS 预处理器的原理: 是将类 CSS 语言通过 Webpack 编译 转成浏览器可读的真正 CSS。

在这层编译之上，便可以赋予 CSS 更多更强大的功能，常用功能:

• 嵌套

• 变量

• 循环语句

• 条件语句

• 自动前缀

• 单位转换

• mixin 复用

28.CSS 动画：

过渡 （transition）的作用
1.通过过渡可以指定一个属性发生变化时的切换方式
2.通过过渡可以创建一些非常好的效果，提升用户的体验
常用属性
1.transition-property:指定要执行过渡的属性
多个属性间使用,隔开（ transition-property: width,height;）
如果所有属性都需要过渡，则使用all关键字
大部分属性都支持过渡效果，注意过渡时必须是有效数值向另外一个有效数值进行过渡，比如auto向0过渡就不是一个有效值
2.transition-duration:指定过渡效果的持续时间
时间单位:s 和 ms 1s=1000ms
可以分别指定时间（transition-duration: 100ms,2s;）
3.transition-timing-function:过渡的时序函数
指定过渡的执行的方式
可选值:
ease 默认值 ，慢速开始，先加速，再减速
4. transition-delay:过渡效果的延迟，等待一段时间后在执行过渡
5.transition:可以同时设置过度相关的所有属性,只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟。
动画
    动画的简介
    1.动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发动态效果
    2.设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
 设置关键帧
/*@keyframes后跟的是关键帧的名字（可以随便起）*/
  @keyframes text {
            /*from表示动画的开始位置 也可以使用0%*/
            from{
                margin-left: 0;
            }
            /*to动画的结束位置 也可以使用100%*/
            to{
                margin-left: 700px;
            }
        }
动画常用属性
1.animation-name:指定要对当前元素生效的关键帧的名字
2.animation-duration:指定动画的执行时间
3.animation-timing-function:跟transition-timing-function用法一样
4. animation-iteration-count:指定动画执行的次数 animation-iteration-count:infinite;（无限执行）
5.animation-direction:指定动画运行的方向
normal 默认值 从from向to运行 每次都是这样
reverse 从 to 向 from 运行 每次都是这样
alternate 从 from 向 to 运行 重复执行动画时反向执行
alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行
6. animation-play-state:设置动画的执行状态
可选值:
running 默认值 动画执行
paused 动画暂停
7.animation-fill-mode:指定动画的填充模式
可选值:
none 默认值 动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了 forwards 和 backwards
8.animation-delay:设置动画的延时
8.transition:可以同时设置动画相关的所有属性,只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟。
变形

    变形(transform)的简介

    1.变形就是指通过css来改变元素的形状或位置
    2.变形不会影响到页面的布局(不会脱离文档流)
    3.平移元素，百分比是相对于自身计算的
    常用属性(transform)

    1.transform: translateX():沿着x轴平移;
    2.transform: translateY():沿着Y轴平移;
    3.transform: translateX():沿着Z轴平移;
    1.Z轴平移，调整元素在Z轴的位置，正常情况就是调整元素和人眼之间的距离,距离越大，元素离人越近
    2.Z轴平移属于立体效果(近大远小)，默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距

旋转
    旋转(transform)的简介
    1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度
    (transform)常用属性
1.rotateX()沿着x轴旋转;
2.rotateY()沿着Y轴旋转;
3.rotateZ()沿着Z轴旋转; 

缩放
    (transform)常用属性
    transform-origin: 0 0;设置变形的原点 默认值(center)
1.scaleX(2)沿着X轴放大两倍;
2.scaleX(.2)沿着X轴缩小两倍;
3.scaleY(2)沿着Y轴放大两倍;
4.	scaleY(.2)沿着Y轴缩小两倍;
	scale(2)沿着Y轴和X轴放大两倍;
	scale(.2)沿着Y轴和X轴缩小两倍;

29.层叠上下文：

一、什么是层叠式上下文

层叠上下文即元素的z轴，层级越高越接近阅读者

层叠上下文，是HTML中的一个三维概念

如果元素具备以下任何一个条件，则该元素会创建一个新的层叠上下文。

• 根元素(元素)
• z-index不为auto的定位元素

什么是层叠水平？

决定同一层叠上下文中元素在z轴的显示顺序。

普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。

需要注意的是，诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错，某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。
什么是层叠顺序？

表示元素发生层叠时有着特定的垂直显示顺序，，

注意，这里跟上面两个不一样，上面的层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。

二、什么是层叠级别

同一个层叠上下文的背景色以及内部元素，谁在上谁在下，这些都是由层叠级别来决定的。层叠级别是针对同一个层叠上下文而言的。

在同一个曾得上下文中，层叠级别从低到高排列如下：

• 边框和背景：也就是当前层叠上下文的边框和背景
• 负z-index：z-index为负值的“内部元素”
• 块元素：普通文档流下的块盒子（block-levelbox）
• 浮动盒子：非定位的浮动元素
• 行内盒子：普通文档流下的行内盒子
• z-index：0：z-index为0的“内部元素”
• 正z-index：x-index为正值的“内部元素”

三、层叠上下文的特点

在同一层叠上下文中，我们比较的是“内部元素层叠级别”。层叠级别大的元素显示在上，层叠级别小的元素显示在下
在同一层叠上下文中，如果两个元素的层叠级别相同，则后面的元素在前面的元素的上面，遵循后来者居上的原则
在不同的层叠上下文中，我们比较的是“父级元素层叠级别”。元素显示顺序以“父级层叠上下文”的层叠级别来决定显示的先后顺序，与自身的层叠级别无关

• 层叠上下文的层叠水平要比普通元素高。
• 层叠上下文可以阻断元素的混合模式。
• 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
• 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
• 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

30.媒体查询：

定义两套 css，当浏览器的尺寸变化时会采用不同的属性

基本定义

1.使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

//语法

mediatype：媒体类型，包含（all，print，screen，speech）
1.all–所有设备
2.print–打印机和打印预览
3.screen–电脑屏幕，平板电脑，智能手机等
4.屏幕阅读器等发声设备
广泛使用的是all和screen

    
media feature：媒体功能，如：width：屏幕可见宽度；max-height：页面最大可见区域高度等
详见 css媒体查询–媒体功能


and | not | only ：逻辑操作符，可以用来构建复杂的媒体查询
1.all–用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。在不使用not或only操作符的情况下，媒体类型是可选的，默认为all。
2.not–用来对一条媒体查询的结果进行取反
3.only–表示仅在媒体查询匹配成功时应用指定样式

	//使用and逻辑操作符。横屏和最小宽度为700px时生效。
    

	 //使用not逻辑操作符，只有在大于300px时生效
    
     
     //使用only逻辑操作符，只有在小于等于300px时生效
    

2.@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

通过获取页面宽度，从而改变页面样式及布局，来达到响应式效果。

3.重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。使用方法

1.引入cs文件

//通过mdeia指定媒体类型来实现区别引入css文件
"stylesheet" href="./css/index.css" media="screen">

//通过mdeia指定媒体类型及条件来区别引入css文件
"stylesheet" href="./css/index.css" media="screen and (min-width:300px)">

2.style内联样式media指定媒体类型

//通过mdeia指定媒体类型来实现区别当前style是否生效


//通过mdeia指定媒体类型及条件来实现区别当前style是否生效
    

3.style内通过@media实现

    //指定媒体类型下的{}内样式生效
    
    
	//只在IE8下生效
	
此方法多用于浏览器兼容时使用

31. flexbox（弹性盒布局模型）

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

使用场景：弹性布局适合于移动前端开发，在 Android 和 ios 上也完美支持。

32.一个满屏品字布局如何设计?

第一种真正的品字：

\1. 三块高宽是确定的；

\2. 上面那块用 margin: 0 auto;居中；

\3. 下面两块用 float 或者 inline-block 不换行；

\4. 用 margin 调整位置使他们居中。

第二种全屏的品字布局: 上面的 div 设置成 100%，下面的 div 分别宽 50%，然后使用 float 或者 inline 使其不换行。

33.absolute 的 containing block 计算方式跟正常流有什么 不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

\1. 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后 一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

\2. 否则,则由这个祖先元素的 padding box 构成。如果都找不到，则为 initial containing block。

补充：

\1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉 padding 的部分）

\2. absolute: 向上找最近的定位为 absolute/relative 的元素

\3. fixed: 它的 containing block 一律为根元素(html/body)

34.解释 css sprites ，如何使用？

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。

CSS Sprites 为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片.

在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。

所以，CSS Sprites技术加速的关键，并不是降低质量，而是减少个数，当然随之而来的增加内存消耗，CSS Sprites图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。

35.CSS 属性 overflow 属性定义溢出元素内容区的内容会如何处理?

在CSS中，如果给一个盒子设置了固定的宽度与高度，但内容过多就会溢出盒子本身的宽度或高度。此时，就可以使用 overflow 属性来控制内容溢出时的处理方式。

参数是 scroll 时候，必会出现滚动条。元素的内容会在元素框的边界处剪裁，但浏览器会显示滚动条以便查看其余的内容

参数是 auto 时候，子元素内容大于父元素时出现滚动条。如果内容被剪裁，则浏览器会显示滚动条以便查看其余的内容

参数是 visible 时候，溢出的内容，出现在父元素之外。 不剪切形式也不添加转动条，也就是元素的内容在元素框之外也可见

参数是 hidden 时候，溢出隐藏。元素的内容会在元素框的边界处剪裁，并且超出元素框之外的内容不可见

overflow 属性的延伸：overflow-X | overflow-y

属性	含义
overflow-x	主要用来定义对水平方向内容溢出的剪切
overflow-y	主要用来定义对垂直方向内容溢出的剪切

36.style 标签写在 body 后与 body 前有什么区别

页面加载自上而下 当然是先加载样式。 写在 body 标签后由于浏览器以逐行方式对 HTML文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在 windows 的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）

渲染机制的区别，在body前是已经把样式浏览一遍，到了对应标签直接，渲染样式。显示块。
在body后，是浏览器已经把标签浏览了，但基于没有样式，显示的不完全，再把body后的样式表，扫描后，在成为真正的样式。会慢，遇到大型网站，效果更差，这都基于浏览器从上而小的浏览机制导致的。

37.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp

png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点 是：压缩比高，色彩好。 大多数地方都可以用。

jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在 www 上，被用来储存和传输照片的格式。

gif 是一种位图文件格式，以 8 位色重现真色彩的图像。可以实现动画效果.

webp 格式是谷歌在 2010 年推出的图片格式，压缩率只有 jpg 的 2/3，大小比 png 小了 45%。 缺点是压缩的时间更久了，兼容性不好，目前谷歌和 opera 支持

JPEG

JPEG是有损的、采用直接色的、位图。JPEG也是一种针对照片影像而广泛使用的有损压缩标准方法。JPEG图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息，也即是进行了有损压缩。JPEG的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。

特性：适用于存储色彩丰富、层次分明的图片，不适合于线条绘图（drawing）和其他文字或图标（iconic）的图形，因为它的压缩方法用在这些类型的图形上，得到的结果并不好(PNG和GIF通常是用来存储这类的图形)

PNG

便携式网络图形是一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性

特性：如果保存文本，线条或类似的边缘清晰，有大块相同颜色区域的图像，PNG格式的压缩效果就要比JPEG好很多，并且不会出现JPEG那样的高对比度区域的图像有损。如果图像既有清晰边缘，又有照片图像的特点，就需要在这两种格式之间权衡一下了。JPEG不支持透明度。
PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同 的透明形式（索引透明和alpha透明）,24位PNG不支持透明,32位 PNG 在24位基础上增加了8位透明通道（32-24===8）,因此可展现256级透明程度。

GIF

GIF是一种无损、使用于索引色的、位图。由于采用了无损压缩，相比古老的bmp格式，尺寸较小，而且支持透明和动画。缺点是由于gif只存储8位索引（也就是最多能表达2^8=256种颜色），色彩复杂、细节丰富的图片不适合保存为gif格式。色彩简单的logo、icon、线框图适合采用gif格式。

静态GIF完全可用PNG8取代

WEBP

WebP图片是一种同时提供了有损压缩与无损压缩、使用直接色的、位图，由Google开发。与png、jpg相比，相同的视觉体验下，WebP图像的尺寸缩小了大约30％。另外，WebP图像格式还支持有损压缩、无损压缩、透明和动画。理论上完全可以替代png、jpg、gif等图片格式，当然目前webp的还没有得到全面的支持。

38.display:inline-block 什么时候会显示间隙？

在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。

有空格时候会有间隙 解决：移除空格

margin 正值的时候 解决：margin 使用负值

使用 font-size 时候 解决：font-size:0、

letter-spacing(字符间距)、

word-spacing (单词间距)

39. li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

方法一：既然是因为
换行导致的，那就可以将
代码全部写在一排，

方法二：我们为了代码美观以及方便修改，很多时候我们不可能将
全部写在一排，那怎么办？既然是空格占一个字符的宽度，那我们索性就将
内的字符尺寸直接设为0，将下面样式放入样式表，问题解决。但随着而来的就是
中的其他文字就不见了，因为其尺寸被设为0px了，我们只好将他们重新设定字符尺寸。
.wrap ul{font-size:0px;}

方法三： 本来以为方法二能够完全解决问题，但经测试，将li父级标签字符设置为0在Safari浏览器依然出现间隔空白；既然设置字符大小为0不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是li内的字符间隔也被设置了，我们需要将li内的字符间隔设为默认。
.wrap ul{letter-spacing: -5px;}
之后记得设置li内字符间隔
.wrap ul li{letter-spacing: normal;}

40.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60＊1000ms ＝ 16.7ms。

一般浏览器的刷新频率为每秒60次，所以最小事件间隔为 1/60*1000ms 约 16.7ms

41.让页面里的字体变清晰，变细用 CSS 怎么做？

-webkit-font-smoothing 在 window 系 统 下 没 有 起 作 用 ， 但 是 在 IOS 设 备 上 起 作 用 
-webkit-font-smoothing：antialiased 是最佳的，灰度平滑。
全家桶：
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-shadow: 1px 1px 1px 1px rgba(0,0,0,0.005)
text-rendering: optimizeLegibility

42.你对 line-height 是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。行高是指文本行基线间的垂直距离。 基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。上行的底线和下一行顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距。

当font-size等于line-height时，行距 = line-height - font-size = 0；而当font-size大于line-height时，则会出现行距为负值，则两行重叠。

CSS 中起高度作用的是 height 和 line-height，没有定义 height 属性，最终其表现作用一定是 line-height。height是用来设置元素的高度，比如img的高度、div的高度等。在没有设置div的height属性时，div的高度根据line-height的大小而变化，且文字垂直居中。

单行文本垂直居中：把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中，其实也可以把 height 删除。 多行文本垂直居中：需要设置 display 属性为 inline-block。

43.::before 和 :after 中双冒号和单冒号有什么区别？解释 一下这 2 个伪元素的作用

单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。

::before 就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于 dom 之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在 CSS2.1 里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着 Web 的进化，在 CSS3 的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

::before选择器在被选元素的内容前面插入内容

::after选择器在被选元素的内容后面插入内容。

44.视差滚动效果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的 3D 效果。

CSS3 实现 优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器

jQuery 实现 通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。 优点：能兼容到各个版本的，效果可控性好 缺点：开发起来对制作者要求高

插件实现方式 例如：parallax-scrolling，兼容性十分好

45.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？

页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。

具体的实践方式由多方面组成，包括弹性网格和布局、图片、css media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

页面头部必须有meta 声明的viewport。

, initial-scale=1. maximum-scale=1,user-scalable=no”>

46.全屏滚动的原理是什么？用到了 CSS 的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有 5 个需要展示的全屏页面，那么高度是 500%，只是展示 100%，剩下的可以通过 transform 进行 y 轴定位，也可以通过 margin-top 实现

overflow：hidden；

transition：all 1000ms ease；

全屏滚动和轮播图类似，都是通过改变元素位置或者显示与隐藏来实现，配合JS的一些交互距离判断，实现类似原生滚动捕获的效果。这里全屏的话就需要将宽高都设置为窗口的大小，可以通过百分百实现。
关键CSS属性是父容器 overflow: hidden; 。
实现全屏滚动还可以简单的通过插件来实现，比如fullpage，很多大公司的页面都是用这个实现的，比如小米一些产品的官网。

47.元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。 如果是height的话，是相对于容器高度

相对于父元素宽度的：
[max/min-]width、left、right、padding、margin 等；
相对于父元素高度的：
[max/min-]height、top、bottom 等；
相对于继承字号的：
font-size 等；
相对于自身字号的：
line-height 等；
相对于自身宽高的：
border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；
特殊算法的：
background-position（方向长度 / 该方向除背景图之外部分总长度 * 100）、
filter 系列函数等； 

48.margin 和 padding 分别适合什么场景使用？

margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。

何时使用 margin：

• 需要在 border 外侧添加空白

• 空白处不需要背景色时

• 上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白 。

何时使用 padding：

• 需要在 border 内侧添加空白

• 空白处需要背景颜色时

• 上下相连的两个盒子的空白，希望为两者之和。如15px + 20px的padding，将得到35px的空白。

兼容性的问题：在 IE5 IE6 中，为 float 的盒子指定 margin 时，左侧的 margin 可能会变成两倍的宽度。通过改变 padding 或者指定盒子的 display：inline 解决。

49.在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。

为何偶数居多？

1.比例关系

相对来说偶数字号比较容易和页面中其他部分的字号构成一个比例关系。如我使用14px的字体作为正文字号，那么其他部分的字体（如标题）就可以使用14×1.5 =21px的字体，或者在一些地方使用到了14×0.5=7px的padding或者margin，如果你是在用sass或者less编写css，这时候用处就凸显出来了。

2.UI设计师的缘故

大多数设计师用的软件如ps提供的字号是偶数，自然到了 前端那边也是用的是偶数。

3.浏览器缘故

其一是低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px。

其二是为了平分字体。偶数宽的汉字，如12px的汉子，去掉1像素的字体间距，填充了的字体像素宽度其实就是11px，这样的汉字中竖线左右是平分的，如“中”子，左右就是5px了。

4.系统差别

Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

而在Linux和其他手持设备上，奇数偶数的渲染效果其实相差不大。

50.浏览器是怎样解析 CSS 选择器的？

CSS 选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。

若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根 元素或满足条件的 匹配规则，则结束这个分支的遍历。

两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。

在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中 的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

51.设置元素浮动后，该元素的 display 值是多少？

1.为什么关注此问题？

行内元素设置为浮动后，可以设置宽高了，为什么？

我们知道Html元素分三种

块级元素（display:block）–> 可以设置元素的宽高

行内元素（display:inline）–> 默认不换行,设置width/height无效(可以设置line-height)，margin/padding上下无效

行内块级元素（display:inline-block ）–> 可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性

设置元素为浮动后，display的值是block

2.有什么意义？

以后在项目中如果需要设置行内元素的宽高，则设置为浮动后，就可以设置了

52.position 跟 display、overflow、float这些特性相互叠加后会怎么样？

display 属性规定元素应该生成的框的类型。 block 象块类型元素一样显示，none 缺省值。象行内元素类型一样显示， inline-block 象行内元素一样显示，但其内容象块类型元素一样显示，list-item 象块类型元素一样显示，并添加样式列表标记（display 还有很多其他值设置，读者自行查找）。

position 属性规定元素的定位类型。 absolute表示生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；fixed（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位；relative生成相对定位的元素，相对于其正常位置进行定位；static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

Float也是是一种布局方式，它定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 在布局过程中也经常会使用它来达到左右并排布局的效果。

类似于优先级机制：position：absolute/fixed 优先级最高，有他们在时，float 不起作用，display 值需要调整。float 或者 absolute 定位的元素，只能是块元素或表格。

1. ‘display’ 的值为 ‘none’

如果 ‘display’ 的值为 ‘none’，那么 ‘position’ 和 ‘float’ 不起作用。在这种情况下，元素不产生框。因此浮动和定位无效。

2. ‘position’ 的值是 ‘absolute’ 或 ‘fixed’

否则，如果 ‘position’ 的值是 ‘absolute’ 或 ‘fixed’，框就是绝对定位的，‘float’ 计算后的值应该是 ‘none’，并且，‘display’ 会被按照上表设置。 框的位置将由 ‘top’，‘right’，‘bottom’ 和 ‘left’ 属性和该框的包含块确定。

也就是说，当元素是绝对定位时，浮动失效，‘display’ 会被按规则重置。

3. ‘float’ 的值不是 “none”

如果 ‘float’ 的值不是 “none”，该框浮动并且 ‘display’ 会被按照转换对应表设置。

4. 元素是根元素

如果元素是根元素，‘display’ 的值按照转换对应表设置。

5. 否则，应用指定的 ‘display’ 特性值。

53.CSS 里的 visibility 属性有个 collapse 属性值？在不同 浏览器下以后什么区别？

当一个元素的 visibility 属性被设置成 collapse 值后，

• 对于一般的元素，它的表现跟display:hidden是一样的。
• 但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。

在不同浏览器下的区别：

chrome 中，使用 collapse 值和使用 hidden 没有区别。

firefox，opera 和 IE，使用 collapse 值和使用 display：none 没有什么区别。就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

54.常见的兼容性问题？

不同浏览器的标签默认的 margin 和 padding 不一样。 
*{margin:0;padding:0;} 

IE6 双边距 bug：块属性标签 float 后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。hack：display:inline;将其转化为行内属性。 

渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将 IE 浏览器从所有情况中分离出来。接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。 

{background-color:#f1ee18; 
/*所有识别*/ 
.background-color:#00deff\9; /*IE6、7、8 识别*/ +background-color:#a200ff; /*IE6、7 识别*/ 
_background-color:#1e0bd1; /*IE6 识别*/} 
12345678 

设置较小高度标签（一般小于 10px），在 IE6，IE7 中高度超出自己设置高度。hack：给超出高度的标签设置 overflow:hidden;或者设置行高 line-height 小于你设置的高度。 

IE 下，可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute()获取自定义属性；Firefox 下， 只能使用 getAttribute()获取自定义属性。解决方法:统一通过 getAttribute()获取自定义属性。 

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size- adjust: none; 解决。 

超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不再具有 hover 和 active 了。
解决方法是改变 CSS 属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} 
a:active {} 

55.一个页面从输入 URL 到页面加载显示完成，这个过程都发生了什么：

当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个DNS域名解析 查询。这能使浏览器获得请求对应的 IP 地址。

浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

此时，Web 服务器提供资源服务，客户端开始下载资源。请求返回后，便进入了我们关注的前端模块 简单来说，浏览器会解析 HTML 生成 DOM Tree，其次会根据 CSS 生成 CSS Rule Tree，而 javascript 又可以根据 DOM API 操作 DOM js引擎解析js,将解析后DOM树和CSS规则树关联起来构建Renden渲染树树，然后计算布局，绘制页面。

渲染完毕，四次挥手，关闭tcp连接

56.哪些地方会出现 CSS 堵塞，哪些地方会出现 JS 堵塞：

js 的阻塞特性：所有浏览器在下载 JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续 并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载 JS，但是 JS 下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。

由于浏览器为了防止出现 JS 修改 DOM 树，需要重新构建 DOM 树的情况，所以就会阻塞其他的下载和呈现。

嵌入 JS 会阻塞所有内容的呈现，而外部 JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。

CSS 怎么会阻塞加载了？CSS 本来是可以并行下载的，在什么情况下会出现阻塞加载了(在测试观察中，IE6 下 CSS 都是阻塞加载）

当 CSS 后面跟着嵌入的 JS 的时候，该 CSS 就会出现阻塞后面资源下载的情况。而当把嵌入 JS 放到 CSS 前面，就不会出现阻塞的情况了。

根本原因：因为浏览器会维持 html 中 css 和 js 的顺序，样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载，所以就会出现上面 CSS 阻塞下载的情况。

嵌入JS应该放在什么位置？

1、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。

2、如果嵌入 JS 放在 head 中，请把嵌入 JS 放在 CSS 头部。

3、使用 defer（只支持 IE）

4、不要在嵌入的 JS 中调用运行时间较长的函数，如果一定要用，可以用setTimeout 来调用

Javascript无阻塞加载具体方式：

1. 将脚本放在底部。还是放在head中，用以保证在js加载前，能加载出正常显示的页面。

代码如下：

<script>
    var script=document.createElement("script");
    script.type="text/javascript";
    script.src="file.js";
    document.getElementsByTagName("head")[0].appendChild(script);
</script>