HTML 和 CSS 面试题

发表于 | 分类于

一、HTML 和 CSS

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

  • IE: trident 内核
  • Firefox：gecko 内核
  • Safari: webkit 内核
  • Opera: 以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核
  • Chrome: Blink (基于 webkit， Google 与 Opera Software 共同开发)

2、每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？严格模式与混杂模式的区别？

  • <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
  • 严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
  • 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  • DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

3、Quirks 模式是什么？它和 Standards 模式有什么区别

  • 从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
  • 在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差，IE6 将对 CSS 提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果 IE6 支持 CSS 则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？
  • 在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6 也是类似这样做的，它将 DTD 当成了这个“参数”，因为以前的页面大家都不会去写 DTD，所以 IE6 就假定 如果写了 DTD，就意味着这个页面将采用对 CSS 支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是 Quirks 模式（怪癖模式，诡异模式，怪异模式）。
  • 区别：
  • 总体会有布局、样式解析和脚本执行三个方面的区别。
    盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
    设置行内元素的高宽：在 Standards 模式下，给<span>等行内元素设置wdith和height都不会生效，而在 quirks 模式下，则会生效。
  • 设置百分比的高度：在 Standards 模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在 Standards 模式下可以使元素水平居中，但在 Quirks 模式下却会失效。
  • （还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是看文章看的，甚至完全不知道。）

4、div+css的布局较table布局有什么优点？

  • 改版的时候更方便 只要改css文件。
  • 页面加载速度更快、结构化清晰、页面显示简洁。
  • 表现与结构相分离。
  • 易于优化（seo）搜索引擎更友好，排名更容易靠前。

5、 img的alt与title有何异同？strong与em的异同？

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

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

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

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

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

8、请谈一下你对网页标准和标准制定机构重要性的理解。

  • 网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

9、请描述一下 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仅仅是为了在本地“存储”数据而生。

10、简述一下src与href的区别。

  • src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

  • src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

    1
    <script src =”js.js”></script>

  • 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

  • href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

    1
    <link href=”common.css” rel=”stylesheet”/>

  • 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

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

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

12、知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

  • 微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
  • 优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

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

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

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

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

15、你如何理解 HTML 结构的语义化？　

  • 去掉或样式丢失的时候能让页面呈现清晰的结构：
  • html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
  • 屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
  • 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.
  • PDA 、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）
  • 使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.
  • 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.
  • 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
  • 过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.
  • 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
  • 因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.
  • SEO主要还是靠你网站的内容和外部链接的。
  • 便于团队开发和维护
  • W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

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

  • 了解搜索引擎如何抓取网页和如何索引网页
    • 你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。
  • Meta 标签优化
    • 主要包括主题( Title )，网站描述( Description )，和关键词（ Keywords ）。还有一些其它的隐藏文字比如 Author（作者）， Category （目录）， Language （编码语种）等。
  • 如何选取关键词并在网页中放置关键词
    • 搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作之一。首先要给网站确定主关键词（一般在 5 个上下），然后针对这些关键词进行优化，包括关键词密度（ Density ），相关度（Relavancy），突出性（ Prominency ）等等。
  • 了解主要的搜索引擎
    • 虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有 Google ， Yahoo ， Bing 等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如 AOL 网页搜索用的是 Google 的搜索技术， MSN 用的是 Bing 的技术。
  • 主要的互联网目录
    • Open Directory 自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。
  • 按点击付费的搜索引擎
    • 搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有 Overture 和百度，当然也包括 Google 的广告项目 Google Adwords 。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。
  • 搜索引擎登录
    • 网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（ submit ）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如 Yahoo 要 299 美元），但是好消息是（至少到目前为止）最大的搜索引擎 Google 目前还是免费，而且它主宰着 60％ 以上的搜索市场。
  • 链接交换和链接广泛度（Link Popularity）
    • 网页内容都是以超文本（ Hypertext ）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来 Surfing （“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。
  • 合理的标签使用

17、有哪项方式可以对一个 DOM 设置它的 CSS 样式？

  • 外部样式表，引入一个外部 css 文件
  • 内部样式表，将css代码放在 <head>标签内部
  • 内联样式，将css样式直接定义在 HTML 元素内部

18、CSS 都有哪些选择器？

  • 派生选择器（用 HTML 标签申明）
  • id 选择器（用 DOM 的 ID 申明）
  • 类选择器（用一个样式类名申明）
  • 属性选择器（用 DOM 的属性申明，属于 CSS2 ， IE6 不支持，不常用，不知道就算了）
  • 除了前 3 种基本选择器，还有一些扩展选择器，包括
  • 后代选择器（利用空格间隔，比如div .a{ }）
  • 群组选择器（利用逗号间隔，比如p,div,#a{ }）
  • 那么问题来了， CSS 选择器的优先级是怎么样定义的？
  • 基本原则：
  • 一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
  • 复杂的计算方法：
  • 用 1 表示派生选择器的优先级
  • 用 10 表示类选择器的优先级
  • 用 100 标示 ID 选择器的优先级
    div.test1 .span var优先级1 + 10 + 10 + 1
    span#xxx .songs li优先级1 + 100 + 10 + 1
    #xxx li优先级 100 + 1

  • 那么问题来了，看下列代码，<p>标签内的文字是什么颜色的？

    1
    2
    3
    4
    5
    6
    7
    <style>
        .classA{ color:blue;}
        .classB{ color:red;}
    </style>
    <body>
        <p class='classB classA'> 123 </p>
    </body>

  • 答案： red 。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在<p class=’classB classA’>中的先后关系无关。

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

  • 最基本的：
    设置display属性为none，或者设置visibility属性为hidden
  • 技巧性：
    设置宽高为0，设置透明度为0，设置z-index位置在-1000

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

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

21、什么是 Css Hack ？ ie6 , 7 , 8 的 hack 分别是什么？

  • 针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack 。
    示例如下： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    #test{
    	width:300px;
    	height:300px;
    	background-color:blue;/*firefox*/
    	background-color:red\9;/*all ie*/
    	background-color:yellow;/*ie8*/
    	+background-color:pink; /*ie7*/
    	_background-color:orange;/*ie6*/
    }
    :root #test { background-color:purple\9; }/*ie9*/
    @media all and (min-width:0px){ 
    	#test {background-color:black;}
    }/*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){
    	#test {background-color:gray;}
    }/*chrome and safari*/

22、请用 Css 写一个简单的幻灯片效果页面

  • 答案：知道是要用 css3 。使用animation动画实现一个简单的幻灯片效果。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    .ani{
    	width:480px;
    	height:320px;
    	margin:50px auto;
    	overflow: hidden;
    	box-shadow:0 0 5px rgba(0,0,0,1);
    	background-size: cover;
    	background-position: center;
    	-webkit-animation-name: "loops";
    	-webkit-animation-duration: 20s;
    	-webkit-animation-iteration-count: infinite;
    }
    @-webkit-keyframes "loops" {
    	0% {
    		background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;             
    	}
    	25% {
    		background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
    	}
    	50% {
    		background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
    	}
    	75% {
    		background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
    	}
    	100% {
    		background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
    	}
    }

24、行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

  • 块级元素(block)特性：
  • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
  • 内联元素(inline)特性：
  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
  • 那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
  • 答案：<input /> 、<img /> 、<button></button> 、<texterea></texterea> 、<label></label>。

25、什么是外边距重叠？重叠的结果是什么？

  • 外边距重叠就是·margin-collapse·。
  • 在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
  • 折叠结果遵循下列计算规则：
  • 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  • 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
  • 两个外边距一正一负时，折叠结果是两者的相加的和。

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

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

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

  • 垂直方向：line-height
  • 水平方向：letter-spacing
  • 那么问题来了，关于letter-spacing的妙用知道有哪些么？
  • 答案:可以用于消除inline-block元素间的换行符空格间隙问题。

28、如何垂直居中一个浮动元素？

// 方法一：已知元素的高宽

1
2
3
4
5
6
7
8
9
10
#div1{
	background-color:#6699FF;
	width:200px;
	height:200px;
	position: absolute;//父元素需要相对定位
	top: 50%;
	left: 50%;
	margin-top:-100px ;//二分之一的height，width
	margin-left: -100px;
}
//方法二:未知元素的高宽

1
2
3
4
5
6
7
8
9
10
11
#div1{
	width: 200px;
	height: 200px;
	background-color: #6699FF;
	margin:auto;
	position: absolute;//父元素需要相对定位
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

那么问题来了，如何垂直居中一个<img />?（用更简便的方法。）

1
2
3
4
5
6
#container{
	//`<img  />`的容器设置如下
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

29、px和em的区别。

  • px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
  • 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

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

  • 重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。
  • 你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。
  • 在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

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

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

32、display:none与visibility:hidden的区别是什么？

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

34、CSS中link和@import的区别是：

  • Link属于html标签，而@import是CSS中提供的
  • 在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS
  • @import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题
  • Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

35、简介盒子模型：

  • CSS 的盒子模型有两种：IE盒子模型、标准的 W3C 盒子模型模型
  • 盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

36、为什么要初始化样式？

  • 由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异
  • 但是初始化 CSS 会对搜索引擎优化造成小影响

37、BFC 是什么?

  • BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生margin重叠的问题
  • BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

38、html 语义化是什么？

  • 当页面样式加载失败的时候能够让页面呈现出清晰的结构
  • 有利于 seo 优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
  • 便于项目的开发及维护，使 html 代码更具有可读性，便于其他设备解析。

39、HTML与XHTML二者有什么区别？

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

40、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，解决办法：

    1
    2
    3
    4
    5
    .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图片

41.对 WEB 标准以及 W3C 的理解与认识

  • 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

42. 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，单选框或复选框被选中。