1. The box model

There are two types of box models: standard and model and weird box models.

The width and height of standard box model refers to the width and height of content region; The width and height of the weird box model refers to the width and height of the content+padding+border.

CSS set standard box model :(default)

 box-sizing: content-box; 
Copy the code

CSS set weird box model:

 box-sizing: border-box;
Copy the code

2. BFC

Landing the definition:

Block formatting context (BFC) refers to Block formatting context. It is a separate render area with only block-level box participation, which specifies how the internal block-level box is laid out and has nothing to do with the outside of the area.

In short, the BFC is a separate render area, and the rendering of internal elements does not affect external elements.

Conditions for the formation of BFC:

  1. Float is not none;
  2. Overflow value is not visible; (The most common way to form a BFC:overflow: hidden;)
  3. The value of position is absolute or fixed;
  4. The value of display is inline-block, flex, and so on.

Role of BFC:

  1. Use BFC to avoid margin overlap
  2. Clear internal float (mechanism: trigger the BFC property of the parent div, so that all the following child divs are in the same BFC region as the parent div)

3. The formation of row height

The line height is made up of line-boxes, which are inline-boxes in a line, and the highest inline-box, or the element with the largest font, determines the line height.

Row height does not determine the height of the element, but it does determine how much space the element occupies.

4. What is the height of the line

  • Line-height Indicates the height of a line of words, including the space between words. It’s actually the distance from the next baseline to the last baseline.
  • If a tag does not define a height attribute, its final height is determined by a line-height. It is the line-height that opens the container, not the text content inside the container.
  • Setting the word-height value to a height value enables vertical centering of a single line of text.

5. Line-height inheritance problem

  • If the line-height is a specific value, such as 30px, it is inherited;
  • If the line-height is a ratio, such as 1.5 or 2, then the ratio is inherited;
  • If the line-height is a percentage, such as 200%, the calculated value is inherited. (test)

Line-height is a concrete value, inherited directly from that value.

< span style = "box-sizing: border-box! Important; word-break: break-all; < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;"Copy the code

Line-height is the scale, inherited from the scale, using the element’s own font-size * the scale.

<style> body { font-size: 20px; /* word-break */ word-break: 2; } p { font-size: 16px; < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;"Copy the code

The child element inherits this calculated value, regardless of the child element’s own font-size.

<style> body { font-size: 20px; /* line-height: 200%; } p { font-size: 16px; } < span style> < span style = "box-sizing: border-box! Important; word-break: inherit! Important; word-break: inherit! Important;"Copy the code

6. Float properties

  • Float an element
  • Floating elements leave the document flow
  • Floating elements do not leave the text stream

Impact of floating on oneself:

  • Form BFC (so floating elements can set width and height)

Effect of float on parent element:

  • Detaching from the document flow and “disappearing” from the layout
  • The parent element collapses in height

7. Clear the float

  1. Add an empty label to the last floating element, and set clear: both for it (not recommended, add meaningless labels)

  2. Let floating element’s parent form BFC (easiest way: overflow: hidden)

  3. Use pseudo-elements to clear floats

    .clearfix:after{ content: ""; display: block; clear: both; } .clearfix { *zoom: 1; /* Compatible with IE versions */}Copy the code

8. Display: None, visibility: hidden, and opacity: 0

  • display: noneMake the element completely disappear from the DOM tree, rendering without taking up space, cannot click;
  • visibility: hiddenElements will not disappear from the DOM tree, they will still occupy space during rendering, but they will be invisible and cannot be clicked.
  • opacity: 0Elements will not disappear from the DOM tree. They will still take up space while rendering, but they will be invisible and can be clicked.

9. CSS unit

  1. Px. Pixels. A very common unit of length.

  2. Em. A unit of relative length. For the font size attribute, em is calculated by the font size relative to the parent element; In these properties, the use of em units is calculated in reference to the element’s font-size, with 1em equal to the font size set for the element. Similarly, if the element is not set, the parent element is searched until it is found. If the size is not set, the browser default font size is used.

  3. Rem. A unit of relative length, font size (< HTML >) relative to the root element, used in reactive layouts. Rem can be used wherever length can be used.

  4. Vw/vh/vmax/vmin.

    • Vh: 1% (1/100) of viewport height
    • Vw: 1% (1/100) of web viewport width
    • Vmax: the maximum value of vh and vw;
    • Vmin: take the minimum value of vh and vw.

10. The transform and the transition

I always confuse transform, transition, translate, and I’m going to make a note of that here.

The Transform attribute applies a 2D or 3D transformation to the element. This attribute allows us to rotate, scale, move, or tilt the element. Translate is a property value of transform.

The Transition property is used to animate transitions.

transform

In CSS3, transform mainly includes the following types: rotate, skew, Scale and translate, and matrix deformation matrix.

  • Rotate the rotate

    • rotate(angle): Defines 2D rotation, and the parameter specifies the Angle
    • rotate3d(x, y, x, angle): Defines 3D rotation
    • rotateX(angle): Defines a 3D rotation along the X-axis
    • rotateY(angle): Defines a 3D rotation along the Y-axis
    • rotateZ(angle): Defines a 3D rotation along the z-axis

  • Skew distortion

    • skew(x-angle, y-angle): Defines 2D skew conversions along the X and Y axes
    • skewX(angle): Defines a 2D skew transformation along the X-axis
    • skewY(angle): Defines a 2D skew transformation along the Y-axis

  • The zoom scale

    • scale(x, y): Defines a 2D scaling transformation
    • scale3d(x, y, z): Defines a 3D zoom transformation
    • scaleX(x): Defines the scale transformation by setting the value of the X-axis
    • scaleY(y): Defines the scale transformation by setting the value of the Y-axis
    • scaleZ(z): Defines the 3D zoom transformation by setting the value of the Z axis

  • Mobile translate

    • translate(x, y): Defines a 2D transformation
    • translate3d(x, y, z): Defines a 3D transformation
    • translateX(x): Defines the transformation, using only the X-axis values
    • translateY(y): Defines the transformation, using only the Y-axis values
    • translateZ(z): Defines a 3D transformation, using only the z-axis values

transition

The transition property is a shorthand property for setting four transition properties:

  • Transition-property: Specifies the name of the CSS property that sets the transition effect.
  • Transition-duration: Specifies how many seconds or milliseconds it takes to complete the transition effect.
  • Transition-timing -function: Specifies the speed curve of the speed effect.
  • Transition-delay: Defines when the transition effect begins.

11. Performance optimization of the CSS

  • Multiple CSS are merged to minimize HTTP requests
  • The CSS Sprite figure
  • Abstraction extracts common styles, reducing the amount of code
  • Selectors are optimized for nesting to avoid too deep a level (replace ‘ ‘with’ > ‘)
  • When the attribute value is 0, the unit is not added
  • Compress CSS code
  • Avoid CSS expressions (they are evaluated thousands of times and may affect the performance of your page)

12. Difference between link and @import

  • Link is HTML, @import is CSS
  • Link supports maximum parallel download, @import too much nesting leads to serial download, resulting in FOUC
  • Browser support for Link predates @import, and you can use @import to hide styles from older browsers
  • @import must be able to reference other files in the CSS file before styling rules
  • Overall: link is better than @import

13. Inheritance properties of CSS

Properties of text series:

  • font
  • font-family
  • font-weight
  • font-size
  • font-style
  • font-variant

Text series properties:

  • Text-indent: Indicates the indent of text
  • text-align
  • line-height
  • word-spacing
  • letter-spacing
  • Text-transform: controls the text case
  • Direction: Specifies the direction in which the text is written
  • color

Element visibility

  • visibility

A list of attributes

  • list-style

The cursor attributes

  • cursor

14. Non-inherited properties of CSS

  • display

Some text properties

  • vertical-align
  • text-decoration
  • text-shadow

Background properties: background image, color, position, etc

Location properties: float, clear float, position

The font color of a label

15. The value of the display

  • noneThe: element is not displayed
  • block: is displayed as a block element
  • inline: is displayed as an inline element without a newline before or after the element
  • inline-block: is positioned like an inline element, but its content is displayed like a block element
  • list-item: displays as if it were a block type element, with a style list tag added
  • tableThe: element is displayed as a block-level table
  • inherit: specifies that the value of the display attribute should be inherited from the parent element

16. The value of the position

  • static: The default value. Without positioning, the element appears in the normal flow (ignoring the top, bottom, left, right, or Z-index declarations).
  • relative: Relative positioning. Locate relative to its normal position.
  • absolute: Absolute positioning. Is positioned relative to the first parent whose value is not static. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.
  • fixedAn element that generates absolute positioning relative to the browser window. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.
  • inherit: specifies that the value of the position attribute should be inherited from the parent element.

17. What is the relative and absolute basis for positioning?

  • Relative locates the element according to its own position
  • Absolute is located against the nearest level of location element (that is, relative to the first parent whose value is not static). Positioning elements include: Elements whose position attribute is Absolute, relative, fixed, and<body>The label)

18. What are the new features of CSS3?

  • P :nth-child(n){color: rgba(255, 0, 0, 0.75)}

  • Display: flex;

  • Column-count: 5;

  • @media (max-width: 480px) {.box: {column-count: 1; }}

  • @font-face{font-size: BorderWeb; src:url(BORDERW0.eot); }

  • Rgba (255, 0, 0, 0.75);

  • The rounded border – the radius: 5 px;

  • Background: Linear gradient(red, green, blue);

  • Box-shadow :3px 3px 3px Rgba (0, 64, 128, 0.3);

  • Reflection box- Reflect: below 2px;

  • Text-stroke-color: red; text-stroke-color: red;

  • Text-overflow :ellipsis;

  • Background-size: 100px 100px;

  • Border-image :url(bt_blue.png) 0 10;

  • Smooth transition transition: all.3s ease-in.1s;

  • @keyframes anim-1 {border-radius: 50%; }} animation: anim-1 1s;

  • Deformation of the transform

    • Rotation of the transform, rotate (20 deg);
    • Transform: skew(150deg, -10deg);
    • Translate (20px, 20px);
    • Scaling transform: scale. (5);

19. How to achieve horizontal and vertical center?

Horizontal center:

  • The inline elements:text-align: center;
  • Block elements:margin: auto;
  • Absolute elements:left: 50% + Margin-left Negative half of the element width

Vertical center:

  • The inline elements:The value of the line - height: height
  • Absolute elements:top: 50% + Margin - top negative
  • Absolute elements:top: 50% + transform: translate (-50%, -50%)(Older browsers may have compatibility issues, but you don’t need to know the width and height of the child elements to do this.)
  • Absolute elements:top, left, bottom, right = 0 + margin: auto;(Browser compatibility is not a problem, and you don’t need to know the size of the child element)

20. Create a triangle in pure CSS

Set a box with a width of 0 and a height of 0. Add a border style. Three edges are transparent and the remaining one is colored.

 div {
     border-width: 10px;
     border-style: solid;
     border-color: transparent transparent transparent #000;
   }
Copy the code

21. The response type

  • Responsive design is a site that can accommodate multiple terminals of different sizes, rather than making a specific version for each terminal.
  • Implementation: media query + REM

22. Mobile terminal layout scheme

  • Fluid layout

    Use percentages for layout.

    Disadvantages: cannot change font size, can change element size, but the height is fixed.

  • Flex layout

    Easy to use, usually in conjunction with other solutions

  • Rem + Media query

    Both the font size and the element size can be changed

  • rem+vw

    Compatibility is not particularly good

23. Pseudo-elements and pseudo-classes

  • Pseudo-elements: Create and style elements that do not exist in the DOM tree.

    Elements inserted before/after elements are not actually inserted into the DOM tree. They are only visible externally, but they are not found in the source code of the document.

  • Pseudo-class: Used to add a style to an existing element when it is in a state that dynamically changes based on user behavior.

24. Several cases of margin overlay

Margin overlay means that when two or more vertical margins meet, they will form a margin whose height is equal to the larger of the two overlapping margins.

  1. When an element appears above another element, the bottom margin of the first element is superimposed with the top margin of the second element.

  1. When an element is in another element, their top margins also stack

  2. If an element is empty (that is, an element with no content, padding, and a border), then the top margin and the lower margin overlap

  3. In the case of the empty element above, if the empty element touches the margin of another element, the stack also occurs

Note: The above four margin superpositions only occur in the vertical direction of a normal document flow. Margins between in-line boxes, floating boxes, and absolute positioning boxes do not stack, and horizontal spacing does not stack.