HTML与CSS面试题

1.HTML、XHTML、XML有什么区别 ?

HTML(超文本标记语言): 在html4.0之前HTML先有实现再有标准，导致HTML非常混乱和松散

XML(可扩展标记语言): 主要用于存储数据和结构，可扩展，大家熟悉的JSON也是相似的作用，但

是更加轻量高效，所以XML现在市场越来越小了

XHTML(可扩展超文本标记语言): 基于上面两者而来，W3C为了解决HTML混乱问题而生，并基于此诞生了HTML5，开头加入 <!DOCTYPE html> 的做法因此而来，如果不加就是兼容混乱的HTML加了就是标准模式。

2.知道img的srcset的作用是什么？

可以设计响应式图片，我们可以使用两个新的属性srcset 和 sizes来提供更多额外的资源图像和提

示，帮助浏览器选择正确的一个资源。

srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。

sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸

是最佳选择。

所以，有了这些属性，浏览器会：

查看设备宽度
检查 sizes 列表中哪个媒体条件是第一个为真
查看给予该媒体查询的槽大小
加载 srcset 列表中引用的最接近所选的槽大小的图像srcset提供了根据屏幕条件选取图片的能力

3.link和@import的区别？

link属于XHTML标签，而@import是CSS提供的。
页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。
link方式的样式权重高于@import的权重。
使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，
因为@import不是dom可以控制的。

4.如何理解层叠上下文是什么？

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视

窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间

触发一下条件则会产生层叠上下文：

根元素 (HTML),
z-index 值不为 "auto"的绝对/相对定位，
一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
opacity 属性值小于 1 的元素（参考 the specification for opacity），
transform 属性值不为 "none"的元素，
mix-blend-mode 属性值不为 "normal"的元素，
filter值不为“none”的元素，
perspective值不为“none”的元素，
isolation 属性被设置为 "isolate"的元素，
position: fixed
在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考这篇文
章）
-webkit-overflow-scrolling 属性被设置 "touch"的元素

5.谈谈对BFC的理解是什么？

书面解释：BFC(Block Formatting Context)这几个英文拆解

Block: Block在这里可以理解为Block-level Box,指的是块级盒子的标准
Formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

BFC是指一个独立的渲染区域，只有Block-level Box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.

它的作用是在一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离.

BFC触发条件:

根元素，即HTML元素
position: fixed/absolute
float 不为none
overflow不为visible
display的值为inline-block、table-cell、table-caption

作用是什么？

防止margin发生重叠
两栏布局，防止文字环绕等
防止元素塌陷

6.html5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器谦容问题？如何区分HTML和HTML5？

* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

。

* 绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker, websockt, Geolocation

* 移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

* IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

7.为什么有时候人们用translate来改变位置而不是定位?

translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。因此translate()更高效，可以缩短平滑动画的绘制时间。

而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。

8.浏览器的内核分别是什么？经常遇到的浏览器的谦容性有哪些？原因，解决方法是什么，常用hack的技巧？

IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

9.html常见谦容性问题？

1.双边距BUG float引起的使用display

2.3像素问题使用float引起的使用dislpay:inline -3px

3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active4.IE z-index问题给父级添加position:relative

5.Png 透明使用js代码改

6.Min-height 最小高度！Important 解决’

7.select 在ie6下遮盖使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 lineheight:1px）

10.描述一个“reset”的css文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。

你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。

在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

11.什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse。

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

12.box-sizing常用的属性有哪些?分别有啥?

box-sizing有两个值:content-box(W3C标准盒模型),border-box(怪异模型),

这个css 主要是改变盒子模型大小的计算形式

13.CSS中transition和animate有何区别?animate如何停留在最后一帧

transition一般用来做过渡的, 没时间轴的概念, 通过事件触发(一次),没中间状态(只有开始和结束)

而animate则是做动效,有时间轴的概念(帧可控),可以重复触发和有中间状态

让animate停留在最后一帧,就它自身参数的一个值就可以了

animation-fill-mode: forwards;

14.什么是css hack？ ie6,7,8的hack分别是什么？

在我们制作页面时CSS hack由于不同的浏览器，比如Internet Explorer,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
CSS Hack大致有3种表现形式，属性级Hack、选择器Hack以及IE条件Hack

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

搜索引擎主要以:

外链数量和质量
网页内容和结构
来决定某关键字下的网页搜索排名。

前端应该注意网页结构和内容方面的情况：

Meta标签优化
主要包括主题（Title)，网站描述(Description)。还有一些其它的隐藏文字比如Author（作者），
Category（目录），Language（编码语种）等。
符合W3C规范的语义性标签的使用

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

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致

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

优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

用通俗的话来说就是优雅降级是从高版本到低版本，渐进增强是从低版本到高版本

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

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

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

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

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

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

H-A（link,visited,hover,active）

21.css中可以让文字在垂直和水平方向上重叠的两个属性是什么/

垂直方向：line-height

水平方向：letter-spacing

可以用于消除inline-block元素间的换行符空格间隙问题。

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

display : 隐藏对应的元素但不挤占该元素原来的空间。

visibility: 隐藏对应的元素并且挤占该元素原来的空间。

即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用

visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

23.IE的双边BUG：块级元素float后设置横向margin，ie6显示margin比设置的较大

加入_display：inline

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

lock-level boxes

一个 block-level element (‘display’ 属性值为 ‘block’, ‘list-item’ 或是 ‘table’) 会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布局的方式) 中。

block formatting context

在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。

containing block

一般来说，盒子本身就为其子孙建立了 containing block，用来计算内部盒子的位置、大小，而对内部的盒子，具体采用哪个 containing block 来计算，需要分情况来讨论：

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

否则则由这个祖先元素的 padding box 构成。
根元素所在的 containing block 被称为 initial containing block，在我们常用的浏览器环境下，指的是原点与 canvas 重合，大小和 viewport 相同的矩形；

对于 position 为 static 或 relative 的元素，其 containing block 为祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的区域)；
对于 position:fixed 的元素，其 containing block 由 viewport 建立；

对于 position:absolute 的元素，则是先找到其祖先元素中最近的 position 属性非 static 的元素，然后判断：
如果都找不到，则为 initial containing block。

25.知道css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用

伪类清除浮动。

after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。

css计数器是通过设置counter-reset 、counter-increment 两个属性、及 counter()/counters()

一个方法配合after / before 伪类实现。

26.css新增伪类有哪些？

p:first-of-type 选择属于其父元素的首个元素的每个元素。

p:last-of-type 选择属于其父元素的最后元素的每个元素。

p:only-of-type 选择属于其父元素唯一的元素的每个元素。

p:only-child 选择属于其父元素的唯一子元素的每个元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

27.sass，less是什么？大家为什么要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

为什么要使用它们？

结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

28.css动画animation

动画（animation）：和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才可以触发，而动画效果则可以自动触发动态效果。设置动画效果必须先要设置一个关键帧

常见属性:

animation-name：要对当前元素生效的关键帧的名字，如：animation-name: test;

animation-duration：动画的执行时间，如：animation-duration: 4s;

animation-iteration-count：动画执行的次数，如：animation-iteration-count: 4，可选值：数字或infinite，其中数字的大小就是执行的次数，而infinite则表示无限次。

animation-timing-function：指定动画执行的时序函数；

animation-direction：指定动画运行的方向，可选值如下：

normal，默认值，从from到to运行，每次都是这样；
reverse，从to到from运行，每次都是这样；
alternate，从from向to运行，重复执行动画时会方向执行，即第一个是从from到to，第二次则是从to到from……；
alternate-reverse，与alternate的执行时反向的；

animation-play-state：控制动画的运行状态，可选值如下：

running，默认值，动画运行；
paused，动画暂停；

animation-fill-mode：动画的填充模式，可选值如下：

none，默认值，动画执行完毕后，元素回到原来的位置；
forwards，动画执行完毕后，元素会停止在动画执行结束的位置；
backwards，动画延时等待时，元素就会处于开始的位置，即from或to所指定的位置；
both，结合了forwards和backwards；