Front-end knowledge combing 1_html/css_WEB-ITnose

Some time ago, I concentrated on sorting out interview questions about the front-end. Thanks to the patient and conscientious brothers Kaihao and Wen Dong for their recent guidance and advice. You can pass these questions and you can check your level below.

https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese

I also use my spare time (Afternoon and evening when there are no classes scheduled for three days) Try to write down your own answers. My level is limited, so I hope you can understand me.

Only the first half is provided for the time being. Some answers about js and jQuery in the second half are not fully confirmed and will be released later.

What did you learn yesterday/this week?

During this incident, I have been sorting out interview questions about the front-end. The purpose of sorting out these questions is not only to learn how to cope with the upcoming interview, but also to supplement basic knowledge. The progress of daily project development is too fast, and many attributes or methods are forgotten after use. This will cause another hidden danger. Because the basic knowledge is not solid enough and the commonly used methods are not used proficiently enough, it will be difficult to develop projects efficiently.

With solid basic knowledge, you can expect to go further.

1) Knowing the W3C standards, when writing HTML, you will avoid the hidden dangers of "unclosed tags, random nesting, and mixed case" that may cause inconsistent display in different browsers.

2) Understand the "cascading" rules of CSS, organize and compare the methods of clear floating and centering, and also discover some uncommon attributes. Therefore, it is helpful to write style sheets efficiently in the future.

　Wait, wait

What aspects of writing code excite or interest you?

What excites me most about writing code is the process of learning new technologies and trying new visual effects.

For example, on the topview recruitment website, considering the rich interactions and functions on the future pages, the script files will be larger. Although general browsers have asynchronous loading functions for files, these files refer to image and video style sheets, etc., and do not contain scripts. This means that when the script is loaded, it will cause blockage, and the loading of the script will block the loading of images on the page. This means that because the script file is too large, users may need to wait for a longer event. When the basic elements such as scripts inside the page have not been loaded, and the styles and structures have been loaded, the css3 animation appears, and the four small balls rotate and scroll smoothly until the script is completely loaded.

The front-end itself is a beautiful and interesting field. For many websites or systems, the functions provided by the backend are the core modules, but it depends on whether the website or system can continue to attract users' attention, whether it can stand out among the same type of products, and whether the front-end interaction is humane and Whether the performance is stable and efficient accounts for the vast majority of factors. A good user experience, giving them a positive and efficient user experience, and even changing the public's lifestyle is exactly my original intention of learning programming.

(The interviewer may ask: How did you achieve this effect or what other efforts have you made regarding user experience? It doesn’t matter. I prepared carefully. I even need to compare the difference between CSS3 transition and animation. , in view of the limited space, the specific use of css3 will not be listed here. The answers to user experience will be answered below)

/*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。*/@-webkit-keyframes spin {　　0% {　　　　-webkit-transform:rotate(0deg);　　}　　50% {　　　　-webkit-transform:rotate(-180deg);　　}　　100% {　　　　-webkit-transform:rotate(-360deg);　　}}/*使用 @keyframes 中创建动画，需要把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：　　　　规定动画的名称　　　　规定动画的时长*/-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;

For details, please refer to: http://www.w3school.com.cn/css3/css3_animation.asp

Brother Wen Dong recommends: http://www.tuicool.com/articles/NBbQjy3

In the process of making a web application or website, how do you consider its UI, security, performance, SEO, maintainability and technical factors?

(If you ask me this question, I will be very excited, because you can talk for half an hour.)

　

Talk about what you like development environment. (Such as operating system, editor, browser, tools, etc.)

　(There are two sets of development environments, one is used for the development of daily team projects, my jdk, tomcat, photoshop etc. are all deployed and installed on the wins system; the other set is used to "pretend". Well, for a patient with difficulty in choosing like me, I struggled for a while and finally decided to talk about the "pretend" development environment)

The operating system is linux ubuntu. It is very convenient for me to access common linux commands, download and install, transfer, add and delete files (will the interviewer ask what commands?)

The editor is brackets, which is a free, open source and cross-platform HTML/CSS/JavaScript front-end WEB integrated development environment that is simple, elegant and fast!

The browser is Chrome, which provides a wealth of development tools, such as single-step debugging, simulating different pixel devices, and the ability to display more CSS3 attributes.

　

*你最熟悉哪一套版本控制系统？

（这个问题，用过git，用过myeclipse里的svn，用过tortoiseSVN将代码上传到sinaapp服务器，但是都不是很熟悉，只好翻了一下《Pro.Git-zh_CN》）

　　在Git 中的绝大多数操作都只需要访问本地文件和资源，不用连网。对于任何一个文件，在Git 内都只有三种状态：已提交（committed），已修改（modified）和已暂存（staged）。已提交表示该文件已经被安全地保存在本地数据库中了；已修改表示修改了某个文件，但还没有提交保存；已暂存表示把已修改的文件放在下次提交时要保存的清单中。　

基本的Git 工作流程如下所示：
　　1. 在工作目录中修改某些文件。
　　2. 对这些修改了的文件作快照，并保存到暂存区域。
　　3. 提交更新，将保存在暂存区域的文件快照转储到git 目录中。

常用命令：

//用git 把Git 项目仓库克隆到本地，以便日后随时更新：$ git clone git://git.kernel.org/pub/scm/git/git.git//git add 命令告诉Git 开始对这些文件进行跟踪，然后提交：$ git add filenme.html//每次准备提交前，先用git status 看下，是不是都已暂存起来了，然后再运行提交命令$ git commit -m 'initial project version'// 把本地仓库提交到远程仓库的master分支中$ git push origin master 

 

 

你能描述一下当你制作一个网页的工作流程吗？

 　　1）根据需求，确定主题。透彻深入所做网站的核心功能和关键。

　　2）收集资料。从对比相同类型的网站（惯用而熟悉的样式，用户更乐意接受），参照别人可行的实现方法。　　3）规划网站。抽离出类似的模块和可重用的部件。如果是响应式网站就需要设定断点，根据不同宽度屏幕设定样式。　　4）设计数据库。　　5）搭建基本的框架。引入重置样式表reset.css和字体样式表font.css，风格统一的图标还有后台需要用到的包。　　6）编码和调试。注意统一命名和编码规范。当多人开发时，还需要制定规范文档。　　7）上传测试。利用FTP工具，把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。 　　8）推广宣传 。不断宣传，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。 

　　9）维护更新 。网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者 

　　（具体还需要集合我的实际经验：http://www.cnblogs.com/0603ljx/p/4284521.html）　　

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

　　　　它们是看待同种事物的两种观点，它们关注在同一个网站同一功能在不同设备不同浏览器下的表现：

　　　　渐进增强，一开始值构建站点的最小特性，然后不断针对个浏览器追加功能，性能越好的设备能够显示更加出众的效果。

　　　　优雅降级，一开始就构造站点的完整功能，然后针对浏览器测试和修复。

　　　　web标准对可访问性做了如下定义：web内容对于残障用户或者普通的可阅读和可理解性。无论用户是否残障，都得通过用户代理（User Agent）来访问Web内容。因此要提高可访问性，首先得考虑各种用户代理 ：桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。还得考虑用户访问Web内容时的环境限制 。比如：我们真的要考虑浏览器禁用JavaScript/CSS的情形吗？我的理解是，要考虑的其实不是禁用了JavaScript/CSS的浏览器，而是那些对JavaScript/CSS不支持或支持不好的用户代理。比如语音阅读器，手机浏览器等，JavaScript提供的是一层可访问性，不能代替内容本身。

　　　　当然，从渐进增强的角度讲，鼓励使用高级特性，只是同时要做到优雅降级，让低端用户代理上，也能保留低保真的体验。（除了用户代理，还有什么方法检测客户端设备？特性检测，css3媒体查询）

　　(讲讲我在平时项目中，在“渐进增强”和“优雅降级”的努力)

如果提到了特性检测，可以加分。

　　　　　　

假若你有5个不同的 CSS 文件, 加载进页面的最好方式是?
文件拼合，减少http请求。

　　用一个大的CSS文件替代多个小体积的CSS文件这是一个很好的实践，可以获得更好的可维护性，但是在网站性能方面会产生一定的影响（这里指的是随着文件体积的增大，随之消耗服务器的内存也会增加）。尽管你应该把CSS文件拆分成小块，但是当浏览器请求这些文件时，会产生同等数量的http请求。每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。因此，如果你有4个Javascript和3个css文件在页面中被加载，你浪费掉了7次因网络往返过程产生的时间。在美国，延迟平均是70毫秒，这样你就浪费了7*70 = 490毫秒，大致延迟了半秒的时间。在美国之外的国家访问你的页面，平均延迟大约是200毫秒，这意味着你的页面有1400毫秒的时间是在等待中度过。浏览器在你的CSS完全加载完成之前是不能很好的渲染你的页面的。因此越多的延迟让你的页面载入越慢。

Please explain what "semantic HTML" is

　Another important way to separate structure and presentation is to use semantic markup to structure documents content. The existence of an XHTML element means that the marked content has corresponding structural meaning. For example, e388a4556c0f65e1904146cc1a846bee is used to mark paragraphs 4a249f0d628e2318394fd9b75b4636b1 to mark titles ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6 tag lists. Do not overuse 35ea579ef14c365fe98b387ae1e326e0, 907fae80ddef53131f3292ee4f81644b are used to distinguish It plays the role of emphasis on other words. Used to tell you exactly what they are used for.

Semantic tags allow everyone to more intuitively understand the uses of tags and attributes. Semantic web pages are friendly to search engines and are easier to be crawled by search engines, which is conducive to promotion.

*How do you optimize your website’s files and resources?

The expected solutions include:

File merging (same as the above question "If you have 5 different CSS files, what is the best way to load them into the page?" )

Reduce the number of calls to other pages and files. Generally, in order to make the page lively, we will use a lot of background to load background images, and each background image will generate an HTTP request. To improve this situation, you can use a useful background-position attribute of CSS to load the background image. , we combine multiple images that need to be loaded frequently into a single image . When loading is required, you can use: background:url(....) no-repeat x-offset y-offset; Form loading can reduce the HTTP request for loading this part of the image to 1.

File minimization/file compression

　That is, compress the content that needs to be transmitted and then transfer it to the client and then decompress , so the amount of data transmitted on the network will be greatly increased decrease. Usually, Apache and Nginx on the server can directly enable this setting. You can also directly set the transmission file header from the code perspective, add gzip settings, or directly set it from the load balancing device. However, it should be noted that this setting will slightly increase the load on the server. It is recommended that websites whose server performance is not very good should be carefully considered.

Use CDN hosting

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 wealthgenegene in content delivery network, is a content distribution network. The basic idea is to avoid bottlenecks and links on the Internet that may affect data transmission speed and stability as much as possible, so that content transmission can be faster and more stable. Its purpose is to enable users to obtain the required content nearby, solve the congestion situation of the Internet network, and improve the response speed of users' access to the website.

Use of cache

Ajax calls all use the cache call method, which is generally implemented using the additional feature parameter method. Pay attention to the b37b56714848b58a15d3b87433ec9489等待服务器处理->处理完毕返回，这个期间客户端浏览器不能干任何事。

　　　　　　异步：脚本允许页面继续其进程并处理可能的回复。请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

　　　　　　　　若要在使用ajax请求后处理发送请求返回的结果，最好使用同步请求。

 

CSS 相关问题：

CSS 中类(classes)和 ID 的区别。　　

　　 在样式表定义一个样式的时候，可以定义id也可以定义class。

　　　　1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."

　　　　2、id一个页面只可以使用一次；class可以多次引用。

　　　　3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；

　　　　4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

　　　　目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。

 

描述下 “reset” CSS 文件的作用和使用它的好处。

 　　　　reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的想过。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。

比如说，

　　1）我们不应该对行内元素设置无效的属性，对span设置width和height，margin都不会生效的。

　　2）对于absolute和fixed定位的固定尺寸（设置了width和height属性），如果设置了top和left属性，那么bottom和right，margin和float就没有作用。

　　3）后面设置的属性将会覆盖前面重复设置的属性。

 

期待能够指出它的负面影响，或者提到它的一个更好的替换者"normalize"

 　　　　normalize.css是一个可以定制的css文件，它让不同的浏览器在渲染元素时形式更统一。

解释下浮动和它的工作原理。

 　　　　问题成因：在一个容器中，有两个浮动的子元素，会造成显示结果意想不到的问题。在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的。

　　　　关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。

　　　　解决浮动：

　　　　1）添加额外标签 
　　　　　　在浮动元素末尾添加一个空的标签例如 2d68876b832ead0cbf22e2163889e36316b28748ea4df4d9c2150843fecfba68.

Advantages: easy to understand and master
Disadvantages: You can imagine how many meaningless empty tags will be added through this method, which violates the separation of structure and performance, and will be a nightmare in later maintenance.
2) Use the br tag and its own html attribute 01877b24cc274dd83d413c01767d93a1

Advantages: Slightly stronger semantics than empty tags, less code
Disadvantages: It also violates the separation of structure and performance. It is not recommended to use
. 3) The parent element sets overflow: hidden
by setting the overflow value of the parent element to hidden; in IE6, hasLayout also needs to be triggered, such as zoom: 1. a40d60e3787b0ce0842578637211ff70

Advantages: There are no structural and semantic problems, and the amount of code is very small
Disadvantages: When the content increases, it is easy to cause automatic line wrapping, causing the content to be hidden, and elements that need to overflow cannot be displayed; overflow:hidden will cause the middle key to fail.
4) The parent element sets the overflow: auto attribute. IE6 also needs to trigger hasLayout, and the demonstration is similar to 3
Advantages: There are no structural and semantic problems, and the amount of code is very small
Disadvantages: After multiple nestings, some situations in Firefox will cause all content to be selected; in IE When mouseover causes the width to change, the outermost module will have scroll bars, etc., and early versions of Firefox will cause focus, etc. for no reason.
5) Use: after pseudo-element
It should be noted that: after is a pseudo-element (Pseudo-Element), not a pseudo-class (called "pseudo-object" in some CSS manuals), many clear floats Articles like this are called pseudo-classes, but CSS should be more rigorous. This is an attitude. Since IE6-7 does not support :after, use zoom:1 to trigger hasLayout.

　　.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } 　　　　　.clearfix { *zoom:1; }

Advantages: The structure and semantics are completely correct, and the code volume is centered

Disadvantages: Improper reuse will cause an increase in code volume

Describe how z-index and overlay context are formed.

Z-index controls the overlay order of elements on the page. Elements with a high z-index value are displayed in front of elements with a low z-index value. Conditions for using z-index: It is only valid for elements that have a position attribute and whose value is not static. Overlay context is related to "stack context". A group of elements with a common parent that move forward or backward together in the stacking order constitute the so-called stack context.

The stacking order of an element depends not only on its own z-index, but also on the stack context in which it is located. If the context level is very low, Even if its own z-index is set very high, it will not be able to achieve your requirements.

Z-index parsing rules are based on standard browsers that comply with w3c specifications, but IE series browsers always require you to spend a lot more effort.

There is a small difference between z-index parsing in IE and standard browsers, and that is the difference in support for the second condition among the three conditions in the generated stack context mentioned above. In standard browsers, the element must have a z-index value and a position attribute, and the value is not static. Only when these two conditions are met will a new stack context be generated, but this is not the case in lower versions of IE. More, as long as you set the position value to not be static, it will generate a new stack context.

List different float clearing techniques and point out their applicable usage scenarios.

The answer is to refer to the previous question "

Explain float and how it works"

Explain CSS sprites and how you can page or website. 　

CSS sprites actually merge multiple images into one image, and then lay them out on the page through CSS technology. The advantage of this is that reducing the number of images will reduce http requests and improve website performance.

1) Create a new drawing board with a transparent background in photoshop, place the small pictures on the drawing board one by one, and adjust the small pictures to the appropriate size.

2) Record the abscissa and ordinate of the picture through the ruler.

　3) Write css code background:url(....) no-repeat x-offset y-offset; and set the fixed height and width of the element at the same time, overflow:hidden

你最喜欢的图片替换方法是什么，你如何选择使用。　

　　　　不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。

于是，出现了通过CSS来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。

Fahrner Image Replacement (FIR)

Phark 的方法

Gilder/Levin 的方法 (推荐)

Fahrner Image Replacement (FIR)

这是最早出现的图文替换技术，是由 Todd Fahrner 提出的，非常容易理解：

<h2><span>Hello World</span></h2>

h2 {     background:url(hello_world.gif) no-repeat;     width: 150px;     height: 35px; } span {    display: none; } 

代码非常明白：先将图片应用在 H2 的背景中，然后将 SPAN 的标签隐藏。但是这种方式有个问题，就是当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。

Phark 的方法

 <h2> Hello World </h2>

 h2 {    text-indent: -5000px;    background:url(hello_world.gif) no-repeat;    width: 150px;height:35px; } 

代码也非常简单，通过文本缩进，将文字隐藏，但是，当图片无法显示时，依然存在 FIR 的问题。

Gilder/Levin 的方法

  <h2><span></span>Hello World </h2>

 h2 {    width: 150px;height: 35px;    position: relative; } h2 span {    background: url(hello_world.gif) no-repeat;     position: absolute;     width: 100%;     height: 100%; }

首先，将 H2 的 position 设为 relative ，这样将使 H2 里面的元素定位以 H2 为参照，然后将 SPAN 元素绝对定位，撑满整个 H2 区域，同时将背景图应用在 SPAN 标签里面；这种方法的原理是将 SPAN 标签覆盖在文字内容上面，一旦 SPAN 里面的背景图无法显示，将显示下层的文字内容，不影响正常使用。但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。

讨论CSS hacks，条件引用或者其他。

 　　hacks　　

　　_width针对于ie6。*width,+width针对于ie6,7。

　　color: red\9;/*IE8以及以下版本浏览器*/（但是测试可以兼容到ie10。

　　*+html与*html是IE特有的标签, firefox暂不支持.而*+html又为IE7特有标签（但是测试*html兼容ie6-10。*+兼容ie7-10）。

　　!important 在IE中会被忽视，ie6,7,8不识别，ie9+（包括ie9）是识别的。

　　条件引用

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--><!--[if IE 7]> 仅IE7可识别 <![endif]--><!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--><!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]--><!--[if IE 8]> 仅IE8可识别 <![endif]--><!--[if IE 9]> 仅IE9可识别 <![endif]-->

 

如何为有功能限制的浏览器提供网页？

 　　　　1）对于那些可以手动开启的功能，可以在页面上增设“用户使用指导”或“帮助手册”，提示用户如何开启相关的功能。（如果你不介意，还可以完全禁掉页面，强制用户使用固定设备，升级版本；哈哈，当年我做的BMS就是这样做）

　　　　　　例如，针对使用IE浏览器自带的功能可以限制对网页的浏览，比如activeX或者脚本，我们检测到它不可用时，提示用户启用的操作方式。

　　　　2）尽量避免当js或者css3失效时，页面不可用的动画效果。

　　　　　　例如，http://www.rippletec.net/网站为了营造一种当页面加载完毕，不同模块滚动到固定位置的绚丽动画效果。应该避免类似的效果，一方面产生繁琐的重绘过程，会消耗浏览器内存，对性能一般的设备可能因为压力过大，卡机或者无法渲染；另外一方面是网站当网站的js不可用时，模块滚动到固定位置的事件没有被触发，用户看到的将会是动画产生之前，最原始的页面状态，无法经行下一步操作。

　　　　（首次接触“优雅降级”这个词汇是在《jQuery基础教程（第4版）》，不过那时候已经是一年多以前，现在已经记不清当时书上举得例子了，记性差~真心抱歉）

         3）应该为绑定异步的元素，设置herf属性。

　　　　例如，用户要执行查询某书本详细信息操作，点击“查询”按钮，通过js触发查询该条目的事件，然后采用jQuery异步执行操作，在页面固定位置加载相关书本的详细内容。$(".delete").click(function(){$.ajax(//..)})，但是一旦js不可用，或者jQuery无发加载的时候，用户将无法顺利执行操作。因此，可以为该操作设置herf属性，当$.ajax()可用时阻止直接跳转，而使用异步；当$.ajax()不可用时，直接跳转到详细信息的页面。

　　　4）避免依赖脚本验证表单。服务器的表单验证不可避免。

　　　5）部分浏览器不支持html5新标签，因此，可以用js创建相关标签，然后给它们的css赋予相关属性。

　　　6）因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：

var myLinks = document.getElementsByTagName('a');for(var i = 0; i < myLinks.length; i++){　　myLinks[i].addEventListener(’touchstart’, function()    {　　this.className = “hover”;}, false);　　myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);}

然后用CSS增加hover效果：

a:hover, a.hover { /* 你的hover效果 */ }

你会使用哪些技术和处理方法？

有哪些的隐藏内容的方法（如果同时还要保证屏幕阅读器可用呢？）

 　　　　需要隐藏内容的几种可能性：  

　　　　1）对文本的隐藏

　　　　2）隐藏超链接（另类黑链）

　　　　3）对统计代码隐藏

　　　　4）隐藏超出图片

　　　　5）css隐藏滚动条

　　　　6）css隐藏div层

　　具体实现：

　　　　 1、css隐藏DIV及内容，完全隐藏内容与布局。display:none或者visible:hidden

　　　　　　（面试官也许会问到：关于display:none和visible:hidden区别）

　　　　display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

　　　　display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

　　　　visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

 

　　　   2、通过对象盒子设置缩进样式（text-indent:-9999px）方法可以隐藏超链接文本内容
　　　　　　同样道理，可以用来隐藏图片上方文字。此类问题我们常见于LOGO处使用，我们想让图片作为背景，而图片上方放A链接文字内容，但html锚文本功能仍然正常也能鼠标点击使用。图片作为背景而html代码内看不到图片，但文字也存在，却是文字隐藏图片显示出，鼠标也能点击指向。

　　　　3、overflow: hidden 隐藏溢出DIV内容或图片

　　　　4、css隐藏滚动条

使用overflow-y:hidden;和overflow-x:hidden来隐藏或显示对应横或竖方向的滚动条。

你用过栅格系统吗？如果使用过，你最喜欢哪种？

 　　　　“网格系统”，运用固定的格子设计版面布局，其风格工整简洁。

　　　　“使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了”

　　　　Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。

你用过媒体查询，或针对移动端的布局/CSS 吗？

 　　　　针对http://topview123.sinaapp.com/细说

　　　　设备宽度(device-width)未必是布局宽度(width)，为了让非适应性布局与手机相适应，我们跟关心视图宽度，因此需要一种方式来设定宽度，这样可以使用媒体查询检测。

　　　　让视图的宽度和设备宽度一致

<meta element = "viewport"           content = "width=device                            initial-scale = 1" >    

　　　　每种布局，都应该根据目标设备指定固定宽度设计

@media screen and (max-width:320px){}    

　　　　为移动设备调整网页图像。在最基本的页面，一个移动优化的网站就是其布局、内容、互动都经过调整，以适应移动环境。最常见的做法是使用css媒体查询的功能为不同大小的屏幕提供不同的风格；为较小的屏幕优化布局，可以通过针对移动设备的模块服务。

不同设备的分离设计->根据监视屏幕大小进行设计->（媒体查询，灵活排版，图像结合）

如何优化网页的打印样式？

 　　http://www.jb51.net/web/70358.html

在书写高效 CSS 时会有哪些问题需要考虑？

 　　　  1）reset。参照上题“描述下 “reset” CSS 文件的作用和使用它的好处”的答案。

　　　　2）规范命名。尤其对于没有语义化的html标签，例如div，所赋予的class值要特别注意。

　　　　2）抽取可重用的部件，注意层叠样式表的“优先级”。

使用 CSS 预处理器的优缺点有哪些？(SASS，Compass，Stylus，LESS)

 　　　　（这里我会实话实说）过去一直没有机会接触“预处理器”，缺的不是学习的热情和动力，而是一种会使用到这门高深技术的需求，希望日后参与的项目将会用到这门技术，能够将学习揉入实际开发中。关于CSS 预处理器，我知道是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。

描述下你曾经使用过的 CSS 预处理的优缺点。

 

如果设计中使用了非标准的字体，你该如何去实现？

 　　　　1）图片替代

　　　　 2）

Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)

 

解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？

 　　　　浏览器会根据css rules 与dom tree 生成render tree。浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

举个例子，有选择器：

body.ready #wrapper > .lol233

　　　　先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。

　　至此这个选择器匹配结束，所有还在集合中的元素满足。

　　大体就是这样，不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。

　　　　1）效率，找元素的父亲和之前的兄弟比遍历所有儿子快而且方便。

　　　　2）关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。

　　为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。

解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。　

　　　　网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。   

　　　　每个盒子都有：边界、边框、填充、内容四个属性；

　　　　每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；

Please explain the function of * { box-sizing: border-box; } and what are the benefits of using it? 　　

　　 Speaking of IE bugs, in versions prior to IE6, there were some problems with IE's parsing of the box model. Unlike other browsers, both border and padding were included in width. On the contrary, some other browsers do not include borders and padding. For IE browser, when we set box-sizing: content-box;, the browser's interpretation of the box model follows the W3C standard we recognized before. When it defines width and height, its width does not include border and padding. ; For non-IE browsers, when we set box-sizing: border-box;, the browser's interpretation of the box model is the same as the version before IE6. When it defines width and height, border and padding are included in within width and height. The width and height of the content can be obtained by subtracting the width of the "padding" and "border" in the corresponding direction from the defined "width" and "height". The width and height of the content must be guaranteed not to be negative. If necessary, the size of the element's border box will be automatically increased so that the width or height of its content is at least 0.

Use * { box-sizing: border-box; } to unify the differences between IE and non-IE browsers.

Please list all the values ​​of the display attribute that you know

The display attribute specifies the type of box that the element should generate.

　

Please explain the difference between inline and inline-block, block?

The display attribute specifies the type of box that the element should generate. However, block represents a block-level element, and there are line breaks before and after the element; inline is the default style, which means that the element is displayed as an inline element, and there are no line breaks before and after the element. In other words, the block element is usually realized as an independent block and will be changed to a separate line; the inline element will not cause line breaks before and after, and a series of inline elements will be displayed in one line until the line is full. Inline-block represents inline block elements (new in CSS2.0).

display:block

　1) The block element will occupy its own line, and multiple block elements will each start a new line. By default, the width of a block element automatically fills the width of its parent element.

　2) The block element can set the width and height attributes. Even if the width of a block-level element is set, it still occupies an exclusive line.

　3) The block element can set margin and padding attributes.

display:inline

1) Inline elements will not occupy a row. Multiple adjacent inline elements will be arranged in the same row until no more rows can fit. A new line will be added, with its width changing according to the content of the element.

2) The width and height attributes set for inline elements are invalid.

3) The margin and padding attributes of the inline element, the horizontal padding-left, padding-right, margin-left, and margin-right all produce margin effects; but the vertical padding-top, padding -bottom, margin-top, margin-bottom will not produce margin effects.

display:inline-block

Simply put, renders the object as an inline object, but the content of the object is rendered as a block object . Subsequent inline objects will be arranged on the same line. For example, we can give a link (a element) an inline-block attribute value so that it has both the width and height characteristics of block and the peer characteristics of inline.

Please explain the difference between relative, fixed, absolute and static elements

　

When using CSS DIV for layout, always adjust the position The four attribute values ​​​​relative, absolute, static, and fixed are not very clear, so depressing results often occur. I did some research today and finally understood something. To summarize here:

Let’s first look at the definition of each attribute value:

1. static: default value. Without positioning, the element appears in the normal flow (ignoring top, bottom, left, right or z-index declarations).

2. Relative: Generates a relatively positioned element , which is positioned relative to its normal position through the settings of top, bottom, left, and right. Hierarchical classification can be done through z-index.

3. Absolute: Generate an absolutely positioned element, is positioned relative to the first parent element other than static positioning . The position of the element is specified via the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

4. fixed: Generate absolutely positioned elements, positioned relative to the browser window . The position of the element is specified via the "left", "top", "right" and "bottom" attributes. Hierarchical classification can be done through z-index.

The positioning methods of static and fixed are easy to understand and will not be analyzed here. The following is an analysis of the commonly used relative and absolute:

1. relative. An element positioned relative is removed from the normal text flow, but its position in the text flow still exists.

The layer with the yellow background is positioned relative, and the red border area is its position in the normal flow. After positioning it through top and left, you can see from the position of the gray background layer that its normal position still exists.

2. Absolute. A layer positioned as absolute is separated from the normal text flow, but the difference from relative is that its position in the normal flow no longer exists. After positioning the yellow background layer as absolute, the gray background layer is automatically filled in.

3. The main difference between relative and absolute:

First of all, it is whether the position in the normal flow exists or not as mentioned above.

Secondly, the relative positioned layer is always relative to its nearest parent element, no matter how its parent element is positioned. The red background layer is relative positioned, and the green background layer of its direct parent element is static positioned by default. The position of the red background layer is the top and left 20 elements relative to the green background layer. And if the red background layer is positioned as absolute. The red background layer still defines top:20px; left:20px; but its relative element becomes a yellow background layer whose positioning method is absolute or relative. Therefore, a layer positioned for absolute is always relative to its nearest parent layer defined as absolute or relative, and this parent layer is not necessarily its direct parent layer. If absolute or relative is not defined in its parent layer, it will be positioned relative to the body.

In addition to top, left, right, and bottom positioning, the definition of margin attribute values ​​also conforms to the above rules.

static and positioning are used less and are relatively simple, so we will not analyze them here.
The following is an analysis of the more relative, absolute and fixed applications:
The layer positioned by relative is always relative to its nearest parent element, no matter how its parent element is positioned.
The layer positioned by absolute is always relative to its nearest parent layer defined as absolute or relative, and this parent layer is not necessarily its direct parent layer. If absolute or relative is not defined in its parent layer, it will be positioned relative to the body.
fixed: generates an absolutely positioned element and is positioned relative to the browser window.

Which CSS framework are you currently using, or have you used in your product line? (Bootstrap, PureCSS, Foundation, etc.)

　　　

Bootstrap is developed based on HTML5 and CSS3. It is more personalized and humanized based on jQuery. , forming its own unique website style and compatible with most jQuery plug-ins.

Bootstrap contains a wealth of web components. Based on these components, you can quickly build a beautiful and fully functional website.

If yes, which set is it? If so, how can you improve the CSS framework?

Have you ever used CSS Flexbox or Grid specs?

http://www.w3cplus.com/css3/a-guide-to-flexbox.html

http://zh.learnlayout.com/flexbox.html

If yes, what do you think about it in terms of performance and efficiency?

Why are responsive design and adaptive design different?

Adaptive Layout

Adaptive layout is characterized by defining layouts for different screen resolutions. . The page elements change when the layout is switched, but in each layout, the page elements do not change as the window size is adjusted. That is to say, the position of the elements in the page you see will change but the size will not change;

You can think of adaptive layout as a series of static layouts.

　

Liquid Layout

Features of Liquid Layout (also called "Fluid")