HTML+CSS局部前端根基面试题-百分百源码网

HTML+CSS局部前端根基面试题

发布时间：09/01 来源：未知浏览：关键词：

1.行内元素和块级元素?img算什么?行内元素如何转化为块级元素?

行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不成改动，文字图片的宽度不成改动，只能容纳文本或者其他行内元素；其中img是行元素
块级元素：总是在新行上开端，高度、行高及外边距和内边距都可操纵，可以容纳内敛元素和其他元素；
行元素转换为块级元素方式：display：block；

专题引荐：2020年CSS面试题汇总（最新）

2.将多个元素设定为统一行?清除浮动有几种方式?

将多个元素设定为统一行：float，inline-block
清除浮动的方式：办法一：增加新的元素、利用 clear：both；
办法二：父级p定义 overflow: hidden；
办法三：利用:after和:before来在元素内部插入两个元素块，从面到达清除浮动的结果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

3.怪异盒模型box-sizing？弹性盒模型|盒规划?

在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包括内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另一个是border-box。
当设定为box-sizing:content-box时，将采纳标准模式解析运算；
当设定为box-sizing:border-box时，将采纳怪异模式解析运算。

4.简述几个css hack?

(1) 图片间隙
在p中插入图片，图片会将p下方撑大3px。hack1：将<p>与<img>写在统一行。hack2：给<img>增加display：block；
dt li 中的图片间隙。hack：给<img>增加display：block；
(2) 默许高度，IE6以下版本中，部分块元素，具有默许高度（低于18px）
hack1：给元素增加：font-size：0；
hack2：声明：overflow：hidden；
表单行高不一致
hack1：给表单增加声明：float：left；height：；border： 0；
鼠标指针
hack：若统一某一元素鼠标指针为手型：cursor：pointer；
当li内的a转化块元素时，给a设定float，IE里面会显现阶梯状
hack1：给a加display：inline-block；
hack2：给li加float：left；

5.href和src不同? title和alt

href (Hypertext Reference)指定网络资源的位置（超文本援用），从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，在 link和a 等元素上使用。
src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不成少的一部分，是引入。在 img、script、iframe 等元素上使用。
title：既是html标签，又是html属性，title作为属性时，用来为元素供给额外说明信息.
alt：alt是html标签的属性，alt属性则是用来指定更换文字，只能用在img、area和input元素中（包罗applet元素），用于网页中图片没法正常显示时给会员供给文字说明使其理解图像信息.

6.transform？animation？不同?animation-duration

Transform:它和width、left一样，定义了元素许多静态样式实现变形、扭转、缩放、移位及透视等功效，通过一系列功效的组合我们可以实现很炫酷的静态结果（非动画)。
Animation:作用于元素本身而不是样式属性,属于关键帧动画的范围，它本身被用来替换一些纯洁展现的javascript代码而实现动画,可以通过keyframe显式操纵当前帧的属性值.
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

7.nth-of-type | nth-child?

举例说明：
<ul> <p>111</p> <span>222</span> <li>1</li> <li>2</li> <li>3</li> </ul>
li:nth-of-type(2):表示ul下的第二个li元素
li:nth-child(2)：表示既是li元素又是在ul下的第二个元素（寻不到）。
倡议一样使用nth-of-type，不容易出问题。

8. :before 和 ::before 不同?

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。关于CSS2此前已有的伪元素，比方:before，单冒号和双冒号的写法::before作用是一样的。

9.怎样让一个p 上下摆布居中?

答：有三种办法。

办法1： .p1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   <p class="p1"></p> 办法2： .p2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  <p class="p2"></p> 办法3： .p3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   <p class="p3"></p>

10.css2.0 和css3.0

答：css3增强了css2的功效，增添了新的属性和新的标签，并且删除了一些冗余的标签，在规划方面减少了代码量。之前比力复杂的规划此刻一个属性就搞定了（columns之类的属性）。在结果方面参加了更多的结果(圆角，动画之类的)，还有在盒子模型和列表模块都停止了改善。不外CSS3兼容性不好，只要一些高级版本的阅读器支撑。

11.弹性盒子模型?flex|box不同?

(1) 引入弹性盒规划模型的目的是供给一种愈加有效的方式来对一个容器中的条目停止摆列、对齐和分配空白空间。

即使容器中条目的尺寸未知或是动态转变的，弹性盒规划模型也能正常的工作。在该规划模型中，容器会按照规划的需要，调整其中包括的条目的尺寸和次序来最好地填充所有可用的空间。

当容器的尺寸由于屏幕大小或窗口尺寸发生转变时，其中包括的条目也会被动态地调整。比方当容器尺寸变大时，其中包括的条目会被拉伸以占满余外的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范畴。弹性盒规划是与标的目的无关的。

在传统的规划方式中，block 规划是把块在垂直标的目的从上到下顺次摆列的；
而 inline 规划则是在水平标的目的来摆列。弹性盒规划并没有这样内在的标的目的限制，可以由开发人员自在操纵。

(2) flex和box的不同: display：box 是老标准，要兼顾古董机子就加上它；父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素依照父元素的宽度停止必然比例的分占空间。 flex是最新的，董机老机子不支撑的；

父元素设定display:flex后，子元素宽度会随父元素宽度的改动而改动，而display:box不会。 Android UC阅读器只支撑display: box语法；而iOS UC阅读器则支撑两种方式。

12.viewport 所有属性？

(1)width :设定layout viewport的宽度，为一个正整数，或字符串'device-width';
(2)initial-scale:设定页面的初始缩放值，为一个数字，可以带小数。
(3)minimum-scale:同意会员的最小缩放值，为一个数字，可以带小数。
(4)maximum-scale:同意会员的最大缩放值，为一个数字，可以带小数。
(5)height:设定layout viewport的高度，这个属性对我们并不重要，很少使用
(6)user-scalable:可否同意会员停止缩放，值为‘no’或者‘yes’。
安卓中还支撑：target-densitydpi，表示目标设备的密度等级，作用是决议css中的1px 代表多少物理像素
(7)target-densitydpi:值可认为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

13.怎样懂得HTML构造的语义化？

所谓标签语义化，就是目标签的含义。语义化的主要目的就是让大家直不雅的认识标签(markup)和属性(attribute)的用处和作用，对搜索引擎友好，有了良好的构造和语义我们的网页内容便天然容易被搜索引擎抓取，这种相符搜索引擎收索规则的做法，网站的推行便可以省下不少的功夫，并且可保护性更高，由于构造清楚,十分易于阅读。这也是搜索引擎优化SEO重要的一步。

14.伪类选中器和伪元素？c3中引入的伪类选中器有？c3中伪元素有?

伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

伪类选中器：
由于状态是动态转变的，所以一个元素到达一个特定状态时，它大概得到一个伪类的样式；当状态改动时，它又会失去这个样式。

伪元素选中器：
并不是针对真正的元素使用的选中器，而是针对CSS中已经定义好的伪元素使用的选中器；

c3中引入的伪类选中器：
:root()选中器，根选中器，匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。:root选中器等同于<html>元素。

:not()选中器称为否认选中器，和jQuery中的:not选中器千篇一律，可以选中除某个元素之外的所有元素。

:empty()选中器表示的就是空。用来选中没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

:target()选中器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在会员点击了页面中的超链接，并且跳转到target元素后起作用。

:first-child()选中器表示的是选中父元素的第一个子元素的元素E。简便点懂得就是选中元素中的第一个子元素，记住是子元素，而不是后代元素。

:nth-child()选中某个元素的一个或多个特定的子元素。

:nth-last-child()从某父元素的最后一个子元素开端运算，来选中特定的元素

:nth-of-type(n)选中器和:nth-child(n)选中器非常相似，不一样的是它只运算父元素中指定的某品种型的子元素。

:only-child表示的是一个元素是它的父元素的独一一个子元素。

:first-line为某个元素的第一行文字使用样式。

:first-letter 为某个元素中的文字的首字母或第一个字使用样式。

:before 在某个元素此前插入一些内容。

:after 在某个元素之后插入一些内容。

c3中伪元素：
::first-line选中元素的第一行，比方说改动每个段落的第一行文本的样式
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动
::selection用来改动阅读网页选中文的默许结果

15.html5是什么新特性、移除了那些元素？怎样处置HTML5新标签的阅读器兼容问题？怎样区分 HTML 和 HTML5？

* HTML5 此刻已经不是 SGML 的子集，主如果关于图像，位置，储备，多任务等功效的增添。
* 拖拽开释(Drag and drop) API 语义化更好的内容标签(header,nav,footer,aside,article,section) 音频、视频API(audio,video) 画布(Canvas) API 地理(Geolocation) API 当地离线储备 localStorage 长期储备数据，阅读器关闭后数据不丧失；
sessionStorage 的数据在阅读器关闭后主动删除表单控件，calendar、date、time、email、url、search 新的技术webworker, websocket, Geolocation
* 移除的元素纯展现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性发生负面影响的元素：frame，frameset，noframes；
支撑HTML5新标签：
* IE8/IE7/IE6支撑通过document.createElement办法发生的标签，可以利用这一特性让这些阅读器支撑HTML5新标签，阅读器支撑新标签后，还需要增加标签默许的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 
* 怎样区分： DOCTYPE声明\新增的构造元素\功效元素

16.placeholder?怎样在ie8上兼容placeholder这个结果

办法一：
第一推断阅读器可否支撑placeholder属性，假如不支撑的话，就遍历所有input输入框，猎取placeholder属性的值填充进输入框作为提醒信息，同时字体设定成灰色。

当输入框获得焦点( focus )同时输入框内文字等于设定的提醒信息时，就把输入框内清空；

当输入框失去焦点( blur )同时输入框内文字为空时，再把猎取的placeholder属性的值填充
进输入框作为提醒信息，同时字体设定成灰色；

当输入框内有输入( keydown )时，此时输入框内的提醒信息已经由focus事件清除，此时只需要把字体再复原成黑色即可

此办法的缺陷是，不适用于加载完DOM时即获得焦点的输入框，由于在会员的角度，加载完页面时看到的获得焦点的阿谁输入框，它的提醒文字是看不到的。

HTML：<input type="text" id="uname" name="uname" placeholder="请输入会员名"/>CSS：.phcolor{ color:#999;}JS$(function(){  
  //推断阅读器可否支撑placeholder属性  supportPlaceholder='placeholder'in document.createElement('input'),
  placeholder=function(input){
    var text = input.attr('placeholder'),
    defaultValue = input.defaultValue;
    if(!defaultValue){
      input.val(text).addClass("phcolor");
    }
    input.focus(function(){
      if(input.val() == text){
        $(this).val("");
      }
    });
    input.blur(function(){
      if(input.val() == ""){
        $(this).val(text).addClass("phcolor");
      }
    });
    //输入的字符不为灰色    input.keydown(function(){
      $(this).removeClass("phcolor");
    });
  };
  //当阅读器不支撑placeholder属性时，调取placeholder函数  if(!supportPlaceholder){
    $('input').each(function(){
      text = $(this).attr("placeholder");
      if($(this).attr("type") == "text"){
        placeholder($(this));
      }
    });
  }});

办法二：
此办法的思绪是做一张含有提醒文字的图片作为input输入框的背景图，初始时获得焦点同时加载背景图；
当输入框不为空时，去除背景图；
当输入框为空时，加载背景图；
当会员键盘按键且输入框不为空( 输入字符 )时，去除背景图；
当会员键盘按键且输入框为空( 删除字符 )时，加载背景图。
此办法的缺陷是：需要为每一个提醒文字不一样的input制作背景图片，并且设定input的样式。

CSS：.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}JS$(function(){  
   //推断阅读器可否支撑placeholder属性   supportPlaceholder='placeholder' in document.createElement('input');
   if(!supportPlaceholder){
     //初始状态增加背景图片     $("#uname").attr("class","phbg");
     //初始状态获得焦点     $("#uname").focus;
     function destyle(){
      if($("#uname").val() != ""){
        $("#uname").removeClass("phbg");
      }else{
        $("#uname").attr("class","phbg");
       }
     }
     //当输入框为空时，增加背景图片；有值时去除背景图片     destyle();
     $("#uname").keyup(function(){
      //当输入框有按键输入同时输入框不为空时，去除背景图片；有按键输入同时为空时（删除字符），增加背景图片      destyle();
     });
     $("#uname").keydown(function(){
      //keydown事件可以在按键按下的第一时间去除背景图片      $("#uname").removeClass("phbg");
     });
   }});

办法三：
使用插件：Placeholders.js

17.常见兼容性问题？

* png24位的图片在iE6阅读器上显现背景，解决方案是做成PNG8.也可以援用一段足本处置。

* 阅读器默许的margin和padding不一样。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin状况下，在ie6显示margin比设定的大。

* 浮动ie发生的双倍间隔（IE6双边距问题：在IE6下，假如对元素设定了浮动，同时又设定了margin-left或margin-right，margin值会加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 这种状况之下IE会发生20px的间隔，解决方案是在float的标签样式操纵中参加 ——_display:inline;将其转化为行内属性。(_这个符号只要ie6会识别)

* 渐进识别的方式，从总体中逐步排除部分。第一，奇妙的使用“\9”这一标志，将IE旅游器从所有状况中别离出来。接着，再次使用“+”将IE8和IE7、IE6别离开来，这样IE8已经独立识别。
css// .bb{ background-color:#f1ee18; .background-color:#00deff\9; +background-color:#a200ff; _background-color:#1e0bd1; }

* IE下,可以使用猎取常规属性的办法来猎取自定义属性, 也可以使用getAttribute()猎取自定义属性; Firefox下,只能使用getAttribute()猎取自定义属性. 解决办法:统一通过getAttribute()猎取自定义属性。

* IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * 解决办法：（前提注释）缺陷是在IE阅读器下大概会增添额外的HTTP恳求数。

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

* 超链接拜访过后hover样式就不显现了被点击拜访过的超链接样式不在具有hover和active理解决办法是改动CSS属性的摆列次序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

* 怪异模式问题：漏写DTD声明，Firefox依然会依照标准模式来解析网页，但在IE中会触发怪异模式。为幸免怪异模式给我们带来不必要的费事，最好养成书写DTD声明的好习惯。此刻可以使用[html5](http://www.w3.org/TR/html5/single-page.html)引荐的写法：`<doctype html>`

* 上下margin重合问题
ie和ff都存在，相邻的两个p的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决办法，养成良好的代码编写习惯，同时采纳margin-top或者同时采纳margin-bottom。

* ie6对png图片格局支撑不好(援用一段足本处置)

18.简述前端优化的方式旧的雅虎34条|h5新增加的方式

1、尽量减少HTTP恳求次数
2、减少DNS查寻次数
3、幸免跳转
4、可缓存的AJAX
5、延迟加载内容
6、预加载
7、减少DOM元素数目
8、按照域名划分页面内容
9、使iframe的数目最小
10、不要显现404错误
11、使用内容分发网络
12、为文件头指定Expires或Cache-Control 13、Gzip紧缩文件内容
14、配置ETag
15、尽早刷新输出缓冲
16、使用GET来完成AJAX恳求
17、把样式表置于顶部
18、幸免使用CSS表达式（Expression）
19、使用外部JavaScript和CSS
20、削减JavaScript和CSS
21、用<link>代替@import
22、幸免使用滤镜
23、把足本置于页面底部
24、剔除反复足本

19.jquery版本?1.11兼容?

Query 2.x系列和 jQuery 1.x具有一样的API，但是不再支撑IE6、7、8。
引荐使用 1.x version，除非你肯定IE6、7、8会员不再拜访网站。
jquery1.11属于1.x 版本，其兼容IE6、7、8，所以也支撑IE9.

20.块级？行内？空元素?

行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不成改动，文字图片的宽度不成改动，只能容纳文本或者其他行内元素
块级元素：总是在新行上开端，高度、行高及外边距和内边距都可操纵，可以容纳内敛元素和其他元素；
空元素：在HTML元素中，没有内容的 HTML 元素被称为空元素。空元素是在开端标签中关闭的。<br> 就是没有关闭标签的空元素。

21.media属性？screen？All？max-width?min-width?

media 属性规定被链接文档将显示在什么设备上。media 属性用于为不一样的媒介类型规定不一样的样式。Screen运算机默许屏幕，all适用于所有设备，max-width超越最大宽度就不施行，min-width必需大于最小宽度才施行。

22.meta标签的name属性值？

name 属性主要用于描写网页，与之对应的属性值为content，content中的内容主如果便于搜索引擎机器人查寻信息和分类信息用的。
meta标签的name属性语法格局是：＜meta name="参数" content="详细的参数值"＞。
其中name属性主要有以下几种参数：
A 、Keywords(关键字)说明：keywords用来告诉搜索引擎你网页的关键字是啥。
B 、description(网站内容描写) 说明：description用来告诉搜索引擎你的网站主要内容.
C 、robots(机器人领导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow,默许是all。
举例：＜meta name="robots" content="none"＞D 、author(作者)

23.一样做手机页面切图有几种方式?

响应式规划，弹性规划display：flex，利用js编写设定比例，给根元素设定像素，使用rem为单位。

24.px/em/rem有什么不同？为什么平常给font-size 设定的字体为62.5%

相关于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设定，则相关于阅读器的默许字体尺寸。
1、em的值并不是牢固的；
2、em会继承父级元素的字体大小。使用rem为元素设定字体大小时，依然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的长处于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以幸免字体大小逐层复合的连锁反响。
rem是相关于阅读器停止缩放的。1rem默许是16px，在响应式规划中，一个个除来转换成rem，太费事，所以重置rem
body{font-size=62.5% } 此时1rem = 10px;若是12px则是1.2rem.

25.sass和scss有什么不同?sass一样如何样编译的

文件扩展名不一样，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；语法书写方式不一样，Sass 是以严厉的缩进式语律例则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常相似。

26.假如对css停止优化怎样处置？

紧缩打包，图片整合，幸免使用Hack，解决兼容问题，使用简写，让CSS能包管往后的保护。

27.怎样对css文件停止紧缩合并? gulp ?

使用gulp, 首页全局安置gulp。
1、npm install --global gulp
2、其次部分安置gulp。npm install gulp --save-dev
3、在项目根名目下创立一个名为 gulpfile.js 的文件
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默许的任务代码放在这});
4、运转gulp。（默许的名为 default 的任务（task）将会被运转，想要独自施行特定的任务（task），请输入 gulp <task> <othertask>）
gulp
合并和紧缩JS、CSS文件
紧缩JS，CSS文件需要援用如下组件：
gulp-minify-css: 紧缩css

28.组件? 模块化编程？

组件化编程: 将js css html包装一起供给办法和结果；
模块化化: 将雷同的功效抽取出来存置在一个位置停止编程

29.图片和文字在统一行显示?

1 在css中给p增加上“vertical-align:middle”属性。
2 离别把图片和文字放入不一样的p中，然后用“margin”属性停止定位，就可以使他们显示在统一行。
3 把图片设定为背景图片。

30.制止事件冒泡

event.stopPropagation()

31.制止默许事件

event.preventDefault()

32.a标签中 active hover link visited 准确的设定次序是啥?

a标签的link、visited、hover、active是有必然次序的
a:link
a:visited
a:hover
a:active

33.a标签中怎样禁用href 跳转页面或定位链接

e.preventDefault();
href="javascript:void(0);

34.手机端上图片长时间点击会选中图片，怎样处置?

onselect=function() {
return false
}

35.video标签的几个个属性办法

src：视频的URL poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：主动播放 loop：轮回播放 controls：阅读器自带的操纵条 width：视频宽度 height：视频高度

36.常见的视频编码格局有几种?视频格局有几种?

视频格局：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格局
视频编码格局：H.264、MPEG-4、MPEG-2、WMA-HD乃至VC-1

37.canvas在标签上设定宽高和在style中设定宽高有什么不同？

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

38.border-image？box-sizing?

Border-image : 图形化边框
Box-sizing : 属性同意您以特定的方式定义匹配某个区域的特定元素。
语法：box-sizing：content-box | border-box
Content-box : padding和border不被包括在定义的width和height之内。对象的实际宽度等于设定的width值和border、padding之和，即 ( Element width = width + border + padding) 此属性展现为标准模式下的盒模型 .
Border-box : padding和border被包括在定义的width和height之内。对象的实际宽度就等于设定的width值，即便定义有border和padding也不会改动对象的实际宽度，即 ( Element width = width ) 此属性展现为怪异模式下的盒模型。

39.渐进增强和文雅落级

渐进增强 progressive enhancement：针对低版本阅读器停止构建页面，包管最根本的功效，然后再针对高级阅读器停止结果、交互等改善和追加功效到达更好的会员体验。
文雅落级 graceful degradation：一开端就构建完全的功效，然后再针对低版本阅读器停止兼容。
不同：文雅落级是从复杂的近况开端，并试图减少会员体验的供应，而渐进增强则是从一个非常根基的，能够起作用的版本开端，并不竭扩大，以顺应将来环境的需要。
落级（功效衰减）意味着往回看；而渐进增强则意味着朝前看，同时包管其基本处于平安地带。
“文雅落级”观念
“文雅落级”观念认为应当针对那些最高级、最完美的阅读器来设计网站。而将那些被认为“过时”或有功效缺失的阅读器下的测试工作安排在开发周期的最后阶段，并把测试对象限制为主流阅读器（如 IE、Mozilla 等）的前一个版本。
在这种设计典范下，旧版的阅读器被认为仅能供给“粗陋却无妨 (poor, but passable)” 的阅读体验。你可以做一些小的调整来顺应某个特定的阅读器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差别将被直接忽略。
“渐进增强”观念
“渐进增强”观念则认为应关注于内容本身。
内容是我们创立网站的诱因。有的网站展现它，有的则收集它，有的追求，有的操纵，还有的网站乃至会包括以上的种种，但雷同点是它们全都触及到内容。这使得“渐进增强”成为一种更为合理的设计典范。这也是它马上被 Yahoo! 所采用并用以构建其“分级式阅读器支撑 (Graded Browser Support)”战略的缘由所在。
那么问题来了。此刻产品经理看到IE6,7,8网页结果相对高版本现代阅读器少了许多圆角，暗影（CSS3），要求兼容（使用图片背景，舍弃CSS3），你会怎样说服他？

40.说明在ie低版本下的怪异盒模型和c3的怪异盒模型和弹性盒模型?

IE当padding+border的值小于width或者height:
盒模型的宽度=margin(摆布)+width（width已经包括了padding和border的值）
盒模型的高度=margin(上下)+height（height已经包括了padding和border的值）
当padding+border的值大于width或者height:
盒模型的宽度=margin(摆布)+padding(摆布)+border(摆布)
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一个默许行高 19px）所以相当于是padding+border和width或者height比大小，谁大取谁。
以上几种DOCTYPE都是标准的文档类型，不管使用哪种模式完全定义DOCTYPE，都会触发标准模式，而假如DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式） CSS3box-sizing有两个值一个是content-box，另一个是border-box。
当设定为box-sizing:content-box时，将采纳标准模式解析运算，也是默许模式；
当设定为box-sizing:border-box时，将采纳怪异模式解析运算；
Css3弹性盒模型引入了新的盒子模型—弹性盒模型，该模型决议一个盒子在其他盒子中的分布方式乃至怎样处置可用的空间。使用该模型，可以很轻松的创立自顺应阅读器窗口的活动规划或自顺应字体大小的弹性规划。

41.animation对应的属性

写法：animation: name duration timing-function delay iteration-count direction;
下面是对应的属性的介绍
animation-name 规定需要绑定到选中器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开端此前的延迟。
animation-iteration-count 规定动画应当播放的次数。
animation-direction 规定可否应当轮番反向播放动画。

42.transition?

css的transition同意css的属性值在必然的时间区间内平滑地过渡。这种结果可以在鼠标单击、获得焦点、被点击或对元素任何改动中触发，并油滑地以动画结果改动CSS的属性值留意不同transform，transform是停止2D转换的如移动，比例化，反过来，扭转，和拉伸元素。

43.h5新特性？

1、绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对当地离线储备的更好的支撑
4、新的非凡内容元素，比方 article、footer、header、nav、section 5、新的表单控件，比方 calendar、date、time、email、url、search

44.canvas 怎样绘制一个三角形|正方形

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。
这两个函数加起来就是画一条直线。画线要用“笔”，那么MoveTo()把笔要画的起始位置牢固了（x,y）然后要牢固终止位置要用到LineTo函数肯定终止位置（xend,yend）,这样一条线就画出来了。每次与前面一个坐标相连。
stroke() 办法会实际地绘制出通过 moveTo() 和 lineTo() 办法定义的途径。默许色彩是黑色。

<!DOCTYPE HTML5><html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>画布</title>
  </head> <body>
     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
     Your browser does not support the canvas element.     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");//三角形         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();//正方形         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script></body></html>

45.所用bootstap版本？

3.0

46.css清除浮动的几种方式？

1、父级p定义 height
2、结尾处加空p标签 clear:both
3、父级p定义伪类:after 和 zoom
4、父级p定义 overflow:hidden
5、父级p定义 overflow:auto
6、父级p 也一起浮动
7、父级p定义 display:table

47.为什么要初始化CSS样式。

由于阅读器的兼容问题，不一样阅读器对有些标签的默许值是不一样的，假如没对CSS初始化往往会显现阅读器之间的页面显示差别。

48.CSS3是什么新特性？

CSS3实现圆角（border-radius），暗影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），扭转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//扭转,缩放,定位,倾歪增添了更多的CSS选中器多背景 rgba 在CSS3中独一引入的伪元素是::selection.媒体查询，多栏规划 border-image

49.说明下 CSS sprites，乃至你要怎样在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合停止背景定位，background-position可以用数字能准确的定位出背景图片的位置。这样可以减少许多图片恳求的开销，由于恳求耗时比力长；恳求虽然可以并发，但是也有限制，一样阅读器都是6个。关于将来而言，就不需要这样做了，由于有了`http2`。

50.什么是 FOUC（无样式内容闪耀）？你怎样来幸免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪耀
<style type="text/css" media="all">@import "../fouc.css";</style>
而援用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中心会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决办法：只要在<head>之间参加一个<link>或者<script>元素就可以了。

51.a点击显现框，解决办法:

a,a:hover,a:active,a:visited,a:link,a:focus{ 
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 outline:none;background: none;
 text-decoration: none;border:none;
 -webkit-appearance: none; }