1. Initialize the CSS

Why initialize CSS?

Because of browser compatibility issues, different browsers have different default values for tags. If CSS is not initialized, it will often result in page differences between different browsers

Also, most browsers add margins to the initial page by default

Simple initialization page

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
Copy the code

2,displayWhat are the values?

Block, inline, inline-block, list-item, table, inherit, and None

  1. block: specifies a block-level element; Display elements
  2. inline: specifies an inline element. The width and height is the content width and height by default. The width and height cannot be set
  3. inline-block: specifies an inline block element, which can be set to width and height and displayed on a single line
  4. list-item: displays as block-level elements, with list styles added
  5. tableThe: element is block-level table display
  6. inherit: inherits from the parent elementdisplayThe value of the attribute

3. What are some issues to consider when writing efficient CSS?

  1. Style that parses a selector from right to left
  2. Type selector speed, ID selector fastest, wildcard*The slowest; Parsing speed in descending order: ID > Class > Tag > Wildcard*
  3. Descendant selectors are the worst, like this:html body ul li a {}This selector is very effective
  4. Do not restrict ID selectors with label selectors (div #one {}) because the ID selector is already unique

4. What are the adaptive units in CSS?

  1. The percentage:%
  2. A unit corresponding to the width of the viewport:ww
  3. A unit corresponding to the height of the viewport:vh
  4. A unit of width or height relative to the viewport (depending on the size) :Vm
  5. Unit of font size relative to parent element:em
  6. Unit of font size relative to the root element:rem

5. What is BFC?

BFC stands for Block Formatting Context, which is the rendering rules of a Block level element. In layman’s terms, a BFC can be thought of as a large, isolated, enclosed box, in which children do not affect the outside elements

BFC layout rules:

  1. The inner boxes will be placed vertically, one on top of the other
  2. In the sameBFCOf two adjacent boxesmarginThere will be overlap
  3. When calculating the height of the BFC, the floating element is also involved

6. What is IFC

IFC stands for Block Formatting Context, which is the Formatting of inline elements.

IFC layout rules:

  1. IFCEach box inside will be placed horizontally, one on top of the other
  2. The height of the box is determined by the height of the elements inside it
  3. eachIFCRepresented as a block-level element, placed vertically like any other block-level element

7. Hide elements

1.display: none

display: none
Copy the code

One of the most commonly used methods, the best feature of this method is that elements no longer occupy space and are removed from the page

This property causes page rearrangements and poor performance

2,visibility: hidden

visibility: hidden;
Copy the code

This approach is the opposite of the above approach, but the most important feature is that elements still occupy positions

This property will only cause redraw, the page performance is high; So, if you need to hide and display elements frequently, use visibility: hidden

Visibility: hidden has two other uses:

  1. Resolve height collapse of parent and child elements (add this attribute to parent elements)
  2. Clear the float (again adding the property to the parent element)

3. Set element transparency to 0

opacity: 0;
Copy the code
  • Elements occupy positions
  • Does not cause redraw or rearrange, the page performance is high

4. Move elements to the left side of the screen using relative positioning

position:relative;
left: -100%;
Copy the code
  • The element is still in place
  • The percentage is relative to the width and height of the parent element

5. Rotate the element so it is perpendicular to the current page

/* X or y axis rotation */
transform: rotateX (90deg)

transform: rotateY (90deg)
Copy the code
  • The element definitely takes place

6. Shrink elements to 0 times

transform: scale(0);
Copy the code
  • Elements occupy positions

7, the use ofTranslateX (), translateY ()Move the element off the screen

8. Center the text vertically

1, single line of text vertically centered

Let the line height be the same as the box height

width: 100px;
height: 100px;
line-height: 100px;
Copy the code

2, multi-line text vertical center

The vertical-align attribute specifies the vertical alignment of table cell elements

One prerequisite is to convert the element to a table-cell

width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
Copy the code

9. Indent the first line

text-indent: 2em;
Copy the code

10,divVertically centered layout style

<div class="box-wrap">
    <div class="box"></div>
</div>
Copy the code

Fixed width and heightdivVertical center

.box {
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: pink;
    /* Move up and left half of the box */
    margin: -50px 0 0 -100px;
}
Copy the code
  • No compatibility

Having no fixed width or heightdivVertical center

1.flexlayout

Set Flex to the parent box so that the child box is vertically centered

.box-wrap {
    display: flex;
    width: 200px;
    height: 100px;
    background-color: pink;
    justify-content: center;
    align-items: center;
}
Copy the code
  • Are not compatibleIE8The following

2, positioningrelative+ mobiletranslate

.box-wrap {
    width: 200px;
    height: 100px;
    background-color: pink;
    position: relative;
}

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Move half of itself up and half to the left */
    transform: translate(-50%, -50%);
}
Copy the code
  • Are not compatibleIE8The following

3. Streaming layout (%) Settingsmargin: auto;

.box-wrap {
    width: 100%;
    height: 200px;
    background-color: pink;
	position: relative;
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: skyblue;
}
Copy the code