Interview essentials! Summary of CSS Knowledge

1. The method of centralizing elements horizontally and vertically

Horizontal center

Inline elements:text-align:center
We know the width of the element

Set the margin: 0 auto

The width of the element is uncertain

Flex layout the justify – content: center
Set the layout to inline/inline-block and use text-align:center
Transform :translateX(-width/2) or margin-left:-width/2

Vertical center

Line-height :height or set display:table-cell vertical-align:middle for the parent element
Use positioning, move 50% of the distance vertically, then use margin-top or tanslateY(-50%)
flex aligin-items:center

Two, the way to clear floating

Why is that? Floating elements out of the document flow cannot support the parent element, causing the parent element to collapse in height

The idea is to make the floating area a BFC so that it does not affect the layout of the outside elements

Set overflow not to None on the parent element
Sets the height of the parent element
Add additional labels, Settingsclear:both
Using pseudo-elements (recommended)

.parent:after {
    display: block;
    content: "";
    clear: both;
    visibility: hidden;
}
Copy the code

What is BFC

The BFC is a block-level formatting context, which is a separate container and does not affect the layout of elements outside the BFC, which is important for clearing floats and positioning floats. Its rendering rules are as follows:

BFC vertical margin overlap
The region of the BFC does not overlap the box of the floating element
The BFC is a separate container, and the elements outside do not affect the elements inside
Floating elements are also involved in calculating the height of the BFC

Conditions for generating BFC

The root element
Float to none
Overflow visiable
Position is fixed or Absolute
Row-level block elements
Table cell elements
Elastic box
Grid elements and so on

Characteristics and functions

Resolve height collapse of parent element
Solve Margin overlap problem

4. Position attribute

Static: the default

Fixed: Out of the document stream, fixed element position, relative to the viewport distance,

Relative: relative position, relative to the position in which the element was created

Absolute: Absolute positioning, relative to the parent element that was recently positioned as non-static, out of the document flow

Sticky: Sticky localization. An element is positioned according to the normal document flow and then relative to the flow root (BFC) and ContainingBlock (nearest block-level ancestor) in the flow. Element positioning is then expressed as relative positioning before crossing a specific threshold, followed by fixed positioning.

Flex layout

Flex elastic layout. It has two axes, the X axis and the y axis. By default, the X axis is the main axis, indicating the orientation of the elements in the container. You can use flex-direction to switch spindles and specify the alignment direction.

Justify -content defines how elements are aligned along the main axis. This can be set to center and space between Space-around The same space at both ends of each element flex-start(default) aligned at the top of flex-end aligned at the end of flex-end

You can also set the align-items arrangement on the cross axis

Flex-start Flex-end baseline baseline alignment (default) If the element is not set to height or auto, the element will stretch to cover the entire container

Two column layout three column layout

The double column layout

Use Flex for layout

<body>
    <div class="left"></div>
    <div class="right"></div>

</body>
Copy the code

body{
    display:flex;
    justify-content:space-between
}
.left..right{
    width:30%;
    height:100vh
    background-color:pink
}
Copy the code

Float layout

.left..right{
    width:30%;
    height:100vh
    background-color:pink
}
.left{
    float:left;
}
.right:{float:right} // Or set only one of the elements.left{
    float:right;
    margin-left:0
}
Copy the code

Three column layout

Float layout

 <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>

Copy the code

* {
    margin: 0;
    padding: 0;
}

body {}

.left..right {
    width: 30%;
    height: 100vh;
    background-color: pink;
}

.middle {
    width: 40%;
    height: 100vh;
    background-color: blue;
    margin-left: 30%;
    position: absolute;
}

.left {
    float: left;
}

.right {
    float: right;
}
Copy the code

Flex to implement

Add a display:flex to the body.

The difference between CSS selector pseudo-classes and pseudo-elements

Weight (from high to low)

! important

Inline style

Id selector 100

Class selector, pseudo-class selector, property selector 10

Label selector, pseudo-element selector 1

Detail: the knowledge of THE CSS should not be unknown

8. Box model

The width of the standard box model is equal to the width of the content

Box-sizing :border-box can be set to use the weird box model. The default is content-box.

Px rem EM VH. Vw

A PX pixel, on a normal screen, is a single pixel. Em is determined by the font size of the element. Vh is the proportion of the current viewport height (viewport is the area currently visible to the naked eye). Vw is the proportion of the current viewport width

Draw triangles with CSS

Set the width height to 0, and then set the width of the border

div {
    width: 0px;
    height: 0px;
    border: 50px solid;
    border-color: # 000 transparent;
}

Copy the code

Inline inline-block the difference between blocks

block:

Block elements will have an exclusive row, and multiple block elements will each have a new row. By default, the width of the block element automatically fills its parent element width.
Block elements can set width and height. Block-level elements, even with their widths set, still occupy a single row.
The block element can set margin and padding properties.

inline-block:

Simply put, the object is rendered inline, but the contents of the object are rendered as a block object. Subsequent inline objects are arranged in the same line. For example, we can give a link (element A) inline-block property value that has both the width and height properties of the block and the inline line properties.

inline:

An inline element does not monopolize a row. Multiple adjacent inline elements are placed in the same row until there is no more of them, and a new line is replaced. The width varies with the content of the element.
The inline element sets width, and the height property is invalid.
The padding and padding properties of inline elements, horizontal padding-left, padding-right, margin-left, margin-right all generate margin effects; But vertical padding-top, padding-bottom, margin-top, margin-bottom doesn’t produce margin effects.

Note: Some inline elements that are also substitutable elements, such as img\input, carry a width height attribute, so you can set the width and height

What is the problem with inline-block

Problem: Two display: inline-block elements put together produce a blank space

The reason: When an element is typesetted as an inline element, whitespace (Spaces, carriage return, line feed, etc.) between elements is processed by the browser. According to the CSS white-space property (default is Normal, incorporating excess white space), the carriage return line feed in the ORIGINAL HTML code is converted to a blank character. Whitespace occupies a certain width, so there is a gap between the elements of the inline-block.

That is, when we’re writing HTML, we’re going to have a render with a line break and we’re going to have a blank space in the middle, so we can put them on one line to eliminate the white space

 <span>aa</span>
 <span>bb</span>
 // output: aa bb
 
 
 <span>aa</span><span>bb</span>
 //output: aabb   
Copy the code

The left side is fixed width, and the right side is adaptive

The basic structure

<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
Copy the code

precondition

* {margin: 0;
            padding: 0;
        }
        body{
            height: 100vh;
        }
Copy the code

1. float + calc(100vw – width)

 .left{
           width: 300px;
           height: 100%;
           background-color: red;
       }
       .right{
           width: calc(100vw - 300px);
           height: 100%;
           background-color: green;
           margin-left: 300px; } // The left side of the principle is fixed width, the right side is calculated by the calc attribute width, height needs to be set by yourself100%It's not going to inherit the height of the parent element it's going to be one up and one down because it's two block-level elements and then we float the left, make the two elements a row and then we set the rightmargin-leftIs the width on the leftCopy the code

flex

// Set the container for the left and right elements toflex, let the left and right elements line upbody{
            height: 100vh;
            display: flex;
        }
        
        .left{
           width: 300px;
           background-color: red;
       }
       .right{
           flex:1; // Set to the rightflex:1Take up the remaining spacebackground-color: green; } / /flexElements inside the layout container becomeflexElements with cross axes (vertical if arranged in a row) are automatically stretched to container sizeCopy the code

Analysis of adaptive rem layout principle

Principle: To ensure that the proportions of elements in the design remain the same on the display, since REM changes with reference to the font size attribute of the root element, we need to dynamically change the font size of the root element to achieve adaptive layout.

Purpose: To ensure that the proportion of elements in the design remains constant

For example, in the 750*1020 design, one element a is 100px

So if you divide the screen into 100 pieces and each piece (1%) is 750/100=7.5px, then 1rem =7.5px, element A has 100/750 rem pixels

So along those lines, we figured out the proportions of each element, and then we added REM

Rem layout principle analysis