Front-end hardcore interview topic CSS 55 questions

preface

This article explains the content of 55 front-end interview CSS.

Review the front-end interview knowledge, is to consolidate the front-end of the basic knowledge, the most important or usual accumulation!

Note: the questions in the passage are separated by underscores, and the answers are for reference only.

The author’s technical blog first address GitHub, welcome to follow.

Front-end core interview topic CSS 55 questions.

HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + data structures and Algorithms + Git

CSS

Understanding the box model?

Standard mode and Hybrid mode (IE).
In standard mode the browser renders the page according to the specification;
In promiscuous mode, pages are displayed in a looser backward compatible manner.
Promiscuous mode usually mimics the behavior of older browsers in case older sites don’t work.

CSS box models have properties such as content, padding, border, and margin.

When we say width, height refers to the width and height of the content.

Of a box model:

Width = width+ pdding + border(width)
Height = height + padding + border

How to implement a circular clickable area on a page?

1. Map +area or SVG
2, the border – the radius
3, pure JS implementation, need to require a point on the circle is not simple algorithm, obtain mouse coordinates and so on

Achieve the same effect in standard mode and weird mode in different browsers without using border to draw a 1px high line.

<div style="height:1px; overflow:hidden; background:red"></div>Copy the code

Which properties in CSS can be inherited from the parent element?

Inheritance: (X) AN HTML element can inherit some CSS attributes from its parent, even if the current element does not define the attributes, such as color, font-size.

What are the most common attributes of box-sizing? What are the roles of the two?

Common attributes: Content-box, border-box, inherit

role

Content-box (default) : The width and height are applied to the element’s content box, respectively. Draws the inner margin and border of the element outside the width and height (the element default).
Border-box: Any inside margins and borders specified by the element will be drawn within the specified width and height. The width and height of the content are obtained by subtracting the border and inner margin from the specified width and height, respectively.

What is the difference between using link and @import when importing page styles?

Link is an XHTML tag that, in addition to loading CSS, can be used to define RSS(a format that describes and synchronizes web content, which is the most widely used XML application), rel connection attributes, and more.
@import is provided by CSS and can only be used to load CSS;
When the page is loaded, link is loaded at the same time, and the CSS referenced by @import waits until the page is loaded.
Import is introduced in CSS2.1 and can only be recognized in IE5 or higher, while link is an XHTML tag with no compatibility issues.
In short, link is superior to @import.

Common Compatibility Problems?

Margin and padding are different by default. Margin: 0; margin: 0; padding: 0; } to unify.
The Event object in IE has the event. X and event. Y properties, but not in Firefox. Firefox has event. PageX and event.PageY properties, but IE does not.

Var mx = event.x? event.x : event.pageX;

In Chrome’s Chinese UI, text smaller than 12px will be forced to display at 12px by default, by adding the CSS property -webkit-text-size-adjust: None; To solve.
Hover styles no longer appear after a hyperlink has been visited. The solution is to change the order of the CSS properties:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

Clear float, when need to clear float, clear float what are the methods?

If a block-level element is not set to height, its height is separated by its child element. If the child element is floating out of the standard document flow, the height of the parent element is ignored. If the float is not cleared, the parent element is not tall enough. The border or background will not be properly resolved.

Because of this property of float, after the float of an element belonging to a normal flow, the contain box will show a height of 0 (height collapse) because there are no other normal flow elements inside. In a real layout, this is often not what we want, so we need to close the float element so that the containing box behaves at its normal height.

The way to clear the float

If the parent div defines height manually, the parent div can’t automatically get the height.
Add an empty DIV and use CSS clear: BOTH to clear the float, so that the parent div can automatically get the height.
The parent div defines overflow: hidden. It must define width or zoom: 1, and cannot define height. When using overflow: hidden, the browser automatically checks the height of the floating area
The parent div floats as well.
The parent div defines display: table.
The parent div defines pseudo classes :after and zoom.
The parent div defines zoom: 1 to solve the problem of IE floating. The parent div defines ZOOM: 1 to solve the problem of IE floating.

Conclusion: better is the penultimate 2 way, simple and convenient.

How to keep the floating layer horizontally and vertically centered?

One, horizontal center

(1) Inline element solution

Just wrap the inline element in a parent element whose display attribute is block and add the following attributes to the parent element.

.parent {
    text-align: center;
}Copy the code

(2) Block element solution

.item {/* we can set the top margin */ margin: 10px auto; }Copy the code

The display attribute of the element is set to inline-block and the text-align attribute of the parent element is set to center.

.parent {
    text-align:center;
}Copy the code

(4) Multiple block element solutions

To use flexbox layout, simply add the display: flex and context-content: Center attributes to the parent of the block element to be processed.

.parent {
    display: flex;
    justify-content: center;
}Copy the code

Two, vertical center

(1) Single-line inline element solution

.parent { background: #222; height: 200px; } /* A {height: 200px;} /* A {height: 200px; line-height:200px; color: #FFF; }Copy the code

(2) Multi-line inline element solution combination

Use the display: table-cell and vertical-align: middle attributes to define the generation effect of the parent container element that requires the middle element, as follows:

.parent { background: #222; width: 300px; height: 300px; /* The following attributes are vertically centered */ display: table-cell; vertical-align: middle; }Copy the code

(3) Block element solution with known height

.item{ position: absolute; top: 50%; margin-top: -50px; /* margin-top = half of its own height */ padding:0; }Copy the code

Three, horizontal and vertical center

(1) Element solution 1 with known height and width

This is an unusual centering method that is adaptive and smarter than option 2, as follows:

.item{
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}Copy the code

(2) Element solution 2 with known height and width

.item{ position: absolute; top: 50%; left: 50%; margin-top: -75px; /* set margin-left/margin-top to half of your height */ margin-left: -75px; }Copy the code

(3) Unknown height and width element solution

.item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Css3 transform */}Copy the code

(4) Use Flex layout implementation

.parent{ display: flex; justify-content: center; align-items: center; /* Note that you need to set the height to see the vertical center */ background: #AAA; height: 300px; }Copy the code

Position, float, and display values and their meanings and usage

position

Position The value can be static(default), relative, absolute, fixed, inherit, or sticky.
Postision: static; Always be in the position given by the document flow. It may seem useless, but it can quickly unlocate and invalidate the values of top, right, bottom, and left. Try this method when switching.
Z-index only works when the values are set to static. Specifically, z-index only works on positioned elements.
Position: relative and Absolute can both be used for positioning. The difference is that the div of the former belongs to the normal document flow, while the div of the latter is out of the normal document flow, does not occupy spatial position, and does not split the parent class.

Relative is relative to its default position in normal flow, the space it originally occupied remains; Absolute A parent class that is not static relative to the first position property value. The value of position: absolute must be set, and overflow: hidden must not be set, because it does not belong to the normal document flow and does not occupy the height of the parent class, so there is no scroll bar.

Fixed is not supported by older versions of IE, but it is very useful to locate the origin relative to the browser window, and cannot be changed.

Often used with headers, footers, and other fixed floating divs, they scroll steadily and smoothly with the scroll bar, much better than JS. Fixed can have many creative layouts and functions, compatibility is an issue.

Position: inherit.

Inherit the position property from the parent class, so this property is also inherited, but note that Internet Explorer 8 and previous versions do not support inherit property.

Sticky: If the sticky element is set, its position will not be affected by its position in viewport (top, left and other attributes are invalid). When the element is about to move out of the offset range, its position will be changed to fixed. Set the left and top properties to a fixed position.

float

Float: left (or right), floats left (or right) until its edge touches the include box or another float box.

It is ignored by the block box in the normal document flow. It doesn’t take up space and can’t push the parent element apart.

Any element can float, and the floating element generates a block-level box, regardless of what element it is. Therefore, there is no need to set display: block for floating elements.
If you float non-replacement elements, specify an explicit width; otherwise they will be as narrow as possible.

What does it mean to replace elements? Img, input, Textarea, SELECT, and object are all replacement elements in (X)HTML. None of these elements has any actual content. (X) Most elements of HTML are non-replaceable elements that tell the content directly to the browser for display.

display

Display property values: None, inline, inline-block, block, table property values, inherit.
The display attribute specifies the type of box the element should generate. Any element in a document is a box, block box, or inline box.
Display: None and Visiability: hidden can both hide divs. The difference is a bit like absolute and relative, the former does not occupy the space of the document, while the latter still occupies the position of the document.
Display: Inline and block, also called inline elements and block-level elements.

The difference is that blocks occupy a single line. In browsers, they are usually laid out vertically. Margins can be used to control the spacing between block-level elements. Margins between inline boxes, floating boxes, or absolute positions will not merge. ; Inline layout is horizontal, vertical margin and padding are invalid, the size is the same as the content, and the width and height cannot be set. Inline is like a plastic bag. Blocks are like boxes, with a fixed width and height.

Inline-block is somewhere in between.
Table attribute values can be used to center the table vertically.
flex

Positioning mechanism

The preceding three attributes belong to CSS positioning attributes. The CSS supports three basic positioning mechanisms: normal flow, floating, and absolute positioning.

What are the cSS3 animation properties?

Animation-name: specifies the name of the keyframe to be bound to the selector.
Animation-duration: Specifies the time, in seconds or milliseconds, to complete the animation.
Animation-timing-function: specifies the speed curve of the animation.
Animation-delay: Specifies the delay before the animation starts.
Animation-rotund-count: Specifies the number of times an animation should be played.
Animation-direction: specifies whether the animation should be rotated backwards.

What’s the difference between Canvas and SVG?

Canvas is a pixel-based real-time mode graphics system, which is most suitable for smaller surfaces or larger numbers of objects. Canvas does not support events such as mouse and keyboard.
SVG is a shape-based reserved pattern graphics system that is better suited for larger surfaces or smaller numbers of objects.
There are still differences between Canvas and SVG in modification methods. Once a Canvas object is drawn, it cannot be modified using scripts and CSS. Because SVG objects are part of the document object model, they can be modified at any time using scripts and CSS.

Now the two technologies are compared and summarized as follows:

Canvas

1) resolution dependence 2) no event handler support 3) weak text rendering capability 4) ability to save resulting images in.png or.jpg format 5) Best suited for image-intensive games where many objects are frequently redrawn

SVG

1) resolution independent 2) event handler support 3) best for applications with large rendering areas (such as Google Maps) 4) high complexity slows down rendering (any application that overuses the DOM is not fast) 5) Not suitable for game applications

The difference between PX and EM?

Px Pixel. A unit of relative length. Pixel PX is relative to the screen resolution of the monitor. (from the CSS2.0 manual)
Em is a unit of relative length. Font size relative to the text in the current object. If the current font size for inline text has not been manually set, it is relative to the browser’s default font size. (from the CSS2.0 manual)
The default font height for any browser is 16px. All untuned browsers fit: 1em = 16px.

12px = 0.75em,10px = 0.625em. To simplify font size conversion, declare font size = 62.5% in the BODY selector in CSS, This changes the em value to 16px*62.5% = 10px, so 12px = 1.2em and 10px = 1em, which means just divide your original px value by 10 and replace it with em.

Will you use PS buckle diagram, PNG, JPG, GIF these picture formats to explain, respectively when to use. How to optimize the difference between image and image format?

The characteristics of the JPG

Supports advanced compression of photographic or realistic images, and can control image file size with compression ratio.
Lossy compression degrades image data quality, and this degrades when you edit and re-save JPG images.
JPG is not suitable for simpler images that contain very little color, have large areas of similar color, or have significant brightness differences.

The characteristics of PNG

Image file size can be compressed as much as possible without losing authenticity.
PNG can be used to store grayscale images up to 16 bits deep, color images up to 48 bits deep, and can also store up to 16 bits of α channel data.
For more complex images requiring high fidelity, PNG can be lossless compressed, but the image files are too large to be used on Web pages.
Another principle is that basic visual elements for page structure, such as container backgrounds, buttons, navigation backgrounds, etc. should be stored in PNG format as much as possible to ensure better design quality. While some other content elements, such as advertising banners, product images and other quality requirements are not particularly demanding, you can use JPG to store to reduce the file size.

GIF features

Transparency: Gif is a Boolean transparency type that can be fully transparent or completely opaque, but it is not translucent (alpha transparency).
Animation: The Gif format supports animation.
Lossy: Gif is a lossy image format, which means you can do anything to a Gif image without losing image quality.
Horizontal scanning: GIFs are compressed using an algorithm called LZW. When you compress a Gif, the pixels are horizontally compressed from top to bottom, which means that a horizontal Gif is smaller than a vertical Gif, all things being equal.

For example, the 50010 image is smaller than the 10500 image. Interval progressive display: Gif supports optional interval progressive display

It can be seen from the above features that only 256 colors of GIF image is not suitable as a photo, it is suitable to do not have high color requirements of graphics.

We know that CSS files can be imported from the external chain. Please talk about the methods of importing CSS from the external chain. Is there any difference in performance between these methods?

There are three most common ways to introduce CSS

First: external chain

This method can be said to be the dominant introduction method now.

Like Internet Explorer and the browser. This is also the best way to show the characteristics of CSS;

The most can reflect the content of DIV + CSS from the idea, but also the most easy to modify maintenance, code looks the most beautiful one.

Second: internal style sheets

The use of this method is much less, the longest is to see the large volume of portal websites. Or the home page of an enterprise website with a large number of visitors.

Compared with the first method, advantages and disadvantages are also obvious.

Advantages: Fast, all CSS control is for the page tag, no redundant CSS command; Also, don’t chain CSS files. Read styles directly from the document.

Disadvantages: the revision is troublesome, a single page is bloated, CSS can not be referenced by other HTML resulting in a relatively large amount of code, maintenance is also troublesome some of the companies that adopt this method are mostly rich, for them the number of users is the key, they do not lack people to carry out complex maintenance work.

Third: inline styles

The CSS command cannot appear in HTML. Sometimes it’s no big deal. Such as poor versatility, special effect, use CSS command less, and not often changed, using this method is a good choice.

Fourth, @import is introduced

<style type="text/css">
@import url(my.css);
</style>Copy the code

What is CSS Sprite? Talk about the pros and cons of this technology.

The key to acceleration is not to lose weight, but to lose number. Traditional cutting is exquisite, the smaller the size of the picture is, the better, the smaller the weight is, in fact, the size of the specification is not unified by the computer according to byte calculation. The client sends a request to the server every time it displays an image. So, the more images, the more requests, the greater the delay.

Using CSS Sprites can well reduce the HTTP request of the web page, so as to greatly improve the performance of the page, which is the advantage of CSS Sprites, is also the main reason for its wide spread and application;
CSS Sprites can reduce the number of bytes of images, and have compared the number of bytes of 3 images merged into one image for many times is always less than the sum of the 3 images.
Solve the web designers in the picture naming trouble, just a collection of pictures can be named, do not need to each small element name, so as to improve the efficiency of web production.
Change the style is convenient, just need to modify the color or style of the picture on one or a few pictures, the style of the whole web page can be changed. Easy to maintain.

CSS Sprites are powerful, but there are some disadvantages that can’t be ignored, as follows:

When combining images, you should combine multiple images into one image in an orderly and reasonable way, and leave enough space to prevent unnecessary background in the plate. These are ok, the most painful is in the widescreen, high-resolution screen under the adaptive page, if your image is not wide enough, very tolerant of background fracture;
CSS Sprites in the development of the more troublesome, you have to use Photoshop or other tools to measure and calculate the exact position of each background unit is needlework, not difficult, but very tedious; Fortunately, Tencent ghost brother with RIA developed a CSS Sprites style generation tool, although some use of the flexible, but has been more convenient than Photoshop measurement, and style directly generated, copy, copy is OK!
CSS Sprites in maintenance is more trouble, if the page background has a little change, generally change the merged image, do not need to change the good do not move, so as to avoid changing more CSS, if not in the original place, and can only (best) down the picture, so the picture of the word added, but also to change the CSS.

CSS Sprites are well worth learning and applying, especially when pages have a bunch of ICOs (ICONS). Anyway, a lot of times you have to weigh up whether or not you want to use CSS Sprites.

Define a webKit kernel browser-recognized rounded corner in CSS3 standard (size optional)

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; .Copy the code

How is the priority algorithm calculated? Which has a higher priority: inline or important?

The nearest priority rule, the closest style definition prevails
The loading style is based on the last loaded location
Priority is! important > [ id > class > tag ]
Important has a higher priority than inline

What are the basic statements of CSS?

Answer: selectors, properties, and property values.

How would you manage all your CSS files, JS and images if you were making a large, heavily visited website?

Answer: involve hand, division of labor, synchronization;

The upfront team must identify global styles (globe.css), encoding patterns (UTF-8), and so on
The writing habits must be consistent (for example, each style is written in a single line using inheritance);
Annotation style writer, all modules are timely annotation (annotation key style call place);
Annotate pages (e.g. start and end of page modules);
CSS and HTML should be stored in parallel folders and named the same (e.g. Style.css).
JS files are stored in folders named according to the JS function
Png8 integrated pNG8 format files are used for pictures. Try to integrate them together to facilitate future management.

What are the CSS selectors? Which attributes can be inherited? How is the priority algorithm calculated? What are the new pseudo classes?

CSS selectors

Id selector (# myID)
Class selector (.myClassName)
Tag selector (div, H1, P)
Adjacent selector (H1 + P)
Child selector (UL > LI)
Descendant selector (Li A)
Wildcard selector (*)
Attribute selector (a[rel = “external”])
Pseudoclass selector (A: hover, Li: nth-child)

Inheritable styles

Font-size, font-font-family, color, ul, li, DL, dd, dt;

Non-inheritable style

In fact, the width is not inherited, but if you don’t specify the width, it’s 100%. Since your child DIV doesn’t specify a width, it’s 100%, which means it’s the same width as the parent DIV, but it’s not about inheritance, and height is not inheritance.

Priority algorithm

The nearest priority principle shall prevail if the style definition is the nearest in the case of the same weight;
The loading style is based on the last loaded location;
The priority is:! Important > id > class > tag, important has a higher priority than inline

CSS3 added pseudo class examples

:root Selects the root element of the document, equivalent to the HTML element
:empty Selects elements that have no children
:target Selects the target element for the current activity
:not(selector) Selects elements other than the selector element
:enabled Selects available form elements
:disabled Indicates the form elements to be disabled
:checked Selects the selected form element
The :after selector inserts content after the content of the selected element
The :before selector inserts content before the content of the selected element
:nth-child(n) Matches the parent element to specify the child element, sorting the NTH of all child elements
:nth-last-child(n) Matches the parent element to specify the child element, sorting the NTH of all child elements, from back to front
Odd: NTH – child (odd)
: the NTH – child (even) even
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) Matches the parent element to specify the child element in order of the NTH child element of the same class
:nth-last-of-type(n) Matches the parent element to specify the child element, and sorts the NTH child element of the same kind from back to front
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection Selects part of the element selected by the user
:first-line Selects the first row in the element
:first-letter Selects the first character in the element

What’s new with CSS3?

CSS3 implements rounded corners (border-radius:8px)
Box-shadow :10px
Add special effects to text (text-shadow)
Linear gradient
Rotate, scale, position, tilt

Transform: rotate(9deg) Scale (0.85,0.90) Translate (0px,-30px) skew(-9deg,0deg); transform: rotate(9deg) scale(0.85,0.90) Translate (0px,-30px) skew(-9deg,0deg);Copy the code

Added more CSS selectors
More background rgba

How to design a full screen word layout?

The first way

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> </title> <style type="text/ CSS "> *{margin: 0; padding: 0; } html,body{ height: 100%; }. Header {height:50%;}. /* Width: 50%; /* width: 50%; background: #ccc; margin:0 auto; } .main{ width: 100%; height: 50%; background: #ddd; } .main .left,.main .right{ float: left; /* Float the element */ width:50%; /* Height :100%; /* background: yellow; } .main .right{ background: green; } </style> </head> <body> <div class="header"></div> <div class="main"> <div class="left"></div> <div class="right"></div> </div> </body> </html>Copy the code

The effect is as follows:

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

Initialize the CSS style example

html, body { padding: 0; margin: 0; }...Copy the code

What happens when collapse, overflow, float stack on top of each other?

Collapsing margins means that two or more margins adjacent to each other are merged into one margin.

Margin adjacency can be summed up in the following two points:

These two or more margins are not separated by non-empty content, padding, border, or clear.
These margins are in normal flow.

Vertical margins of block elements in two or more adjacent normal flows collapse.
Margins of floating elements, inline-block elements, and absolutely positioned elements do not fold with margins of other elements in the vertical direction.
The element that creates the block-level formatting context does not margin fold its children

Please explain the Flexbox (flexible box layout model) of CSS3 and how it works?

www.ruanyifeng.com/blo…

Any container can be specified with a Flex layout, and inline elements can also use a Flex layout.

Note: With Flex layout, the float, clear, and vertical-align attributes of child elements are invalidated.

What are the most common scenarios for Flex layouts?

Vertical centering is usually a hassle, but Flex layout is easy to solve.

.demo {
  display: flex;            
  justify-content: center;                    
  align-items: center;
}Copy the code

What is the principle behind creating a triangle with pure CSS?

Hide the top, left, and right edges (color: Transparent)

#demo {
 width: 0;
 height: 0;
 border-width: 20px;
 border-style: solid;
 border-color: transparent transparent red transparent;
}Copy the code

What is the difference between an absolute containing block and a normal flow?

Either way, find the ancestor element whose closest position is not static, and then determine:

If the element is an inline element, the containing block is the smallest rectangle that can contain the padding box of the first and last inline boxes generated by the element.
Otherwise, it is composed of the padding box of the ancestor element.
If neither can be found, it is initial containing block.

Supplement:

Static/relative: simply the content box of its parent element (excluding the padding)
Absolute: Finds the element closest to absolute/relative up
Fixed: Its containing block is always the root element (HTML/body), and the root element is also initial containing block

Understanding of the BFC specification (blockformatting Context)?

A concept from the W3C CSS 2.1 specification, it is a stand-alone container that determines how an element positions its content and how it relates and interacts with other elements.

A page is made up of boxes, and the type of the Box is determined by the element type and the display attribute.
Different types of boxes are involved in different Formatting contexts, so elements inside the Box are rendered in different ways, that is, elements inside and outside the BFC do not affect each other.

What is the difference between using position: Absolute and using float?

Position: Absolute: position: absolute: position: absolute: position: absolute: position: absolute: Position: absolute: Position: absolute: Position: absolute: Position: absolute
Position: Absolute no matter in which tag, can be located in any position, after all, top, left, bottom, right can be given a positive or negative value;
A float floats to the left or right and is not as flexible as position: Absolute. If you want to change the position after float, you need to add all kinds of margin, padding and so on to change the position.
But it’s especially handy in menu bars, or in horizontal rows of ICONS, where a float does the job, and there’s no space between elements (so you can use float to eliminate space between elements).

How does SVG differ from Convas?

Each graphic element drawn by SVG is an independent DOM node, which can be easily bound to events or used for modification, while canvas outputs a whole canvas.
SVG output graphics are vector graphics, later can be modified to zoom in and out, will not be true and sawtooth. A canvas outputs a scalar canvas, just like an image, that is distorted or jagged.

When should you use padding and margin?

When to use margin

When you need to add a margin outside the border.
When the background (color) is not needed in the margin.
The blank space between two adjacent boxes needs to cancel each other.

For example, a 15px + 20px margin will result in a 20px margin.

When to use padding

When you need to add white space in the border test.
When a background (color) is needed in the margins.
The space between two adjacent boxes, hopefully equal to the sum of the two.

Such as 15px + 20px padding, it will be 35px blank.

In my opinion, margin is used to separate elements from each other. Padding is used to separate the element from the content, so that there is a breathing distance between the content (text) and the (wrapping) element.

How to replace text with ellipsis when it exceeds the length? How to display all information in the form of hover box when the mouse hover over the text of super long length after ellipsis?

Note: Set width, overflow: hidden, white-space: nowrap (specifying that text in a paragraph does not break lines), and text-overflow: ellipsis. This notation works in all browsers.

The CSS visibility property has a collapse value. What is the difference between different browsers?

Collapse

When used within a table element, this value can delete a row or column, but it does not affect the layout of the table; space occupied by a row or column is reserved for other content.
If this value is used on any other element, it appears hidden.
When an element’s visibility property is set to collapse, it behaves the same as hidden for normal elements.
In Chrome, there is no difference between using collapse and hidden.
Firefox, Opera, and IE, there is no difference between using collapse and using display: None.

What happens when position is superimposed on display, overflow, and float?

The display attribute specifies the type of box the element should generate;
The position attribute specifies the positioning type of the element;
The float property is a layout that defines in which direction the element floats.
Similar to priority mechanism: position: Absolute/fixed has the highest priority, float has no effect with them, display value needs to be adjusted. Float or Absolute positioned elements, can only be block elements or tables.

Understanding of the BFC specification (block formatting Context)?

The BFC specifies how the internal Block Box is laid out.

Positioning scheme:

The internal boxes are placed vertically, one on top of the other.
The vertical distance of Box is determined by margin, and the margins of two adjacent boxes belonging to the same BFC will overlap.
The left side of the margin box of each element touches the left side of the border box containing the block.
The region of the BFC does not overlap with the float box.
The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements.

When calculating the height of the BFC, floating elements are also involved in the calculation.

The BFC is triggered when one of the following conditions is met:

1. The root element, HTML
2. Float is not none (default)
3, Overflow is not visible (default)
4、display 的值为 inline-block、table-cell、table-caption
5. The value of position is absolute or fixed

How do browsers parse CSS selectors?

CSS selectors parse from right to left.
If left-to-right matching is found to be inconsistent with the rules, you need to backtrack, which will lose a lot of performance.
If matching from right to left, all the rightmost nodes are found first. For each node, the parent node is searched up until the root element is found or the matching rule meets the condition, then the branch is traversed.
The performance of the two matching rules is very different, because the right-to-left matching rules filter out a large number of unqualified right-most nodes (leaf nodes) in the first step, while the performance of the left-to-right matching rules is wasted on failed look-up.
After the CSS is parsed, the results need to be analyzed together with the content of the DOM Tree to establish a Render Tree, which is finally used for drawing.
When creating a Render Tree (WebKit’s “Attachment” process), the browser needs to determine what Render Tree to generate for each DOM Tree element according to CSS Style Rules.

Is the vertical percentage of the element set relative to the height of the container?

When the width of an element is set as a percentage, it is calculated relative to the width of the parent container.

How does full-screen scrolling work? What CSS properties are used?

The principle of

It is similar to the rotation, the whole elements are arranged all the time. Suppose there are 5 full-screen pages to be displayed, the height is 500%, and 100% is displayed. The rest can be positioned on the Y-axis by transform, or realized by margin-top.
Overflow: hidden; Transition: all 1000ms ease;

What is responsive design? What are the fundamentals of responsive design? How to compatibility with earlier Versions of IE?

Responsive Web Design is a website that is compatible with multiple terminals, rather than making a specific version for each terminal.
The basic principle is to detect different device screen sizes through media query to do processing.
The page header must have a meta declared viewport.

<meta name="viewport" content="” width="device-width" initial-scale="1" maximum-scale="1" user-scalable="no"/>Copy the code

Parallax scrolling effect?

Parallax Scrolling creates stunning 3-D effects by Scrolling down the page so that the background moves slower than the foreground.

CSS 3 implementation.

Advantages: Short development time, good performance and development efficiency, disadvantages are not compatible with earlier versions of the browser

JQuery implementation.

By controlling the rolling speed of different layers, the time of each layer is calculated to control the rolling effect. Advantages: can be compatible with each version, the effect of good controllability. Disadvantages: The development of high requirements for producers.

Plug-in implementation.

Parallax-scrolling, for example.

What’s the difference between a double colon and a single colon in ::before and :after? Explain what these two pseudo-elements do

The single colon (:) is used for CSS3 pseudo-classes, and the double colon (::) is used for CSS3 pseudo-elements.
::before is a pseudo-element defined in the presence of a child element before the body content of the element. It doesn’t exist in the DOM, it exists only in the page.

The pseudo-elements :before and :after are new to CSS2.1. At first, the pseudo-element prefix used a single colon syntax, but as the Web evolved, the CSS3 specification changed the pseudo-element syntax to use double colons, becoming ::before, ::after.

How to make Chrome support text smaller than 12px?

p { font-size: 10px; - its - transform: scale (0.8); // 0.8 is the scale}Copy the code

To make the font on the page clear and thin how do YOU do that with CSS?

When used, antialiased, greyscale smoothing does not work on Windows, but it does on IOS devices.

If you need to write animation manually, what is the minimum time interval you think, and why?

The default frequency of most monitors is 60Hz, that is, 60 refresh times per second, so the minimum theoretical interval is: 1/60 * 1000ms = 16.7ms.

I have a height adaptive div with two divs, one 100px high. How do I make the other fill the remaining height?

The outer div uses position: relative;
Height requirements for adaptive divs use position: Absolute; top: 100px; bottom: 0; left: 0

PNG, JPG, GIF these picture formats explain, respectively when to use. Have you heard about WebP?

PNG (Portable Network Graphics) is a lossless data compression bitmap file format.

Advantages are: high compression ratio, good color. It works in most places.

JPG is a distortion compression method used for photos. It is a destructive compression that does a good job of smoothing changes in tone and color. On the WWW, the format used to store and transfer photos.
GIF is a bitmap file format that recreates true-color images in 8-bit colors. You can animate it.
Webp is an image format introduced by Google in 2010 that is only two-thirds as compressed as JPG and 45% smaller than PNG. Disadvantages are longer compression time, poor compatibility, currently supported by Google and Opera.

What is the difference between writing the style tag after the body and before it?

The page loads from top to bottom, of course, loading the style first.

After the body tag, because the browser parses the HTML document line by line, parsing to the style sheet written at the end (either inline or in the style tag) causes the browser to stop rendering, wait to load and re-render after parsing the style sheet. In IE on Windows, you can get FOUC (page flicker caused by style failure)

Describe CSS Sprites

Include all images involved in a page into a large image, and then use the combination of BACKground-image, background-repeat and background-position of CSS to locate the background.

Using CSS Sprites can well reduce the HTTP request of the web page, thus greatly improving the performance of the page; CSS Sprites can reduce the number of bytes in an image.

CSS for left side width adaptive, right side fixed width?

1, the standard browser method

Of course, the W3C standard, the no-fuss standard, has long provided a standard way to make this kind of adaptive width.

Set container to display: table and specify a width of 100%.
Then set main + sidebar to display: table-cell;
You then specify only one width for sidebar, and the width of main becomes adaptive.

There is very little code and no extra tags. However, this method does not work in IE7 and below.

.container {
    display: table;
    width: 100%;
}
.main {
    display: table-cell;
}
.sidebar {
    display: table-cell;
    width: 300px;
}Copy the code

2. Fixed region floating, adaptive region does not set width but set margin

.container {
    overflow: hidden;
    *zoom: 1;
}
.sidebar {
    float: right;
    width: 300px;
    background: #333;
}
.main {
    margin-right: 320px;
    background: #666;
}
.footer {
    margin-top: 20px;
    background: #ccc;
}Copy the code

Sidebar floats it and sets a width; Main does not set the width.

Be aware that div tags must be used in HTML, and don’t try to use p tags to do that. Because div has a default attribute, if the width is not set, it will automatically fill the width of its parent tag. Here main is an example.

Of course, we can’t let it fill up. If it fills up, it won’t be on the same line as sidebar. Let’s give it a margin. Since sidebar is on the right, we set the margin-right value of main to be a little larger than the width of sidebar — to distinguish between their ranges, in this case 320.

Assuming that main’s default width is 100%, it has set margin and its width is 100%-320. At this point, Main realizes that its width can fit sidebar on the same line, so it comes up. The width is 100% relative to the parent tag. If we change the width of the parent tag, the width of main will change — for example, if we make the browser window smaller, the width of the container will decrease, and the width of main will decrease. But its actual width of 100%-320 will never change.

This method seems perfect, as long as we remember to clear the float (I used the simplest method here), the footer won’t be misplaced. And no matter which main or sidebar is longer, it will not affect the layout.

But this method has a very popular limitation — sidebar must come before main in HTML! But I need sidebar after Main! Because my main content is the main content of the page, I don’t want the main content to come after the secondary content. But if sidebar comes after Main, everything above will go up in smoke.

3. Fixed area uses positioning, adaptive area does not set width, but set margin

.container {
    position: relative;
}
.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    background: #333;
}
.main {
    margin-right: 320px;
    background: #666;
}Copy the code

Why is footer still there? Why doesn’t it go down automatically? Footer says – I don’t give way to absolutists! In fact, this has nothing to do with Footer, but because Container ignores sidebar. No matter how long you grow, I still don’t feel it. It seems that this positioning only serves sidebar itself, but it does nothing for its brothers.

4, Left float, right overflow: hidden;

*{ margin:0; padding: 0; } html,body{ height: 100%; } #left {width: 300px; height: 100%; background-color: #ccc; float: left; } #right { height: 100%; overflow: hidden; background-color: #eee; }Copy the code

The second method I use is to create a new BFC (block-level formatting context) to prevent text wrapping.

A BFC is a relatively independent layout environment where the layout of the internal elements is not affected by the layout of the external elements. It can be created in any of the following ways:

The value of float is not None
The value of position cannot be static or relative
Display has the value table-cell, table-caption, inline-block, flex, or one of the overflow values in inline-flex is not visible

The BFC is described in the W3C as follows: In the BFC, the left outer border of each box is next to the left border of the containing block (or, in the case of right-to-left formatting, the right border is next to the left border). This is true even in a float (although the border of an containing block shrinks because of the float), unless a new BFC is created inside the containing block. This way, when we create a separate BFC for the right element, it will not be attached to the left border of the containing block, but to the right border of the left element.

Q: How does floating work and how does it affect you and how do you deal with it?

How it works: Floating elements are detached from the document flow and do not take up space. The floating element touches the border that contains it or stays in the border of the floating element.

impact

Floating causes the parent element to be unable to be stretched, affecting elements of the same class as the parent element.
Non-floating elements at the level of the floating element move below it if they are block-level elements, and inline elements within the block-level elements surround the floating element; Inline elements surround the floating element.
Floating elements at the same level as the element, for floating elements in the same direction (sibling), two elements will follow the floating element encountered; Floating elements in different directions will float in different directions if the width is sufficient, and will result in a line break (depending on the HTML writing order, the following line will float to the next line).
Floating elements are treated as block elements.
A floating element is ignored for elements other than its parent if it is a non-floating element, or if it is a floating element, it is equivalent to a floating element of the same class.
The common methods of clearing float are using empty tags, overflow, false elements and so on.

When using floating-based CSS frameworks, there is a way to clean them up. I am not used to floating layouts.

Use of CSS Grid layouts

5 minutes to learn CSS Grid layout

What is the difference between REM, EM, PX, VH and VW?

First, the characteristics of REM

The size of REM is based onhtmlThe font size in the root directory is calculated.
When we change the font size in the root directory, the following fonts change.
Rem can set not only the font size, but also the element width and height properties.
Rem is a relative unit (root em) added to CSS3. This unit is different from EM in that when rem is used to set the font size for elements, it is still the relative size, but only relative to the root HTML element.

This unit combines the best of both relative and absolute size, allowing you to scale all font sizes by changing only the root element, while avoiding the cascading effect of font sizes being compounded layer by layer. Rem is now supported by all browsers except IE8 and earlier. For browsers that don’t support it, the solution is simply to write an additional declaration of absolute units. These browsers ignore the font size set with REM.

Two, PX characteristics

Px Pixel. A unit of relative length. Pixel PX is relative to the screen resolution of the monitor.

Third, EM features

The em value is not fixed;
Em inherits the font size of the parent element.
Em is a unit of relative length. Font size relative to the text in the current object. If the current font size for inline text has not been manually set, it is relative to the browser’s default font size.
The default font height for any browser is 16px.

All untuned browsers generally fit: 1em = 16px. 12px = 0.75em, 10px = 0.625em. To simplify font size conversion, declare Fontsize = 62.5% in the CSS body selector, This changes the em value to 16px*62.5% = 10px, so 12px = 1.2em and 10px = 1em, which means just divide your original px value by 10 and replace it with em.

Iv. Vh and VW

viewport

On the desktop, the browser’s viewable area;
On mobile, it involves 3 viewports: Layout Viewport, Visual Viewport and Ideal Viewport.
Viewport unit of the “viewport”, desktop refers to the browser viewport area; Mobile refers to the Layout Viewport in Viewport.

Vh/vw and %

Unit: Explanation

Vw: 1vw = 1% of the viewport width
Vh: 1vh = 1% of viewport height
Vmin: Choose the smallest of vw and vH
Vmax: Pick the largest of vw and vH

For example, if the browser viewport size is 370px, 1vw = 370px * 1% = 6.5px (the browser will round down 7)

Vh/vw is different from %

Unit: Explanation

% : the ancestor element of the element
Vh/VW: Size of viewport

However, since VW and VH are cSS3 only supported length units, they are not valid in browsers that do not support CSS3.

What is graceful degradation and progressive enhancement?

Progressive enhancement: Build the page for the lower version browser to ensure the most basic functions, and then improve the effect, interaction and additional functions for the advanced browser to achieve a better user experience.
Degrade Graceful graceful Degradation: Build full functionality from the start, and then make it compatible with older browsers.

The difference between

Graceful downgrading starts with a complex status quo and tries to reduce the supply of user experience;
Progressive enhancement starts with a very basic, working version and expands to meet the needs of future environments.
Downgrading (functional decay) means looking backwards; Incremental enhancement means looking forward while keeping its roots in a safe zone.

The last

HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + data structures and Algorithms + Git

If you think this article is good, remember to give a STAR, your star is my motivation to keep updating! .

Front-end hardcore interview topic CSS 55 questions

preface

CSS

The last

Related Posts

On-demand loading practices for React-Router4 (based on create-React-app and Bundle components)

Node middle Layer practice (5) — Express-middle layer logic processing

Simple JavaScript functional programming