After the last HTML article, see the small partner message said that look forward to the back of the finishing CSS and JS article, tool person xiaobian sorting out the knowledge point about the CSS part. This article as the overall planning of CSS knowledge points, including most of the current interview common content, including some easy to step thunder knowledge points. The article length is long, it is recommended to collect slowly fine.

The conceptual content of the article is also quite a lot, xiaobian as always made a dividing line, good memory, please ignore.

1.🤨 standard CSS box model and its differences with the lower version of IE box model?

Width = Content + border + padding + margin

Width = width (content + border + padding) + margin

Photo display:

The height and width of the standard box model are the width and height of the content, while the width and height of the IE box model include the content+padding+border section.

2. Several ways to solve the bugs in IE6

  • byfloatCause bilateral distance problems usingdisplayTo solve;
  • byfloatCause 3 pixel problems usingdisplay: inline -3px;
  • Use the correct writing orderlink visited hover activeTo solve hyperlinkshoverClick failure problem;
  • forIE 的z-indexProblem by adding to the parent elementposition: relativeTo solve;
  • use! importantTo solveMin-heightMinimum height problem;
  • useiframeTo solveselectinIE6Coverage problem under;
  • useover: hidden.Zoom: 0.08.line-height: 1pxFixed the problem of defining the container width around 1px;

🍀 Note: IE6 is not supported! The important issue is supported for individual classes. Such as:

.content { color: pink ! importent }; .content { color: orange }; // Here, IE6 and above, FF, Google, etc will be displayed in pinkCopy the code

However, when a style has more than one of the same properties inside. Such as:

.content { color: pink ! importent; color: orange }; // In IE7 and above, FF, Google will display pink, while IE6 will display orange.Copy the code

3. What are the CSS selectors? Which attributes can be inherited?

Common selectors are:

Id selector (#content), class selector (.content), tag selector (div, p, span, etc.), adjacent selector (h1+p), subselector (ul>li), descendant selector (Li a), A [rel = “external”]); a[rel = “external”];

Inheritable style properties: font-size, font-family, color, ul, li, dl, dd, dt;

Non-inheritable style properties: border, padding, margin, width, height;

4. How to calculate the CSS priority algorithm?

  • Considering the proximity principle, the style definition is based on the nearest one in the case of weight
  • The style is loaded according to the final positioning

Priority ordering:

Inline style sheet (inside the tag) > Embedded style sheet (in the current file) > External style sheet (in the external file)

! important > # > . > tag

🍀 Note:! Important has a higher priority than inline

5. What pseudo-classes are added in CSS3?

  • :root Selects the root element of the document, which is equivalent to the HTML element

  • :empty selects elements that have no children

  • :target Selects the target element that is currently active

  • :not(selector) Selects the element that is unexpected except the selector element

  • :enabled Selects the available form elements

  • :disabled Specifies the form element to be disabled

  • :checked Selects the selected form element

  • :nth-child(n) matches the specified child elements under the parent element, and sorts all the child elements by the NTH order

  • Nth-last-child (n) matches the specified child elements under the parent element, and sorts all the children by the NTH order from back to front

  • :nth-child(odd)

  • :nth-child(even)

  • :nth-child(3n+1)

  • :first-child

  • :last-child

  • :only-child

  • :nth-of-type(n) Matches the specified child elements under the parent element and sorts the NTH child elements of the same class

  • :nth-last-of-type(n) Matches the specified child elements under the parent element and sorts the NTH child elements of the same type 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 the part of the element selected by the user (pseudo-element)

  • :first-line Selects the first line in the element (pseudo-element)

  • :first-letter Selects the first character in the element (pseudo-element)

  • :after adds content after the element (pseudo-element)

  • :before adds content before the element (pseudo-element)

6. How to center a div? How to center a floating element? How do I center an absolutely positioned DIV?

Horizontal center

CSS: * {margin: 0; padding: 0; } .content { margin: 0 auto; width: 100px; height: 100px; background: pink; } // Mode 2: Use positioning + center CSS: * {margin: 0; padding: 0; } .content { width: 100px; height: 100px; background: pink; position: absolute; left: 50%; transform: translateX(-50%); } html: <div class="content"></div>Copy the code

Vertical center

CSS: * {margin: 0; padding: 0; } .content { width: 600px; height: 600px; border: 1px solid #ccc; } .content-one { width: 100px; height: 100px; background: pink; position: relative; // The parent element is not positioned, and the child element is directly positioned with the relative position top: 50%; transform: translateY(-50%); } HTML: <div class="content"> <div class="content-one"></div> padding: 0; } .content { width: 600px; height: 600px; border: 1px solid #ccc; position: relative; }.content-one {width: 100px;}.content-one {width: 100px; height: 100px; background: pink; position: absolute; top: 50%; transform: translateY(-50%); } html: <div class="content"> <div class="content-one"></div> </div>Copy the code

How do I center an absolutely positioned DIV

css: * {margin: 0; padding: 0; } .content { margin: 0 auto; position: absolute; width: 1500px; background: pink; top: 0; left: 0; bottom: 0; right: 0; } html: <div class="content"></div>Copy the code

7. What are the values of display? What is their role?

value role
none Elements will not be displayed after use
grid Define a container property for the grid layout
flex Define an elastic layout
block When used, the element is displayed as a block-level element with a newline before and after the element
inline Display Default value. After use, the primary color changes to inline element display, and there is no newline before and after
list-item Use the post element to display as a list
run-in When used, elements are displayed as block-level elements or inline elements, depending on the context
table When used, it will be displayed as a block-level table (similar<table>) with a newline before and after
inline-table After use, the element is displayed as an inline table (similar<table>) without a newline before or after
table-row-group Elements are displayed as groups of one or more rows (similar<tbody>)
table-hewder-group Elements are represented as groups of one or more rows (similar<thead>)
table-footer-group Elements are displayed as groups of one or more rows (similar<tfoot>)
table-row The element is displayed as a table row (similar<tr>)
table-column-group Elements are displayed as groups of one or more columns (similar<colgroup>)
table-column The element is displayed as a column of cells (similar<col>)
table-cell The element is displayed as a table cell (similar< td > and < th >)
table-caption The element is displayed as a table title (similar<caption>)
inherit Specifies that the value of the display attribute should be integrated from the parent element

The common ones are block, inline-block, None, table, and line.

8. Position values relative and absolute?

First of all, when you use position, you should remember that the rule is that the child never has the parent.

Relative: Generates relative positioning of elements, the origin of which is the element’s own position;

Absolute: Generates an element that is absolutely positioned from the upper left corner of the parent element whose position is set to Absolute or relative.

Fixed (not supported in old IE) : Elements that generate absolute positioning, positioning relative to the browser window.

Static: The default value. Without positioning, the element appears in the normal flow (ignoring the top, bottom, left, right, and Z-index declarations).

Inherit: specifies the value of the position attribute inherited from the parent element.

Update a property

Sticky: (new element, compatibility may not be so good), you can set position:sticky at the same time to one (top,bottom,right,left) can be.

Note:

  • usestickyYou must specify one of the values of top, bottom, left, and right. otherwise, the position will only be relative.
  • stickyIt works only in its parent element, and the parent is guaranteed to be higher than the height of the parent elementstickyThe height of;
  • The parent element cannotoverflow:hiddenoroverflow:autoSuch attributes.

9. What are the new features of CSS3?

The new CSS features are as follows:

  • The selector;
  • Rounded corners(border - raduis);
  • Multi-column layouts(multi - column layout);
  • shadow(shadow)And reflection(reflect);
  • Text effects(text - shadow);
  • Text rendering(text decoration);
  • Linear gradient(gradient);
  • rotating(rotate)/zoom(scale)/ tilt(skew)/ mobile(translate);
  • Media queries(@ media);
  • RGBAAnd transparency;
  • @font-faceProperties;
  • Multi-background map;
  • Box size;
  • Voice;

Roughly think of so many, there are missing can be pointed out in the message, xiaobian see will add.

10. How does it work to create a triangle with pure CSS?

Method 1: Hide the top, left and right edges and set the color to (transparent)

css: * {margin: 0; padding: 0; } .content { width: 0; height: 0; margin: 0 auto; border-width: 20px; border-style: solid; border-color: transparent transparent pink transparent; } HTML: <div class="content"></div>Copy the code

Method two: what use is equipartition principle

Implementation steps: 1. First, ensure that the element is a block-level element; 2. Set the border of the element; 3. Use transparent color for borders that do not need to be displayed.

css: * {margin: 0; padding: 0; } .content { width:0; height:0; margin:0 auto; border:50px solid transparent; border-top: 50px solid pink; } html: <div class="content"></div>Copy the code

11.🤨 What is responsive design? What is the rationale behind responsive design? How to compatible with lower versions of IE?

Responsive Web design is the ability for a website to be compatible with multiple terminals, rather than making a specific version for each terminal.

About the principle: the basic principle is through the media query (@media) query detection of different device screen size to do processing.

About compatibility: The page header must have a viewport declared by mate.

<meta name=" 'viewport' "content=" "width=device-width," Initial scale="1." maximum-scale="1, User-Scalable =no ""/> <meta name=" 'viewport'" content=" "width=device-width," Initial scale="1." maximum-scale="1, User-Scalable =no" "/>Copy the code

12. Why initialize CSS styles?

Because of browser compatibility issues, different browsers have different default values for labels. If the CSS is not initialized for the browser, the same page will be displayed differently in different browsers.

13. Why do floats occur and when do you need to clear them? How to clear the float?

In non-Ie browsers, if the container height is not set and the child elements float, the container height cannot be stretched by the content. At this point, content spills out of the container and affects the layout. This phenomenon is called float (overflow).

Principle:

  • Floating elements detach from the document flow and do not occupy space (causing “height collapse” phenomenon);
  • A floating element touches a border that contains it or another floating element.

A floating element stops when it touches the border that contains it or the border that contains the floating element. Since the float element is not in the document flow, the block-level box of the document flow will behave as if the float box does not exist. Floating elements float above the block-level box of the document flow.

Problems with floating:

  • The height of the parent element will be unstretchable, affecting all elements at the parent level
  • Non-floating elements (inline elements) that are siblings of the floating element follow
  • If the floating element is not the first element, then the elements before that element must also float, otherwise the display structure of the page will be affected

Clearing method:

  • The parent box defines the height(height);
  • Add one after the last floating elementdivEmpty tag and add styleclear: both;
  • Add styles to the parent tag that contains the floating elementoverflowforhidden/both;
  • The parentdivdefinezoom;

14. What are the ways to optimize the CSS and improve its performance?

  • multiplecssCan merge and minimizehttprequest
  • When the attribute value is 0, the unit is not added
  • willcssThe file is placed at the top of the page
  • Avoid descendant selectors, excessive constraints, and chained selectors
  • Use compact syntax
  • Avoid unnecessary repetition
  • Use semantic naming for easy maintenance
  • Use as little as possible! impotrantYou can select other selectors
  • Simplify rules and combine duplicate rules from different classes as much as possible
  • Follow the box model rules

15. What is the CSS preprocessor/post-processor? Why use them?

Preprocessors such as less, sass, and stylus, which precompile sass or less, increase the reuse of CSS code, as well as hierarchies, mixins, variables, loops, functions, and so on, making it easy to write and develop UI components.

Post-processor, such as postCss, is often seen as treating CSS according to the CSS specification in a completed stylesheet to make it more efficient. By far the most common approach is to add browser private prefixes to CSS properties to address cross-browser compatibility issues.

The CSS preprocessor adds some programming features to the CSS. Without considering the compatibility of browsers, we can use variables, simple logic programs, functions and other basic performance in the programming language in the CSS, which can make our CSS more concise, increase adaptability, readability, maintainability and so on.

Other CSS preprocessor languages: Sass (Scss), Less, Stylus, Turbine, Swithch CSS, CSS Cacheer, DT CSS.

Reasons for use:

  • The structure is clear and easy to expand
  • It is convenient to mask differences in browser private syntax
  • Multiple inheritance can be easily implemented
  • Perfect compatibilityCSSCode that can be applied to old projects

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

(1), colon (:) is used for CSS3 pseudo-classes, and double colon (::) is used for CSS3 pseudo-elements.

Before is a pseudo-element defined before the body of the element in the presence of a child element. It doesn’t exist in the DOM, it only exists in the page.

🍀 note: :before and :after are new in CSS2.1. Originally, pseudo-elements were prefixed using a single colon syntax, but as the Web evolved, in the CSS3 specification, the syntax of pseudo-elements was modified to use double colons, becoming ::before ::after.

17. Make the fonts on the page sharper and thinner.

E. Webkit-font-smoothing: smoothing doesn’t work on Windows, but it does on IOS devices.

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

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

19. What is the difference between the opacity effect of rgba() and Opacity?

Opacity: Opacity on an element and all contents (including text) within the element;

Rgba () only works on an element’s own color or its background color; child elements do not inherit the transparency effect;

20. What does the CSS property content do?

The Content attribute is applied specifically to before/ After pseudo-elements to insert additional content or styles.

21.🧐 Please explain the Flexbox (elastic box layout model) of CSS3 and the applicable scenarios?

Concept: Flex is short for Flexible Box, meaning “Flexible layout”, used to provide maximum flexibility for box-shaped models. Elements with Flex layouts are called Flex Containers, or “containers” for short. All of its child elements automatically become members of the container and are called Flex items, or “projects” for short.

Application scenario: Any container can be specified as a Flex layout. Flexbox is used to create layouts that automatically expand and shrink across screens of different sizes.

22. Display :inline-block when will the gap be displayed?

  • When there is space, there will be a gap, you can delete the space to solve;
  • marginWhen it’s positive, you can make itmarginUse negative values;
  • usefont-sizeCan be setfont-size:0,letter-spacing,word-spacingTo solve;

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

(1) PNG-Portable Network Graphics, is a lossless data compression bitmap file format. The advantages are: high compression ratio, good color. You can use it in most places.

(2), JPG is a kind of image used a distortion compression method, is a destructive compression, in tone and color smooth changes do well. On the WWW, a format used to store and transfer photos.

(3) GIF is a bitmap file format, to 8-bit color reproduction of true color image. You can animate it.

(4) advantages of BMP: high quality pictures; Faults: Too large; Application scenario: Windows desktop wallpaper;

(4) WebP is an image format launched by Google in 2010. It is only two-thirds as compressed as JPG and is 45% smaller than PNG. The downside is that it takes longer to compress, and compatibility is poor, currently supported by Google and Opera.

24. What’s the difference between px and EM in CSS styles?

Px does not have the browser font magnification function relative to the display screen resolution.

The em value is not fixed and inherits the parent font size: em = pixel value/parent font size.

25. A highly adaptive div with two divs inside, one is 100px high and the other is expected to fill the remaining height.

.content {height: calc(100%-100px); }

Container {position:relative; } .content { position: absolute; top: 100px; bottom: 0; }

Container {display:flex; container {display:flex; flex-direction:column; } .content { flex:1; }

26. Overflow: How to handle the problem that scroll is not smooth?

Listen for wheel events, and then smooth them out using jquery animate when you scroll a certain distance.

27. What is the difference between transform, animation and animation-duration?

  • Transform: it andwidth,leftAlso, we define a number of static styles for the elements to transform, rotate, scale, shift, and perspective. By combining these features, we can achieve cool static (non-animated) effects.
  • Animation: works on the element itself rather than the style attribute, which is a category of keyframe animation, which itself is used in place of something purely expressivejavascriptCode to achieve animation, can be passedkeyframeExplicitly controls the property value of the current frame.
  • animation-duration: Specifies the time, in seconds or milliseconds, to complete the animation.

28. What is the meaning of “line-height”?

Line-height refers to the height of a line of words, including the word spacing, which is actually the distance from the next baseline to the previous baseline. If a tag does not define a height attribute, its final height is determined by a line-height. If a container has no height set, it is the line-height that opens the container, not the text inside the container. Setting the word-height value to a height value enables vertical centering of a single line of text. Both line-height and height can hold a height. Height triggers HasLayout, while line-height does not.

29. How to write detached style module? Describe the idea.

You can split the CSS into two parts: the common CSS and the service CSS.

Site color schemes, fonts, and interactions are extracted into common CSS. The CSS naming in this section should not be business-specific. The service CSS must have a uniform name and use a common prefix.

30. Should I use odd or even fonts on a web page?

Use “even” fonts on web pages:

Even font sizes are more easily proportioned to other parts of the web design. When using odd font sizes, text paragraphs cannot be aligned. The most commonly used font sizes in Chinese are 12 and 14.

31. 🤥 What is margin overlap? What’s the result of the overlap?

First, margin collapse is margin-collapse. The margins of two adjacent boxes (which may be sibling or ancestral) can be combined to form a single margin. This way of merging margins is called folding, and the resulting margins are called folded margins.

The folding results follow the following calculation principles:

  • When two adjacent outer margins are positive, the folding result is the larger of them;
  • If two adjacent margins are both negative, the result of the fold is a larger value of the absolute value of both.
  • If the margins are one plus one minus, the fold is the sum of the two;

32.display: none; With the visibility: hidden; What’s the difference?

Connection: The values of both of these attributes make the element invisible;

The difference between:

  • In terms of occupying space:display: none;Elements completely disappear from the render tree, rendering without taking up any space;visibility: hidden;Elements will not disappear from the render tree. The renderer element will continue to occupy space, but the content will not be visible.
  • In terms of inheritance:display: none;Because the element disappears from the render tree, the descendant node attribute cannot be displayed by modifying the descendant node attribute.visibility:hidden;Is an inheritance property, the descendant node disappears due to inheritancehidden, by settingvisibility: visible;You can make descendants explicit;
  • In terms of redrawing and rearranging: modifies elements in a regular streamdisplayThis usually results in document rearrangements. Modify thevisibilityProperty will only cause the element to be redrawn

Display: None; Element content; Visibility: hidden element content is read;

33. What are the principles of CSS hack and common hacks?

How it works: Write browser-specific styles to take advantage of different browser support for CSS and parse results.

Common hacks are: attribute hack, selector hack, IE conditional comment.

34. What is the difference between link and @import?

  • link 是HTMLWay,@import 是CSSWay;
  • linkMaximum support for parallel downloads,@importToo much nesting results in serial downloadsFOUC;
  • linkCan be achieved byrel="alternate stylesheet" Specify candidate styles;
  • The browser tolinkSupport earlier than@import , can be used@importHide styles from older browsers;
  • @importReferences to other files in a CSS file must precede style rules;

Overall: link is better than @import.

35. What is FOUC(Flash of Unstyled Content)? How to avoid FOUC?

When using @import to import CSS, will cause some pages in IE strange phenomenon: no style page content display flash, this phenomenon is called “document style temporary failure”, referred to as FOUC.

Cause: When the stylesheet is loaded later than the structural HTML, the page will stop rendering before loading the stylesheet. Wait for the stylesheet to be downloaded and parsed before re-rendering the page, resulting in a brief splash.

Solution: just add a or element between .

36. The display, float, what is the relationship between the position?

  • ifdisplay 为none, thenpositionandfloatElements are not displayed;
  • ifpositionA value ofabsoluteorfixed, the absolute positioning of the element,floatIs calculated asnone.displayAdjust according to the table below;
  • iffloatnotnone, the box is floating,displayAdjust according to the table below;
  • In other casesdisplayAbsolute positioning, float, and root elements all need to be adjusteddisplay;

37. Collapsing collapsing margins

Two or more adjacent margins merge into a single margin, called margin folding. The rules are as follows:

  • Vertical direction of block elements in two or more adjacent ordinary streamsmarginWill be folded;
  • Floating elements orinline-blockElement or an absolute positioning elementmarginIt’s not going to be the same as any other element in the vertical directionmarginFold;
  • An element that creates a block-level formatting context does not occur with its childrenmarginFold;
  • Of the element itselfmargin-bottomandmargin-topIt also folds when it’s next to each other;

38. What are some ways to hide elements?

  • visibility: hidden;This attribute simply hides an element, but the space it occupies is still there;
  • opacity: 0; ``CSS3Attribute, set to 0 to make an element completely transparent;
  • position: absolute;Set a large left value to position the element outside the visible region;
  • display: none;Elements become invisible and no longer take up space in the document;
  • transform: scale(0);Setting the scale of an element to infinitesimal makes the element invisible and its original location preserved.
  • <div hidden="hidden"> HTML5Properties, effects anddisplay:none;Same, but this attribute is used to record the state of an element;
  • height: 0;Set the element height to 0 and remove the border;
  • filter: blur(0); CSS3, the larger the value in parentheses is, the greater the degree of Gaussian blur of the image will be, and the image will disappear to a certain extent(Thank you for your support here);

39. What causes the invisible gap between Li and Li? What’s the solution?

The LI arrangement is affected by the middle whitespace (carriage return/space), etc., because whitespace is also a character, it takes up space by applying the style, creating the interval. The solution:

  • inulusingThe font - size: 0(Not supported by Google); You can useThe letter - space: - 3 px;
  • Set up theFloat: left;

40. How do browsers parse CSS selectors?

The browser parses the CSS from top to bottom and right to left, which improves the efficiency of finding the element that the selector corresponds to (for reasons that you can see for yourself).

41.🤭 How does full-screen scrolling work? What properties of CSS are used?

Full-screen scrolling is a bit like a playround, where the whole set of elements is arranged all the time. Suppose there are 5 full-screen pages that need to be displayed, so the height is 500% and only 100% is displayed. Can also be understood as beyond the hidden part, scrolling display.

Possible CSS: overflow:hidden; transform:translate(100%, 100%); display:none;

❤️ Extension: Can also use full-screen visual scrolling, use background-attachment: fixed; To achieve the full screen effect. (here is another idea proposed by careful friends 🤨)

42. Understanding the browser kernel?

Browser kernel is mainly divided into two parts: rendering engine and JS engine;

  • Rendering engine: responsible for retrieving the content of the page (html.xml, images, etc.), organize information (joincssEtc.), and calculate the display mode of the web page, and then output to the monitor or printer. The kernel of a browser interprets the syntax of a web page differently, and therefore renders it differently. All web browsers, E-mail clients, and other applications that need to edit and display the web require the kernel.
  • JSEngine: parse and executeJavascriptTo achieve the dynamic effect of web pages.

At first there was no clear distinction between the rendering engine and the JS engine. As the JS engine became more and more independent, the kernel tended to just render the engine.

Understanding and understanding of WEB standards and W3C

Requirements for the structure :(standard tags can improve the search engine on the page crawl efficiency, very helpful to SEO)

  • The label should be closed
  • Label lowercase
  • Tags are not allowed to be nested arbitrarily

For CSS and JS:

  • Try to use external chainsCSSStyle sheets andJSThe script. At the same time structure, performance and behavior are divided into three blocks, conforming to the norm. In addition, you need to improve page rendering speed and user experience.
  • Use as few inline styles as possible to keep structure and presentation separate. Of the labelidandclassThe less tags, the faster the loading, the higher the user experience will be. At the same time, the code will be easier to maintain, easy to change.
  • You don’t need to change the content, you can print the version together instead of copying the content, improving the usability of the website.

44. How to manage all the CSS files, JS and images for a heavily visited website?

Answer in terms of manpower, division of labor and synchronization:

  • The early team must confirm the global style, coding pattern;
  • Code style, writing habits to keep consistent;
  • Annotate the style writer, each module should be annotated in time (annotate the key style call place);
  • Annotate the pages for which you are responsible;
  • CSSandJSFolder stored in parallel storage, naming should be unified;
  • JSSub-folder storage, clearly to theJSFunctions subject to English translation;
  • The picture is integrated.pngFormat storage, try to integrate together, convenient future management;

45. Parallax scrolling effect and how to achieve it?

Parallax Scrolling refers to a web page display technology (3D effect) where multi-level elements move to different degrees in the process of web page Scrolling to form a three-dimensional motion effect visually.

Implementation method:

  • CSS3Implementation: The advantages are relatively short development time, good performance and development efficiency. The disadvantage is that it is not compatible with older browsers;
  • JQueryRealization :(by controlling the rolling speed of different layers and calculating the time of each layer) the advantage is that it can be compatible with each version, the effect is controllable, and the disadvantage is that it requires higher requirements for the producer to develop;
  • Plug-in implementation: for example, usingparallax-scrolling, compatibility is very good;

Understanding of BFC (Block formatting context)

The BFC defines how the internal Block Box is laid out. A page is made up of many boxes. The type of the element and the display attribute determine the type of the Box. Different types of boxes participate in different Formatting contexts, so elements inside the boxes are rendered in different ways. In other words, elements inside and outside the BFC don’t interact with each other.

Positioning scheme:

  • The inside of theboxWill be placed one after the other in the vertical direction;
  • boxThe vertical distance is given bymarginDecision, belong to the sameBFCTwo neighbors ofBoxthemarginThere’s overlap;
  • Each elementmargin boxTo the left, with the containing blockborder boxOn the left;
  • BFCDoes not overlap with the float box;
  • BFCIs a separate container on the page. The elements inside the container do not affect the outside elements.
  • To calculateBFCThe float element is also calculated when the height of.

To start the BFC, one of the following conditions is met:

  • The root element changes, i.ehtml;
  • floatThe value of thenone(default);
  • overflowThe value of thevisible(default);
  • displayThe value ofinline-block.tabke-cell.table-caption;
  • positionThe value ofabsoluteorfixed;

47. Is the percentage of the element’s portrait set relative to the container’s height?

In general, percentage units of child elements are based on the parent element. Margin and padding are exceptions. The height of the element is the height relative to the container, but the margin and padding of the element are the width relative to the container.

48. How to design a full screen ‘pinzi’ layout?

There are several ways to do this, but the easiest way is to set the top div to 100% width and the bottom two to 50% width and keep them on the same line using float or inline (you can tweak the style yourself). As follows:

css: 
.content {
    width: 50%;
    height: 150px;
    margin: 0 auto;
}
.top {
    width: 40%;
    height: 50px;
    background-color: pink;
    margin-bottom: 50px;
    margin-left: 30%;
}
.left {
    width: 45%;
    height: 50px;
    background-color: pink;
    float: left;
}
.right {
    width: 45%;
    height: 50px;
    background-color: pink;
    float: right;
}

html: 
<div class="content">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>>
Copy the code

49. What browser compatibilities do you often encounter? Why? What’s the solution? What’s the common hack?

(1) Problem: pNG24 bit image background appears in Ie browser. Solution: make it pNG8;

(2) Problem: The browser default margin and padding are different. *{margin: 0; Padding: 0; };

(3) Problem: In IE, you can use the method of obtaining general attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes, while in Firefox, you can only use getAttribute() to obtain custom attributes. Solution: getAttribute() is used to obtain custom attributes.

(4) Problem: IE, the event object has x,y attributes, but no pageX,pageY attributes, while Firefox, the event object has pageX,pageY attributes, but no x,y attributes. Solution: Use mX(mX = event.x? event.x : event.pageX;) Instead of IE under event.x or Firefox under event.pageX.

50. What are the common properties of box-sizing? What do they do?

  • box-sizing: content-box;// The default standard(W3C)Box model element effect;
  • box-sizing: border-box;// Trigger weird(IE)The effect of the box model elements;
  • box-sizing: inherit;// Inherit from the parent elementbox-sizingThe value of the attribute;

51. 🤤 Should I use odd or even fonts on my web pages?

In general, even fonts should be used on web pages. The reason:

  • Even numbers are easier to sumwebOther parts of the design constitute a proportional relationship;
  • Text paragraphs cannot be aligned when radix font size is used
  • The most commonly used numbers are 12 and 14.

52. Which scenarios are margin and padding suitable for?

(1) When it is necessary to add a margin outside the border and the margin does not need a background (color), or the margin between two boxes connected above and below needs to cancel each other, you can use margin;

(2) If you need to add a blank space inside the border and the blank space needs a background (color), or the blank space between two boxes connected above and below, you can use padding if you want to equal the sum of the two.

53. What are the differences and functions of pseudo-elements and pseudo-classes?

First, the effect of a pseudo-class can be achieved by adding an actual class, while the effect of a pseudo-element can be achieved by adding an actual element. So the essential difference between them is whether abstraction creates new elements.

Pseudo-elements/pseudo-objects: do not exist in the DOM document, are virtual elements, and create new elements. Represents a child element of an element that logically exists but does not actually exist in the document tree.

p::first-child {color: red}
Copy the code

Pseudo-class: A “ghost” class that exists logically in a DOM document but does not need to be identified in the document tree.

a:hover {color: #FF00FF}
p:first-child {color: red}
Copy the code

🍀 note:

  • Pseudo-classes can only use “:”;
  • Pseudo-elements can use either “:” or “::”;
  • Pseudo-classes can be multiple because they are like additive classes, whereas pseudo-elements can only appear once in a selector, and only at the end.

What’s the difference between double colons and single colons in ::before and :after?

  • inCSSThe pseudo-class is always expressed by:, as shown in:hover.:activeAnd so on;
  • Pseudo elements in theCSS1When the syntax is:, as in :before 和:after;
  • Later, inCSS3In the revision, pseudo element with: :Said, such as::before 和 ::afterTo distinguish pseudo-elements from pseudo-classes;
  • Because the earlier versionIEThe dual colons are not compatible with each other, so developers continue to use them for compatibility between browsers:afterThis old syntax represents pseudo-elements;

Before is a new syntax for writing pseudo-elements in CSS3; :after is an old syntax that exists in CSS1 and is compatible with IE.

55. How to get Chrome to support text less than 12px?

. The shrink {- its - transform: scale (0.8); -o-transform: scale(1); display: inilne-block; }Copy the code

56. Setting multiple elements on the same row? How many ways can you clear a float?

Methods to set multiple elements to the same row: use float or inline-block;

How to clear the float:

  • Add new elements, applyThe clear: both;
  • The parentdivdefineOverflow: hidden;
  • using: afterand: beforeTo insert two blocks inside an element, thus clearing the float.
.clear { zoom:1; }
.clear:after { 
  content:" "; 
  clear:both;
  display:block;
  height:0;
  overflow:hidden;
  visibility:hidden;
}
Copy the code

57. CSS hack concept and brief introduction?

Concept: A CSS hack is an attempt to apply different CSS styles by adding specific symbols to the CSS style, allowing different browsers to recognize different symbols (there is a standard for what browsers recognize, and a CSS hack lets you remember this standard).

(1) Picture gap

Insert an image into a div and the image will expand the bottom of the div by 3px:

  • hack1Will:<div>with<img>On the same line;
  • hack2:<img>addDisplay: block,;

Image gap in dt Li:

  • hack1: 给<img>addDisplay: block,;

(2) Default height. In IE6 versions below, some block elements have a default height (below 18px) :

  • hack1: Adds to the element:The font - size: 0;
  • hack2Statement:Overflow: hidden;

Inconsistent form row heights:

  • hack1: Add a declaration to the form:Float: left; height: ; border: 0;

Mouse pointer:

  • hackTo unify the mouse pointer of an element into a hand:Cursor: pointer;When a in li is converted to a block element, giveaSet up thefloat.IEThere will be steps inside;
  • hack1:aaddDisplay: inline - block;
  • hack2:liaddfloat: left;

58. What are the differences between CSS2.0 and CSS3.0?

CSS3 enhances the functionality of CSS2, adding new attributes and new tags, and removing some redundant tags, reducing the amount of code in terms of layout. Previously complex layouts can now be solved with a single property (such as columns, etc.). More effects have been added to display effects (animation, shadows, rounded corners, etc.), and improvements have been made to the box model and the list module. However, CSS3 has some disadvantages in terms of compatibility: it only supports higher versions of browsers.

59. Block-level elements, inline elements, and empty element definitions?

  • Inline elements: all other elements are on the same line. The height, line height, margins and margins are unchangeable. The width of the text image is unchangeable.
  • Block-level elements: always start on a new line, height, line height, margins and margins are controlled, and can accommodate introverted and other elements;
  • Empty elementsIn:HTMLElement with no contentHTMLAn element is called an empty element. Empty elements are closed in the start tag.<br>Empty elements with no closing tag.

60. How do I solve browser-specific styling issues?

Recommended solution: Forward compatibility is recommended, but backward compatibility is not considered. Consider compatible browsers based on the major browsers in your product’s user base.

Browsers can be divided into two categories: legacy browsers and modern browsers. Develop two versions of the site based on this category, and then define which browsers are legacy versions.

When users are using legacy versions, the notification board informs them to use modern browsers, get more features, have a better user experience, etc. (upgrade). When the user’s browser is not compatible, prompt the user which version of the browser is required to use the site (download the compatible browser).

🍀 Note: before the project starts, it is necessary to confirm the minimum version of compatibility to support, so as to design a corresponding compatibility solution.

61. 🥴 How does the browser determine if an element matches a CSS selector?

The browser produces a set first, which is usually generated by the index of the last part (or the set of all elements if there is no index). And then it matches up, and if it doesn’t match the previous part, it removes the element from the set, and then until it’s all matched by this selector, the element that’s still in the set matches this selector.

62. Describe the function of the CSS reset.

Reset the browser’s CSS default properties. If browsers have different types and styles, Reset them to make them uniform.

63. What are CSS sprites? How to use it?

CSS Sprite, to combine a bunch of small images into a large image (PNG), using CSS “background-image”, “background-repeat”, The combination of “background-position” to carry out background positioning background-position can use numbers to accurately locate the position of the background image, reducing the number of server requests for images.

64. What are the pros and cons of CSS Sprites?

Advantages:

  • usingCSS SpritesThis is also a great way to reduce HTTP requests to a web page, thus greatly improving the performance of the pageCSS SpritesThe greatest advantage;
  • CSS SpritesIt can reduce the number of bytes in the picture. After many comparisons, the number of bytes merging 3 images into 1 image is always less than the sum of the three images.

Disadvantages:

  • When merging pictures, it is necessary to combine multiple pictures into one picture in an orderly and reasonable way, and to leave enough space to prevent unnecessary background appearing in the plate. In the widescreen and high resolution adaptive page, if the background is not wide enough, it is easy to break the background;
  • CSSSpritesAt the time of development is relatively a bit of trouble, need to usephotoshopOr other tools to measure the exact position of each background cell.
  • Maintenance:CSS SpritesWhen maintenance is more troublesome, the page background has a little change, it is necessary to change the merged picture, do not change the place as far as possible, so as to avoid more changesCSSIf you can’t fit it in the original place, you can only (preferably) add the image below, so that the number of bytes of the image is increased, and you need to change itCSS.

Expansion: The sprites used for web development (such as font library) are generally used directly in the cloud, rather than using this local icon library, such as Ali.

65. What are the differences and applications between absolute positioning and floating?

Absolute positioning: Absolute positioning is out of the standard document stream, and its reference point is the upper-left or upper-right corner of the document. If any parent element has a location attribute, you can set your own location reference element by referring to the “child must parent” law. It is very flexible in the web production process. When creating cover effects, absolute positioning is used a lot.

Float: Float away from the standard document flow, usually used to create side-by-side elements, usually for large layouts, or unordered lists such as images. You can use the clear:both attribute to make the other elements in the standard stream sequence after that.

66. How to solve IE6’s double margins when float and margin are used together?

When the floating direction and margin are in the same direction, IE6 will generate double margin on the first element in this direction.

The solution:

(1), change the direction of margin, float:left; margin-right:20px; Float left, margin right; (2).content{_margin-left: half margin; }; (3) use display:inline; No more floating (lol).

67. What is the separation of content and presentation?

First of all, for HTML, CSS and javascript, it can be understood as:

The website is understood as a person, HTML is the “skeleton” of the human body, CSS is the “decoration” of the human body, such as clothes, ornaments, etc.; Javascript, on the other hand, is the equivalent of human ‘actions’, so it’s easy to understand.

For the separation of content and performance, small editor’s understanding is: try not to insert inline HTML style, CSS as far as possible into an independent module, to achieve THE SEPARATION of HTML ‘skeleton’ and style, conducive to search engines at the same time, but also convenient for late maintenance.

68. How can CSS determine different resolutions to display different width layouts to achieve adaptive width?

  • Using percentage layouts, write widths in percentages,marign,padding;
  • useremLet’s do units. Let’s do units appropriatelyJs ` ` to HTMLThe font size of the root element varies proportionally with the width of the browser;
  • Using media queries allows browsers of different widths to use different style sheets.

69. Why can REM be scaled and on what basis? What are the advantages and disadvantages?

Rem ‘ ‘is based on the font size of the HTML, such as 2rem, and when the font size of the HTML is 16px, rem is 32px. You can write javascript that makes the font size of the HTML root element proportional to the width of the browser, causing the page to scale equally.

Advantages:

In contrast to the benefits of EM, gradual increases or decreases in font size do not occur because the font size of the root element is always integrated; Rem units can be applied not only to font sizes but also to other sizes, such as height, so that pages can be adapted to different screen sizes.

🍀 Note: REM is generally only used for mobile terminals.

70. Five common Firefox and IE script compatibility issues.

  • Binding to monitor:IEisattatchEvent() 、 firefoxisaddEventListener();
  • Calculate the style:IEiscurrentStyle,firefoxisgetComputedSyle;
  • Scroll event:IEisMouseWheel,firefoxisonmousewheel;
  • The form elements:IEisDocument. The forms (formname ")" ， firefoxisdocument.forms["formname"];
  • The event object:IEiswindow.eventProperties,firefoxYou must inject arguments to the event handlerevent;

🥳 How to calculate the priority of the CSS?

To consolidate:

classification priority
Element selector 1
The class selector 10
The id selector 100
The element tag 1000

(1). Styles declared important have the highest priority and will be evaluated again if there are conflicts.

(2) When the priority is the same, the last style shall prevail;

(3) Inherited styles have the lowest priority.

72. Review the value of position and what it does?

  • static(default) : arrange according to normal document flow;
  • relative(relative positioning) : refers to its own static position without leaving the document flowtop.bottom.left.rightPositioning;
  • absolute(Absolute positioning) : the nearest reference distance is notstaticThe parent element of thetop.bottom.left.rightPositioning;
  • fixed(Fixed positioning) : The fixed reference is the visible window.

73. What kinds of advanced layouts are there?

  • False contour columns: Use a background image to lay the Y-axis on the parent element of the column to create the illusion of contour columns;
  • To the containerdivUse a separate background color (fixed layout) (fluid layout) : Use the maximum height in the element to support the height of other containers;
  • Create a two-column contour layout with a border: useborder-leftTo do that, use two columns;
  • Use ispaddingAnd negativemarginHedges implement multi-column layout methods: Use top and bottom in all columnspaddingMinus up and downmargin, and add a container outside all columns, setOverflow: hiddenAnd cut out the background of the overflow.
  • Use borders and position to simulate columns of equal height: but cannot be used in multiple columns;
  • Mimic table layout such as high column effect: poor compatibility inie6-7Cannot run normally in;

74. :link, :visited, :hover, :active

L-v-h-a, L (link)ov(visited)e H (hover) A (active)te, that is, like and hate two words to summarize.

75. What are some common browser compatibilities? How to solve it?

  • Browser defaultmarginandpaddingDifferent;
  • IE6Bilateral is apart from thebug;
  • inIE6-7The height of the element in is higher than the height you set. The reason is that IE8 before the browser will set the element to the height of the person’s row height.
  • min-heightinIE6Have no effect on;
  • transparencyIEwithFilter: Alpha (Opacity=60), while other major browsers useOpacity: 0.6;
  • inputBorder problem, removeinputGeneral borderBorder: none;I can but becauseIE6In parsinginputstylebug(Priority issues), inIE6The invalid;

76. Why semantics and the understanding of tag semantics?

Reason: In order to have a nice tube structure and code structure without CSS.

To understand:

  • Remove or lose style to make the page clear structure;
  • Is conducive toSEO, can establish good communication with search engines and help crawlers capture more effective information (crawlers rely on tags to determine the context and the weight of each keyword);
  • Convenient for other devices (such as screen readers, blind readers, mobile devices, etc.) to render web pages in a meaningful way;
  • Easy to team development and maintenance, semantic more readable, followW3CStandard teams follow this standard, reducing code differentiation;

77. What are some common CSS layouts?

The common CSS layouts are fixed, streaming, elastic, floating, positioning, margin, and padding.

78. What is the difference between absolute and fixed?

Similarities:

  • Changes how inline elements are rendered,displayIs set toblock;
  • Take elements out of the normal flow and don’t take up space;
  • By default, non-positioned elements are overridden;

Difference:

  • absoluteThe “root element” of is settable, whilefixedThe “root element” of is fixed to the browser window;
  • When scrolling through a web page,fixedThe distance between the element and the browser window is constant.

79. Which properties of CSS can be inherited? What attributes cannot be inherited?

  • Inheritable style properties:font-size,font-family,color,list-style,cursor,ul.li.dl.dd.dt;
  • Non-inheritable style properties:width,height,border,padding,margin,background;

🍀 Note: For the convenience of understanding, we can generally understand that font related styles can be inherited, and size related styles cannot be inherited.

80. Have you used a CSS preprocessor?

The basic idea of the CSS preprocessor is to add some variable features to the CSS (variables, judgment logic, functions, etc.).

Developers use this language to style web pages and compile them into normal CSS files for use. Using the CSS preprocessor makes the CSS simpler, more adaptable, and more readable without considering compatibility. The most commonly used CSS preprocessor languages include Sass(Scss) and Less.

81. 🤧 What happens to the display value of an element after the element is set to float?

After you float an element, the display value of the element automatically becomes a block.

82. What are the inline elements? What are the block-level elements? What are the void elements?

  • Inline elements:a,b,span,img,input,strong,select,label,em,button,textarea;
  • Block-level elements:div,ul,li,dl,dt,dd,p,h1-h6,blockquote;
  • Empty elements: contents that have no actual contenthtmlElements, such as:br, meta, hr,link,input,img;

83. Box-sizing property?

The parsing mode used to control the box model of an element. The default is Content-box.

  • content-box: W3CThe standard box model that sets the elementsheight/widthProperties refer tocontentPartial width/height;
  • border-box: IE traditional box model. Sets theheight/widthProperties refer toborder + padding + contentPartial height/width;

84. What are the advantages of CSS3 animation over script-based animation?

Compared with script animation, using CSS3 animation has the following advantages:

  • Easy to use, anyone can do without understandingjavascriptCreate them in the case of;
  • It performs well even under reasonable system loads.
  • Because of the simple animation injavascriptThe rendering engine uses frame skipping to make the animation flow smoothly.
  • Allows the browser to control animation sequences, optimizing performance and efficiency by building the update frequency of animations executed in currently invisible tabs;

85. How to optimize the printing style of web pages?

< span style =" text-align: center; text-align: center; text-align: center;

🍀 Note that the following points should also be noted when printing stylesheets:

  • It is best not to use background images in print stylesheets because printers cannot print background images in CSS. If you insist on showing pictures, usehtmlInsert into the page;
  • It is best not to use pixels as the unit, because printing a style sheet is a physical print, and it is recommendedpt/cm;
  • Hide unnecessary content. (e.g.,@print content{display: none});
  • Floating properties are not recommended in print stylesheets (less recommended) because they disappear.

86. What are the differences between styles in React Native and CSS?

  • React NativeThe style is basically implementedCSSAnd attribute names don’t exactly match, so when you start thinking about compatibility React NativeBefore the end, you can take a brief look at itReact NativeStyle.
  • These style names basically followwebOn theCSS The name, just in accordance withJSThe camel’s hump nomenclature is required.
  • RNuseJavaScriptTo write a style, all core components accept the namestyleProperty of, is equivalent tocssInline style.
  • inReact Native Uses Flexbox rules to specify the layout of a component’s children.FlexboxYou can provide a consistent layout structure across different screen sizes. So if you want to think aboutReact NativeEnd, then your style layout should be adoptedFlexLayout.

87. What is the difference between the style tag after the body and before the body?

Generally, pages load from top to bottom. Place the style tag before the body in order to load the style first.

After if it is written in the body tag, as the browser to parse HTML documents in line by line way, when the resolution to written in the book is written in the style sheet at the end of the document, will cause the browser to stop before rendering, waiting for the loading and parsing the stylesheet will render again after complete, under Windows IE may appear FOUC phenomenon twinkle (page).

88. The CSS property overflow property defines what happens to the content of the overflow element content area?

  • The parameter isscroll“, there must be a scroll bar;
  • The parameter isautoWhen the content of the child element is greater than that of the parent element, the scrollbar appears.
  • The parameter isvisibleWhen the overflow appears outside the parent element;
  • The parameter ishiddenWhen the overflow is hidden;

89. What are BFC, IFC, GFC, FFC?

  • Block formatting context(BFC)— Block-level formatting context;
  • Inline formatting context(IFC)— Inline formatting context;
  • Grid formatting context(GFC)— Grid layout formatting context;
  • Flex formatting context(FFC)— Adaptive formatting context;

90. What should I pay attention to when using pictures?

  • Optimizing pictures;
  • Try to avoidhtmlUsing compressed images;
  • Use the appropriate image format;
  • usecss spritesTechniques for picture optimization;

91.😯 How to optimize images and what is the difference between image formats?

Image optimization:

  • Instead of using pictures, use themCSS3Instead. For decorative effects such as shadows, rounded corners, semitransparent, etcCSS3Complete;
  • Use vector drawings whenever possibleSVGInstead of bitmaps. For most patterns, ICONS, etc., vector images are smaller and can be scaled without generating multiple sets of images. Most of the major modern browsers have stable supportSVG.

Image format differences:

  • Vector graphics: icon fonts, such asfont-awesome,svg;
  • Bitmap:GIF,JPG (JPEG),png;

The difference between vector and bitmap:

  • PNG: It can be subdivided into three formats:PNG8.PNG24.PNG32. The numbers on the back stand for thisPNGFormat up to indexed and stored color values;
  • JPG: a compressed image format that is relatively balanced in size and quality. It is suitable for colorful photos that allow slight distortion. It is not suitable for simple (low tone) pictures, such as ICONS,logoAnd so on;
  • GIF: a lossless, 8-bit picture format. With support for animation, index transparency, compression and other features. Use pictures with simple colors.

Advantages: can ensure that in the most true case as far as possible to compress the size of the image file;

Disadvantages: For more complex images that need high fidelity, ALTHOUGH PNG can lossless compression, but the picture is large, not suitable for web pages;

92. position:fixed; How to deal with invalid in mobile terminal?

The element implementation of fixed is fixed relative to the entire page, and when swiping across the screen is swiping the entire Viewport. The original web page is still there, fixed has not changed the location, so it is not that the mobile terminal does not support fixed, but fixed elements are not relative to the mobile screen fixed, so we in accordance with the following way to design:

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

Comparing the advantages and disadvantages of introducing CSS styles

  • Embedded style: Advantages: easy to write, high weight; Faults: No separation of structure and style;
  • Inline style: advantages: separation of structural style; Faults: Not completely separated;
  • External style: advantages: complete separation of structure and style; Disadvantages: Need to be introduced to use;

94. border:none; And the border: 0; What’s the difference?

The first is the performance difference:

  • {border: 0; }:borderSet it to 0 pixels, although you can’t see it on the page, but pressborderThe default value is understood, and the browser is still correctborder-width/border-colorRendering is performed, i.e. memory value has been occupied;
  • {border: none; }Be understood asborder-style:none.boder:0; thanborder:noneOne more renderingborder-width:0That is whyborder:noneThe performance ofborder:0High;

Compatibility differences:

  • {border:none; }whenborderfor"None"When seems toIE6/7Invalid border still exists whenborderIs “0”, the sense ratio"None"More efficient, all browsers consistently hide the border.

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

  • displayProperty specifies the type of box that the element should generate;
  • positionAttributes specify the location type of the element;
  • floatAttributes are layouts that define in which direction elements float;

Stacking: Similar to the priority mechanic. Position values — Absolute /fixed have the highest priority. Float does not work with them and display values need to be adjusted. Float or Absolute located elements are only block elements or tables.

96. What is critical CSS?

Critical CSS is a technique to extract the CSS from the first screen so that the content can be presented to the user as soon as possible. This is a great way to quickly load the first screen of a web page.

Core ideas:

(1) Extract the CSS of the home page;

(2) Use inline CSS style to load the CSS for this section (critical CSS);

(3) After the page is loaded, the entire CSS is loaded. Some CSS overlaps with critical CSS.

97. What are backflow (rearrangement) and redrawing and their differences?

  • Reflux (rearrangement),reflow: whenrender treeSome (or all) of them will need to be rebuilt due to changes in the element’s size, layout, hiding, etc.
  • redraw(repaint) : whenrender treeWhen an element needs to be updated with attributes that only affect the look and style of the element, but not the layout, call itredraw, such as color changes, etc.

🍀 Note: each page needs to cause a rearrangement + redraw at least once, and a rearrangement (reflux) will definitely cause a redraw.

Conditions that trigger rearrangement (backflow) :

  • Add or delete visibledomElements;
  • The position of the element has changed;
  • The size of the element has been changed, such as margin, width and height geometric attributes.
  • Content changes, such as image size, font size changes, etc.
  • Page rendering initialization;
  • Browser window size changed, for exampleresizeWhen the event occurs, etc.;

98. What are two properties in CSS that allow text to overlap vertically and horizontally?

  • Vertical direction:line-height;
  • Horizontal direction:letter-spacing;

🍀 Note: Letter-spacing can also be used to eliminate issues such as spacing between inline-block elements.

99. What is your understanding of WEB standards and W3C?

  • The tag is closed, and the tag is lowercase, without disorderly nesting;
  • Improve the search probability of the search robot;
  • Use the chainCSSandJSThe script.
  • Structural behavior label separation;
  • File downloads and pages are faster;
  • Content is accessible to more users and a wider range of devices;
  • Less code and components, easy to maintain, easy revision;
  • No need to move the page content, while providing a printed version does not need to copy the content, improve the usability of the site;

100. The Happy Ending 💃 🍃

Here, xiaobian hope this article can help to the need of children’s shoes, solid basic knowledge (or review the forgotten knowledge), review the old to know new, gradually improve.

Put it at the end 🌼🌼

This article will continue to be updated. If there is a shortage in the article, or a small partner knows that there is also xiaobian did not write the knowledge point, welcome to leave a message 💌💌, xiaobian will add the first time after seeing.

Finally, if you think the article is helpful to themselves, please support, because xiaobian recently a little bit want to upgrade (has been stuck in the last, is really a long story), thank you. The subsequent small series will work harder to roll out quality articles back to the partners in need. (After Posting the article, I feel that life is starting to be beautiful again 🌻🌻)

Update: Knowledge about javascript has been updated 🌈🌈