Describe what a "reset" CSS file does and how it's useful.

  • What Is A CSS Reset?
    A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
    In a word,reset.css is used to normalize browser's default styles.
  • Why USE A CSS Reset?
    Browser have different "built-in" styles which they apply to different html-elements. These styledefinitions may vary accross different browsers.
  • Which CSS Reset Should I Use?

Describe Floats and how they work.

A float element in page like a boat in water.

What are the various clearing techniques and which is appropriate for what context?

  • The Empty Div Method is, quite literally, an empty div. <div style="clear: both;"></div>. Sometimes you'll see a <br /> element or some other random element used, but div is the most common because it has no brower default styling, doesn't have any special function, and is unlikely to be generically styled with CSS. This method is scorned by semantic purists since its presence has no contexual meaning at all to the page and is there purely for presentation. Of course in the strictest sense they are right, but it gets the job done right and doesn't hurt anybody.
  • The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However if you find yourself adding a new div just to apply this, it is equally as unsemantic as the empty div method and less adaptable. Also bear in mind that the overflow property isn't specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.
  • The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Then apply this CSS:
    .clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
This will apply a small bit of content, hidden from view, after the parent element which clears the float. This isn't quite the [whole story](http://www.positioniseverything.net/easyclearing.html), as additional code needs to be used to accomodate for older browsers.

Explain CSS sprites, and how you would implement them on a page or site.

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.(Css sprites is a technology to combin many image into one, and use css background-position to find which part you want)

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

What are your favourite image replacement techniques and which do you use when?

CSS image replacement is a technique of replacing a text element (usually a header tag) with an image.
css-image-replacement

CSS property hacks, conditionally included .css files, or... something else?

How do you serve your pages for feature-constrained browsers?

What techniques/processes do you use?

  • Progressive Enhancement
  • Graceful Degradation

What are the different ways to visually hide content (and make it available only for screen readers)?

css media types

Have you ever used a grid system, and if so, what do you prefer?

Of course yes.

  • gridpak. A simple grid system.
  • Bootstrap Grid System
  • Grid960
  • YUI CSS Grid

I prefer Bootstrap grid.

Have you used or implemented media queries or mobile specific layouts/CSS?

Of course yes.
I implemented media queries on my gitbub pages.the site works fine on all media included handle devices.

Any familiarity with styling SVG?

SVG styling

How do you optimize your webpages for print?

  • Create A Stylesheet For Print
  • Avoid Unnecessary HTML Tables
  • Hiding Needless Element For Print
  • Size Page For Print
  • Use Page Break

What are some of the "gotchas" for writing efficient CSS?

  • Use efficient CSS selectors

    • Avoid a universal key selector.
      Allow elements to inherit from ancestors, or use a class to apply a style to multiple elements.
    • Make your rules as specific as possible.
      Prefer class and ID selectors over tag selectors.
    • Remove redundant qualifiers.
      These qualifiers are redundant:

      • ID selectors qualified by class and/or tag selectors
      • Class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway).
    • Avoid using descendant selectors, especially those that specify redundant ancestors.
      For example, the rule body ul li a {...} specifies a redundant body selector, since all elements are descendants of the body tag.
    • Use class selectors instead of descendant selectors.
  • Avoid CSS expressions
  • Put CSS in the document head

What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS)

If so, describe what you like and dislike about the CSS preprocessors you have used.

How would you implement a web design comp that uses non-standard fonts?

Webfonts (font services like: Google Webfonts, Typekit etc.)

Explain how a browser determines what elements match a CSS selector?

As the browser parses HTML, it constructs an internal document tree representing all the elements to be displayed. It then matches elements to styles specified in various stylesheets, according to the standard CSS cascade, inheritance, and ordering rules. In Mozilla's implementation (and probably others as well), for each element, the CSS engine searches through style rules to find a match. The engine evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule. (The "selector" is the document element to which the rule should apply.)

Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.

IE8 and earlier versions of IE, included padding and border in the width property.
To fix this problem, add a <!DOCTYPE html> to the HTML page.

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

CSS Questions:Front-end Developer Interview Questions的更多相关文章

  1. Front-end Developer Interview Questions

    Front-end-Developer-Interview-Questions A list of helpful front-end related questions you can use to ...

  2. HTML Questions:Front-end Developer Interview Questions

    What's a doctype do? Instruct the browser to render the page. What's the difference between standard ...

  3. General Questions:Front-end Developer Interview Questions

    What did you learn yesterday/this week? Learning Angular. What excites or interests you about coding ...

  4. jQuery Questions:Front-end Developer Interview Questions

    Explain "chaining". Chaining allows us to run multiple jQuery methods (on the same element ...

  5. JS Questions:Front-end Developer Interview Questions

    Explain event delegation Event delegation allows us to attach a single event listener, to a parent e ...

  6. WCF学习系列二---【WCF Interview Questions – Part 2 翻译系列】

    http://www.topwcftutorials.net/2012/09/wcf-faqs-part2.html WCF Interview Questions – Part 2 This WCF ...

  7. WCF学习系列三--【WCF Interview Questions – Part 3 翻译系列】

    http://www.topwcftutorials.net/2012/10/wcf-faqs-part3.html WCF Interview Questions – Part 3 This WCF ...

  8. WCF学习系列四--【WCF Interview Questions – Part 4 翻译系列】

    WCF Interview Questions – Part 4   This WCF service tutorial is part-4 in series of WCF Interview Qu ...

  9. 300+ Manual Testing and Selenium Interview Questions and Answers

    Manual testing is a logical approach and automation testing complements it. So both are mandatory an ...

随机推荐

  1. java中基本输入输出流的解释(flush方法的使用)

    转自:http://fsz521job.itpub.net/post/5606/34827 网络程序的很大一部分是简单的输入输出,即从一个系统向另一个系统移动字节.字节就是字节,在很大程度上,读服务器 ...

  2. C/C++知识点

    1 cout<<endl;什么意思? 就是回车的意思~ 相当于C语言里面的printf("\n"); 2 cin>> 键盘输入 例子:double  r=1 ...

  3. android上传文件到服务器

    package com.spring.sky.image.upload.network; import java.io.DataOutputStream; import java.io.File; i ...

  4. 【转】Hadoop集群添加磁盘步骤

    转自:http://blog.csdn.net/huyuxiang999/article/details/17691405 一.实验环境 : 1.硬件:3台DELL服务器,CPU:2.27GHz*16 ...

  5. loadrunner解决“服务器正在运行中”方法

    问题现象: 这个问题在上家公司遇见过,今天无意中找到了解决办法: 解决方法: 打开任务管理器: 找到这个进程:ThumbProcess.exe,关掉这个进程即可解决. 今天运行lr的vugen报错 解 ...

  6. C# 通用上传文件类

    1.Upfile.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="U ...

  7. 17111 Football team

    时间限制:1000MS  内存限制:65535K 提交次数:0 通过次数:0 题型: 编程题   语言: C++;C Description As every one known, a footbal ...

  8. HDU2588 GCD(欧拉函数)

    题目问[1,n]中与n的gcd大于等于m的数的个数. 好难想... 假设x满足条件,那么gcd(x,n)=d>=m,而x/d与n/d一定互质. 又x<=n,所以x/d<=n/d. 于 ...

  9. 【POJ】2318 TOYS(计算几何基础+暴力)

    http://poj.org/problem?id=2318 第一次完全是$O(n^2)$的暴力为什么被卡了-QAQ(一定是常数太大了...) 后来排序了下点然后单调搞了搞..(然而还是可以随便造出让 ...

  10. 【BZOJ】3053: The Closest M Points(kdtree)

    http://www.lydsy.com/JudgeOnline/problem.php?id=3053 本来是1a的QAQ.... 没看到有多组数据啊.....斯巴达!!!!!!!!!!!!!!!! ...