Shulou(Shulou.com)06/01 Report--

This article mainly introduces the CSS common technology has what related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this CSS common technology article, let's take a look.

1. Introduce the standard box model of CSS? How is it different from the box model of the earlier version of IE?

The scope of the IE box model is the same as the standard CSS box model, including margin, border, padding, content, unlike the standard W3C box model: the content part of the IE box model contains border and padding. Corresponds to the content-box and border-box values of the box-sizing attribute, respectively.

2. If you need to write animation manually, how long do you think the minimum time interval is and why?

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

3. Should you use odd or even fonts in the web page? Why?

Even font sizes are relatively easy to scale with other parts of the Web design, and are also compatible with lattice Arial fonts on Windows Vista (only even font lattices are provided). In other aspects, the author feels that there is no difference.

4. After setting the element to float, what is the display value of the element?

Automatically becomes display:block.

5. How to make the font on the page clearer and thinner with CSS?

-webkit-font-smoothing: antialiased; (anti-aliasing)

6. What is the principle of creating a triangle with pure CSS?

Border-top:solid 100px red

Border-left:solid 100px green

Border-right:solid 100px orange

Border-bottom:solid 100px blue

Width: 0

Height: 0

7. How to modify the Chrome to remember the password and automatically fill in the yellow background of the form?

The browser automatically adds an input:-webkit-autofill private property.

8. How does the browser parse the CSS selector?

The CSS selector parses from right to left, which is more efficient. Looking up the parent element from the child element is much faster in most normal cases than looking up the child element from the parent element. The left-to-right search will not match until the end of most rules (far right), which will take time and energy, and a lot of them are useless in the end.

Browser rendering process: HTML- > HTML parser-> DOM tree; style-> style parser-> style rules; DOM tree and style rules are combined to form a rendering tree.

9. CSS inheritance

CSS style inheritance means that subordinate style attributes inherit parent attributes, such as li inheriting ul properties.

10. How to center the div? How to center a floating element? How to center the absolute positioning div?

For non-floating elements with fixed width, we can use margin:0 auto to center horizontally in CSS; for floating elements, the parent and child elements can float in one direction at the same time, and the parent element sets left:50%.

11. What are the values of position, relative and absolute?

Relative positioning is the initial position of the relative element in the document, while absolute positioning is relative to the nearest positioned ancestor element, or relative to the original containing block if there is no positioned ancestor element.

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

The functions of two colons and one colon are actually the same, but in CSS3, in order to distinguish between pseudo-class selector and pseudo-element selector, the semantics are clearer.

Pseudo-class selector:: hover: link: active: target: not (s): focus (the effect of pseudo-classes can be achieved by adding an actual class)

Pseudo-element selector: first-letter:: first-line:: before:: after:: selection (pseudo-element effect can only be achieved by adding an actual element)

13. Several common methods of transform attribute

Rotate rotation translate translation skew tilt scale scaling (and 3D versions of each method)

The transform-origin property sets the action origin

The perspective-origin property sets the perspective orientation

Perspective sets the perspective angle

14. Png, jpg and gif explain when to use these picture formats. Have you ever known WebP?

PNG can store Alpha channels with low distortion, no aliasing, lossless compression, one is Index (smaller), the other is RGB, which is larger; GIF can store animation; JPEG images are more colorful, but lossy compression, not suitable for multiple read and storage

WebP is an image format developed by Google to speed up the loading of images. The compressed volume of the image is only about 2 prime 3 of JPEG.

15. What's the difference between style tags written after body and before body?

CSS styles should be loaded from top to bottom, and should conform to the placement specifications of the style, external, internal, and embedded. Putting it in body does not conform to the specification and is not conducive to code maintenance.

16. What's the difference between oblique and italic of font-style attribute?

Italic is italic, which is a different font, while oblique is a kind of imitation italics, which is "italic" formed by browsers by transforming ordinary fonts. Italic chooses the italic variant of the font family and compromises to the oblique variant if there is no italic variant. If the font family is not even provided with oblique, the browser synthesizes slanted imitation oblique fonts. Italic and oblique differ in font shape.

17. Common mobile development problems

There should be many, and here are only some of the ones that the author has encountered:

If the parent container sets the transform attribute, the position:fixed; attribute of its internal child elements will be invalidated

18. Understanding of line-height

Line height refers to the distance between the baselines of a line of text. If line-height uses a percentage, the actual pixel value is the font-size of all inherited elements multiplied by this percentage, which is calculated first and then converted to pixel value; if direct pixel value is used, all inherited elements use the same line-height value; relatively speaking, it is better to specify line-height with pure numbers, which can dynamically change the line spacing The line spacing in a paragraph is preferably 1.5 times of its own font-size, and the browser default line spacing is about 1.14.

Containing-boxes: it contains other boxes, such as p itself is a kind of

Inline-boxes: line up the displayed content, such as the span element; anonymous inline-boxes for untagged packages

Line-boxes:inline-boxes is connected to line-boxed in containing-boxes.

Content-area: an invisible boxes around the text, depending on the font-size

* half of the line-height beyond the font-size is called "half-line spacing", which is evenly placed on the top and bottom of the content-area

20. What is the purpose of the collapse attribute value of the visibility attribute in CSS? What's the difference between different browsers?

The compatibility of this attribute is not uniform across browsers, and it behaves the same as hidden for general elements. The exception is that if this element is a table-related element, it behaves the same as display: none.

21. How is the containing block calculation method of * position:absolute different from that of normal flow?

22. The principle of parallax rolling

Parallax rolling refers to the multi-layer background moving at different speeds to form a three-dimensional movement effect and bring a very excellent visual experience.

Implementation principle: mainly uses the background-attachment: fixed; attribute, the background image will not move with the scroll axis of the page.

There is a highly adaptive div with two div, one height 100px, how to make the other fill the rest of the height?

Using the absolute layout, automatically stretch the child container by setting the left:0;right:0;top:100px;bottom:0;, while the parent container sets the layout.

24. When will display:inline-block show the gap?

The default behavior of browsers is to render white space characters (spaces, line breaks, Tab) between inline elements into a single space. This problem occurs not only on li elements.

Solution:

1. So put all li on the same line

2. Set the characters rendered as spaces font-size to 0

3. Set the letter-spacing to the appropriate size

25. Z-Index stack

Z-Index takes effect only on elements with the position attribute (not static) set; the Z-Index of the parent element is more efficient than the child element

26. Basic key points of float, relative, absolute and fixed

Relative: the reference is the element itself, that is, the position in the document stream by default

Float: the default width of the element is the content width; semi-detached from the document stream (the element is separated from the document stream, and the content is not separated from the document stream, that is, the effect of text surrounding a picture)

Absolute: the default width of the element is the content width; it is separated from the document stream; the reference is the first positioning ancestor (an element with position set and the value is not static) / root element; if the element with absolute is not set width and height, then the four attributes LRTB can adaptively disconnect the element

Fixed: the default width of the element is the content width; it is separated from the document stream; the reference is the window

* float will cause the original inline-boxes to disappear

27. How to deal with the problem of not being able to scroll smoothly (losing rolling inertia) in overflow:scroll?

Add the-webkit-overflow-scrolling: touch; attribute, which creates a system-level control with hardware acceleration, but consumes more memory; you can also use the iScroll plug-in to solve this problem.

What are the common browser compatibility issues?

Compatibility of HTML5, etc. (the author's company does not consider browsers below IE10).

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

When you set the width of an element as a percentage, it is calculated relative to the width of the parent container, but for attributes that represent vertical distances, such as padding-to, padding-bottom, margin-top, margin-bottom, and so on, when you set them as a percentage, they are also based on the width of the parent container, not the height.

30. Two CSS models

One is the box box model, the corresponding CSS is "(height/width) + padding + margin", the other is the line box model, and the corresponding style is "line-height"

31. Flexible layout

Elastic parent container: display:flex

Resilient element: an immediate child of the parent container and not detached from the document stream (non-absolute attribute).

Specify the arrangement direction of elements in the elastic container: flex-direction:row | row-reverse | column | column-reverse

Specify the line wrapping method for elements in an elastic container: flex-wrap:no-wrap | wrap | wrap-reverse

Specify the queuing and line wrapping methods for elements in the elastic container: flex-flow:

Specify the ranking weight of the elastic element (the heavy comes after): order:

Set the weight of element free space allocation: flex-grow:

Setting element exceeds the weight of allocated space: flex-shrink:

Set the base length of the element in the spindle direction: flex-basis:

Set the elasticity of the element in the principal axis direction: flex:

Specify the spacing of elements in the elastic container: justify-content:flex-start | flex-end | center | space-between | space-arount

Specify the alignment of the auxiliary axes of the elements in the elastic container: align-items:flex-start | flex-end | center | stretch | baseline

Sets the alignment of elements in the principal axis: align-self:flex-start | flex-end | center | stretch | baseline

Specifies the alignment of the secondary axes of the elements in the elastic container: align-content:flex-start | flex-end | center | space-between | space-arount | stretch

32 、 font-family:serif sans-serif

Serif serif: it means that there is extra decoration at the beginning and end of the stroke, and the thickness of the stroke will be different.

Non-serif sans-serif: without these extra decorations, and the strokes are about the same thickness.

33. The difference between DOMContentLoaded and load

The steps to load an DOM document are:

1. Analyze the structure of HTML

2. Load external scripts and stylesheet files

3. Parse and execute script code

4. The construction of DOM tree is completed. / / DOMContentLoaded

5. Load external files such as pictures

6. The page is loaded. / / load

34. Various operations on the DOM tree

35. The difference between children and childNodes? The difference between nextElementSibling and nextSibling?

Children contains only element nodes, not text nodes, and childNodes contains all child nodes; nextElementSibling contains only element sibling nodes, and nextSibling contains text nodes.

36. Overview of CSS DOM

Window.getComputedStyle ([element]); / / you can get a style CSSStyleDeclaration object after element calculation

37. What is the difference between DOM property accessors accessing properties and (g/setAttribute) accessing properties?

DOM property accessor: poor versatility and expansibility, but takes a practical object

G/setAttribute: all you get is a string, versatility

Dataset:element.dataset; (get all custom attributes on the DOM element, attributes that start with data-)

38. DOM event triggering, event binding and event unloading

IE8 or above: ele.addEventListener ele.removeEventListener ele.dispatchEvent (type); W3C standard

IE8 and the following: ele.attachEvent ele.detachEvent ele.fireEvent (type); no capture phase

39. Common scenarios of onerror events

Add onerror=this.src='default.png' to the image tag to show the default picture when setting up the picture incorrectly

40. HTML modular construction

41. The hierarchical relationship of each value of position attribute

Static cannot be layered through z-index; relative, absolute, and fixed can be layered through z-index; the first is to follow the rules of DOM, followed by peers. Generally, elements with positioning attributes are higher than sibling elements without positioning attributes. All sibling elements with positioning attributes are superior to those with large z-index; if they are non-sibling elements, the z-index of the element itself is ignored and the z-index attribute of the ancestor element at the same level as the contrast element is taken, and the greater element is superior.

42. How to efficiently insert HTML into the specified location of the DOM tree

1. Use createDocumentFragment () to create a document fragment in memory, appendChild all the HTML that needs to be appended to the page to the document fragment, and finally appendChild the document fragment to the DOM tree at once; because the process of splicing child elements is carried out in memory, it can reduce the backflow and redrawing of the page.

2. Use insertAdjacentHTML (position, text) to insert HTML fragments directly into the page. Position is divided into four values: beforebegin, afterbegin, beforeend, afterend.

43 、 em rem vh vw vmin vmax ex ch

Em: now the font size of the parent element

Rem: font size relative to the root element html

Vh vw: where v stands for viewpoint, so these two size units represent the size relative to the current window, and 1vh vw is equivalent to 1 percent of the window height and width.

Vmin vmax: ditto, where v stands for viewpoint, vmin takes the smaller units of vh vw, and vmax does the opposite.

Ch: "Consolas,Monaco,monospace" is often used in conjunction with equal width fonts. 1ch represents a width of 0 characters, so only in the case of equal width fonts can we use ch to accurately adjust the display of characters.

Ex: a unit of relative length. The height relative to the character "x". Usually half the height of the font. Using ex, the inline icon can be vertically centered with the paragraph.

This is the end of this article on "what are the common technologies of CSS?" Thank you for reading! I believe you all have a certain understanding of "what are the common technologies of CSS". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.