面试小道(一、HTML和CSS)

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

Trident内核:IE系列
Gecko内核:Firefox
Webkit内核:Safari
Blink内核：是基于Webkit内核的子项目,使用的浏览器有：
Chrome/opera等除IE、Firefox、Safari之外的几乎所有浏览器
几乎所有国产双内核浏览器（Trident/Blink）如360、猎豹、qq、百度等

2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

文档声明。<!DOCTYPE> 声明位于文档中的最前面的位置，处于html>标签之前。此标签可告知浏览器文档使用哪种 HTML 或XHTML 规范。（重点：告诉浏览器按照何种规范解析页面） IE下如不书写文档声明会使用怪异模式解析网页导致一系列CSS兼容性问题。
严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

3.div+css的布局较table布局有什么优点？

正常场景一般都适用div+CSS布局，优点： 结构与样式分离 代码语义性好 更符合HTML标准规范 SEO友好
Table布局的适用场景：
某种原因不方便加载外部CSS的场景，例如邮件正文，这时用table布局可以在无css情况下保持页面布局正常。

4.img的alt与title有何异同？ strong与em的异同？

a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tooltip):该属性为设置该属性的元素提供建议性的信息。
em:表现为斜体，语义表示强调
strong:表现为粗体，语义为强烈语气，强调程度超过em

5.你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

6.为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便 突破浏览器并发限制 节约cookie带宽 节约主域名的连接数，优化页面响应速度 防止不必要的安全问题

7.请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别：
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域， 不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

8.简述一下src与href的区别。

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
 src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
 在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
 <script src =”js.js”></script>当浏览器解析到某元素时，会暂停其他资源的下载和处理，
 直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。
 这也是为什么将js脚本放在底部而不是头部。
href是Hypertext  Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当
前文档（链接）之间的链接，如果我们在文档中添加 <linkhref=”common.css” rel=”stylesheet”/>
 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。
这也是为什么建议使用link方式来加载css，而不是使用@import方式。

9.知道的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook
Ebay等知名网站已经开始测试并使用WebP格式。 在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

10.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

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

11.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

12.你如何理解HTML结构的语义化？

HTML结构语义化： 更符合W3C统一的规范标准，是技术趋势。 没有样式时浏览器的默认样式也能让页面结构很清晰。
对功能障碍用户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。 对SEO友好。

13.谈谈以前端角度出发做好SEO需要考虑什么？

搜索引擎主要以: 外链数量和质量 网页内容和结构 来决定某关键字下的网页搜索排名。
前端应该注意网页结构和内容方面的情况： Meta标签优化
主要包括主题（Title)，网站描述(Description)。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。符合W3C规范的语义性标签的使用。
如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

14. CSS都有哪些选择器？

• 基本选择器

*通用元素选择器，匹配任何元素
E 标签选择器，匹配所有使用E标签的元素
.info class选择器，匹配所有class属性中包含info的元素
#footer id选择器，匹配所有id属性等于footer的元素

• 多元素的组合选择器

E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E > F 子元素选择器，匹配所有E元素的子元素F
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

• CSS 2.1 属性选择器

E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如"[cheacked]"。以下同。）
E[att=val] 匹配所有att属性等于"val"的E元素
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素
E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"val"开头的E元素，主要用于lang属性，比如"en"、“en-us”、"en-gb"等等

• CSS 2.1中的伪类

E:first-child 匹配父元素的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang© 匹配lang属性等于c的E元素

• CSS 2.1中的伪元素

E:first-line 匹配E元素的第一行
E:first-letter 匹配E元素的第一个字母
E:before 在E元素之前插入生成的内容
E:after 在E元素之后插入生成的内容

• CSS 3的同级元素通用选择器

E ~ F 匹配任何在E元素之后的同级F元素

• CSS 3 属性选择器

E[att^=“val”] 属性att的值以"val"开头的元素
E[att$=“val”] 属性att的值以"val"结尾的元素
E[att*=“val”] 属性att的值包含"val"字符串的元素

• CSS 3中与用户界面有关的伪类

E:enabled 匹配表单中激活的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
E::selection 匹配用户当前选中的元素

• CSS 3中的结构性伪类

E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

• CSS 3的反选伪类

E:not(s) 匹配不符合当前选择器的任何元素

• CSS 3中的 :target 伪类

E:target 匹配文档中特定"id"点击后的效果

15. CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

设置display属性为none，或者设置visibility属性为hidden
设置宽高为0，设置opacity为0，设置z-index位置在-1000em 设置text-indent:-9999px;

16.超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不再具有hover和active了,解决方法是改变CSS属性的排列顺序:
L-V-H-A（link,visited,hover,active）

17.行内元素和块级元素的具体区别是什么？空元素有哪些？行内元素的padding和margin可设置吗？

块级元素(block)特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)、边框(border)和外边距(margin)都可控制;
内联元素(inline)特性： 和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)还有border
top/bottom都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
知名的空元素：
<br><hr><img><input><link><meta><area><base><col><command><embed><keygen><param><source><track><wbr>
浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行）
<input> 、<img>、<button> 、<texterea> 、<label>。

18.rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

19.如何垂直居中一个浮动元素？

#div1{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute;        /*父元素需要相对定位*/
    top: 50%;
    left: 50%;
    margin-top:-100px ;   /*二分之一的height，width*/
    margin-left: -100px;
    }
 
//方法二:未知元素的高宽
  #div1{
    width: 200px;
    height: 200px;
    background-color: #6699FF;
 
    margin:auto;
    position: absolute;        /*父元素需要相对定位*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    }
 /*如何垂直居中一个<img>?（用更简便的方法。）*/
 	#container     /*<img>的容器设置如下*/
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

20.px和em的区别。

px和em都是长度单位，
区别是： px值固定，容易计算。 em值不固定，是相对单位，其相对应父级元素的字体大小会调整

21.Sass、LESS是什么？大家为什么要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。 例如Less是一种动态样式语言.将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit,Firefox)，也可以在服务端运行 (借助 Node.js)。
为什么要使用它们？
结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。 可以轻松实现多重继承。 完全兼容CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

22.display:none与visibility:hidden的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。 visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即，使用CSSdisplay:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

23.CSS中link和@import的区别是：

Link属于html标签，而@import是CSS中提供的
@import有执行效率问题，它会打破浏览器并行加载资源，导致加载页面速度变慢。尽量不要使用@import。
30.简介盒子模型：
CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型模型
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

24.BFC是什么？

BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC，
它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
BFC有一下特性： 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加 每个元素的margin box的左边，
与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float
box叠加。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。

如何触发BFC？ float 除了none以外的值 overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed） fieldset元素

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

1. 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的 XML 标记都必须合理嵌套
4. 所有的属性必须用引号 “” 括起来
5. 把所有 < 和 & 特殊符号用编码表示
6. 给所有属性赋一个值
7. 不要在注释内容中使用 “–”
8. 图片必须有说明文字

26.html常见兼容性问题？

1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.IE z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 /
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; / for IE 8*/ }
10. IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

27.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

• 1.id选择器（ # myid）
  2.类选择器（.myclassname）
  3.标签选择器（div, h1, p）
  4.相邻选择器（h1 + p）
  5.子选择器（ul < li）
  6.后代选择器（li a）
  7.通配符选择器（ * ）
  8.属性选择器（a[rel = “external”]）
  9.伪类选择器（a: hover, li: nth - child）
• 可继承： font-size font-family color, UL LI DL DD DT;
• 不可继承 ：border padding margin width height ;
• 优先级就近原则，样式定义最近者为准;
• 载入样式以最后载入的定位为准; 优先级为:
  !important > id > class > tag
  important 比 内联优先级高 CSS3新增伪类举例：
  p:first-of-type 选择属于其父元素的首个 p元素的每个 p元素。
  p:last-of-type 选择属于其父元素的最后 p元素的每个 p元素。
  p:only-of-type 选择属于其父元素唯一的 p元素的每个 p元素。
  p:only-child 选择属于其父元素的唯一子元素的每个 p元素。
  p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素。
  :enabled、:disabled 控制表单控件的禁用状态。
  :checked，单选框或复选框被选中。

28.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

1. block 象块类型元素一样显示。 none 缺省值。向行内元素类型一样显示。 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。
2. position的值 *absolute
   生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 *fixed （老IE不支持）
   生成绝对定位的元素，相对于浏览器窗口进行定位。 * relative
   生成相对定位的元素，相对于其正常位置进行定位。 * static 默认值。没有定位，元素出现在正常的流中 *（忽略 top, bottom, left, right z-index 声明）。 * inherit 规定从父元素继承 position 属性的值。

29、哪些css属性可以继承？

可继承： font-size font-family color, ul li dl dd dt; 不可继承 ：border padding
margin width height ;

30、css优先级算法如何计算？

!important > id > class > 标签 !important 比 内联优先级高

• 优先级就近原则，样式定义最近者为准;
• 以最后载入的样式为准;

---

文中如有不妥之处，欢迎大家留言指正，非常感谢
☺今天的自己总是比昨天更努力一点☺