Preface:

This is a review of the CSS interview, in the process of the interview is nervous is inevitable, but also to play out their should have the level, they know all in an orderly way. So the interview summary is very important.

1. Img background difference

Img: indicates an HTML tag. Background: is a CSS property.

1.1 From the perspective of parsing mechanism

  1. According to the browser resolution mechanism, HTML tags are preferentially parsed. Although the Link tag is placed in the header, it does not mean that it is executed immediately, only after the HTML has been executed.
  2. If only one image is displayed, such as banner advertising image, background can be used to automatically move the background, which is not important, to avoid occupying bandwidth and causing data congestion
  3. When there are many images, it is better to use background instead of LazyLoad.
  4. Img tag advantages: IMG is closed and avoids empty tags, W3C validation. Background will have an empty label.

1.2 From SEO(Search Engine Optimization) :

  1. Img is closed and tag and cannot add text content. But it has an Alt attribute, and the advantage is

When the image is too large and fails to load, there will be a message indicating that there is an image, which can be loaded in the refresh. For blind people, they’re using a reader to browse the page, and there’s a hint here. 2. There are also disadvantages:

  1. Img loads the image through SRC. If the HTML cannot be modified but the image needs to be replaced, only the file name can be changed. 304 May be reported and corresponding Settings need to be made by the server.
  2. The display area of the image must be reserved. The image and the reserved space must be the same. If the image is inaccurate, the proportion of the image will be wrong.

1.3 From the perspective of semantics

Background has nothing to do with semantics, img is HTML tag, it has semantics.

conclusion

For important images, use img. Use background for less important images;

2. The display properties

At that time the attribute basically said again, but did not expand to say. For example, the attributes of display are: display:none; display:inline; Inline elements (default) display:block; Block level element display:inline-block; Inline block-level elements are inline: a line is displayed in a row, and a line is wrapped only when there is no more space in the row. Block: a block-level element that automatically wraps lines. You can set the width and height inline-block: Both properties can be displayed on a line and the width and height can be set.

3. What do you know about Flex layout?

In fact, as a novice interview, the most afraid of being asked about what is the understanding of what, because I do not know where to start to talk, there will be no ideas, but also their usual summary is too little. What would I say if I were asked the same question now?

What is Flex layout first?

Flex, short for Flexible Box, is designed to provide maximum flexibility to boxed models. Any container can be specified as a Flex layout.

What are the properties of the Flex layout?

Container attribute

  1. CSS flex-direction Determines the direction of the spindle
Flex - direction: row | row - reverse | column | column - reverse row (default) : the main shaft in horizontal direction, the starting point in the left side. Row-reverse: The main axis is horizontal and the starting point is at the right end. Column: The main axis is in the vertical direction, and the starting point is in the upper edge. Column-reverse: the main axis is vertical and the starting point is at the bottom.Copy the code
  1. CSS flex-wrap (line wrap)
flex-wrap: nowrap | wrap | wrap-reverse; Nowrap: (default) no line wrap: newline with the first line at the top wrap-reverse: newline with the first line at the bottomCopy the code
  1. CSS flex-flow Short form of flex-direction and flex-wrap properties. The default value is row nowrap.
    flex-flow: <flex-direction>||<flex-wrap> ;
Copy the code
  1. Context-content defines the alignment of items on the main axis
justify-content: flex-start | flex-end | center | space-between | space-around; Flex-start (default) : left-align Flex-end: right-align center: center space-between: align both ends with equal intervals between items. Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.Copy the code
  1. Align-item defines how items are aligned on the intersecting axis
align-items: flex-start | flex-end | center | baseline | stretch; Flex-start: Alignment of the starting point of the cross axes. Flex-end: alignment of ends of crossed axes. Center: Alignment of the midpoint of the cross axis. Baseline: The baseline alignment of the first line of text of the project. Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.Copy the code
  1. Align-content defines the alignment of multiple axes. This property has no effect if the project has only one axis.
align-content: flex-start | flex-end | center | space-between | space-around | stretch; Flex-start: align with the starting point of the cross axis. Flex-end: aligns with the end of the cross axis. Center: aligns with the midpoint of the intersecting axis. Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes. Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders. Stretch (default) : Axis takes up the entire cross axis.Copy the code

The project properties

  1. order

Define the order of items. The smaller the value is, the more advanced it is. The default value is 0.

  1. css flex-grow

Defines the zoom scale of the project. Default is 0, that is, no zoom if there is free space.

  1. css flex-shrink

Defines the scaling of the project, which defaults to 1, that is, the project will shrink if there is insufficient space.

  1. css flex-basis

Defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

  1. css flex

Shrink is short for flex-grow, flex-shrink, and flex-basis. The default value is 0. 1 Auto The last two attributes are optional.

  1. align-self

Allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch

Why are Flex layouts used, and how are they different from other layouts

Traditional layouts, based on the box model, rely on display properties, position properties, float properties which are very inconvenient for special layouts such as vertical center. Flex layout for simple, complete, and responsive page layouts.

Do you know anything about REM?

Rem is a unit of font size relative to HTML elements. Specific examples:

<style> html{ font-size: 100px; } #d1{ background: blue; Height: 0.5 rem; } </style> <body> Hello world! <div id="d1">Box</div> </body>Copy the code

Effect page: The box height is half the height of the font

5. Attributes of the meta tag

What are meta tags?

You can provide meta-information about your page, such as descriptions and keywords for search engines and update frequency.

The meta tag is always inside the head element.

Properties:

  1. The name property, which provides the name in the name/value pair.

  2. The http-equiv property provides names for name/value pairs. And instructs the server to include name/value pairs in the MIME document header to be sent to the browser before sending the actual document.

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
Copy the code
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
Copy the code
  1. The Content property provides the value in the name/value pair. The value can be any valid string.
  2. The scheme property is used to specify the scheme to be used to translate the property value.

6. Vertical middle method

6.1 Set the display mode to table

display:table-cell
vertical-align:middle
Copy the code

6.2 Using Flex layout

align-item:center
Copy the code

6.3 Absolute Positioning

margin: 0 auto
Copy the code

Absolute positioning of fixed height:

top:50%
margin-top:-height/2
Copy the code

6.4 Text is vertically centered

Center text vertically: line-height: height value

.vertical {
    height: 100px;
    line-height: 100px;
  }
Copy the code

6.5 Setting padding for parent element

<style>
.container {
width: 500px;
padding: 200px 0;
background-color: yellow;
}

.vertical {
height: 100px;
width: 100px;
background-color: blue;
}
</style>
Copy the code

Concrete implementation reference address: block – level elements in the middle of eight ways

Interview summary:

For the interview of CSS, we should summarize some frequently used attributes, avoid thinking of what to say in the interview, but have a general route, so that when expressing will be more clear and confident. Confidence is the most important thing in the interview process. You should answer questions in a logical way, just like writing an essay.