In the front three, CSS is the blogger’s favorite topic, here to share those often tested CSS interview knowledge points, the text is as follows:

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 <style> element
  • Inline CSS – The style attribute
  • External CSS – The <link> elements
  • Import CSS – @import Rule 

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

The “rel” in 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 has many functions, such as RSS, Rel, etc., while @import can only be used to load CSS
  • When a link is parsed, the page loads the referenced CSS synchronously, while the CSS referenced by @import is not loaded until the page is finished loading
  • @import requires Internet Explorer 5 or later
  • Link can be dynamically imported using JS, @import cannot

What’s new with CSS3?

  • CSS3 implements rounded corners (border-radius:8px)
  • Box-shadow :10px
  • Add special effects to text (text-shadow)
  • Linear gradient
  • Rotation (transform) : the rotate (9 deg)
  • Zoom (transform) : scale (0.85, 0.90)
  • Skew (-9DEg, 0DEg)
  • Added more CSS selectors

Why do I initialize CSS styles?

Because of browser compatibility issues, different browsers have different default values for some tags. If CSS is not initialized, the page display will often be different between browsers. Of course, initialization styles can have an impact on SEO, but you can’t have your cake and eat it, but try to initialize with minimal impact.

normalize CSS VS reset CSS

Resetting removing all the native provided by Browsers. (Reset Reset the CSS default properties of browsers. Browsers have different varieties, different styles, and then Reset them so they are unified.)

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
  • The need for a host of 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:! Portant >inline style> #id >.class > tag > * > Inherit > Default
  • When the weight of selector are the 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”.

All pseudo-class&pseudo-elements are as follows:



What are the usage scenarios for :before,:after in the psesudo-class?

Pseudo-elements do not occupy dom element nodes, and :before and :after are often used to clear floats by defining pseudo-classes for the floating element’s parent:

<div class="father">
    <div class="f""> <div> <div> <style>. Father :after{clear:both; content:' ';
        height:0;
        visibility:hidden;
        display:block; 
    }
</style>Copy the code

: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.

Which CSS properties can be inherited?

Font size font-family, color, visibility

Non-inheritable style: border padding margin width height display

What about the box model of CSS?

There are two types of BOX models:

  • W3c standard box model
  • IE box model

Differences between standard model and IE model:

W3c Box model: ele’width = content width;

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



How does CSS set up these two models?

box-sizing: content-box; / / the default

box-sizing: border-box;  

How does Js set the width and height of the box model?

Dom node. style.width/height (only get the “embedd style” width/height)

Dom node currentStyle. Width/height

The dom node. GetComputedStyle (dom). The width/height

The dom node. GetBoundingClientRect (). The width/height

The differences are as follows:



What is Block Formatting Context (BFC)?

Block Formatting Context: it is an independent rendering area that isolates the elements inside the BFC from the elements outside, so that the positioning of the elements inside and outside does not affect each other.

What is the principle of BFC (BFC rendering rules)?

  1. Margins overlap in the vertical direction of the BFC
  2. BFC area does not overlap with float area (to clear float)
  3. The BFC is a separate container on the page, independent of other elements
  4. When calculating the height of the BFC, floating elements are also involved in the calculation

How do I create a BFC?

  1. The float value is not None, and once the float is set, the current element creates a BFC
  2. The value of position is not static. Once the position is set, the current element creates a BFC
  3. The overflow value is not visible; as long as overflow is set, the current element creates a BFC
  4. The display value is not the default, as long as display is set, the current element creates a BFC

What are the BFC usage scenarios?

1. Solve the margin overlap problem

Margin is maximized when all elements have a margin set. To keep margins from overlapping, we can add a parent element to the child element and set it to BFC:

<div>
    <p> xxxxxxxxx </p>
    <div style="overflow:hidden;">
        <p> yyyyyyyyy </p>
    </div>
</div>Copy the code

2. Solve the area overlap problem (take advantage of BFC does not overlap with 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>Copy the code



3. Resolve clear float (clear float principle)

<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>Copy the code

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)? 

The green part below represents 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 (what is the calculation rule?)

Two adjacent vertical margins are both positive, and the result of folding is the greater value between them

Two adjacent vertical margins are both negative, and the result of folding is the greater absolute value between them

Two adjacent vertical margins, one positive and one negative, are folded to be the sum of the two

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.

How to clear floats

1. Add new Div below the “float element”. And the div with class with “clear: Both “(Add an empty div with class=”clear” to the end of the floating element. The classe class says:. 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>Copy the code

The renderings are as follows:



Chances are that your chances are limited to a few chances. In addition, chances are that your chances are limited to a few chances. In addition, chances are that your chances are limited to a few chances. Overflow {overflow:auto; overflow:auto; overflow:auto; overflow:auto; 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>Copy the code

It is important to note that the Overflow property has three property values: hidden, Auto, visible. We can use hidden and Auto to clear the float, but it’s best not to use visible values.

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>Copy the code

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; }Copy the code

This is “star HTML hack” for “only-IE6 hack”. IE6 can recognize * html. class{}

CSS hack classification?

CSS hacks come in three forms: CSS attribute prefixes, selector prefixes, and IE conditional comments (header references if IE). CSS hacks in real projects are mostly introduced in response to the performance differences between different versions of Internet Explorer.

1. Attribute prefix method: For example, Internet Explorer 6 can recognize underscore (_) and asterisk (*). Internet Explorer 7 can recognize asterisk (*) but cannot recognize underscore (_)

Ie6 can recognize * html. class{},ie7 can recognize *+ html. class{} or *:first-child+ html. class{};

3. Ie conditional comment method: for all IE (IE 10+ no longer supports conditional comment) :

,

For IE6 and below: <! –[if LTE IE 6]> <! [endif]–>.

This type of hack works not only for CSS, but for any code written in a judgment statement.

CSS hack writing sequence: Generally, the CSS with a wide range of applications and strong identification ability is defined first. Because the code that’s written later if it’s recognized overrides the code that’s recognized earlier.

rgba VS opacity?

  • Rgba () sets the opacity value only for a single function.(Rgba () only applies to the element’s color or background color)
  • opacity sets the opacity value for an element and all of its children; Opacity: applies to an element and the transparency of all content inside it.

visibility :hidden VS display:none

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

(The descendant element’s visibility attribute will not be inherited if it exists, and the parent element’s value of visibility will be inherited if it does not exist, which means: The parent element’s visibility is hidden, but the child element’s visibility is visible, and the child element’s visibility is invisible if the child element’s visibility is absent. And the display property of the element is set to None and then the entire subtree is not visible.)

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) selector has two requirements: 1. Must be the ele element. 2. Must be in the position of the NTH child element. Otherwise, you can’t pick an element

Ele: nth-of-type(n) the selector has only one condition: the NTH ele element

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

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

Static position:

  • Html elements are positioned static by default.
  • Top,bottom,left,right properties invalid
  • No deviation from standard document flow

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
  • No deviation from standard document flow

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.
  • Out of standard document flow

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.
  • Out of standard document flow

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://..... '/>Copy the code

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}
}Copy the code

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)'>Copy the code

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.

  • 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>Copy the code

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