CSS 面试知识点合集

前端三大件里面, CSS是博主最喜欢的话题了，在此分享一下那些常考的CSS面试知识点，正文如下：

What's CSS?

• CSS---Cascading Style Sheets
• Css is a language for specifying how HTML is presented to users.
• CSS is used to style and out web pages.

How does CSS actually work?

When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:

1. The browser converts HTML and CSS into theDOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
2. The browser displays the contents of the DOM.

How do you include CSS to your HTML file?

There are 4 ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS

<style>
<link>

What does "rel" means in <link href=" " rel="stylesheet" /> ?

The "rel" in <link> is standing for the relationship between the HTML document and the externally linked file.   "rel" has values like stylesheet, index, section, help, bookmark, next, prev, copyright, etc..

External CSS by using <link> VS  @import 

• link功能较多 ，可以定义 RSS，定义 Rel 等作用，而 @import只能用于加载 CSS
• 当解析到 link 时，页面会 同步加载 所引的 css，而 @import 所引用的 css 会 等 到页面加载完才被加载
• @import 需要 IE5 以上 才能使用
• link可以使用 js 动态引入，@import不行

CSS3有哪些新特性？

• CSS3实现圆角（border-radius:8px）
• 阴影（box-shadow:10px）
• 对文字加特效（text-shadow）
• 线性渐变（gradient）
• 旋转（transform):rotate(9deg) 
• 缩放 （transform):scale(0.85,0.90)
• 倾斜 （transform): skew(-9deg,0deg)
• 增加了更多的CSS选择器 

为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

normalize CSS VS reset CSS

Resetting removing all the native provided by browsers. (Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一)

Normalizing is just a correction of some common bugs.

Name all the CSS selector that you know

Selectors can be defined in various ways as following:

• Tag Selectors
• Universal Selectors
• Descendant（后代） Selectors
• Class Selectors
• ID Selectors
• Child Selectors
• Attribute Selectors
• Grouping Selectors
• Pseudo-classes selectors: :hover, :activated, :focus
• Pseudo-elements selectors： ::before, ::after

what's CSS Specificity?

• specificity is a process of determining which CSS rule will be applied to an element. it actually determines which rules will take precedence.
• precedence(优先级为): !important >inline style> #id > .class > tag > * >继承 > 默认 
• when the weight of selector are same , it will apply the closet css rule .(就近原则)
• universal selector (*) has no specificity.

Pseudo-class VS Pseudo-element

•  pseudo class describe a special state . it allows to style element dynamically. The most popular one is :hover.

• pseudo-element match virtual elements. it used to style specified parts of an element. we often use like " ::after ::before ::first-line".

所有Pseudo-class&Pseudo-element如下：

伪类（Psesudo-class）中的:before,:after的使用场景是什么？

Pseudo-element不占用dom元素节点，:before和:after常用于 清除浮动, 具体做法就是给浮动元素的 父元素 定义伪类：

<div class="father">
    <div class="f"> 我是浮动的 <div>
<div>
<style>
    .father:after{
        clear:both;
        content:'';
        height:0;
        visibility:hidden;
        display:block; 
    }
</style>复制代码

:active VS : visited ?

:active	the moment it is clicked
: visited	the user has already visited

What are the differences between inline, block and inline-block?

inline elements do not break the flow. margin/ padding will push other elements horizontally not vertically. Moreover, inline elements ignore the height and width.

block elements break the flow and don't sit inline. they are usually container like div, section and also text p, h1. its height and width can be adjusted.

inline-block will be similar to inline and will go with the flow of the page. Only differences are this will take height and width.

CSS哪些属性可以继承？

有两种BOX model:

• W3c standard box model
• IE box model

标准模型和IE模型区别：

W3c Box model: ele'width = content width;

IE box model: ele'width=content width +padding width+ border width;

CSS如何设置这两种模型？

box-sizing: content-box; //默认

box-sizing: border-box;

Js如何设置获取盒模型对应的宽和高？

dom节点.style.width/height (only get the "embedd style" width/height)

dom节点.currentStyle.width/height

dom节点.getComputedStyle(dom).width/height

dom节点.getBoundingClientRect().width/height

区别如下：

什么是BFC ( Block Formatting Context)？

Block Formatting Context: 是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

BFC的原理是什么 （BFC的渲染规则）？

1. 在 BFC 的垂直方向上，边距会发生重叠
2. BFC 区域不会与 浮动区域重叠 （用来清除浮动）
3. BFC 在页面上是一个独立的容器，与其他元素互不影响
4. 计算 BFC 高度时，浮动元素也会参与计算

如何创建BFC？

1. float 值不为 none ，只要设置了浮动，当前元素就创建了一个 BFC
2. position 值不为 static ，只要设置了定位，当前元素就创建了一个 BFC
3. overflow 值不为 visible ，只要设置了overflow，当前元素就创建了一个 BFC
4. display 值不为默认，只要设置了display，当前元素就创建了一个 BFC

BFC的使用场景是什么？

1.  解决边距重叠问题

当元素都设置了margin边距时，margin将取最大值。 为了不让边距重叠，可以给子元素加一个父元素，并设置该元素为BFC：

<div>
    <p> xxxxxxxxx </p>
    <div style="overflow:hidden;">
        <p> yyyyyyyyy </p>
    </div>
</div>复制代码

2. 解决面积重合问题 （利用BFC不会和float重叠的特性）

<section id="layout">
    <div class='left'> </div>
    <div class='right'> <div>
</section>
<style>
    #layout{background-color:steelblue;}
    #layout .left{float:left;width:100px; height:100px; background-color:tomato;}
    #layout .right{height:120px; background-color:yellow;overflow:hidden}
</style>复制代码

3. 解决清除浮动（清除浮动的原理）

<section id='float-test'>
    <div class='float'> I am a float </div>
</section>
<style>
    #float-test{background-color:steelblue;overflow:blue}
    .float{float:left,font-size:30px}
</style>复制代码

What's the margin collapse?

its behavior like the margin of blocks is combined into a single margin whose size is the largest of the individual margins. And floating and absolutely positioned elements never collapse.

Types of margin collapse (margin collapse in 3 cases)?

下面绿色部分代表margin

• Adjacent siblings: the margins of adjacent siblings are collapsed.

• Parent and first/last child: if there is no border,padding,inline part, bfc

• Empty blocks:

if there is no border, padding, inline content, height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

Margin collapse calculate rule (计算规则是什么？)

两个竖直方向上相邻的外边距都是正数，折叠结果是他们两者之间较大的值

两个竖直方向上相邻的外边距都是负数，折叠结果是他们两者之间绝对值较大的值

两个竖直方向上相邻的外边距一正一负，折叠结果是他们两者相加的和

How to avoid margin collapse?

• using "floating element or absolutely positioned element". ( because floating and absolutely positioned elements never collapse)

• make parent as "BFC element" 

what does float do?

• float is a CSS positioning property. float value has: none, left, right, initial.
• float pushes an element to the sides of a page with text wrapped around it.
• we can create an entire page or a smaller area by using float. if the size of a floated element changes, text around it will re-flow to accommodate the changes.
• if we set, 'float: left;' for an image, it will move to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side.

清除浮动的方法总结(Clearing floats)

1. Add new Div below the "float element". And the div with class with "clear: both" ( 给已经浮动的元素的后面添加一个带class="clear"且空的div, classe类是这样写的：.class{clear:both; height:0; line-height:0; font-size:0;} )

<div class="outer">
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
    <div class='clear'></div>
<div>
<style>
    .outer{border:1px solid #ccc; background-color:#fc9; color:#fff;}
    .div1{width:80px;height:80px;background-color:red;float:left;}
    .div2{width:80px;height:80px;background-color:blue;float:left;}
    .div3{width:80px;height:80px;background-color:sienna;float:left;}
    .clear{clear:both;height:0;line-height:0;font-size:0;}
</style>复制代码

效果图如下：

2. Define a class with the "overflow : auto", then add this class to the "floated" element's parent element. （创建父级BFC: 给已浮动的元素的父级添加over-flow类, 其中over-flow是这样写的 .over-flow{overflow:auto; zoom:1}）

<div class="outer over-flow">
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
<div>
<style>
    .outer{border:1px solid #ccc; background-color:#fc9; color:#fff;}
    .div1{width:80px;height:80px;background-color:red;float:left;}
    .div2{width:80px;height:80px;background-color:blue;float:left;}
    .div3{width:80px;height:80px;background-color:sienna;float:left;}
    .over-flow{overflow:auto; zoom:1}
</style>复制代码

使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden, auto, visible. 我们可以使用hidden和auto来清除浮动，但最好不要用visible值。

3 . Add the pseudo element to the "floated" element's parent element;

<div class="outer clearFix">
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
<div>
<style>
    .outer{border:1px solid #ccc; background-color:#fc9; color:#fff;}
    .div1{width:80px;height:80px;background-color:red;float:left;}
    .div2{width:80px;height:80px;background-color:blue;float:left;}
    .div3{width:80px;height:80px;background-color:sienna;float:left;}
    .clearFix:after{
        content:'',
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .clearFix{zoom:1}
</style>复制代码

How to use flexbox?

1. First, I often define flex container and flex items.
2. then use "display: flex" on that flex container.
3. use "justify-content" to define the horizontal alignment of items. "justify-content" have values: flex-start, flex-end, start, center,end, space-between, space-around, space-evenly;
4. use"align-items" to define the vertical alignment of items.
5. If my main-axis is vertical, I can set "flex-direction: column".
6. use "flex" property to set the flexible length on flexible items.

CSS animation

What do you know about the transition?

•  transition allows to add an effect while changing from one style to another.
• we can set the which property you want to transition, duration, how you want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when the transition will start.

what is "CSS hack"？

A CSS hack applies CSS in one or more specific browser versions while that same CSS will be ignored by other browsers.

* html .sidebar{ margin-left: 5px;}复制代码

this is "star html hack" for "only-IE6 hack". ie6能识别*html .class{}

CSS hack分类？

CSS hack有三种表现形式，css属性前缀法、选择器前缀法以及ie条件注释法（即头部引用if ie）。实际项目中css hack大部分是针对ie浏览器不同版本之间的表现差异而引入的。

1.属性前缀法：

例：ie6能识别下划线“_”和星号“*”，ie7能识别星号“*”（以上版本并不支持），但不能识别下划线“_”，ie6~ie10都认识“\9”，但是其他浏览器不能支持

2.选择器前缀法（选择器hack）

例：ie6能识别*html .class{},ie7能识别*+html .class{} 或者*:first-child+html .class{};

3.ie条件注释法：

针对所有ie（ie10+已经不再支持条件注释）：<!--[if IE]>ie浏览器显示的内容<![endif]-->，

针对ie6及以下版本：<!--[if lte IE 6]>只在ie6及以下显示的内容<![endif]-->.

这类hack不仅针对css生效，对写在判断语句里面的所有代码都会生效。

css hack书写顺序：

一般将适用范围广，能识别能力强的css定义在前面。因为写在后面代码如果被识别会覆盖前面识别的。

rgba VS opacity?

• rgba set the opacity value only for a single declaration.(rgba()只作用于元素的颜色或其背景色)
• opacity sets the opacity value for an element and all of its children; (opacity作用于元素，以及元素内的所有内容的透明度)

visibility :hidden VS display:none

1. display isn't an inherited attribute. visibility is an inherited attribute.

(后代元素的visibility属性若存在则不会继承，若不存在则继承父元素visibility的值，意味着：父元素的visibility为hidden但是子元素的visibility为visible则子元素依旧可见，子元素visibility不存在则子元素不可见。而元素的display属性设为none其后整棵子树都不可见)

2. display: none removes the element from the normal layout flow and allow other elements to fill in. visibility: hidden tag is rendered, it takes space in the normal flow but doesn't show it.

3. display: none causes DOM reflow, but visibility: hidden doesn't.

nth-child(n) VS nth-of-type(n)

ele: nth-child(n) 选择器有两个必要条件： 1. 必须是ele元素。 2. 必须是处于第n个子元素的位置；否则，选不到元素的

ele: nth-of-type(n)选择器只有一个条件： 第n个ele元素

em VS rem

em:	is relative to the font size of its direct or nearest parent
rem:	is only relative to the HTML (root) font-size

CSS positioning (CSS 定位)/How absolute, relative, fixed and static position differ?

Static position:

• Html elements are positioned static by default.
• Top,bottom,left,right properties invalid
• 没脱离标准文档流

Relative Position:

• Html elements are positioned relative to its normal position, and the normal position means a position in the document flow.
• It can use "z-index" to defined CSS layer
• 没脱离标准文档流

Absolute position:

• An element with an absolute position is relative to the nearest positioned ancestor. If the elements don't have positioned ancestors, it relative to the document body.
• 脱离标准文档流

Fixed position:

• An element with a fixed position is relative to the viewport. which means it always stays in the same place even if the page is scrolled.
• The top, right, bottom, and left properties are used to position the element.
• 脱离标准文档流

what 's Open Graph and how to use it?

"Open Graph" is a technology invented by Facebook that allows the developer to control what content shows up when a page is shared on Facebook.

we can use Open Graph via Meta Tags.

The types of tags used should represent the content of the page. like:

<meta property='og:title' content='about our ompany' />
<meta property='og:image' content='http://.....'/>复制代码

Responsive design

• Responsive web design (RWD) makes web pages render well on all kinds of devices or screen sizes.
• common used responsive design:
• media query
• flexbox
• grid layout

how would you use media queries?

1. use media queries inside <style> tag

@media screen and (max-width:600px){
    .class{background:#ccc}
}复制代码

2. use media queries inside <link> tag to include different css file:

<link rel='stylesheet' type='text/css' href='style.css' media='screen and (min-width:400px)'>复制代码

CSS preprocessor/What are the reasons to use preprocessor?

• CSS preprocessor allow us to write CSS in a high level with some special syntax (declaring variable, nested syntax, mathematical operations, etc.) and that is compiled to CSS.

• Preprocessor helps you to speed up develop, maintain, ensure best practices and also confirms concatenation, compression, etc.

Which one would you prefer among px, em % or pt and why?

it depends on what you are trying to do.

px is the absolute length unit. px is not related to the size of the screen or its resolution.

em maintains relative size. we can have responsive fonts. 1em is equal to the current font-size of the element or the browser default. if u sent font-size to 16px then 1em = 16px. em is cascade

% sets font-size relative to the font size of the body. Hence, we have to set font-size of the body to a reasonable size. this is easy to use and does cascade. for example, if parent font-size is 20px and child font-size is 50%. child would be 10px.

pt (points) are traditionally used in print. 1pt = 1/72 inch and it is fixed-size unit.

What are sprites? Why use sprites?/how should I use CSS sprites?

CSS sprites are merging multiple images into a single image.（Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量）

• Sprites can reduce the frequency of HTTP request.
• sprites increase page speed.

we can use "background-position" property to locate any parts in a sprites image.

write block of HTML and CSS for Modal, with overlay background gray, opacity 0.7

<div>
    <div class='overlay'> </div>
    <div class='modal'> This is a modal.. </div>
</div>
<style>
    .overlay{
        background:#ccc;
        position:fixed;
        top:0;
        left:0;
        opacity:0.7;
        height:100%;
        width:100%;
        z-index:9;
    }
    .modal{
        background-color:bisque;
        position:fixed;
        top:50%;
        left:50%;
        hieght:35%;
        width:60%;
        transform:translate(-50%,-50%);
        z-index:10;
    }
</style>复制代码

how to name CSS classes?

• put the class name at the lowest possible level.
• make classes name more semantic means it’s easy to read.
• Don't use camelCase
• use less id, because it's id always involve javascript.

what's Sass? what are some core features of Sass?

What's Sass?

• Sass is short for "Syntactically Awesome Style Sheets".
• Sass is an extension of CSS that allow you to use things like variables, nested rules, inline imports and more. it also helps to keep things organized and allows you to create style sheets faster.

cores feature of Saas?

• Variables
• Nesting
• Import
• Partials
• Mixins
• Operators
• Extend/Inheritance