Summary of CSS interview knowledge points

Recently in the collation of CSS found a lot of common interview questions, this part of the main author in Github and other major forums included CSS related knowledge and some related interview questions made notes, to share this summary to you, you can come to a full range of CSS leak detection and investigation, Thanks to the original author Cavszhouyou, if there is a mistake, hope everyone to point it out! Like can you give me a thumb up to encourage, attached notes link: https://github.com/Wscats/articles

1. What about the standard CSS box model? What’s different about the box model in the lower version of IE?

Related knowledge points:

(1) There are two kinds of box models: IE box model (border-box) and W3C standard box model (content-box). (2) Box model: The differences between the IE box model and the W3C standard box model are as follows: (1) W3C standard box model: Property width, height contains content only, does not contain border and padding (2) IE box model: The property width, height contains content, border, and padding, which refers to content +padding+border. Which box model is used in IE8 + is controlled by box-sizing (a new CSS property). The default value is Content-Box, the standard box model. If box-sizing is set to border-box, the IE box model is used. If the DOCTYPE is missing in IE6, 7, and 8, the box model will be interpreted as the IE box model. When a DOCTYPE type is declared on a page, all browsers interpret the box model as the W3C box model.

Answer:

Box models are composed of four parts, namely margin, border, padding and content. The difference between the standard box model and the IE box model is that when setting width and height, the corresponding range is different. The width and height attributes of the standard box model only contain content, while the width and height attributes of the IE box model contain border, padding and content. In general, we can change the box model of an element by changing its box-sizing property.

For more information, please refer to CSS Box Model Detail.

2. What are the CSS selectors?

(1) id selector (#myid) (2) class selector (.myclassname) (3) tag selector (div,h1,p) (4) descendant selector (h1p) (5) adjacent descendant selector (child) selector (ul>li) (6) sibling selector (li~a) (7) adjacent sibling selector (li+a) (8) attribute selector (a[rel="external"]) (9) pseudo class selector (a:hover,li:nth-child) (10) pseudo element selector (::before, ::after) (11) wildcard selector (*)

3. What’s the difference between ::before and :after? Explain what these two pseudo elements do.

Related knowledge points:

A single colon (:) is used for CSS3 pseudo classes and a double colon (::) is used for CSS3 pseudo elements. (Pseudo elements consist of double colons and pseudo element names.) The double colons were introduced in the current specification to distinguish between pseudo classes and pseudo elements. However, browsers also need to support the old pseudo-element notation, such as :first-line, :first-letter, :before, :after, etc., while the new pseudo-elements introduced in CSS3 do not support the old single-colon notation. To make the inserted content appear before other content, use ::before; otherwise, use ::after; In code order, the :: After generated content also comes after the :: Before generated content. If you follow the stack view, the ::after generated content will be above the ::before generated content.

Answer:

In CSS3, a single colon is used to denote a pseudo class and a double colon to denote a pseudo element. However, in order to be compatible with the existing way of writing pseudo elements, some browsers can also use a single colon to represent pseudo elements. Pseudo-classes generally match some special states of elements, such as hover, link, etc., while pseudo-elements generally match special positions, such as after, before, etc.

4. The difference between pseudo-classes and pseudo-elements

CSS introduced the concept of pseudo-classes and pseudo-elements to format information outside the document tree. That is, pseudo-classes and pseudo-elements are used to decorate parts of the document that are not in the tree, such as the first letter in a sentence, or the first element in a list. Pseudoclasses are used to add styles to existing elements when they are in a state that changes dynamically based on user behavior. For example, when the user hovers over a specified element, we can use :hover to describe the state of that element. Pseudo elements are used to create and style elements that are not in the document tree. They allow us to style certain parts of an element. For example, we could use :: Be Forge to preface an element with text, and then add styles to that text. Although the text is visible to the user, it is not actually in the document tree. Sometimes you'll find that pseudo-elements use two colons (::) instead of one colon (:). This is part of CSS3 and attempts to distinguish between pseudo-classes and pseudo-elements. Most browsers support these two values. The rule is to use (::) instead of (:) to distinguish between pseudo-classes and pseudo-elements. However, since older versions of the W3C specification did not make a special distinction, most browsers today support both methods for representing pseudo elements.

For more information, see Summary of Pseudo Classes and Pseudo Elements.

5. Which properties in CSS can be inherited?

Related information:

The overview of each CSS property definition indicates whether the property is inherited by default or not. This determines how to evaluate the value when you do not specify a value for an element's attribute. When an inherited attribute of an element does not specify a value, the computed value of the same attribute of the parent element is taken. Only the document root element takes the initial value given in the overview of the attribute (the meaning here should be the default value in the definition of the attribute itself). When a non-inherited attribute of an element (sometimes called resetProperty in Mozillacode) does not specify a value, the initial value of the attribute, initialv alue, is taken (as specified in the attribute overview). 2. The property of having inheritance: (1) Font series attributes: FONT-FAMILY, FONT-WEIGHT, FONT-SIZE, FONT-STYLE, FONT-VARIant, FONT-Stretch, FONT-SIze-adjust (2) Text series attributes: FONT-FAMILY, FONT-WEIGHT, FONT-SIZE, FONT-STYLE, FONT-VARIant, FONT-Stretch, FONT-SIze-adjust Text-indent, Text-align, Text-shadow, Line-height, Word-spacing, letter-spacing, Text-transform, Direction, Color (3) Table layout properties CollapseEmpty-cells (4) list-style-type, list-style-image, list-style-position, list-style (5) cursor property Cursor (6) element visibility (7) Note: When a property is not inherited, you can use the inherit keyword to specify that a property should inherit its value from its parent. The inherit keyword is used to explicitly specify inheritance, and can be used with any inherited/non-inherited property.

Answer:

Each attribute is specified in the definition as to whether the attribute is inheritable. An inheritable attribute will use the value of the same attribute of the parent element as its own value when no value is specified. Commonly inherited attributes include font related attributes, font-size, and font-weight. Text-related properties, color, text-align, etc. Table layout properties, list properties such as list-style, etc. There is also the cursor attribute cursor, element visibility. When a property is not inherited, we can inherit it by setting its value to inherit to get the same property from the parent element.

For more information, see “Inherited Properties”, “What Properties Can CSS Inherit?”

6. How to calculate CSS priority algorithm?

Related knowledge points:

The priority of CSS is determined by the value of the specificity of the style declaration. (1) In-label selector x,0,0,0 (2) ID selector 0,x,0,0 (3) class selector/attribute selector/pseudo-class selector 0,0,x,0 (4) element and pseudo-element selector 0,0,0,x (1) The initial value of each level is 0; (2) The superposition of each level is the sum of The Times the selector appears; (3) There is no carry, for example, 0,99,99, and (4) are expressed as: 0,0,0,0 (5) There is no correlation between each rank count (6) Rank judgment from left to right, if one digit is the same, then judge the next digit (7) If two priorities are the same, then the last occurrence of the priority is higher,! Important also applies to (8) wildcard selector with a special value of 0,0,0,0 (9) The inherited style has the lowest precedence and the wildcard style has the highest precedence over the inherited style (10)! Important. It has no special value, but it has the highest priority. For memorization purposes, consider it special value 1,0,0,0,0. (1) #demoa{color:orange; }/* special value: 0,1,0,1*/ (2) div#demoa{color:red; }/* Specialty value: 0,1,0,2*/ Note: (1) When styles are applied, CSS will first look at the weight of the rule (! Important), and the weight has the highest priority. When the weight is the same, the particularity of the rules is compared. (2) The higher the particularity value, the higher the declaration priority. (3) The declaration of the same special value, according to the order of style introduction, the rule after the declaration has the higher priority (the one closest to the element)

Answer:

When determining the priority, we first determine whether a property declaration has weight, that is, whether it is followed by! Important. If a statement is weighted, it has the highest priority, as long as it is not followed by another statement with the same weight. If the weights are the same, then we need to compare the specificity of the matching rules. A matching rule is generally composed of several selectors, and the particularity of a rule is accumulated by the particularity of the selectors that make up it. The specificity of selectors can be divided into four levels: the first level is inline style, which is 1000; the second level is id selector, which is 0100; the third level is class selector, pseudo-class selector, and attribute selector, which is 0010; and the fourth level is element selector and pseudo-element selector, which is 0001. Each time a selector appears in the rule, its particularity is superimposed, and this superposition is limited to the corresponding level of superposition and does not result in a carry. The comparison of selector specificity values is sorted from left to right, which means that the specificity values starting with 1 are greater than all the specificity values starting with 0. For example, a rule with a special value of 1000 has higher priority than a rule with a special value of 0999. If the particularity values of two rules are equal, then the last rule will have the highest precedence, depending on the order in which they are introduced.

For the calculation of the particularity value of the composite declaration, you can refer to: CSS Priority Calculation and Application, CSS Priority Calculation Rules

7. What is the explanation of the pseudoclass LVHA?

A tag has four states: before link access, after link access, mouse over, activation, corresponding to four kinds of pseudo classes :link, :visited, :hover, and :active; When the link is not visited out of date: (1) when the mouse slide over the A link, meet :link and :hover two states, to change the color of the A label, it must be :hover pseudo-class in :link pseudo-class after the declaration; (2) when the mouse click to activate the A link, at the same time meet :link, :hover, :active three states, to show the A tag when activated style (:active), must put :active statement :link and :hover. Hence the order LVHA. When link access becomes obsolete, the situation is basically the same as above, but it needs to replace :link with :visited. Can I change the order? Yes, but only :link and :visited can exchange places. Because a link has either been visited or not visited, it cannot be satisfied at the same time, so there is no problem of overlay.

8. What are the new pseudoclasses in CSS3?

(1) elem:nth-child(n) selects the NTH child element under the parent element, and the label of this child element is named elem, n can accept a specific number value, can accept a function. (2) Elem: NTH-Last-Child (n) : NTH-Last-Child (n) (3) elem:last-child selects the last child element. If elem is the only child of the parent element, select it. (5) elem:nth-of-type(n) select the NTH elem element of the parent element, n can accept a specific value, can accept a function. Elem: select the first elem element from the parent element. Elem :last-of-type select the last elem element under the parent element Elem: If there is only one elem element in the child element of the parent element, select that element. (9) elem:empty selects elements of elem type that do not contain children or content. (10) elem: Target selects the elem element of the current activity. (11) : NOT (elem) selects each element of a non-elem element. (12) : Enabled controls the disabled state of the form control. (13) : DISABLED controls the disabled state of the form control. (14): Checked checkbox or check box is selected.

Detailed information can be referred to: “CSS3 new features summary (pseudo classes)” “talk about CSS pseudo classes and pseudo elements and CSS3 new pseudo classes”

9. How to Center Div?

– Horizontal Center: Give the div a width and add the margin:0auto property

div {
  width: 200px;
  margin: 0auto;
}

– Horizontal center, implemented using text-align:center

.container {background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0; } .box { display: inline-block; width: 500px; height: 400px; background-color: pink; }

– Center the absolutely positioned DIV

div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /* easy to see the effect */}

– Center horizontally and vertically

Div {*/ position:absolute; /* Absolute positioning */ width:500px; height:300px; top:50%; left:50%; margin:-150px00-250px; */ background-color:pink; /* easy to see the effect */}

– Horizontal and vertical center two

/* The 'transform' property */ div {position: absolute; /* width: 500px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; /* easy to see the effect */}

– Horizontal and vertical center three

/* Container {display: flex; /* Container {display: flex; align-items: center; /* right-centered */ textf-content: center; }. ContainerDiv {width: 100px; height: 100px; background-color: pink; /* easy to see the effect */}

– Horizontal and vertical center four

/* Use the text-align:center and vertical-align:middle attributes */. Container {position: fixed; top: 0; right: 0; bottom: 0; left: 0; Background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container::after { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .box { display: inline-block; width: 500px; height: 400px; background-color: pink; white-space: normal; vertical-align: middle; }

Answer:

General common several middle methods are: for the width and height of the fixed element (1) we can use margin:0auto to achieve the level of the element in the center. (2) Using absolute positioning, set the values of the four directions to 0, and set the margin to auto. Since the width and height are fixed, the corresponding direction can be equally divided, and the water and vertical direction can be centered. (3) Using absolute positioning, firstly position the upper left corner of the element to the center of the page through top:50% and left:50%, and then adjust the center point of the element to the center of the page through the negative value of margin. (4) With absolute positioning, move the upper left corner of the element to the center of the page using top:50% and left:50%. Then translate the element's center point to the center of the page. (5) With Flex layout, set the vertical and horizontal alignment of the container with alligate-items :center and justifie-content :center, and then its children can be vertically and horizontally centered. For elements with varying width and height, the last two methods above can be used to center the elements vertically and horizontally.

10. What values does display have? Explain their role.

Block type. Default width is the parent element width, width and height can be set, newline display. The None element is not displayed and is removed from the document stream. Inline inline element type. Default width is content width, width and height can not be set, peer display. The default width of the inline-block is the width of the content. The width and height of the inline-block can be set. List-items are displayed as block-type elements, with a style list tag added. Table This element is displayed as a block-level table. Inherit specifies that you should inherit the value of the display property from the parent element.

For more information, please refer to CSSDisplay Properties.

Position is relative and absolute.

Related knowledge points:

Absolute generates absolutely fixed elements and positions them relative to the paddingbox of the first parent element whose value is not static. The position nearest to the element is set to absolute or relative, and the top left corner of the paddingbox of the parent element is the origin. Fixed (not supported by older IE) Generates elements with absolute positioning, which is positioned relative to the browser window. Relative generates an element that is positioned relative to the normal position of its element. Static default value. Without positioning, the element appears in the normal stream (ignore top,bottom,left,right,z-index declarations). Inherit specifies that the value of the position property is inherited from the parent element.

Answer:

Relative positioning of an element is relative to its normal position. The element is positioned with respect to the paddingbox of the ancestor element whose first position value is not static. We need to find a parent element whose position value is not static, and then position it relative to the parent element's paddingbox. In other words, we need to add the padding to the parent element as well.

12. What are the new features of CSS3? (Answer according to the item)

Add various CSS selectors (:not(.input) : All nodes whose class is not "input") border-radius:8px Multi-ColumnLayout Shadow/Reflect Text-Shadow Text Render (Text-decoration, gradient, transform, zoom, positioning, tilt, animation, multi-background, such as: Transform: \ scale (0.85, 0.90) and translate (0 px, - 30 px) \ skew (deg) - 9 deg 0 \ Animation:

13. Please explain the Flexbox model of CSS3 and the applicable scenarios?

Related knowledge points:

Flex, which stands for FlexibleBox, is designed to provide maximum flexibility to the box model. Any container can be specified as a Flex layout. Inline elements can also be laid out using Flex. Note that with a Flex layout, the float, cl ear, and vertical-align attributes of the child elements are invalidated. Elements with a Flex layout are called Flex containers, or "containers" for short. All of its child elements automatically become container members and are called Flex items, or "items" for short. By default, the container has two axes: a horizontal axis (Mainaxis) and a vertical axis (Crossaxis), along which items are arranged by default. The following six properties are set on the container. The flex-direction property determines the direction of the main axis (that is, the direction in which items are arranged). The flex-wrap property defines how to wrap a line if an axis does not fit. The flex-flow property is a shortened form of the flex-direction property and the flex-wrap property, and the default value is rownowrap. The justify-content attribute defines the alignment of the item on the main axis. The align-items property defines how items are aligned on the cross axes. The align-content attribute defines the alignment of multiple axes. This property does not work if the project has only one axis. The following six properties are set on the project. The order attribute defines the order in which items are sorted. The smaller the number, the higher the rank, which defaults to 0. The flex-grow property defines the zoom scale for the item, which defaults to 0, meaning it does not zoom in if there is room left. The flex-shrink attribute defines the size of the project, which defaults to 1, meaning that the project will shrink if it runs out of space. The flex-basis attribute defines how much of the principal axis the project occupies before allocating excess space. Based on this property, the browser calculates if the main axis has any extra space. Its default value is AUTO, which is the actual size of the project. The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 01auto. The align-self attribute allows a single item to have different alignment than other items, and overrides the align-items attribute. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it is equivalent to stretch.

Answer:

Flex layout is a new layout in CSS3. We can make an element a Flex container by setting its display attribute to Flex, and all of its children will become its projects. By default, a container has two axes, a horizontal main axis and a cross axis perpendicular to the main axis. We can use flex-direction to specify the direction of the main axis. We can use justify-content to specify how elements should be arranged on the main axis and allign-items to specify how elements should be arranged on the cross axis. You can also use flex-wrap to specify how to wrap a line when it does not fit on one line. For items in the container, we can use the Order attribute to specify the order in which the items are arranged, and we can use Flex-Grow to specify the scale in which the items will be enlarged when there is room to arrange them. You can also use flex-shrink to specify how much of the project will shrink when there is insufficient collation space.

For more information, see: Flex Layout Tutorial: Syntax, Flex Layout Tutorial: Examples

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

Adopting the principle of equipartition at the junction of adjacent frames. Set the width and height of the element to 0, set the border only, hide any three edges (the color is Transparent), and all that is left is a triangle. #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparenttransparentredtransparent; }

15. How to design a full screen product word layout?

An easy way to do it: the top div is 100% wide, the bottom div is 50% wide, and then float or inline it without a newline

16.CSS multi-column height how to achieve?

(1) using padding - bottom | margin - bottom are negative balance, will not affect the layout of the page. Set parent container Settings beyond hidden (overflow: Hidden), so that the height of the parent container is the same as it would have been if the column in it had no PADDING-BOTTOM set. When any column in the parent container increases in height, the height of the parent container is stretched to the height of the highest column in the container, and the other lower columns compensate for the difference with their PADDING-BOTTOM. (2) Use the feature that all cells in the table-cell are equal in height to realize the height of multiple columns. (3) In Flex layout, the align-items property is set to Stretch by default, and if the height of the project is not set or set to AUTO, it will occupy the height of the entire container, so as to achieve the height of multiple columns.

More information can be found in: “Front-end CSS should master multi-column contour layout”, “CSS: multi-column contour layout”.

17. What are the most common browser compatibilities? What’s the reason, what’s the solution, what’s the hack technique?

(1) PNG24 bit image in IE6 browser background solution: make PNG8, can also refer to a script processing. *{margin-padding :0; margin-padding :0; padding:0; } to unify. (3) IE6 bilateral spacing bug: under IE6, if the element is set to float, and at the same time set margin-left or margin-right, the margin value will be doubled. #box{float:left; width:10px; margin:00010px; } IE produces a 20px distance solution in this case: add _display:inline to float's label style control; Convert it to an inline property. (_ This symbol will only be recognized by IE6) (4) A progressive recognition approach that gradually excludes parts from the population. First, the "\9" tag is cleverly used to separate the IE browser from all cases. Next, use "+" again to separate IE8 from IE7 and IE6, so that IE8 has been identified independently. .bb{ background-color:#f1ee18; Background-color :#00deff\9; background-color:#00deff\9; /* color:#a200ff; /* color:#a200ff; /* background-color:#1e0bd1; /*IE6 recognition */} (5) In IE, you can get a custom attribute by using the method of getting a regular attribute, or you can get a custom attribute by using getAttribute(); In Firefox, you can only get custom attributes using getAttribute(). (6) Under IE, the Event object has X and Y attributes, but no PageX and PageY attributes; In Firefox, the Event object has pageX and pageY properties, but no x and y properties. The downside is that it may increase the number of HTTP requests under Internet Explorer. (7) Chrome's Chinese interface will force text less than 12px to be displayed as 12px by default. You can adjust:none by adding the CSS property -webkit-text-size-adjust:none; To solve. However, it won't work after Chrome is updated to version 27. 2. -webkit-transform:scale(0.5); Note - its - transform: scale (0.75); In this case, the span must be converted to a block element, using display: block/inline-block/... ; (8) hyperlink access after the hover style does not appear, was clicked to visit the hyperlink style no longer has hover and active the solution: change the order of the CSS properties L-V-H-A (9) weird mode problem: If you omit the DTD declaration, Firefox will still parse the Web page in standard mode, but in IE, weird modes will be triggered. To prevent weird schemas from causing us unnecessary trouble, it is a good idea to get in the habit of writing DTD declarations.

18. What causes the invisible blank space between Li and Li? What’s the solution?

The browser renders the whitespace characters (Spaces, newlines, tabs, and so on) between inline elements as a single space. But for aesthetics. We usually put a <li> on a line, which causes <li> to wrap after producing a newline character, which becomes a space, occupying the width of one character. (1) Set float:left for <li>. Disadvantages: some containers are not able to set floating, such as left and right to switch focus map, etc. (2) Write all <li> on the same line. Disadvantages: The code is not beautiful. Font-size :0; font-size:0; font-size:0; font-size:0 Disadvantage: Other character sizes in <ul> are also set to 0. Additional character sizes need to be reset, and white space will still appear in Safari. (4) Remove <ul> from spacing letter-spacing:-8px. This also sets the spacing in <li>, so you need to set the spacing in <li> to default letter-spacing:normal.

For more information, see: What Causes Invisible Blank Spaces Between Li and Li?

19. Why Initialize CSS Styles?

- Due to browser compatibility issues, different browsers have different default values for some tags. If CSS is not initialized, the page will display differently between browsers. - Of course, initialization style will have some impact on SEO, but you can't have your cake and eat it too, but try to minimize the impact of initialization. *{padding:0; *{padding:0; margin:0; } (strongly not recommended) Taobao style initialization code:  body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend ,button,input,textarea,th,td{margin:0; padding:0; } body, button, input, select, textarea {tahoma font: 12 px / 1.5, arial, 5 b8b \ \ 4 f53; } h1,h2,h3,h4,h5,h6{font-size:100%; } address,cite,dfn,em,var{font-style:normal; } code,kbd,pre,samp{font-family:couriernew,courier,monospace; } small{font-size:12px; } ul,ol{list-style:none; } a{text-decoration:none; } a:hover{text-decoration:underline; } sup{vertical-align:text-top; } sub{vertical-align:text-bottom; } legend{color:#000; } fieldset,img{border:0; } button,input,select,textarea{font-size:100%; } table{border-collapse:collapse; border-spacing:0; }

20. What is containment block and the understanding of containment block?

A containingblock is a box in which elements are evaluated and located. (1) The root element (which in many cases can be viewed as < HTML >) is called the "initial contain block" and is the same size as the browser's viewable window. (2) For other elements, if the position of the element is Relative or Static, the "contain block" is formed by the ContentBox boundary of the nearest ancestor box of the block container. (3) If the element position:fixed, then "containing block" is "initial containing block". If position:absolute, then the "contain block" is created from the nearest ancestor element of position that is not static. If the ancestor element is pure inline, then the rule is a little more complicated: • If we generate an inlinebox of width 0 for each of the inline elements, then the enclosed boxes outside the paddingboxes of these two inline boxes are the "contain blocks" of the inline elements; • If the inline element is split across lines, then the "contain block" is undefined, that is, not explicitly defined by the CSS2.1 specification. Otherwise, the "contain block" is formed by the ancestor's paddingbox boundary. If there is no ancestor element that meets the criteria, the containment block is the initial containment block.

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

(1) For the general element, its performance is in line with visibility: hidden; It's the same thing. The element is not visible, but still takes up page space. (2) Exceptionally, if the element is a table-related element, such as table row, tableGroup, tablecolumn, or tablecolumnGroup, it behaves the same as display:none, that is, the space they occupy is freed. Differences between browsers: In Google browsers, there is no difference between using the collapse value and using the hidden value. In Firefox, Opera, and IE11, the collapse value is used exactly as it should be: the row of the table disappears and the row below it complements its position.

The CSS visibility property has a little-known property value: Collapse

Width :100%; width:100%

In general width:100% will make the width of the element box equal to the width of the parent element's contentBox. Width :auto makes the element cover the entire parent element, and the margin, border, padding, and content areas automatically allocate horizontal space.

23. The difference between the percentage calculation of absolutely and non-absolutely positioned elements

The percentage of width and height of the absolute position element is calculated with respect to the paddingboxes of the ancestor element of the adjacent position nonstatic element. The width and height percentage of a non-absolute positioning element is calculated relative to the parent element's contentBox.

24. A brief introduction to the advantages and disadvantages of Base64 image encoding.

Base64 encoding is an image processing format that uses a specific algorithm to encode an image into a long string that can be used to replace the URL attribute of the image when it is displayed on the page. The advantages of using Base64 are: (1) Reduce the HTTP request of an image. The disadvantages of using Base64 are: (1) According to the encoding principle of Base64, the size of the encoded file will be 1/3 larger than the size of the original file. If large images are encoded into HTML/CSS, it will not only increase the volume of the file, affect the loading speed of the file, but also increase the time for the browser to parse and render HTML or CSS files. (2) Base64 cannot be used for direct caching, and only files containing Base64 can be cached, such as HTML or CSS, which is much worse than the effect of domain direct caching of images. (3) Compatibility issues. Browsers prior to IE8 do not support them. In general, small ICONS of some websites can be introduced using base64 images.

For more information, see: “Play with Base64 Image Encoding”, “What are the disadvantages of using Base64 images in front-end development?” Base64 :URL Background Image and Web Page Performance Optimization

25. How does ‘display’, ‘position’ and ‘float’ relate to each other?

(1) First, we judge whether the display attribute is None. If it is None, then the values of position and float do not affect the final performance of the element. (2) Then judge whether the value of position is absolute or fixed. If so, the float attribute is invalid, and the value of display should be set to table or block. The specific conversion depends on the initial conversion value. (3) If the value of position is not absolute or fixed, then judge whether the value of float attribute is none. If not, then the value of display is converted according to the above rules. Note that if the value of position is relative and the value of the float attribute exists, Relative is positioned relative to the final position after the float. (4) If float is none, then determine whether the element is the root element. If so, the display attribute is converted according to the above rules. If not, the specified display attribute value is kept unchanged. In general, you can think of it as a priority-like mechanism, with "position:absolute" and "position:fixed" having the highest precedence. While it exists, float doesn't work and the value of 'display' needs to be adjusted; Second, adjust the value of 'display' when the element's 'float' property is not 'none' or when it is the root element; Finally, for non-root elements, and for non-floating elements, and for elements that are not absolutely positioned, the 'display' property value is the same as the setting value.

For more information, see: What happens when features like Position and Display, Margincollapse, Overflow, and Float are added to each other?

26. Understanding of margin overlap.

Related knowledge points:

The margin-top and margin-bottom margins of block-level elements are sometimes combined into a single margin, a phenomenon known as "margin union." Prerequisites for generating a fold: Margins must be adjacency! According to the W3C specification, two Margins that are adjacent must meet the following conditions: • They must be block-level boxes in a regular document stream (not float and absolute positioning), and in the same BFC. • No line boxes, no gaps, no padding and border separating them • All vertical adjacent margins, • margin-top of the element and its child elements in the first regular document stream • margin-bottom of the element and its sibling elements in the next regular document stream • The margin-bottom of the element with height auto and the last child element of the regular document stream • The height is 0 and the minimum height is also 0, does not contain the child element of the regular document stream, In addition, there are 3 scenarios for the combination of margin-top and margin-bottom margin of elements without the establishment of new BFC: (1) Margin merger of neighboring sibling elements. • Set a margin merge between the parent of the BFC (2) and the first/last child. • The parent element is set to a block formatting context element; • The parent element is set to a block formatting context element. • The parent element sets the border-top value; • The parent element sets the padding-top value; • Add an inline element to separate the parent element from the first child element. For the margin-bottom merge, you can do the following (if one condition is met) : • The parent element is set to a block formatting context element; • The parent element sets the border-bottom value; • Set the padding-bottom value of the parent element; • Add an inline element to separate the parent element from the last child; • The parent element sets the height, min-height, or max-height. (3) Margin merging of empty block-level elements. • Set a vertical border; • Set the vertical padding; • Add inline elements to it (Space is useless); • Set height or min-height.

Answer:

Margin overlap refers to the situation where the margins of two adjacent elements overlap in the vertical direction. Generally speaking, it can be divided into four situations: the first one is that the values of marin-bottom and margin-top of adjacent sibling elements overlap. In this case we can fix it by setting one of the elements to the BFC. The second is where the margin-top of the parent element overlapped with the margin-top of the child element. They overlap because they're next to each other, so we can solve this problem with that. We can separate the parent elements by setting the border-top, padding-top values, or we can set the parent element to the BFC. The third is that the margin-bottom of the parent element with height of auto overlaps with the margin-bottom of the child element. They overlap one because they're next to each other, and one because the height of the parent element is not fixed. So we can set border-bottom, padding-bottom for the parent element to separate them. We can also set a height for the parent element. Max-height and min-height can also solve this problem. Of course, setting the parent element to a BFC is the easiest way. The fourth case is the overlap between the margin-top and margin-bottom of the element with no content. We can solve this problem by giving it a border, pa dding, or height.

27. Understanding of the BFC specification (BlockFormatting Context)?

Related knowledge points:

BlockFormattingContext (BFC) is part of the visual CSS rendering of a Web page. It is the area in the layout process where block-level boxes are generated and where floating elements can interact with other elements. •BFC is a standalone layout environment that can be understood as a container in which objects are placed according to certain rules and do not affect objects in other environments. • If an element meets the conditions that trigger the BFC, the layout of the elements in the BFC is not affected by external influences. Create landing (1) the root element or element contains the elements of the root element (2) floating float = left | right or inherit (indicates none) (3) the position = absolute absolutely positioned elements or fixed (4) the display = the inline - block | flex | inline - flex | table - cell or table - caption (5) the overflow = hidden | auto or scroll (indicates visible)

Answer:

BFC refers to the block-level formatting context. Once an element is formed into a BFC, the layout of its internal elements does not affect the layout of the external elements, and the layout of the external elements does not affect the internal elements in the BFC. A BFC is like an isolated area, separate from the other areas. In general, the root element is a BFC region. Floating and absolutely positioned elements also form BFCs. A BFC is also created when the display attribute is inline-block, flex, etc. The BFC is created when the overflow value of the element is not visible.

For more information, see: Understanding BFC and Margincollapse

28. What is IFC?

IFC stands for Row Level Format Context, which has the following layout rules: (1) The boxes inside the Row Level Context are placed horizontally, one after the other. (2) When one line is insufficient, it will automatically switch to the next line. (3) The height of the row-level context is determined by the height of the highest inline box inside.

For detailed information, please refer to:

Understanding (Layout) of the BFC and IFC

29. Please explain why you need to clear the float? Clear float mode

A floating element can be moved left and right until it encounters another floating element or the inclusion box on its outer edge. The float box is not a normal flow in the document stream. When an element is floated, it does not affect the layout of block-level elements, only the layout of inline elements. The normal flow in the document stream will then behave as if the floating box does not have the same layout. A "height collapse" occurs when the height of the contain box is smaller than the height of the float box. The purpose of clearing float is to clear the impact of using float elements. Floating elements, the height of the collapse, and the height of the collapse caused our layout at the back of the page to not display properly. (1) Use the clear property to clear the float. Refer to 28. (2) Use the BFC block level formatting context to clear the float. Refer to 26. Because the BFC element does not affect the characteristics of the external element, the BFC element can also be used to remove the influence of float, because if not cleared, the child element float will collapse in height, which will inevitably affect the layout and positioning of the following elements. This is obviously against the BFC element's children will not affect the external element setting.

30. How to clear the float with the clear property?

Clear the float with the clear property, which has the following syntax: Clear: none | left | right | to both if single literal meaning, the clear: left should be "clear left float", the clear: right should be the meaning of "clear right float", in fact, this explanation is that the question, because the floating was still in, is not clear. The official explanation for the clear property is: "The edge of the element box cannot be adjacent to the preceding floating element." We set the clear property on the element to avoid the impact of the float element on the element, not to clear the float. Also note that the clear property means that the edge of the element box cannot be adjacent to the front float element. Note that the "front" (i.e. clear property) does not care about the "back" float element. Given that float attributes are either left or right, which cannot both exist, and since clear attributes do not care about the "following" float elements, clear:right must not be valid while clear:left is valid. Clear :left = clear:both; Similarly, clear:right, if valid, is the same as setting clear:both. Thus, the clear:left and clear: right declarations are of no use, at least in the CSS world. Just use clear:both. Clear ::after{content: "; display:table; // This can also be 'block', or 'list-item' clear:both; } Clear is only valid for block-level elements. Pseudo elements such as ::after are inline by default. This is why you need to set the value of the disp lay property to clear floating effects with pseudo elements.

31. How does Zoom :1 clear the float?

Clear the float, triggering HasLayout; The Zoom property is specific to Internet Explorer and allows you to set or retrieve the zoom scale of an object. To solve the IE under the more bizarre bugs. For example, margin overlaps, float clears, and triggers the HasLayout attribute in IE. Context is as follows: probably when setting the value of the zoom, set of elements will can expand or narrow, height width can be calculated again, here once change the zoom value will have to apply colours to a drawing, actually using this principle, also solves the following elements floating time ie parent element as automatically expand. The Zoom property is exclusive to Internet Explorer and is not supported by Firefox or older WebKit core browsers. However, Zoom has now been progressively standardized and appears in the CSS3.0 draft specification. Since non-IE currently does not support this attribute, what attribute do they use to implement element scaling? This can be scaled using the scale animation property in CSS3.

32. Have you used media query for mobile layout?

Suppose you're reading this article on a display device, and you want to project it onto the screen, or you want to print it, and the display device, the screen projection, the print, and so on all have their own characteristics, and CSS provides a way for documents to be presented on different media. When the media query is true, The associated stylesheets or style rules are applied according to the normal cascading rules. When the media query returns false, the stylesheet labeled with the media query will still be downloaded (it just won't be applied). Contains a media type and at least one expression that uses media properties such as width, height, and color to limit the scope of the stylesheet. The addition of media queries in CSS3 makes it possible to apply styles to specific device scopes without modifying the content.

For more information, please refer to CSS3@media Search, Responsive Layout and Adaptive Layout in detail.

33. Use CSS preprocessor? Which one do you like?

Sass (There is no essential difference between Sass and Less, just because the team uses Sass at the front end)

34. What are the ways to optimize and improve performance of CSS?

Loading performance: (1) CSS compression: The written CSS can be packaged and compressed, which can reduce a lot of volume. (2) CSS single style: when you need the bottom margin and left margin, many times choose :margin:top0bottom0; But the margin - bottom: bot Tom; margin-left:left; Execution is more efficient. (3) Reduce the use of @import in favor of link, because the latter is loaded together when the page is loaded, and the former is loaded after the page is loaded. Selector performance: (1) keyselector (KeySelector). The last part of the selector is the critical selector (that is, the part used to match the target element). CSS selectors are matched from right to left. When using descendant selectors, the browser iterates through all child elements to determine whether they are the specified element, and so on; (2) Do not add a label to a rule if it has an ID selector as its key selector. Filter out irrelevant rules (so the style system doesn't waste time matching them). (3) Avoid the use of wildcard rules, such as *{} calculation times amazing! Select only the elements you want to use. (4) Use class instead of tag selection. (5) Use the descendant selector as little as possible to reduce the weight value of the selector. The overhead of descendant selectors is the highest. Try to keep the depth of selectors as low as three levels, and use more classes to associate each tag element. (6) Know which attributes can be inherited, and then avoid specifying rules repeatedly for these attributes. Render performance: (1) Careful use of high performance attributes: float, positioning. (2) minimize page rearrangement and redrawing. (3) Eliminate null rule: {}. The reason for empty rules is generally to reserve styles. Removing these empty rules will definitely reduce the size of your CSS document. (4) When the attribute value is 0, no units are added. (5) Attribute value is floating decimal 0.**, can omit the 0 before the decimal point. (6) Standardize various browser prefixes: those with browser prefixes come first. The standard attributes come after. (7) Do not use the @import prefix, which will affect the loading speed of CSS. (8) Selection optimization nesting, try to avoid too deep level. (9) CSS Sprite map, the same page similar part of the small icon, easy to use, reduce the number of page requests, but at the same time the picture itself will become larger, use, pros and cons to consider clear, then use. (10) Properly use the properties of display. Due to the effect of display, some style combinations will be invalid, which will not only increase the style volume, but also affect parsing performance. (11) Don't abuse Web fonts. While WebFonts may be unfamiliar to Chinese websites, they are popular abroad. WebFonts are usually bulked-up and some browsers can block page rendering and damage performance when downloading them. Maintainability and robustness: (1) Extracting styles with the same attributes, integrating and using them in the page through classes, improving the maintainability of CSS. (2) Separation of style and content: CSS code is defined in external CSS.

For more information, see: What are some ways to optimize and improve performance with CSS? “CSS Optimization, Ways to Improve Performance”

35. How do browsers parse CSS selectors?

The style system matches from the key selector and then moves left to find the ancestor element of the rule selector. As long as the selector's subtree is working, the style system will continue to move left until it matches the rule or abandons it because of a mismatch. If you read CSS rules from left to right, most of them won't match until the end (the far right). Doing so consumes energy and time, and many of them are useless. However, if the right-to-left method is adopted, as long as the right-most selector is found to be mismatched, it can be discarded directly, avoiding many invalid matches.

For more information, see: Explore the Principle of CSS Parsing

36. Should you use odd or even font numbers on web pages? Why is that?

(1) Even-numbered type sizes are relatively easy to scale to other parts of Web design. For example, when I use a 14px body size, I might use a margin of 14× 0.5=7px in some places and a caption of 14×1.5=21px in others. (2) Browser reasons, the lower version of IE6 will force the odd font to be even, that is, 13px render to 14px. (3) System differences. In the early Windows, there were only 12, 14, 15, and 16px dots in the middle of Song body, but 13px was missing.

For more information, please refer to “How to Use Odd-numbered and Even-numbered Fonts on the Web”, “Why Do Few People Use Odd-numbered Fonts at 11px, 13px, 15px, and so on in Modern Web Design?”

37. What scenes are margin and padding suitable for?

Margin is used to separate elements from each other; Padding is the padding that separates the element from the content. Margin is used to separate elements and make them irrelevant to each other. Padding is used to distance the content from the content (text) to the (wrapping) element. When you should use margin: • When you need to add a margin outside the border. • When no background is needed in the blank space. • The space between two boxes connected up and down needs to cancel each other out. Such as 15px+20px margin, will get 20px white space. • When you need to add padding inside the border test. • When the blank space needs a background (color). • The space between two boxes connected top and bottom, hopefully equal to the sum of the two. Add 15px+20px padding to get 35px white space.

38. How to write the pull-away style module, and how to express ideas? Is there any practical experience? [Interview question of Ali Air Travel]

My understanding is to make common CSS styles into separate CSS files... Generic and business related to separate out, common to make style modules to share, business related, into the business related database to make the corresponding functional modules.

For more information, please refer to CSS Specification – Classification Methods.

39. A brief description of CSS3’s All attribute.

The "all" property is actually short for all CSS properties, which means that all CSS properties are anything but unicode-bidi and direction. Support three common CSS property values: Initial, Inherit, and Unset. The initial value is the default initial value for all CSS properties except unicode-bidi and direction. Inherit means inherit, which means that the CSS properties of the element inherit the values of the parent elements except for Unicode-bidi and direction. Unset means to unset, which means to ignore the CSS set by the browser or user for the current element, and then to use the inherited value if it is CSS with inherited properties, such as color. If it is a CSS property with no inherited property, such as background-color, the initial value is used.

For more information, please refer to “Simple Understanding of CSS3’s All Properties”.

40. Why not use wildcards to initialize CSS styles?

Use * {pading: 0; margin:0; } written as benefits is to write up is very simple, but is a wildcard, need to traverse all the label again, when the site is bigger, the style is more, such written greatly strengthened the load of your web site, can make the site load time need a long time, so the general large web sites have a hierarchical style of a set of initialization. For performance reasons, not all tags have padding and margin, so it's easy to initialize common elements with default padding and margin instead of using the wildcard *.

41. What is the difference in the method of calculating containingblocks from an absolute stream?

(1) The inline element can also be used as the element where the "containing block" is; (2) The element that contains the block is not the parent block-level element, but the ancestor or root element of the nearest position that is not static; (3) The boundaries are paddingBox instead of ContentBox.

42. How do you understand HasLayout?

HasLayout is an attribute unique to IE. Many of the CSSBUG under IE are closely related to it. In IE, an element either calculates the size and organization of its own content, or relies on its parent element to calculate the size and organization of its content. When an element's hasLayout attribute is true, it is responsible for sizing and positioning itself and its possible descendants. Although this means that the element has to pay more to maintain itself and its contents, rather than relying on the ancestor element to do so.

For more information, please refer to: “CSS Fundamentals – HasLayout in Internet Explorer, the Bug Roots of the Lower Version of Internet Explorer” “CSS Magic Hall: HasLayout was originally like this!”

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

If it is height, it is the height relative to the containing block. If it's a Padding or Margin the vertical property is relative to the width of the containing block.

44. What is the principle of full screen scrolling? Which CSS properties are used? (To be further practiced)

Principle: If there are 5 full-screen pages that need to be displayed, then the height is 500% and the display is only 100%. Pages in the container and the container are set to the height of the current visible area. Meanwhile, the parent element overflow property value of the container is set to hidden. Full-screen scrolling is achieved by changing the position of the container's visual area. Mainly in response to mouse events, the page through the CSS animation effect, to move. Overflow: hidden; The transition: all1000msease;

Details can refer to: “JS web page full screen switch (smooth transition), mouse rolling switch” “write full screen scroll plug-in with ES6”

45. What is responsive design? What is the rationale for responsive design? How do I work with lower versions of IE? (To be further understood)

Responsive website design is a website that is compatible with multiple terminals, rather than making a specific version for each terminal. The basic principle is through the media query detection of different device screen size to do processing. The page header must have a meta declaration viewport.

For more information, please refer to Principles of Responsive Layout, Realization Methods and Principles of Responsive Layout.

46. Parallax scrolling effect, how to animate each page differently? Return to the top, swipe down to appear again, or only once, what do I do?

Parallax scrolling refers to multiple layers of background moving at different speeds to create a three-dimensional motion effect, bringing a very good visual experience.

For more information, see: How to implement parallax scrolling web pages?

47. How to change the yellow background of the form automatically filled by Chrome after remembering the password?

This is due to the fact that Chrome will default to the input:-webkit-autofill property of the autofilled In Put form and then give it the following style: {background - color: RGB (250255189). important; background-image:none! important; Color: RGB (0, 0). important; } The default background-color, background-image, and color values using important do not increase their priority, but other attributes can be used. Use a solid color inner shadow large enough to overwrite the yellow background of the Input input box. Processing input as follows: - its - autofill, textarea: - its - autofill, select: - its - autofill {- its - box - shadow: 000 px1000pxwhiteinset;  border:1pxsolid#CCC! important; }

For more information, please refer to: “Default Fill Style after Remoting Chrome Password”, “Modify yellow background for Google Chrome Password Remember form”.

48. How to make Chrome support text less than 12px?

When CSS is set to 12px or less under Google, the display will be the same size. The default is 12px. -webkit-text-size-adjust :none; -webkit-text-size-adjust :none; -webkit-text-size-adjust :none; -webkit-text-size-adjust :none; There is no limit to font size. But Chrome will no longer work with version 27. The -webkit-text-size-adjust style is no longer supported in advanced versions of Google Chrome, so be careful when using it. (2) You can also use CSS3's transform scaling attribute -webkit-transform:scale(0.5); Note - its - transform: scale (0. 75); In this case, if the inline element is inline, the inline element must be converted to a block element by using display: block/ inline-block/... ; (3) the use of pictures: if the content is fixed, the use will be less than 12px text content cut out to do the picture, so does not affect compatibility and does not affect the beauty.

Google browser does not support CSS Settings for text less than 12px.

49. What can I do with CSS to make font on a page clearer and thinner?

WebKit kernel private property: -webkit-font-smoothing, for anti-aliasing fonts, makes fonts look cleaner and more comfortable when used. Set it to -webkit-font-smoothing:antialiased; However, this property is only for MacOS, and no other operating system Settings are valid.

For more information, see “Making Fonts Clear in CSS – Webkit-Font Smoothing.”

The difference between italic and Oblique in font-style attribute?

The keywords ITALIC and Oblique mean "Italic." The difference is that Italic is an italic font that uses the current font, while Oblique simply tilts the text. If the current font does not have a corresponding italic font, it resolves to Oblique, which is simple shape inclination.

51. What is the difference between device pixels, CSS pixels, device independent pixels, DPR, and PPI?

Device pixels refer to physical pixels. Generally, the resolution of a mobile phone refers to device pixels. Device pixels of a device are immutable. CSS pixels are equivalent to device-specific pixels. The size of a CSS pixel should be the same regardless of the resolution of the device. The CSS pixel is a relative unit that is specific to the device pixel. DPR refers to the ratio of device pixels to individual device pixels. For a typical PC screen, DPR =1. With the iPhone 4, Apple introduced the Retina display with a DPR of 2. The zoom of the screen changes the value of the DPR. PPI refers to the density of physical pixels per inch, and the higher the PPI, the higher the screen resolution.

For detailed information, please refer to: “What are physical pixels, virtual pixels, logical pixels, device pixels, and what is PPI,DPI,DPR and DIP”, “Pixels” that front-end engineers need to understand, “CSS pixels, physical pixels, logical pixels, device pixel ratio, PPI, Viewport”, “The Concept of Pixels in Front-end Development”

52. What is the difference between LayoutViewport, VisualViewport and IdealViewport?

Related knowledge points:

If the viewport area of the browser on a mobile device is set to viewport, some websites will get confused because the viewport is too narrow, so these browsers decide to set the viewport to a wide value by default, such as 980px. That way, even websites designed for the desktop will work in mobile browsers. PPK calls this browser's default viewport layoutviewport. The width of the layoutviewport is larger than the width of the viewport of the browser, so we need a viewport to represent the size of the viewport of the browser. PPK calls this viewport visualviewport. IdealViewport is the most suitable viewport for mobile devices. The width of IdealViewport is equal to the width of the screen on the mobile device. As long as you set the width of a element in CSS to be the width of IdealViewport (px units), The width of this element is the width of the device screen, which is 100% width. The point of I DealViewport is that sites designed for IdealViewport render perfectly to the user at any screen resolution, without manual scaling or horizontal scrollbars.

Answer:

There are three concepts of viewport that mobile terminals need to understand. The first viewport is the layout viewport. When displaying the web page on the mobile end, the screen size of the mobile end is relatively small. If the web page is arranged using the screen size of the mobile end, the layout of the whole page will be confused. So mobile browsers provide the concept of a LayoutViewport to display the layout of the page. The size of the LayoutViewport is usually 980px, so the layout of the page does not change much. We can drag and zoom to see the page. The second viewport refers to the visualviewport, and the visualviewport refers to the viewport size of the area we can see on the mobile device, which is generally the size of the screen resolution. The relationship between Visu alviewport and layoutviewport is just like we look at the outside scenery through the window. The visual viewport is the window, while the outside scenery is the web content in the layoutviewport. The third viewport is the ideal viewport. Since LayoutViewport is generally larger than VisualViewport, it is necessary to drag and zoom to see the entire page. Therefore, the concept of IdealViewport is proposed again. Under IdealViewport, users can view the whole page without zoating and scrolling, and the content size of the page is the same under different resolutions. IdealViewport is designed by changing the size of the layoutViewport to equal the width of the device. This width can be understood as the width of the device in pixels, so the page designed according to IdealViewport should display the same in different resolutions.

Detailed information can be referred to: “In-depth Understanding of Viewport in Mobile Front-end Development”, “Talk about Viewport in Mobile Front-end”, “How Much Do You Know About Mobile Terminal Adaptation”

53.position:fixed; What if I don’t work on Android?

Because the default viewport for mobile browsers is called layoutviewport. When displaying on the mobile end, because the width of the layoutviewport is larger than the width of the screen on the mobile end, the scroll bar will move left and right in the page. The fixed element is to fix the position relative to the layoutviewport, rather than the position fixed on the screen on the mobile end. Therefore, there will be a feeling that fixed is invalid. If we want to achieve fixed effect relative to the screen, we need to change the size of viewport to idealviewport, which can be set as follows: < metaname = "viewport" content = "width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, the minimum - sca Le = 1.0, user - scalable = no "/ >

54. If you need to write the animation manually, what is the minimum time interval you think it should take and why? (ali)

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

55. How to remove spacing between inline-block elements?

Remove spacing, use negative margin, use font-size:0, letter-spacing, word-spacing

For more information, see “N Ways to Remove the Spacing Between Inline-Block Elements”.

How to deal with overflow scroll problem?

The following code solves this kind of lag: -webkit-overflow-scrolling:touch; Because this line of code has hardware acceleration enabled, the scrolling is smooth.

For more information, see: “Solving the problem of pages using overflow scroll to slide on iOS”

57. There is a height adaptive div with two div inside. One is 100px high and the other one is expected to fill the remaining height.

(1) Use position: relative for the outer div; Hall-required adaptive divs use position:absolute; top:100px; bottom:0; left:0; right:0; (2) Use Flex layout, set the main axis to the vertical axis, and the second div to the flex-grow to 1.

For more information, see: “There is a height adaptive div, there are two div, one height 100px, want the other to fill the rest of the height (three scenarios)”

58. Explain the format of PNG, JPG, GIF and when to use them respectively. Do you know anything about WebP?

Related knowledge points:

(1) BMP, which is lossless and supports both indexed and direct colors, is a bitmap. There is little data compression in this image format, so images in BMP format often have large file sizes. (2) GIF is lossless, using indexed color, dot map. LZW compression algorithm is used for coding. The small file size is the advantage of the GIF format, at the same time, the GIF format also has the advantages of animation support and transparency. However, the GIF format only supports 8 bits of indexed color, so the GIF format is suitable for scenarios where color requirements are not high and file sizes are small. (3) JPEG is lossy, using direct color, dot map. The advantage of JPEG pictures, is the use of direct color, thanks to more abundant colors, JPEG is very suitable for storing photos, compared with GIF, JPEG is not suitable for storing corporate Logo, wireframe class of the picture. Because lossy compression will cause the image to blur, and the choice of direct color, will cause the image file is larger than GIF. (4) PNG-8 is lossless, using indexed color, dot map. PNG is a relatively new image format. PNG-8 is a good alternative to GIF. Whenever possible, you should use PNG-8 instead of GIF because PNG-8 has a smaller file size for the same image effect. In addition, PNG-8 also supports the adjustment of transparency, which GIF does not. Now, unless you need animation support, there's no reason to use GIF instead of PNG-8. (5) PNG-24 is lossless, using direct color, dot map. The advantage of PNG-24 is that it compresses the image data so that the file size of the PNG-24 lattice is much smaller than that of the BMP for the same effect. Of course, the PNG24 image is still much larger than JPEG, GIF, or PNG-8. (6) SVG is lossless, vector graphs. SVG is a vector graph. This means that SVG images are made up of lines and curves and the methods for drawing them. When you zoom in on an SVG image, you still see lines and curves, not pixels. This means that SVG images do not distort when enlarged, so it is ideal for painting corporate logos, ICONS, etc. (7) WebP is a new image format developed by Google. WebP supports lossy and lossless compression at the same time. It uses direct color and dot map. You can tell from its name that it was born for the Web. What does it mean that it was born for the Web? That is to say, WebP has a smaller file size for the same quality images. Sites are now full of images, and reducing the file size of each image will greatly reduce the amount of data transferred between the browser and the server, thus reducing access latency and improving the access experience. • With lossless compression, the file size of a WebP image of the same quality is 26% smaller than that of PNG; • Under lossy compression, the file size of a WebP image with the same image accuracy is 25%~34% smaller than that of a JPEG image; • The WebP image format supports image transparency. A lossless compressed WebP image only needs 22% extra file size to support transparency. However, currently only Chrome browser and Opera browser support WebP format, compatibility is not very good.

Answer:

There are seven common image formats that I've learned about. (1) The first is the BMP format, which is lossless compression and supports indexed color and direct color bitmap. Since it is largely uncompressed, its file size is generally larger. (2) The second is the GIF format, which is lossless compression using the index color of the dot map. Due to the LZW compression method, the file size is small. GIF also supports animation and transparency. But because it uses index colors, it is suitable for scenarios where color requirements are not high and file sizes are small. (3) The third is the JPEG format, which is lossy compression using direct color dot map. Due to the use of direct color, color is relatively rich, generally suitable for storage photos. However, due to the use of direct color, the file may be larger than the GIF format. (4) The fourth is the PNG-8 format, which is lossless compression using the index color of the dot map. It is a good alternative to GIF format, it also supports transparency adjustment, and the file size is smaller than GIF format. In general, if animation is not required, we can use PNG-8 format instead of GIF format. (5) The fifth is the PNG-24 format, which is lossless compression using direct color dot map. The advantage of PNG-24 is that it uses a compression algorithm, so its size is much smaller than BMP files, but it is still larger compared to the other formats. (6) the sixth format is SVG format, it is a vector image, it records the drawing way of the picture, so the enlargement and reduction of the vector image will not produce jagged and distortion. It is generally used to make some website logos or ICONS such as pictures. (7) The seventh format is WebP format, which supports lossy and lossless compression methods using direct color dot map. The biggest advantage of using the WebP format is that it has a smaller file size for files of the same quality. Therefore, it is very suitable for the transmission of network pictures, because the reduction of the size of the picture means the reduction of the request time, which will improve the user experience. This is Google development of a new picture format, currently in the compatibility is not too good.

For more information, please refer to: “There are so many image formats, which one is better for you?”

59. How can a browser tell if it supports WebP images

(1) width and height judgment method. Create an image object, set its SRC attribute to the WebP format image, and then get the width and height of the image in the onload event. If you can get the width and height of the image, it means that the browser supports WebP format image. If the onerror function is not retrieved or triggered, then the browser does not support WebP lattice images. (2) Canvas judgment method. We can dynamically create a Canvas object, set it to WebP format through the TodataURL of Canvas, and then judge whether the return value contains Image/WebP field. If it contains, WebP is supported; otherwise, it is not supported.

For more information, see: “Deterring whether your browser supports WebP images”, “todataURL ()”.

60. What is Cookie isolation? (or: do not request a resource with a cookie)

When the website requests the server, it will automatically wear cookies to increase the information in the header and slow the request. If the static files are placed under the main domain name, then the cookie data with the static file request is submitted to the server, which is very wasteful of traffic, so it is better to separate the static resources and put the CDN. Because cookie is limited by domain, the request cannot be submitted across domains. Therefore, when non-main domain name is used, the request header will not contain cookie data, which can reduce the size of the request header and the request time, so as to achieve the purpose of reducing the overall request delay. At the same time, this way will not pass the cookie to the WebServer, but also reduce the processing and analysis of the cookie by the WebServer, and improve the parsing speed of the HTTP request of the WebServer.

For details, please refer to: What is a CDN? What are the advantages of using a CDN?

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

Pages load from top to bottom, of course, loading styles first. Because the browser parses the HTML document line by line, parsing to the stylesheet written at the end (outlining or writing in the style tag) causes the browser to stop rendering until it is loaded and then re-render after the parsed stylesheet is complete. FOUC (page flicker caused by style failure) can occur on Windows IE

62. What is a CSS preprocessor/post-processor?

The CSS preprocessor defines a new language. The basic idea is to use a special programming language, add some programming features to CSS, generate files with CSS as the target, and then the developer can just code in that language. In general, a CSS preprocessor uses a special programming language to style Web pages and then compiles them into normal CSS files. Preprocessors such as LESS, Sass, Stylus, used to precompile Sass or LesssSSSprite, enhance the reusability of CSS code, as well as hierarchy, mixin, variable, loop, function, etc., which has a very convenient modular development ability of UI components, greatly improving work efficiency. CSS post-processor is a preprocessor that processes CSS and eventually generates CSS. It belongs to CSS preprocessor in the broad sense. We've been using CSS post-processors for a long time. The best example of this is CSS compression tools (such as clean-CSS), but we haven't mentioned them separately before. And the recently popular Autoprefixer, which automatically handles compatibility issues based on browser support data on Caniuse. Post-processors such as postCSS are often seen as handling CSS according to the CSS specification in the finished stylesheet to make it more efficient; Currently, the most common problem is to add browser private prefixes to CSS properties to achieve cross-browser compatibility.

For more information, see CSS Preprocessor and Post-processor.

63. Explain CSSSprites

Include all the images involved in a page into a large image, and then use the combination of CSS background-image, background-repeat, background-position to position the background. Using CSSSprites can reduce the HTTP request of the web page, which can improve the performance of the page; CSSprites reduce the number of bytes in an image. Advantages: reduce HTTP requests, greatly improve the page loading speed increase image duplication of information, improve the compression ratio, reduce image size Change style convenient and only on one or a few images change color or style can be realized weakness: the image merge maintenance trouble, trouble to modify an image may need to layout the whole picture, style

64. What are the advantages and disadvantages of using REM layout?

Advantages: In an era of vastly different screen resolutions, as long as REM is associated with screen resolution, the entire page can be zoomed in and out, so that the display is unified on the device. And now the browser has basically supported REM, compatibility is also very good. Disadvantages: (1) Not good performance on bizarre DPR devices. For example, some high-end Huawei models will suffer from confusion in REM layout. (2) Using iframe references can also be problematic. (3) REM is inconsistent with the current design philosophy of the two major platforms in terms of multi-screen size adaptation. Namely, the appearance of the large screen is to see big and clear, or to see more questions.

Detailed information can be referred to: CSS3 font size unit REM in the end what is good? VW: It’s Time to Give Up on REM Layout, Why the Design Draft Is 750px, and Flexible for Terminal Adaptation of Handwashing H5 Pages

65. Several common CSS layouts

For more information, see “Several Common CSS Layouts”.

66. Draw a 0.5px line

MetaViewport is adopted, border-image is adopted, and transform:scale() is adopted

For details, see How to Draw a 0.5px Edge (Update).

67. The difference between transition and animation

Transition focuses on the change of CSSProperty. The relationship between the value of the property and time is a cubic Bezier curve. Animation works on the elements themselves rather than on style attributes, and can use the concept of keyframes to achieve more free animation effects.

For more information, please refer to: What is the difference between CSSAnimation and CSStransition? CSS3Transition: Animation, Transition, Transform, Translate

68. What is the preferred minimum width?

"Preferred Minimum Width" refers to the minimum width for which the element is most suitable. For East Asian characters (e.g. Chinese), the minimum width is the width of each character. The Western text minimum width is determined by specific contiguous English character units. Not all English characters form contiguous units. They usually end in Spaces (normal Spaces), dashes, question marks, and other non-English characters. If you want to make English characters the same as Chinese characters and use the minimum width unit for each character, try using word-break:break-all in CSS.

69. Why is height:100% invalid?

For an element in a normal document stream to be active, the percentage height value must have a parent height value that can take effect. The reason is that if the height of the containing block is not explicitly specified (that is, the height is determined by the content), and the element is not absolutely positioned, then the value is calculated as AUTO, which is interpreted as AUTO and therefore cannot be evaluated. Elements with absolute positioning have computed values, even if the height of the ancestor element is computed to auto.

70. Rule of overlay between min-width/max-width and min-height/max-height properties?

(1) max-width overwrites width, even if the width is a line class style or set! Important. (2) Min-width overrides max-width. This rule occurs when min-width and max-width conflict.

71. Basic concept of inline box model

(1) Content Area. A content area is an invisible box surrounding the text, whose size is controlled only by the character itself. It is essentially a characterbox; But for some elements, such as alternative elements such as images, the content is clearly not text, there is no character box, etc., so for these elements, the content area can be treated as the element itself. (2) Inline box. The "inline box" does not display content in blocks, but in a row. The "inline box" here actually refers to the "outer box" of the element, which determines whether the element is inlined or block-level. The box can be subdivided into two categories: "inline box" and "anonymous inline box". (3) Linebox, each line is a "linebox" (marked by solid linebox), each "linebox" is composed of a "inline box". (4) ContainingBox consists of row by row "containingBox".

72. What is a ghost blank node?

The "ghost blank node" is an important concept in the inline box model. Specifically, in the HTML5 document declaration, all parsing and rendering of inline elements is as if there were a "blank node" at the front of each line-box. This "white space node" is always transparent, doesn't occupy any width, can't be seen or scripted, like a ghost, but it actually exists and behaves like a text node, so I call it a "ghost white space node."

73. What are substitution elements?

An element that can be replaced by modifying the content rendered by an attribute value is called a "replacement element." Therefore, <img>, <object>, <video>, <iframe>, or table-element <textarea> and <input> and <select> are typical replacement elements. In addition to the content replaceable property, the replacement element has the following properties. (1) The appearance of the content is not affected by the CSS on the page. In technical terms, styles are rendered outside the scope of CSS. How to change the appearance of the replacement element itself requires something like the Appearance attribute, or some of the style interfaces exposed by the browser itself, (2) have their own dimensions. On the Web, without explicit size setting, the default size of many replacement elements (excluding borders) is 300 pixels ×150 pixels, such as <video>, <iframe> or <canvas>, etc., while a few replacement elements are 0 pixels, such as <img> image. On the other hand, the size of the replacement element of a form element depends on the browser and there is no obvious rule. (3) It has its own set of presentation rules for many CSS properties. A typical one is the vertical-align attribute, and the interpretation of the vertical-align attribute is different for substitutive and non-substitutive elements. For example, the baseline for the default value of vertical-align is simply defined as the bottom edge of the character x, while the baseline for the replacement element is defined as the bottom edge of the element. (4) All replacement elements are inline horizontal elements, that is, replacement elements and replacement elements, replacement elements and text can be displayed on one line. However, the default display value for the replacement element is different, either inline or inline-block.

74. What are the rules for substituting elements?

The sizes of the replacement elements are classified from the inside out into three categories: intrinsic size, HTML size, and CSS size. (1) The inherent size refers to the original size of the replacement content. For example, images and videos, when they exist as separate files, have their own width and height. The size of an HTML can only be changed using HTML native attributes, such as the width and height attributes of <img>, the s-ize attribute of <input>, the cols and rows attributes of <textarea>, etc. (3) CSS size specifically refers to the size that can be set by CSS width and height or max-width/min-width and max-height/min-height, corresponding to the contentBox in the box size. The calculation rules of this 3-layer structure are as follows: (1) If there is no CSS size and HTML size, the inherent size is used as the final width and height. (2) If there is no CSS size, then use HTML size as the final width and height. (3) If there is a CSS size, the final size is determined by the CSS properties. (4) If the "proper size" contains the proper width to height ratio, and only the width or only the height is set, the element will still be displayed in the proper width to height ratio. (5) If none of the above conditions is satisfied, the final width is 300 pixels and the height is 150 pixels. (6) Use the same size calculation rules as above for inline replacement elements and block-level replacement elements.

75. What is the relationship between content and replacement elements?

The object generated by the content attribute is called an anonymous replacement element. (1) The text we generate with content is unselected and uncopyable, as if we had set the userSelect: None declaration, but the text of normal elements can be easily selected. Also, content generated text can't be read by screen readers or retrieved by search engines, so don't make a mistake of using the content attribute to generate important text information, as it's not accessible and SEO-friendly. (2) Content generated content cannot be left or right: Empty pseudo-classes. (3) The dynamic content generated value cannot be obtained.

76. MARGIN: Fill rule of auto?

Margin 'auto' is not a decoration, is a strong computing meaning of the keyword, used to calculate the corresponding direction of the element should get the remaining spacing size. However, there is a precondition for triggering Mar Gin :auto calculation, that is, when width or height is auto, the element is automatically filled in the corresponding direction. (1) If one side is fixed and one side is AUTO, then AUTO is the size of the remaining space. (2) If both sides are auto, the remaining space is equally divided.

77. Invalid situation of margin

(1) The vertical margin of the non-replacement element of display calculation value inline is invalid. For inline replacement elements, vertical margin works, and there are no MA rgin merging problems. <tr>, <td> or display <td> or display <td> or display <td> or table-row <tr> or table-row <td> or display <td> or table-row (3) The margin value of the non-positioning position of the absolute positioning element is "invalid". (4) The positioning of the margin-bottom of the child element of the fixed height container or the margin-right of the child element of the fixed width is "invalid".

78. What is the particularity of the border?

(1) border-width does not support percentage. (2) The default value of border-style is none. Some people may mistake it for solid. This is why border-width or border-col or has no border display. (3) border-style:double width is always the same, the middle interval is ±1. (4) The default color is the color value of color. (5) The default background image is positioned relative to the paddingbox.

79. What are baseline and x-height?

The lower edge (line) of the letter X is our baseline. The x-height is the height of the lowercase letter x, and the term describes the distance between the baseline and the meanline (also known as the midline). In the CSS world, middle is 1/2x-height above the baseline. We can think of it roughly as the point where the letter x intersects. Ex is a relative unit in CSS and refers to the height of the lowercase letter x, which is, yes, x-height. The value of ex lies in its sideline of vertical centering of inline elements that are unaffected by font and size. Inline elements are aligned by default with a baseline, which is the bottom of x, and 1ex is the height of an x.

80. What is the particularity of line-height?

(1) For pure inline elements with non-replacement elements, the visible height is completely determined by line-height. For purely inline elements such as text, line-height is the cornerstone of height calculation, which in technical terms specifies the base height from which to calculate the height of the line-box box. (2) The height of the inline element is composed of fixed height and unfixed height. The unfixed part is the "line space" here. In other words, the reason line-height works is by changing the "line spacing". In CSS, the "line space" is scattered above and below the current text, that is, even the first line of text has a "line space" above it, but this "line space" is only half the height of the full "line space", so it is also called "half line space". (3) Line height =line-height = font-size. (4) Traditional CSS attributes such as border and line-height do not have the concept of decimal pixels. If the mark is the upper margin of the text, then round down; If it is a text margin, round it up. (5) For plain text elements, line-height directly determines the final height. However, if there are replacement elements at the same time, line-height can only determine the minimum height. (6) For block-level elements, line-height has no effect on its own. When we change line-height, the height of block-level elements changes with it, which is actually realized by changing the height occupied by inline level elements in block-level elements. (7) The default value of line-height is normal. It also supports numeric values, percentage values, and length values. If it is a numeric type, its final value is the value multiplied by the current FONT-SI ZE. Is a percentage value, and its final computed value is the value multiplied by the current font-size. Is the original meaning unchanged when the length value. (8) If you use a number as the value of the line-height attribute, then all child elements inherit this value; However, if you use a percentage value or a length value as an attribute value, then all child elements inherit the final computed value. (9) No matter how the inline element line-height is set, the final height of the parent element is determined by the line-height with a larger value. (10) As long as there are "inline boxes", there will always be "line-box", which is an invisible box wrapped around each line of inline elements. Then, the important thing is that in front of each "line-box" there is an invisible "ghost blank node" of width 0 with the font and line-height attribute of that element.

81. What is special about vertical-align?

(1) The default value of vertical-align is baseline, which is aligned to the baseline, and the baseline is defined as the lower edge of the letter X. Thus, inline elements are, by default, aligned along the bottom edge of the parent x. For replacement elements such as images, the bottom edge of the element itself is often used as a baseline. : An inline-block element. If there is no inline element inside, or if the overflow is not visible, the base line of the element is the bottom edge of its margin. Otherwise, its baseline is the baseline of the last inline element in the element. (2) Vertical-align :top is aligned with the top of the highest inline element in the line if it is inline. If display evaluates to a table-cell element, we can imagine a <td> element, aligned with the upper edge of the <tr> element. (3) Vertical-align :middle. For inline elements, align the vertical center of the element with 1/2x-height above the line box baseline. For the table-cell element, the cell-filled box is centered relative to the outer table rows. (4) Vertical-align supports numerical attributes, which are offset up or down from the baseline depending on the value. If it is negative, offset down, and if it is positive, offset up. (5) The percentage value of the vertical-align attribute is calculated relative to the calculated value of the line-height. (6) Vertical-align works under the premise that it can only be applied to inline elements and elements whose display value is table-cell. The table-cell element sets the vertical-align child elements, but instead of the child elements, it uses the table-cell element itself.

82. What is special about the overflow?

(1) If an element has an overflow:hidden declaration, and if there is a border and padding property, then the crop boundary is the inside edge of the BorderBox, not the inside edge of the PaddingBox. (2) there are two tags in HTML is the default of the scroll bar can be produced, one is the root element < HTML >, the other is a text field < textarea >. (3) The scrollbar will occupy the available width or height of the container. Element (4) set the overflow: hidden statement, inside content high overflow, rolling still exists, just scroll bar does not exist!

83. What is Dependent-Free Absolute Positioning?

Absolute positioning without setting the value of the left/top/right/bottom property is called "dependency free absolute positioning". A dependency - free absolute position is related to its position without setting position:absolute.

84. What is the relationship between absolute and overflow?

(1) If overflow is not a positioning element, and there is no positioning element between absolute positioning element and overflow container, then overflow cannot clipping absolute element. (2) If the value of the overflow attribute is not hidden but auto or scroll, even if the height and width of the absolute positioning element is greater than the width and height of the overflow element, there will be no scroll bar. (3) The overflow clipping in Chrome and Opera is invalid when the overflow element itself transforms.

What is clip cutting?

Accessibility concealment refers to the concealment of content that is invisible to the naked eye, but can be recognized and accessed by other assistive devices. The other reason clip clipping is what I call "optimal accessibility hiding" is that it is more universal, and any element, any scene, can be used without any obstacles.

A. Relative B. Relative C. Relative D. Relative

(1) The left/top/right/bottom percentage of the positioning element is calculated relative to the containing block, not itself. Note that although the positioning displacement is relative to itself, the calculated value of the percentage value is not. (2) The percentage values of top and bottom in two vertical directions are the same as the percentage values of height, both of which are calculated based on relative height. At the same time, if the height of the containing block is auto, then the calculated value is 0 and the offset is invalid. That is, if the parent element has no height set or is not "formatted height", then relative similar to top:20% code is equivalent to top:0. (3) When opposite orientation values are applied to relative positioning elements, i.e., top/bottom and left/right are used at the same time, only one orientation attribute will be used. The default document stream is top-down, left to right, so if top/bottom is used at the same time, bottom will not work. When left/right are used together, right is invalid.

87. What is cascading context?

Cascading Context, or StackingContext, is a three-dimensional concept in HTML. If an element contains a cascading context, we can say that the element is "superior" to others on the z axis. Cascading context elements have the following properties: (1) Cascading context elements have a higher level of cascading than normal elements (for reasons explained later). (2) Cascading context can block the blending mode of elements. (3) The cascading context can be nested, and the internal cascading context and all its children are subject to the external "cascading context". (4) Each cascading context is independent of its sibling elements, which means that only the descendant elements need to be considered when cascading or rendering. (5) Each cascading context is self-contained. When a cascading element occurs, the whole element is considered to be in the cascading order of the parent cascading context. The creation of cascading context: (1) the page root element is born with a cascading context, called the root cascading context. The root cascading context refers to the root element of the page, which can be thought of as the < HTML > element. Therefore, all elements in a page must be in at least one "cascading boundary." (2) For the positioning element with position value of Relative/Absolute and in Firefox/IE browsers (excluding Chrome browsers) with position:fixed declaration, when its z-index value is not AUTO, the cascading context will be created. Chrome and other WebKit kernel browsers, position:fixed element natural cascading context elements, without Z-index as a value. In my tests, IE and Firefox are still the way they used to be. (3) Some other CSS3 attributes, such as the element's opacity value, are not 1.

88. What is Cascading Level?

Cascading level, known as stackinglevel, determines the order in which elements in the same cascading context are displayed along the Z-axis. Obviously, all elements have cascading levels, both cascading context elements and ordinary elements. However, the cascading level of common elements is only limited to the current cascading above and below elements.

89. What is the sequence of elements?

Cascading order, known as stackingorder, indicates that elements are cascaded in a specific vertical order.

90. The Cascading Rule?

(1) Whoever is bigger is better: when there is an obvious cascading level identifier, such as the Z-index attribute value in effect, in the same cascading context field, the one with the higher cascading level value covers the one with the smaller one. (2) Override: When the elements are stacked at the same level and in the same order, the elements in the later part of the DOM stream will overwrite the elements in the earlier part.

91. What is special about font-weight?

If you use a numeric value for the font-weight attribute, it must be a whole hundred from 100 to 900. Because the value here is just like the appearance of the value, is actually a keyword with a specific meaning, and there is a corresponding relationship between the value of the keyword and the letter keyword.

92. What is the particularity of text-indent?

(1) Text-indent is only valid for the first line of inline box content. (2) Inline-block/inline-table will take effect if the computed value of display is inline-block/ inline-table. <input> tag button text-indent value is not valid. <button> tag button text-indent value is valid. (5) The percentage value of text-indent is calculated relative to the "contain block" of the current element, not the current element.

Spacing between characters?

You can use letter-spacing to control the spacing between characters, including English letters, Chinese characters, and Spaces. There are several characteristics of letter-spacing. (1) Succession. (2) The default value is Normal instead of 0. Although normally the normal value is 0, there is still a difference between the two. In some scenarios, letter-spacing adjusts normal for better layout. (3) Support negative values, and when the value is large enough, it will make the characters form overlap, or even reverse arrangement. (4) As with the text-indent property, the first line will always retain at least one character, no matter how large or small the value. (5) Support small values, even 0.1px is also supported. (6) Percentage value is not supported for the time being.

94. Word-spacing?

Letter-spacing applies to all characters, but word-spacing only. In other words, word-spacing increases the spacing.

95. White-space with newlines and whitespace controls?

The white-space attribute declares how to handle white space characters within an element, such as those created by the space key, Enter key, and Tab key. Therefore, white-space can determine whether the text and text content is displayed on a single line (whether the carriage return space takes effect), whether large contiguous white space is displayed (whether the space takes effect), and so on. Its attribute values include the following. • Normal: Merges white space characters and newlines. • Pre: Whitespace characters are not merged and content is only newlined where there is a newline character. •nowrap: This value merge whitespace characters like Normal, but does not allow text to wrap around. • Pre-wrap: Whitespace characters are not merged and content is only wrapped where there is a newline character, allowing text to wrap. • Pre-line: Merges white space characters, but only breaks lines where there are newline characters, allowing text to wrap around.

96. Will the background-image of a hidden element be loaded or not?

Related knowledge points:

In our tests, if an element's display evaluates to None, it will still send an image request in Internet Explorer (IE8 ~ IE11, higher versions are not confirmed). Fire Fox won't. Chrome and Safari seem to be a little smarter: If the hidden element is also background-image, the image will still load. If the parent element's display evaluates to None, then the background image will not be requested, and the browser may be reassured that the background image will not be used for the time being. If the <img> element is not background-image, then setting display:none will still request the image resource on all browsers. Also note that if the style set has no corresponding element, the background-image will not be loaded. Hover Background-image in the case of touch loading.

Answer:

– (1) The background image of the element

– the element itself sets display:none, it will request an image – the parent element sets display:none, it will not request an image – style without elements used, it will not request -:hover, it will request when triggered

– (2) img tag image will be requested in any case

For more information, see: Examples of various situations in which CSS controls HTTP requests for front-end images

97. How to implement the ellipsis of single/multi-line text overflow (…) ?

/* overflow */ p {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } * p {position: relative; The line - height: 1.5 em. /* Height: 3em; /* Height: 3em; /* Height: 3em; overflow: hidden; } p:after { content: "..." ; position: absolute; bottom: 0; right: 0; background-color: #fff; }

For more information, please refer to: “How to implement single/multi-line text overflow omission” “CSS multi-line text overflow omission display”

98. What are the common ways to hide elements?

– (1) use display:none; Hide the element. The render tree does not contain the render object, so the element does not take up a position on the page and does not respond to bound listening events.

– (2) Use visibility:hidden; Hide elements. The element still takes up space on the page, but does not respond to bound listening events.

– (3) Use opacity:0; Hide the element by setting its opacity to 0. The element still takes up space on the page and can respond to listening events bound to the element.

– (4) Hide elements by using absolute positioning to remove them from the visible area.

– (5) Hide the element by making other elements cover it with a negative value of z-index.

– (6) Hiding elements is achieved by clipping elements in clip/clip-path. Under this method, elements still occupy positions in the page, but do not respond to bound listening events.

– (7) Hide the element by scaling it to 0 by transforming :scale(0,0). In this way, the element still occupies a place on the page, but it does not respond to bound listening events.

See “Eight Ways to Hide Elements in CSS” for more information.

99. CSS to achieve the upper and lower fixed middle adaptive layout?

Body {padding: 0; margin: 0; } .header { position: absolute; top: 0; width: 100%; height: 100px; background: red; } .container { position: absolute; top: 100px; bottom: 100px; width: 100%; background: green; } .footer { position: absolute; bottom: 0; height: 100px; width: 100%; background: red; } Use Flex layout to implement HTML, body {height: 100%; } body { display: flex; padding: 0; margin: 0; flex-direction: column; } .header { height: 100px; background: red; } .container { flex-grow: 1; background: green; } .footer { height: 100px; background: red; }

For more information, see CSS for Up-and-Down Fixed Middle Adaptive Layout

100. CSS two-column layout implementation?

Related information:

/* Two-column layout refers to the layout of a page with two columns, fixed left side and adaptive right side. There are four ways to achieve this. */ /* (1) Using float, set the left element's width to 200px and float it to the left. Set the margin-left of the right element to 200px and the width to auto (the default is auto, which covers the entire parent element). */ .outer { height: 100px; } .left { float: left; height: 100px; width: 200px; background: tomato; } .right { margin-left: 200px; width: auto; height: 100px; background: gold; } /* (2) The second option is to use Flex layout and set the zoom and zoom scale of the left element to 0 and the base size to 200px. Set the right element's zoom scale to 1, zoom scale to 1, and base size to auto. */ .outer { display: flex; height: 100px; } .left { flex-shrink: 0; flex-grow: 0; flex-basis: 200px; background: tomato; } .right { flex: auto; /*11auto*/ background: gold; } /* (3) The third way is to use the absolute positioning layout, which sets the parent element relative positioning. The left element is set to Absolute positioning and the width is set to 200px. Set the margin-left value of the right element to 200px. */ .outer { position: relative; height: 100px; } .left { position: absolute; width: 200px; height: 100px; background: tomato; } .right { margin-left: 200px; height: 100px; background: gold; } /* (4) The fourth option is to set the parent element to relative position using the absolute position method. Set the left element width to 200px, the right element to absolute, the left element to 200px, and the remaining orientations to 0. */ .outer { position: relative; height: 100px; } .left { width: 200px; height: 100px; background: tomato; } .right { position: absolute; top: 0; right: 0; bottom: 0; left: 200px; background: gold; }

“Two Column Layout Demo”

Answer:

A two-column layout generally refers to a layout with two columns on the page, fixed on the left, and adaptive on the right. There are four ways to do this.

Take the left side with a fixed width of 200px

– (1) With float, set the left element width to 200px and float it to the left. Set the margin-left of the right element to 200px and the width to auto (the default is auto, which covers the entire parent element).

– (2) The second option is to use Flex layout and set the zoom and zoom scale of the left element to 0 and the base size to 200px. Set the right element’s zoom scale to 1, zoom scale to 1, and base size to auto.

– (3) The third method is to use the absolute positioning layout, the parent element is set relative positioning. The left element is set to Absolute positioning and the width is set to 200px. Set the margin-left value of the right element to 200px.

– (4) The fourth option is to set the parent element to relative position using absolute positioning. Set the left element width to 200px, the right element to absolute, the left element to 200px, and the remaining orientations to 0.

101. CSS three column layout implementation?

Related information:

/* Three-column layout refers to a layout with three columns in a page, two columns of fixed width, and an adaptive middle layout. There are five ways to achieve this layout. For example, let's fix the left width at 100px and the right width at 200px. */ /* (1) Using the absolute positioning method, the left and right columns are set as absolute positioning, and in the middle set the value of the margin of the corresponding direction. */ .outer { position: relative; height: 100px; } .left { position: absolute; width: 100px; height: 100px; background: tomato; } .right { position: absolute; top: 0; right: 0; width: 200px; height: 100px; background: gold; } .center { margin-left: 100px; margin-right: 200px; height: 100px; background: lightgreen; Outer {display: flex; outer {display: flex; outer {display: flex; outer {display: flex; outer {display: flex; height: 100px; } .left { flex: 00100px; background: tomato; } .right { flex: 00200px; background: gold; } .center { flex: auto; background: lightgreen; } /* (3) Set the left and right columns to a fixed size, and set the corresponding direction of the float. The middle column sets margin values in both directions. Note this way, the middle column must be placed at the end. */ .outer { height: 100px; } .left { float: left; width: 100px; height: 100px; background: tomato; } .right { float: right; width: 200px; height: 100px; background: gold; } .center { height: 100px; margin-left: 100px; margin-right: 200px; background: lightgreen; } /* (4) Double wing layout with float and negative margin. The pedding on the left and right of the parent element is set, and the three columns are all set to float to the left, the middle column is placed at the front, and the width is set to the width of the parent element. Therefore, the two columns in the back are squeezed to the next line, and they are moved to the previous line by setting the negative value of margin, and then the relative positioning is used to position them to both sides. */ .outer { height: 100px; padding-left: 100px; padding-right: 200px; } .left { position: relative; left: -100px; float: left; margin-left: -100%; width: 100px; height: 100px; background: tomato; } .right { position: relative; left: 200px; float: right; margin-left: -200px; width: 200px; height: 100px; background: gold; } .center { float: left; width: 100%; height: 100px; background: lightgreen; } /* (5) Double wing layout. Compared with the Holy Grail layout, the left and right positions of the double wing layout are reserved through the margin value of the middle column, rather than the pedding of the parent element. Essentially, this is also done by floating and negative margins. */ .outer { height: 100px; } .left { float: left; margin-left: -100%; width: 100px; height: 100px; background: tomato; } .right { float: left; margin-left: -200px; width: 200px; height: 100px; background: gold; } .wrapper { float: left; width: 100%; height: 100px; background: lightgreen; } .center { margin-left: 100px; margin-right: 200px; height: 100px; }

“Three Column Layout Demo”

Answer:

Three-column layout generally refers to the layout of a page with three columns in total, left and right columns of fixed width, and adaptive in the middle. There are five ways to achieve this layout. For example, let's fix the left width at 100px and the right width at 200px. (1) Using the way of absolute positioning, the left and right columns are set as absolute positioning, and in the middle set the value of the margin of the corresponding direction. (2) Using Flex layout, the zoom and zoom proportions of the left and right columns are set to 0, the base size is set to a fixed size, and the middle column is set to AUTO. (3) Using the floating method, set the fixed size of the left and right columns, and set the corresponding direction of the float. The middle column sets margin values in both directions. Note this way, the middle column must be placed at the end. (4) Holy Grail layout, using float and negative margin to achieve. The pedding on the left and right of the parent element is set, and the three columns are all set to float to the left, the middle column is placed at the front, and the width is set to the width of the parent element. Therefore, the two columns in the back are squeezed to the next line, and they are moved to the previous line by setting the negative value of margin, and then the relative positioning is used to position them to both sides. In a twin-wing layout, the width of the middle column cannot be less than the width of any column on either side. This problem does not exist in a twin-wing layout. (5) Double wing layout. Compared with the Holy Grail layout, the left and right positions of the double wing layout are preserved through the margin value of the middle column, rather than the pedding of the parent element. Essentially, this is also done by floating and negative margins.

102. Implement a width and height adaptive square

/*1. */. Square {width: 10%; height: 10vw; background: tomato; } /*2. */. Square {width: 20%;} /*2. height: 0; padding-top: 20%; background: orange; } /*3. */. Square {width: 30%;} /*3. overflow: hidden; background: yellow; } .square::after { content: ""; display: block; margin-top: 100%; }

“Adaptive Square Demo”

103. Implement a triangle

/* Triangles are implemented using the bisection principle of element border connection. */ .triangle { width: 0; height: 0; border-width: 100px; border-style: solid; border-color: tomatotransparenttransparenttransparent; }

Triangles Demo

104. An adaptive rectangle, centered horizontally and vertically, with an aspect ratio of 2:1

*/. Box {position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; width: 10%; height: 0; padding-top: 20%; background: tomato; }