Explore - Summary of all CSS styles

1. CSS selectors and their priority

Selector	Format	priority weight
id selector	#id	100
class selector	.classname	10
attribute selector	a[ref=“eee”]	10
pseudo class selector	li:last-child	10
label selector	div	1
Pseudo-element selector	li:after	1
Adjacent Sibling Selector	h1+p	0
child selector	ul>li	0
descendant selector	li a	0
wildcard selector	*	0

For selector priority :

Label selectors, pseudo-element selectors: 1
Class selectors, pseudo-class selectors, attribute selectors: 10
id selector: 100
Inline styles: 1000

Precautions:

The style declared by !important has the highest priority;
If the priority is the same, the style that appears last takes effect;
Inherited styles have the lowest priority;
Universal selectors (*), child selectors (>) and adjacent sibling selectors (+) are not in these four levels, so their weights are all 0;
When the source of the style sheet is different, the order of priority is: inline style > internal style > external style > browser user-defined style > browser default style.

2. What are the inheritable and non-inheritable properties in CSS

Properties without inheritance:

1.display : Specifies the type of box that the element should generate

2. Text attributes :

vertical-align: vertical text alignment
text-decoration: specifies the decoration to add to the text
text-shadow: text shadow effect
white-space: processing of blank characters
unicode-bidi: set the direction of the text

3. Attributes of the box model : width, height, margin, border, padding

4.背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5.定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6. Generate content attributes : content, counter-reset, counter-increment

7. Outline style attributes : outline-style, outline-width, outline-color, outline

8. Page style attributes : size, page-break-before, page-break-after

9. Sound style attributes : pause-before, pause-after, pause, cue-before, cue-after, cue, play-during

Properties that can be inherited:

1. Font Family Properties

font-family: font family
font-weight: the thickness of the font
font-size: the size of the font
font-style: the style of the font

2. Text series properties

text-indent: text indentation
text-align: horizontal alignment of the text
line-height: row height
word-spacing: the spacing between words
letter-spacing: spacing between Chinese or letters
text-transform: Control text case (that is, uppercase, lowercase, capitalize these three)
color: text color

3. Element Visibility

visibility: control element display hide

4. List Layout Properties

list-style: list style, including list-style-type, list-style-image, etc.

5. Cursor properties

cursor: what shape the cursor is displayed in

3. The attribute value and function of display

attribute value	effect
none	Elements are not displayed and are removed from the document flow.
block	block type. The default width is the width of the parent element, width and height can be set, and it will be displayed in a new line.
inline	Inline element type. The default width is the content width, the width and height cannot be set, and they will be displayed in parallel.
inline-block	The default width is the content width, width and height can be set, and displayed in a row.
list-item	Displayed like a block type element, with styled list markup added.
table	This element is displayed as a block-level table.
you inherit	Specifies that the value of the display attribute should be inherited from the parent element.

4. The difference between display block, inline and inline-block

(1) block: It will occupy a single line, and multiple elements will start on a new line. You can set width, height, margin and padding attributes;

(2) inline: The element will not occupy a single line, and setting the width and height attributes is invalid. However, you can set the margin and padding properties in the horizontal direction, but you cannot set the padding and margin in the vertical direction;

(3) inline-block: Set the object as an inline object, but the content of the object is presented as a block object, and the subsequent inline objects will be arranged in the same line.

5. The difference between inline elements and block-level elements

1) Inline elements

Setting width and height is invalid;
You can set the margin and padding properties in the horizontal direction, but you cannot set the padding and margin in the vertical direction;
Will not automatically wrap;

(2) Block-level elements

Width and height can be set;
It is valid to set margin and padding;
Can automatically wrap;
Multiple blocks, arranged from top to bottom by default.

6. What are the methods of hiding elements

display: none : The rendering tree will not contain the rendering object, so the element will not occupy a position on the page, nor will it respond to bound listener events.

visibility: hidden : The element still occupies space in the page, but will not respond to bound listener events.

opacity: 0 : Set the transparency of the element to 0 to hide the element. The element still occupies space on the page and can respond to listener events bound to the element.

position: absolute : The element is hidden by using absolute positioning to remove the element from the visible area.

z-index: Negative value : to make other elements cover the element to hide it.

clip/clip-path : Use element clipping to hide elements. In this method, elements still occupy positions on the page, but they will not respond to bound listening events.

transform: scale(0,0) : scale the element to 0 to hide the element. In this method, the element still occupies a position in the page, but it will not respond to the bound listening event.

7. The difference between link and @import

Both are ways of referencing CSS externally, and their differences are as follows:

link is an XHTML tag. In addition to loading CSS, it can also define other things such as RSS; @import belongs to the category of CSS and can only load CSS.
When link refers to CSS, it is loaded at the same time when the page is loaded; @import needs to be loaded after the page is fully loaded.
link is an XHTML tag and has no compatibility issues; @import was proposed in CSS2.1, and browsers of lower versions do not support it.
link supports using Javascript to control DOM to change styles; @import does not.

8. The difference between transition and animation

transition is a transition attribute , emphasizing transition, and its implementation needs to trigger an event (such as mouse movement, focus, click, etc.) to perform animation. It is similar to Flash's tween animation, setting a start keyframe and an end keyframe.

animation is an animation property , its implementation does not need to trigger an event, it can be executed after setting the time, and an animation can be cycled. It is also similar to flash's tween animation, but it can set multiple keyframes (defined with @keyframe) to complete the animation.

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

Pseudo-elements: Insert additional elements or styles before and after content elements, but these elements are not actually generated in the document. They are only visible externally, but they are not found in the document's source code, hence the name "pseudo" elements. For example:

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
复制代码

Pseudo-classes: Add special effects to specific selectors. It adds categories to existing elements and does not generate new elements. For example:

a:hover {color: #FF00FF}
p:first-child {color: red}
复制代码

Summary: Pseudo-classes change the state of elements by adding pseudo-classes to element selectors, and pseudo-elements change elements through operations on elements.

10. Understanding of the box model (standard box model, IE box model)

The box model is 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 ranges are different:

The scope of the width and height properties of the standard box model only includes content,
The scope of the width and height properties of the IE box model includes border, padding and content.

You can change an element's box model by modifying the element's box-sizing property:

box-sizing: content-boxRepresents the standard box model (default)
box-sizing: border-boxRepresents the IE box model (weird box model)

11. Why is translate sometimes used to change the position instead of positioning?

translate is a value of the transform property. Changing the transform or opacity does not trigger the browser to reflow or repaint, only compositions. And changing absolute positioning will trigger reflow , which in turn triggers redrawing and compositing.

transform causes the browser to create a GPU layer for the element, but changing absolute positioning uses the CPU. So translate() is more efficient and can reduce the drawing time of smooth animation. When translate changes position, the element will still occupy its original space, which will not happen with absolute positioning.

12. What is the reason for the invisible blank space between li and li? How to solve?

Browsers will render whitespace characters (spaces, newlines, tabs, etc.) between inline elements as a space. For the sake of aesthetics, it is usually <li>placed on a line, which causes <li>a newline character after the line break, which becomes a space and occupies the width of one character.

Solution:**

(1) <li>Set float: left. Disadvantages: Some containers cannot be set to float, such as the focus map for left and right switching.

(2) <li>Write all on the same line. Disadvantages: The code is not beautiful.

(3) <ul>Set the character size inside to 0 directly, that is, font-size:0. Disadvantages: <ul>The size of other characters in is also set to 0, which requires additional resetting of other character sizes, and there will still be blank spaces in the Safari browser.

(4) Eliminate <ul>character spacing letter-spacing: -8px. Disadvantage: This also sets <li>the inner character spacing, so <li>the inner character spacing needs to be set to the default letter-spacing: normal.

13. What are the new features in CSS3

Added various CSS selectors (: not(.input): all nodes whose class is not "input")
rounded corners (border-radius: 8px)
multi-column layout
Shadows and reflections (Shadoweflect)
Text effects (text-shadow)
Text rendering (Text-decoration)
Linear Gradient (gradient)
Rotate (transform)
Added rotation, scaling, positioning, tilting, animation, and multiple backgrounds

14. Common image formats and usage scenarios

1. BMP is a lossless bitmap that supports both indexed and direct colors. This picture format does little to compress the data, so pictures in BMP format are usually larger files.

2. GIF , which is a lossless, indexed-color bitmap. Encoded using LZW compression algorithm. Small file size is the advantage of the GIF format. At the same time, the GIF format also has the advantages of supporting animation and transparency. However, the GIF format only supports 8-bit indexed colors, so the GIF format is suitable for scenes that do not require high color requirements and require a small file size.

3. JPG (JPEG) is a lossy, direct-color bitmap. The advantage of JPEG pictures is that they use direct color. Thanks to richer colors, JPEG is very suitable for storing photos. Compared with GIF, JPEG is not suitable for storing corporate logos and wireframes. Lossy compression will cause the image to be blurred, and the selection of direct color will cause the image file to be larger than GIF.

4.PNG-8 is a lossless bitmap image using indexed colors. PNG is a relatively new image format, and PNG-8 is a very good substitute for GIF format. Where possible, PNG-8 should be used instead of GIF, because under the same image effect, PNG- 8 has a smaller file size. In addition, PNG-8 also supports the adjustment of transparency, while GIF does not support it. There is no reason to use GIF over PNG-8 unless support for animation is required.

5. PNG-24 , which is a lossless bitmap using direct color. The advantage of PNG-24 is that it compresses the data of the picture, so that the file size of PNG-24 format is much smaller than that of BMP for pictures with the same effect. Of course, PNG24 images are still much larger than JPEG, GIF, and PNG-8.

6. SVG is a lossless vector image. SVG is a vector diagram meaning that the SVG image consists of lines and curves and the means to draw them. When zooming in on an SVG image, you still see lines and curves instead of pixels. SVG images will not be distorted when enlarged, so it is suitable for drawing Logos, Icons, etc.

7. WebP is a new image format developed by Google. WebP is a direct-color bitmap that supports both lossy and lossless compression.

15. Understanding of CSSSprites (sprite map)

CSSSprites (sprite images) include all the images involved in a page into a large image, and then use the combination of CSS background-image, background-repeat, and background-position attributes for background positioning.

advantage:

The biggest advantage is that it CSS Spritescan greatly reduce the http requests of web pages, thereby greatly improving the performance of the web pages ;CSS Sprites
CSS SpritesIt can reduce the bytes of pictures, and the bytes of merging 3 pictures into 1 picture are always smaller than the sum of the bytes of these 3 pictures.

shortcoming:

When merging pictures, multiple pictures should be combined into one picture in an orderly and reasonable manner, and enough space should be left to prevent unnecessary backgrounds from appearing in the section. Adaptive pages under widescreen and high resolution, if the background is not wide enough, it is easy to break the background;
CSSSpritesIt is relatively cumbersome during development, and it is necessary to use photoshopor other tools to measure the exact position of each background unit.
Maintenance: CSS SpritesIt is more troublesome during maintenance. When there is a slight change in the page background, this merged picture must be changed. Try not to move the place that does not need to be changed, so as to avoid more changes CSS. You can only (best) add pictures down, so that the bytes of the pictures will increase and you need to change them CSS.

16. Understanding of line-height and its value assignment

(1) The concept of line-height:

line-height refers to the height of a line of text, including the word spacing, which is actually the distance from the baseline of the next line to the baseline of the previous line;
If a label does not define a height attribute, its final height is determined by line-height;
If a container does not have a height set, it is the line-height that expands the height of the container, not the text content in the container;
Setting the line-height value to the same size as height can achieve vertical centering of single-line text;
Both line-height and height can support a height;

(2) Assignment method of line-height:

With unit: px is a fixed value, and em will calculate its own line height with reference to the font-size value of the parent element
Pure Numbers: Will pass the ratio on to future generations. For example, if the parent line height is 1.5 and the child element font is 18px, then the child element line height is 1.5 * 18 = 27px
Percent: pass calculated value to descendants

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

Load performance:

(1) CSS compression: Pack and compress the written CSS to reduce the file size.

(2) Single css style: When bottom and left margins are required, margin:top 0 bottom 0 is often chosen; but margin-bottom:bottom;margin-left:left; will be more efficient.

(3) Reduce the use of @import, it is recommended to use link, because the latter is loaded together when the page is loaded, and the former is to wait for the page to load before loading.

Selector properties:

(1) Key selector (key selector). The last part of the selector is the key selector (that is, the part used to match the target element). CSS selectors are matched from right to left. When using a descendant selector, the browser will traverse all child elements to determine whether it is the specified element, etc.;

(2) If the rule has an ID selector as its key selector, do not add tags to the rule. Filter out irrelevant rules (so the style system doesn't waste time matching them).

(3) Avoid using wildcard rules, such as *{} with an astonishing number of calculations, and only select the elements that need to be used.

(4) Choose as few tags as possible, but use class.

No more than three floors

(5) Use descendant selectors as little as possible, and reduce the weight value of the selector. The overhead of descendant selectors is the highest. Try to minimize the depth of selectors, no more than three layers, and use more classes to associate each label element.

(6) Understand which attributes can be inherited, and then avoid repeating the rules for these attributes.

Rendering performance:

(1) Carefully use high-performance attributes: floating and positioning.

(2) Minimize page rearrangement and redrawing.

(3) Remove empty rules: {}. The reason for empty rules is generally to reserve styles. Removing these empty rules will undoubtedly reduce the size of the css document.

(4) When the attribute value is 0, no unit is added.

(5) The attribute value is a floating decimal 0.**, and the 0 before the decimal point can be omitted.

(6) Standardize various browser prefixes: those with browser prefixes come first. Standard properties follow.

(7) Do not use the @import prefix, it will affect the loading speed of css.

(8) Optimize the nesting of selectors, and try to avoid too deep a hierarchy.

(9) CSS sprite images, small icons on similar parts of the same page, are easy to use and reduce the number of page requests, but at the same time the image itself will become larger. When using it, consider the advantages and disadvantages carefully before using it.

(10) Correctly use the display attribute. Due to the effect of display, some style combinations will be invalid, which will increase the size of the style and affect the parsing performance at the same time.

(11) Do not abuse web fonts. WebFonts may be unfamiliar to Chinese websites, but it is very popular abroad. Web fonts are often bulky, and some browsers block page rendering while downloading web fonts, hurting performance.

Maintainability, Robustness:

(1) Extract the styles with the same attributes, integrate them and use them on the page through class to improve the maintainability of css.

(2) Separation of style and content: define the css code into external css.

18. What is a post-processor ( postCss )?

Post-processors, such as: , are usually processed postCssaccording to the specification in the finished style sheet to make it more effective. At present, the most common thing to do is to add a browser-specific prefix to the attribute to achieve cross-browser compatibility.csscsscss

19. What is the difference between double colon and single colon in ::before and :after?

(1) A colon ( :) is used for CSS3pseudo-classes, and a double colon ( ::) is used for CSS3pseudo-elements.

(2) ::beforeWith the existence of a sub-element, define a pseudo-element before the content of the element body. Does not exist in domit, only in the page.

Note: These:before two pseudo-elements are new in . Initially, the prefix of the pseudo-element used a single colon syntax, but with the evolution, in the specification, the syntax of the pseudo-element was modified to use a double colon, becoming , .:afterCSS2.1WebCSS3::before::after

20. When will display :inline-block show gaps?

There will be gaps when there are spaces, you can delete the spaces to solve;
marginWhen the value is positive, you can marginuse a negative value to solve it;
When in use font-size, it can be solved by setting font-size:0, letter-spacing, and word-spacing;

21. How to implement single-line and multi-line text overflow hiding

single line text overflow

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

复制代码

multiline text overflow

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

复制代码

Note: Since the above three properties are CSS3 properties, no browser can be compatible, so add a in front -webkit-to be compatible with some browsers.

22. What are CSS preprocessors (sass, less)? Why use them?

They are both CSS preprocessors, an abstraction layer over CSS. They are compiled into CSS with a special syntax/language. For example, Less is a dynamic style language, which endows CSS with dynamic language features, such as variables, inheritance, operations, and functions. LESS can run on the client (supporting IE 6+, Webkit, Firefox), or in the service Run on the client side (with Node.js).

Why use them?

The structure is clear and easy to expand. It is convenient to shield browser private syntax differences. Encapsulate repeated processing of browser syntax differences, reducing meaningless mechanical labor.
Multiple inheritance can be easily implemented. Fully compatible with CSS code, it can be easily applied to old projects. LESS just extends the CSS syntax, so old CSS code can also be compiled with LESS code.

The difference between less and sass

Sass (Syntactically Awesome Stylesheets)是一种dynamic style language`, Sass syntax belongs to indentation syntax, it has more functions than css (such as variable, nesting, operation, mixing (Mixin), inheritance, color processing, function, etc.), easier to read.

What is the relationship between Sass and Scss?

The indentation syntax of Sass is very unintuitive for web developers who are accustomed to writing CSS front-ends, and they cannot add CSS code to Sass, so the Sass syntax has been improved, and Sass 3 has become Scss (sassy css). Compatible with the original syntax, just replace the original indentation with {}.
LessIt is also a kind 动态样式语言. CSS is endowed with dynamic language features, such as variables , inheritance , operations , and functions . Less can run on the client (supporting IE 6+, Webkit, Firefox) or on the server (with the help of Node .js).

23. Tell me about your understanding of media queries? (responsive adaptation)

Inspection point: Responsive adaptation , display different effects according to different screen sizes (set the style of the box)

Media queries are a feature added since CSS3. It can be displayed responsively.

A media query consists of two parts:

An optional media type (such as screen, print, etc.)
Zero or more media feature qualification expressions (eg max-width: 500px, orientation: landscape, etc.)

These two parts will eventually be parsed into true or false values, and then the entire media query value is true, then the style associated with the media query will take effect, otherwise it will not take effect.

Simply put, using @media query, you can define different styles for different media types . @media For example, you can set different styles for different screen sizes , especially for pages that need to be designed responsively, @media is very useful. When resetting the browser size, the page will also re-render the page according to the width and height of the browser.

Example usage:

/* 在css样式表的定义中直接使用媒体查询 */ 
.container {
  width: 600px;
  height: 200px;
  background-color: pink;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .container {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 750px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .container {
    width: 980px;
  }
}
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
@media screen and (width: 1200px) {
  .container {
    background-color: skyblue;
  }
}
复制代码

24. Talk about the understanding of CSS engineering

CSS is engineered to solve the following problems:

Macro design : How to organize CSS code, how to split, how to design module structure?
Coding optimization : how to write better CSS?
Build : What do I do with my CSS so that it packs optimally?
Maintainability : After the code is written, how to minimize its subsequent change cost? How to ensure that any one of the colleagues can easily take over?

The following three directions are popular and universal CSS engineering practices:

Preprocessor: Less, Sass, etc.;
Important engineering plug-ins: PostCss;
Webpack loaders, etc.

25. How to judge whether the element reaches the visible area

Take the image display as an example:

The content reaches the display area's:img.offsetTop < window.innerHeight + document.body.scrollTop;

26. Under what circumstances will the z-index attribute fail

Usually z-index is used when there are two overlapping labels, and under certain circumstances, one of them appears above or below the other. The higher the z-index value, the higher the layer. The position attribute of the z-index element needs to be relative, absolute or fixed.

The z-index attribute will fail in the following cases:

When the position of the parent element is relative, the z-index of the child element becomes invalid. Solution: The position of the parent element is changed to absolute or static;
The element does not have a position attribute set to a non-static attribute. Solution: Set the position attribute of the element to one of relative, absolute or fixed;
The element also sets float while setting z-index. Solution: remove float and change to display: inline-block;

27. Talk about common CSS layout units

Common layout units include pixel ( px), percentage ( %), em, rem, vw/vh.

(1) Pixel ( px) is the basis of page layout. One pixel represents the smallest area that can be displayed on the screen of a terminal (computer, mobile phone, tablet, etc.). Pixels are divided into two types: CSS pixels and physical pixels:

CSS pixel : an abstract unit used in CSS for web developers;
Physical pixels : only related to the hardware density of the device, the physical pixels of any device are fixed.

(2) Percentage ( %), when the width or height of the browser changes, the width and height of the components in the browser can change with the change of the browser through the percentage unit, so as to achieve a responsive effect. It is generally considered that the percentage of the child element is relative to the immediate parent element.

(3) em and rem are more flexible than px. They are both relative length units. The difference between them: em is relative to the font size of the parent element, and rem is relative to the font size of the root element.

(4) vw/vh is a unit related to the view window, vw represents the width relative to the view window, and vh represents the height relative to the view window. In addition to vw and vh, there are two related units, vmin and vmax.

28. Differences and usage scenarios of px, em, rem

The difference between the three:

px is a fixed pixel, once set it cannot be changed to fit the page size.
Em and rem are more flexible than px. They are relative length units, and their length is not fixed, which is more suitable for responsive layout.
Em sets the font size relative to its parent element, so there is a problem. For any element setting, it may be necessary to know the size of its parent element. And rem is relative to the root element, which means that only a reference value needs to be determined on the root element.

scenes to be used:

For those that only need to adapt to a small number of mobile devices, and the resolution has little impact on the page, use px.
For the need to adapt to various mobile devices, use rem, for example, it needs to adapt to devices with relatively large resolution differences such as iPhone and iPad.

29. What are the common layout methods? What are their strengths and weaknesses?

Commonly used methods for page layout include floating, positioning, flex, grid grid layout, and grid system layout

float:

Advantages: good compatibility.
Disadvantage: Floats break out of standard document flow, so floats need to be cleared. We can fix this problem.

absolute positioning

Advantages: fast.
Disadvantages: The child elements are also separated from the standard document flow, and the practicability is poor.

flex layout (appeared in CSS3)

Advantages: To solve the shortcomings of the above two methods, the flex layout is perfect. The mobile terminal basically uses flex layout.

Grid layout (grid)

The layout introduced in CSS3 is very useful. The amount of code is simplified a lot.

grid system layout

Advantages: can be applied to multi-terminal devices

29. How to achieve two-column layout

Generally, the two-column layout refers to the fixed width of the left column and the adaptive width of the right column . The specific implementation of the two-column layout:

Using floating, set the width of the left element to 200px, and set it to float to the left. Set the margin-left of the right element to 200px, and set the width to auto (the default is auto, which fills the entire parent element).

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}
复制代码

Using flex layout, set the left element to a fixed width of 200px and the right element to flex:1.

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}
复制代码

30. How to achieve a three-column layout

The three-column layout generally refers to a page with a total of three columns, the width of the left and right columns is fixed, and the layout in the middle is self-adaptive . The specific implementation of the three-column layout:

Using absolute positioning , set the left and right columns as absolute positioning, and set the value of the margin corresponding to the direction in the middle.

.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;
}
复制代码

Using the flex layout, the left and right columns are set to a fixed size, and the middle column is set to flex:1.

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}
复制代码

How to achieve the double flying wing (holy grail) layout?

1. Use 定位the self-adaptive method of fixing the middle on both sides

1.1) The parent box sets the left and right padding values

1.2) Set the padding value of the parent box for the width of the left and right boxes, and then locate the padding respectively.

1.3) Middle box adaptive

2. Use to flex 布局realize self-adaptation between fixed sides on both sides

2.1) Set display:flex in the parent box;

2.2) The left and right boxes are set to a fixed width and height

2.3) Set flex:1 in the middle box;

3. Use to bfc 块级格式化上下文realize self-adaptation in the middle of the fixed sides

3.1) Fixed width and height left and right, floating

3.2) middle overflow: hidden;

31. How to achieve horizontal and vertical centering

Using absolute positioning, first 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 translate. This method needs to consider browser compatibility issues.

.parent {   
    position: relative;
} 
.child {    
    position: absolute;    
    left: 50%;    top: 50%;    
    transform: translate(-50%,-50%);
}
复制代码

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 is bisected, and the centering in the horizontal and vertical directions can be achieved. This method is suitable for the case where the box has width and height :

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
复制代码

Using absolute positioning, first 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. This method is suitable for cases where the width and height of the box are known

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}
复制代码

Using flex layout, set the vertical and horizontal center alignment of the container through align-items:center and justify-content:center, and then its child elements can also achieve vertical and horizontal centering. This method needs to consider compatibility issues , and this method is used more on mobile terminals:

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}
复制代码

32. How to adapt the mobile terminal according to the design draft?

Mobile adaptation mainly has two dimensions:

Adapt to different pixel densities, use CSS media queries for different pixel densities, and select pictures with different precision to ensure that the pictures will not be distorted;
Adapt to different screen sizes, because different screens have different logical pixel sizes, so if you directly use px as the development unit, the developed page will be accurately displayed on a certain mobile phone, but it will not be displayed on another mobile phone distortion. In order to adapt to the size of different screens, the content of the design draft should be restored in proportion.

In order to make the size of the page adaptive, you can use rem, em, vw, vh and other relative units.

33. Understanding of Flex Layout

Flex is the abbreviation of FlexibleBox, which means "elastic layout", which is used to provide maximum flexibility for the box model. Any container can be specified as a flex layout. Inline elements can also be laid out using Flex.

Note that after the flex layout is set, the float, clear and vertical-align properties of the child elements will be invalid . Elements that adopt a Flex layout are called a Flex container (flex container), or "container" for short. All its child elements automatically become members of the container, called a flex item (flex item), referred to as "item". The container has two axes by default: the horizontal main axis and the vertical cross axis. Items are arranged along the horizontal main axis by default.

33.2 Implementing dice layout with flex

a little

<style>
  .warp {
    display: flex;
    /* 实现 一点 布局 */
    justify-content: center;
    align-items: center;
  }
</style>
复制代码

two points

<body>
  <div class="warp">
    <div class="column"><div class="pip"></div></div>
    <div class="column"><div class="pip"></div></div>
  </div>
</body>

<style>
  .warp {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .column {
    display: flex;
  }
  .column:nth-child(2) {
    justify-content: flex-end;
  }
</style>

复制代码

three o'clock

<body>
  <div class="warp">
    <div class="column"><div class="pip"></div></div>
    <div class="column"><div class="pip"></div></div>
    <div class="column"><div class="pip"></div></div>
  </div>
</body>

<style>
  .warp {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .column {
    display: flex;
  }
  .column:nth-child(2) {
    justify-content: center;
  }
  .column:nth-child(3) {
    justify-content: flex-end;
  }
</style>

复制代码

Four o'clock

<body>
  <div class="warp">
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>
</body>

.warp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.column {
  display: flex;
  justify-content: space-between;
}

复制代码

five o'clock

<body>
  <div class="warp">
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>
</body>

.warp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.column {
  display: flex;
  justify-content: space-between;
}
.column:nth-child(2) {
  justify-content: center;
}

复制代码

six o'clock

<body>
  <div class="warp">
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
    <div class="column">
      <div class="pip"></div>
      <div class="pip"></div>
    </div>
  </div>
</body>

.warp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.column {
  display: flex;
  justify-content: space-around;
}

复制代码

34. The concept and basic principles of responsive design

Responsive website design （Responsive Web design) is a website that can be compatible with multiple terminals, rather than making a specific version for each terminal.

About the principle: The basic principle is （@media）to detect different device screen sizes through media queries for processing. Regarding compatibility: There must be a mate statement in the head of the page viewport.

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>
复制代码

35. float

Definition of float

In non-IE browsers, when the height of the container is not set and the child elements are floating, the height of the container cannot be expanded by the content. At this point, the content will overflow outside the container and affect the layout. This phenomenon is called floating (overflow).

How floats work:

Floating elements break away from the document flow and do not occupy space (causing the "high collapse" phenomenon)
The floating element stops when it touches its containing border or the border of other floating elements

A floated element can move left and right until it encounters another floated element or its outer edge's enclosing box. The floating box does not belong to the normal flow in the document flow. When the element is floated, it will not affect the layout of block-level elements, but only affect the layout of inline elements. At this time, the ordinary flow in the document flow will show that the floating box does not have the same layout mode. When the height of the containing box is smaller than the floating box, "height collapse" will appear at this time.

Problems caused by floating elements?

The height of the parent element cannot be expanded, affecting elements at the same level as the parent element
Non-floated elements at the same level as floated elements will follow
If the floating element is not the first element, the elements before this element should also float, otherwise it will affect the display structure of the page

Ways to clear floats:

heightDefine attributes for the parent div
Add an empty div tag after the last floating element and add clear:bothstyle
The parent tag containing the floated element adds overflow:hiddenoroverflow:auto
Use the :after pseudo-element.
Use the clear property to clear floats

36. Tell me about your understanding of BFC

BFC : Block Formatting Context (Block Formatting Context, BFC) is a part of the visual CSS rendering of a Web page, an area where block-level boxes are generated during the layout process, and a limited area for interaction between floating elements and other elements.

In layman's terms: BFC is an independent layout environment, which can be understood as a container, in which items are placed according to certain rules, and will not affect items in other environments. If an element meets the conditions to trigger a BFC, the element layout in the BFC is not affected by external influences.

Conditions for creating BFC :

root element: body;
The element is set to float: float is a value other than none;
Element setting absolute positioning: position (absolute, fixed);
display value: inline-block, table-cell, table-caption, flex, etc.;
overflow value: hidden, auto, scroll;

Features of BFCs:

In the vertical direction, they are arranged from top to bottom, which is consistent with the arrangement of document flow.
In BFC, the margins of two adjacent containers will overlap
When calculating the height of BFC, it is necessary to calculate the height of floating elements
BFC area will not overlap with floating container
BFC is an independent container, and the internal elements of the container will not affect the external elements
The left margin value of each element touches the left border of the container

The role of BFC:

Solve the problem of overlapping margins : Since BFC is an independent area, the internal elements and external elements do not affect each other. Changing two elements into two BFCs solves the problem of margin overlapping.
Solve the problem of height collapse : after setting floating on the child element, the height of the parent element will collapse, that is, the height of the parent element becomes 0. To solve this problem, just turn the parent element into a BFC. The common way is to set it to the parent element overflow:hidden.
Create an adaptive two-column layout : It can be used to create an adaptive two-column layout: the width on the left is fixed, and the width on the right is adaptive. Left set float:left, right set overflow: hidden. In this way, the BFC is triggered on the right side, and the area of the BFC will not overlap with the floating elements, so the two sides will not overlap, realizing an adaptive two-column layout.

37. What is margin overlapping problem? How to solve?

Description of the problem: The top margin and bottom margin of two block-level elements may be merged (collapsed) into one margin, and its size will be the one with the larger margin value. This behavior is margin collapse. It should be noted that the margins of floating elements and absolutely positioned elements that are out of document flow will not collapse. Overlap will only occur vertically .

Calculation principle: The calculation principle of the outer margin after folding and merging is as follows:

If both are positive, go for the largest
If it is one positive and one negative, the positive value will be subtracted from the absolute value of the negative value
When both are negative, subtract the one with the larger absolute value from 0

Solution: For the case of folding, there are two main types: overlap between brothers and overlap between father and son

(1) Overlap between brothers

The bottom element becomes an inline box:display: inline-block
The bottom element is set to float:float
The position value of the bottom element isabsolute/fixed

(2) Overlap between father and son

Parent element added:overflow: hidden
Add a transparent border to the parent element:border:1px solid transparent
Child elements become inline boxes:display: inline-block
Add floating attributes or positioning to child elements

38. Talk about the stacking order of elements

The stacking order, called stacking order in English, means that elements have a specific vertical display order when they are stacked. The following are the stacking rules for the box model:

For the above figure, from top to bottom are:

(1) Background and border: establish the background and border of the current stacking context element.

(2) Negative z-index: In the current stacking context, the element whose z-index attribute value is negative.

(3) Block-level box: A non-inline-level non-positioned descendant element within the document flow.

(4) Floating box: non-positioning floating elements.

(5) Inline box: An inline-level non-positioned descendant element within the document flow.

(6) z-index: 0: A positioning element with a cascading level of 0.

(7) Positive z-index: Positioning elements with a positive z-index attribute value.

Note: When positioning an element with z-index:auto, the level of the generated box in the current stacking context is 0, and no new stacking context will be created unless it is the root element.

39. What are the values of position and what are their functions?

Static positioning : staticthe default value does not depart from the document flow, top, right, bottom, left and other attributes do not take effect

Absolute positioning : absoluteThe key to absolute positioning is to find the right reference object, find the nearest parent element with positioning to move the position, if not found, then position relative to the browser window

Note:

After setting the position:absolute; attribute, the element will break away from the normal document flow and no longer occupy space;

If the left and right margin is auto, it will be invalid;

The position of the element is determined by left, top, bottom, and right.

Relative positioning : relativereference object: position before element offset

Note:

Relative positioning is set, and the left and right margins are still valid and will not break away from the document flow.

Fixed positioning : fixedreference object: browser window;

Note:

Fixed positioning breaks out of document flow;

The difference between absolute positioning and fixed positioning reference objects is the browser window: When a scroll bar appears, fixed positioning elements will not scroll with the scroll bar, but absolute positioning will follow the scroll bar

40. The common points and differences between absolute and fixed

common ground:

Change the presentation of inline elements and set the display to inline-block
Make elements out of the normal document flow and no longer occupy the physical space of the document
Overrides non-positioned document elements

difference:

The root element of absolute is different from that of fixed. The root element of absolute can be set, and the root element of fixed is the browser.
In a page with scroll bars, absolute will move with the parent element, and fixed will be fixed at a specific position on the page.

41. The priority relationship of display, float, position

(1) First determine whether the display attribute is none. If it is none, the values of the position and float attributes will 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 will be 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 the float attribute is none, if not, then convert the value of display according to the above rules. Note that if the value of position is relative and the value of the float property exists, relative is positioned relative to the final position after floating.

(4) If the value of float is none, then judge whether the element is a root element, if it is a root element, the display attribute will be converted according to the above rules, if not, keep the specified display attribute value unchanged.

In general, it can be regarded as a mechanism similar to priority. "position:absolute" and "position:fixed" have the highest priority. When they exist, floating does not work, and the value of 'display' also Need to adjust; secondly, when the value of the element's 'float' attribute is not "none" or when it is the root element, adjust the value of 'display'; finally, non-root elements, non-floating elements, and non-absolute positioning Element, the 'display' attribute value is the same as the setting value.

42. Understanding of sticky positioning

Sticky literally means paste, so it can be called sticky positioning. Syntax: position: sticky; Position based on the user's scrolling position.

Sticky positioned elements are dependent on user scrolling, switching between position:relative and position:fixed positioning. It behaves like position:relative; and when the page scrolls beyond the target area, it behaves like position:fixed; and it stays fixed at the target position.

Element positioning behaves as relative positioning until a certain threshold is crossed, and fixed positioning thereafter. This specific threshold refers to one of top, right, bottom or left. In other words, only by specifying one of the four thresholds of top, right, bottom or left can the sticky positioning take effect. Otherwise it behaves the same as relative positioning.

43. How to implement a triangle

Set the width and height to 0, set the width for the border, then set the color for one border, and set the rest of the border to be transparent

div {
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom-color: red;
}
复制代码

44. Implementing a sector

The idea of using CSS to realize a fan shape is basically the same as that of a triangle, that is, a rounded corner style is added to realize a 90° fan shape:

div{
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}
复制代码

45. How to draw a 0.5px line

Using transform: scale() , this method is used to define the 2D scaling transformation of the element:

transform: scale(0.5,0.5);
复制代码

46. What are the common problems on the mobile terminal and how to solve them?

Click event 300MS delay problem solution: download the package of fastclick

The H5 page window is automatically adjusted to the device width, and users are prohibited from zooming the page

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
复制代码

Ignore the recognition of email addresses in the Android platform

<meta name="format-detection" content="email=no"> 
复制代码

When the website is added to the home screen quick start method, the address bar can be hidden, only for ios safari

<!-- ios7.0版本以后，safari上已看不到效果 -->

<meta name="apple-mobile-web-app-capable" content="yes">
复制代码

47. How to Implement CSS Animations

CSS3 animations can automatically and repeatedly perform certain animations without being triggered by the mouse.

The animation needs to be defined before calling it.

The syntax for defining an animation is: @keyframes animation name{from{}to{}}

The syntax for calling an animation is: animation name duration (animation duration) timing-function (speed curve) delay (delay time) iteration-count (number of repetitions) direction (animation direction) fill-mode (state at the end of execution)

Among them, the animation name and animation duration must be assigned.

48. How to define variables using css

There are many ways to define variables: 1. Define global variables

:root {
  --borderColor: #ccc;
}
使用：
width:var(--borderColor);
复制代码

2. Define variables under an element

.look{
  --borderColor: #ccc;
}
复制代码

3. Define the variables under the media query

@media screen and (min-width: 1025px) { 
    :root { 
        --borderColor: #ccc;
　　 }
}
使用：
.has-border-table > tr > td {
  border-right: 1px solid var(--borderColor);
}
复制代码

Define variables in less

定义：
@bg-color : #d9d9d9;
使用：
.has-border-table > tr > td {
  border-right: 1px solid var(@bg-color);
}
复制代码

Define variables in sass

定义：
$bg-color : #d9d9d9;
使用：
.has-border-table > tr > td {
  border-right: 1px solid var($bg-color);
}
复制代码

49. How does CSS solve browser compatibility issues

CSS3 properties are compatible with different browser kernels:

-webkit- for the webkit kernel

-moz- for Firefox kernel

-ms- for IE kernel

-o- for opera kernel

50. How to understand z-index?

It can be regarded as the layer stacking order in the z-axis direction in the three-dimensional coordinate system.

The default z-index of an element is 0, and the layer position of the element whose postion value is set can be controlled by modifying the z-index.

This relationship can be imagined as a stack of books, and the position of a book in the stack of books can be changed through z-index.

For the small pit of z-index, if the parent element has positioning and z-index is configured, the z-index of the positioning of the parent element will be prioritized for comparison.

51. What is the percentage of margin-top relative to, for example, what does margin-top: 50% mean?

The percentage of margin is relative to the width of the parent element

52. Tell me which features of Less you have used (except variables, nesting, calculation, find a few more)

(1) Variables: Use @to define variables, and the variable names can be customized.

// 定义变量
@color: #00f;
// 使用变量
h1 {
    color: @color;
}
复制代码

string interpolation

// 语法
@variable: "xxx";
将变量放入到{}中 
@{variable}
复制代码

// 使用
@url: "/images/";
div {
  width: 200px;
  height: 200px;
  background-image: url("@{url}1.jpg"); // 结果为/images/1.jpg
}
复制代码

How media queries define variables

// 由于“~”后面的值是不被编译的，所以可以用作媒体查询的参数。
@mediaQuery: ~"(max-width: 600px)";

@media screen and @mediaQuery {
  div {
    width: 200px;
    height: 200px;
    background-color: #898900;
  }
}
复制代码

(2) Nesting

Less provides the ability to use nesting instead of or in conjunction with cascading. Writing in Less can mimic the organizational structure of HTML.

(3) calculation

(4) Namespace

To define a namespace, any class/ID selector can be used as a namespace. At this time, the nature of the namespace is similar to a function .

A namespace (for example: .my()) is defined here so that it will not be output in the compiled file. Mixins can be written in this namespace. Use a mixin in the namespace >to select the specified selector for use similar to the descendant selector (or ``).

53. List more than 5 H5 input element type attribute values?

value	describe
text	default. Defines a single-line input field where the user can enter text. Default is 20 characters
password	Define a password field. characters in the field are masked
radio	Define radio buttons
checkbox	Define checkboxes
submit	Define the submit button. Submit button sends data to server
button	Define clickable buttons (mostly used with JavaScript to launch scripts)
email	Defines a text field for e-mail addresses
search	Define a text field for searching
file	Define input fields and "Browse..." button for file upload
hidden	Define a hidden input field
image	Define image as submit button
url	Defines a text field for the URL
number	Defines a numeric field with a spinner control
color	define color picker
date	Define date field (with calendar control)
month	Defines the month of the date field (with a calendar control)
time	Defines the hour, minute, and second of a date field (with a time control)

54. How does the rem adaptation method calculate the HTML root font size and adaptation scheme?

General plan

Use media queries to set the html text size proportionally according to different devices, and then use rem as the size unit for page elements. When the html size changes, the elements will also change, so as to achieve proportional scaling adaptation
①Rem value of page element = page element value (px) / (screen width/number of divided copies) ②screen width/number of divided copies is the size of html font-size (root font size)

Take the size of 750 as an example, divide the screen into 15 equal parts, then the size of the html root font size is 750/15=50px. rem is the px/root number of the element. The width of 100px is equal to 100/50=2rem

Advantages: It has certain applicability, and the conversion is relatively simple

Disadvantages: There are compatibility pits, and the adaptation to different mobile phones is not very precise; multiple media queries need to be set to adapt to different mobile phones. If the size of a certain mobile phone is not within the setting range, it will not be able to adapt

Netease program

Get the design draft and divide it by 100 to get the width rem value
By setting the font-size for the html style, substitute the width rem value obtained in 1 into x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + 'px';
Design draft px/100 can be converted to rem

Advantages: The adaptation is done through the dynamic root font-size, basically no compatibility issues, the adaptation is more accurate, and the conversion is simple

Disadvantage: no viewport scaling, and no adaptation for the iPhone's Retina screen, resulting in poor adaptation to some mobile phones

Hand Amoy Program

Get the design draft and divide it by 10 to get the font-size reference value
introduce flexible
不要设置 meta 的 viewport 缩放值
设计稿 px/ font-size 基准值，即可换算为 rem

优：通过动态根 font-size、viewport、dpr 来做适配，无兼容性问题，适配精准。

劣：需要根据设计稿进行基准值换算，在不使用 sublime text 编辑器插件开发时，单位计算复杂

55. Bootstrap 栅格系统的工作原理？

原理:

1、行（row）必须包含在 .container (固定宽度)或 .container-fluid (100%宽度)中，以便为其赋予合适的排列（aligment）和内补（padding）

2、通过行（row）在水平方向创建一组列（column）

3、自己内容应当放置于列（column）内，并且只有列可以作为行（row）的直接子元素

4、类似.row 和.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化布局

5、通过为列设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为.row 元素设置负值 margin 从而抵消为.container 元素设置的 padding，也就间接为行（row）所包含的列（column）抵消掉了 padding

6、栅格系统的列是通过指定 1 到 12 的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4 来创建

7、如果一行（row）中包含了的列（column）大于 12，多余的列所在的元素将作为一个整体另起一行排列

8、栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕覆盖栅格类

56.使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？

针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale()这个属性进行缩放。

  <style>
    p span {
      font-size: 12px;
      -webkit-transform: scale(0.83);
      display: block;
    }
  </style>
<body>
  <p>
    <span>使用 CSS 怎么让 Chrome 支持小于 12px 的文字</span>
  </p>
</body>
复制代码

57. 浏览器是如何解析CSS选择器的？

在生成渲染树的过程中，渲染引擎会根据选择器提供的信息来遍历 DOM 树，找到对应的 DOM 节点后将样式规则附加到上面。

浏览器遵循 “从右往左” 的规则来解析 CSS 选择器！

从右往左：span => h3 => .mod-nav

先找到所有的 span 节点，然后基于每⼀个 span 再向上查找 h3
由 h3 再向上查找 .mod-nav 的节点
最后触及根元素 html 结束该分⽀遍历

...

从右向左的匹配规则, 只有第一次会遍历所有元素找节点, 而剩下的就是在看父辈祖辈是否满足选择器的条件, 匹配效率大大提升!

58. less和sass里的深度选择器是什么，怎么用？

在项目开发时，对于使用的一些组件库，例如element-ui，在有些时候会不符合ui的设计图，这时候我们就要修改一下组件的样式。

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。去除后则没有这种效果，不过这种方法可能会导致全局污染，不推荐。这个时候就需要用深度选择器了。

less: /deep/ 新版本语法：:deep(类名)

sass：::deep