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 the DOM (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

• Embedded CSS - The 复制代码

  :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哪些属性可以继承？

  可继承的样式： font-size font-family, color, visibility.

  不可继承的样式：border padding margin width height display

   介绍一下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：

  
      
   xxxxxxxxx 
      
  "overflow:hidden;">
          
   yyyyyyyyy 
      
  复制代码

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

  "layout">
      
  'left'> 
      
  'right'> 
  
  
  复制代码

  
  

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

  'float-test'>
      
  'float'> I am a float 
  
  复制代码

  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;} )

  "outer">
      
  'div1'>1
      
  'div2'>2
      
  'div3'>3
      
  'clear'>
  
  复制代码

  效果图如下：

  
  

  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}）

  "outer over-flow">
      
  'div1'>1
      
  'div2'>2
      
  'div3'>3
  
  复制代码

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

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

  "outer clearFix">
      
  'div1'>1
      
  'div2'>2
      
  'div3'>3
  
  复制代码

  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+已经不再支持条件注释）：，

  针对ie6及以下版本：.

  这类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:

  'og:title' content='about our ompany' />
  '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 复制代码

  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