Front end things 2 (CSS)

Time:2021-10-26
  1. Flex layout (elastic layout, default spindle, cross axis, flex: 1)

  2. Flex layout is an elastic layout. After setting the container to flex layout, float, clear and vertical align will become invalid. By default, the container has two axes (main axis and vertical cross axis), which are arranged along the main axis by default.
  3. What are the properties of flex

Outer container properties:

Flex direction: control the main and auxiliary shafts 【 axial 】

Flex Wrap: controls line wrapping (no line wrapping by default)

Flex flow: it is the combination of the above two, abbreviated as

Justify content: spindle alignment [align]

Align items: cross axis alignment

Align content: align multiple axes

Flex: [elasticity]

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow: <flex-direction> <flex-wrap>;

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items: flex-start | flex-end | center | baseline | stretch;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Subproject properties:

Order: the smaller the 0, the more forward.

Flex growth: 1 bisection space

Flex shrink: 1 scale down

flex-basis: auto

Flex is the abbreviation of the three above

Align self alignment

  1. Vertical centering using flex

  2. Justify content: Center + align items: center enables horizontal and vertical centering
  3. flex: 1

  4. Flex: 1 is the abbreviation of flex growth, flex shrink and flex basis, which is divided into equal sizes
  5. Using flex to realize Jiugong grid

  6. Responsive layout

  7. What kinds of responsive layout do you know

  • Media query
  • 100%
  • rem
  • UI framework
  1. What are the block elements

  2. Explain the differences and characteristics between the next block element and the in-line element

  • A block level element has a single row, and its width automatically fills the width of its parent element by default
  • Intra row elements do not monopolize a row, and adjacent intra row elements are arranged in the same row
  1. Know which empty elements (single label elements like IMG)

br、meta、hr、link、input、img

  1. What attributes in CSS can be inherited

  • Non inheritable: display, baimargin, border, padding, background, height, min height, Max height, width, min width, max width, overflow, position, left, right, top, bottom, Z-index, float, clear, table layout, vertical align, page break after, page break before, and Unicode bidi.
  • All elements can be inherited: visibility and cursor.
  • Inline elements can inherit: letter spacing, word spacing, white space, line height, color, font, font family, font size, font style, font variant, font weight, text decoration, text transform and direction.
  • Block elements can inherit: text indent and text align.
  • List elements can inherit: list style, list style type, list style position, list style image.
  • Table elements can inherit: border collapse.
  1. Do you know CSS animation? Say transform

  • 2D: translate (x, y) translation, scale (x [, y]?) scaling, rotate (angle) rotation
  • 3D:translate3d(x,y,z),scale3d(x,y,z),rotate3d(x,y,z,angle)
  1. CSS3 new features, pseudo classes, pseudo elements, anchor pseudo classes

  2. Add many selectors: (E: nth child (n), e: last child:, e: disabled, e: checked)
  3. CSS3 animation related: transition transition, transform (3D rotation) and animation animation
  4. Border, shadow, fillet, background size
  5. Text effect (word wrap, multi line display ellipsis)
  6. Linear gradient, radial gradient
  7. Box model

Common pseudo classes: focus,: hover,: link, visited,: first child, etc; Single colon; Concept of pseudo class

Common pseudo elements::: after,:: before, etc. (single colon is the syntax of CSS2 in order to be compatible with IE). Double colon; Used to create a DOM tree element that does not exist.

Anchor pseudo class: used to represent the status of links. Order: A: link – A: visited – A: hover – A: active.

  1. N methods of CSS vertical centering

  • Variable width and height, horizontal and vertical center:

    • Absolute positioning + transform:

position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);

  • Flex layout: (spindle centered, cross axis centered)

display: flex;justify-content:center;align-items:center;

  • Parent element setting display:   table-cell+vertical-align:   Middle implementation
  • Fixed width and height:

    • Absolute positioning + margin: Auto

position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto;

  • Absolute positioning + margin negative spacing horizontal vertical center

position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-right: -50px;

  • Line height: for single line text
  1. What are the two modes of the box model? What’s the difference? How to set

  • Standard mode: box sizing: content box; Width and height do not include inner margins and borders
  • Weird mode: box sizing: border box (ie)
  1. Please talk about your understanding of PX, EM, REM, VH, wh and other units. What other units have you used

  • Px, if the display screen resolution is the same, it can be regarded as an absolute unit. If the display screen resolution is different, it is relative to the display screen resolution.
  • Em, relative to the font size attribute value of the element, because font size is an inheritable attribute, if the font size attribute value of the element is not explicitly set, the font size value of the parent element of the element will be inherited. If the parent element of the element is not explicitly set, the font size attribute value will be inherited from the root element (HTML element), If the root element is not displayed and the font size attribute value is not set, the default font size attribute value of the user agent is used.
  • Rem, root em, is a new relative unit in CSS3. The difference from EM is that when rem is used to set the font size attribute value for an element, it is only relative to the root element (HTML element).
  • VH, viewpoint height, window height, 1vh is equal to 1% of the window height.
  • VW, viewpoint width, window width, 1vw is equal to 1% of the window width.
  • in,pt
  1. Tell me the difference between REM, EM and PX

  • Rem is relative to the root element (HTML)
  • EM relative to the last parent element that sets the font size
  • PX absolute unit, relative to display resolution
  1. Talk about the implementation of rem

  • REM relative to the root element (HTML), the mobile terminal sets font size: Calc (100vw / 7.5) of HTML;
  1. How to solve the style compatibility problem of different browsers?

  • After determining the cause of the problem and the browser with the problem, a separate style sheet is used to load only the browser with the problem. This approach requires server-side rendering.
  • Use a library that already handles such problems, such as bootstrap.
  • use   autoprefixer   Automatically generate CSS property prefixes.
  • Use reset CSS or normalize.css.
  1. The difference between display: none and visibility: hidden:

  2. Display: none and visibility: hidden are both hidden elements. But the former makes the elements disappear from the DOM structure, while the latter still exists in the DOM but is not displayed in the interface. Therefore, the former is reflow (the DOM structure needs to be changed), and the latter is redrawing.
  3. CSS priority

  • ! Improvement has the highest priority
  • Inline style
  • id>class
  • If the priority is the same, select the style written later
  • Summary:! Important > inline style > ID selector > class selector > label > wildcard > inheritance > browser default attributes

What does improvant affect, weight values

  • Element selector: 1 div {}
  • Class selector: 10. Class {}
  • ID selector: 100 #id {}
  • Inline style: 1000 style = “…”
  • ! The style of important declaration has the highest priority. This style declaration will override any other declaration in CSS. Use! Important is not a good habit because it changes the original cascading rules of your style sheets and is difficult to debug. To optimize, consider using the priority of style rules to solve the problem instead of! important。
  1. Base64 diagram, advantages and disadvantages

Base64 coding can add pictures to CSS to realize CSS request to download pictures.

Advantages: reduce picture requests (sprite can also reduce requests)

Disadvantages: the loading of pictures will affect the CSS file size, which is 1 / 3 larger than the source file, and is incompatible below IE8.

  1. Performance Optimization: skeleton screen

The skeleton screen can be understood as a blank version of the page before the data has been loaded. Before the page is fully rendered, the user will see a skeleton screen page with simple style and depicting the approximate frame of the current page, and then all occupied parts in the skeleton screen will be completely replaced by actual resources, In this process, users will feel that the content is gradually loading and will be presented, which reduces users’ anxiety and makes the loading process subjective and smooth.

The implementation principle of skeleton screen is very simple. It is to load data gradually through occupying wireframe elements.

The skeleton screen combines the lazy loading function to present the basic structure of the page before the page is loaded.

  1. What is fouc (no style content flashing)? How do you avoid fouc?

Fouc – flash of Unstyled content document style flashing

<style type=”text/css” media=”all”>@import “../fouc.css”;</style>

The @ import that references CSS files is the culprit of this problem.

IE will first load the dom of the entire HTML document, and then import the external CSS file. Therefore, there will be a period of time between the completion of page DOM loading and the completion of CSS import. The content on the page has no style. The length of this period is related to the network speed and computer speed.

Solution: just add a < link > or < script > element between < head >.

  1. What is BFC and how to create it? Which can create BFC?

BFC (block formatting context) is literally translated as “block level formatting context”.

  1. Create BFC to avoid vertical outer margin superposition and boundary collapse
  2. Create BFC to clear float
  3. Create BFC for adaptive layout

absolute fixed inline-block table overflow

  1. Reflow and redraw (why minimize), page rendering

  • Reflow: reflow occurs when page layout is affected
  • Redraw: does not affect the page layout,
  • Reflow: addition, deletion and modification of DOM structure
  • Redraw: visual changes in color, background, font, etc

Why reduce:

Reflow will trigger redrawing. Redrawing does not necessarily trigger reflow. When the page is large, the page will be reloaded during reflow.


CSS3 new features:https://juejin.im/entry/6844903486618861575