essays

I went out for an interview recently. Before I went there, I was full of confidence, but after I went there, I hesitated to answer the simplest questions, such as “how many kinds of CSS center ways” and “Talk about JS data types”. No wonder the interviewer gracefully sent me out after 20 minutes.

I have learned a lesson and summarized some basic interview questions. I hope that when you go out to meet the enemy, you will not be as embarrassed as ME.

Clearing the Floating Mode

1. Use pseudo-classes. You can also add a div at the end of the parent tag, and the attributes in the div are the same as those of the pseudo-class. The principle and pseudo-class is the same, are using clear: both

.father :after {
	clear:both;
	content:""; display:block; } .father{ zoom:1; // Select * from Internet Explorer where Internet explorer 6 and Internet Explorer 7 float;Copy the code

2. Parent label triggers BFC(described below)

.father { overflow:auto; zoom:1; // Select * from Internet Explorer where Internet explorer 6 and Internet Explorer 7 float;Copy the code

Elements of unknown width and height are horizontally and vertically centered

Method 1: Parent element dispaly:table, child element display:cell-table.

Advantage: Parent elements can change height dynamically. Disadvantages: The table attribute causes multiple reflows, which is not supported in IE8

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"< span style>. Parent1 {display: table; height:300px; width: 300px; background-color:#FD0C70;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

</style>
<body>
    <div class="parent1">
        <div class="child">hello world-1</div>
    </div>
</body>
</html>
Copy the code

Method two: use empty elements or pseudo-classes

  • The comment section in the following code is an alternative to the After pseudo-class, and the principle is the same

Advantages: good compatibility disadvantages: extra empty elements, trouble

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> < span style>.wrap {position: absolute; width: 100%; height: 100%; text-align: center; background:#92b922;
    }
    .test {
        background: #de3168;
        display: inline-block;
        color: #fff;
        padding: 20px;
    }
    .wrap:after {
        display: inline-block;
        content: ' ';
        width: 0px;
        height: 100%;
        vertical-align: middle;
    }
    /* .vamb{
        display: inline-block;
        width: 0px;
        height: 100%;
        vertical-align: middle;
    } */
    </style>
    <div class="wrap"> <! -- <b class="vamb"></b> -->
        <div class="test"< div style = "box-sizing: border-box! Important; word-wrap: break-word! Important; word-wrap: break-word! Important; word-wrap: break-word! Important;"Copy the code

Method three: absolute positioning +transform

Advantages: Convenient, support webKit kernel Disadvantages: Poor compatibility of Transform, IE9 does not support

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> < span style>. Parent3 {position: relative; height:300px; width: 300px; background:#FD0C70;
}
.parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
        <div class="child">hello world</div>
    </div>
</body>
</html>
Copy the code

Method 4: Flexbox layout

Advantages: convenient Disadvantages: poor compatibility,IE support is very poor

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> < span style>.parent4{display: flex; justify-content: center; align-items: center; width: 300px; height:300px; background:#FD0C70;
}
.parent4 .child{
    color:#fff;
}
</style>
<body>
	<div class="parent4">
        <div class="child">hello world</div>
    </div>
</body>
</html>
Copy the code

BFC

Block formatting context (BFC), which generates a separate rendering area (not affecting, nor affected by, outside elements), is generated according to the following rules:

  • The internal boxes are placed vertically one after the other
  • The vertical distance of the internal box is determined by margin. Margin overlap will occur for adjacent boxes belonging to the same BFC
  • The left side of each internal box is in contact with the left side of the BFC, even if there is a float
  • The region of the BFC does not overlap with the float box
  • When calculating the height of the BFC, the float element is also involved in the calculation (this is the principle of clearing the float problem above).

Conditions that trigger the BFC:

  • The root element
  • The float property is not None
  • Position is absolute or fixed
  • Display is inline-block, table-cell, table-Caption, flex, inline-flex
  • The overflow is not visible

Abstract: The principles behind the magic of BFC are clearly stated in this article, and there are also relevant principles and examples that can be read carefully.

Achieve adaptive two-column layout

Method 1: The right element triggers the BFC

<! DOCTYPE html> <html lang="en">

<head>
    <meta charset="UTF-8"> < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important; } .left {float: left;
        width: 100px;
        height: 200px;
        background-color: red;
    }

    .right {
        overflow: auto;
        height: 500px;
        background-color: lightseagreen
    }
</style>

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

</html>
Copy the code

Method 2: Margin-left implementation

  • Limitation: This approach must know the width of the left side.
<! DOCTYPE html> <html lang="en">

<head>
    <meta charset="UTF-8"> < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important; } .left { width: 100px;float: left;
        background-color: red;
    }

    .right {
        margin-left: 100px;
        background-color: lightseagreen
    }
</style>

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

</html>
Copy the code

Three column layout

flex

Pros: convenience Cons: Flex compatibility again

<! DOCTYPE html> <html lang="en">

<head>
    <meta charset="UTF-8"> < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important; height: 100%; } .left, .right { flex: 0 1 100px; background-color: red; } .middle { flex: 1; height: 100%; background-color: green; } </style> <body> <div class="father">
        <div class='left'>left</div>
        <div class='middle'>middle</div>
        <div class='right'>center</div>
    </div>
</body>
</html>
Copy the code

Negative margin layout (wings)

Advantage: the market use most of a disadvantage: trouble, this is many years ago taobao old technology

<! DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> < span style>.mainwrap {width: 100%;float: left;
        }

        .main {
            margin: 0 120px;
        }

        .left,
        .right {
            float: left;
            width: 100px;
        }

        .left {
            margin-left: -100%;
        }

        .right {
            margin-left: -100px;
        }
    </style>
</head>

<div class="parent" id="parent" style="background-color: lightgrey;">
    <div class="mainWrap">
        <div class="main" style="background-color: lightcoral;">
            main
        </div>
    </div>
    <div class="left" style="background-color: orange;">
        left
    </div>
    <div class="right" style="background-color: lightsalmon;">
        right
    </div>
</div>

</html>
Copy the code

List the new HTML5 features

  • Semantic tags (nav, aside, dialog, header, footer, etc.)
  • canvas
  • Drag and drop related apis
  • Audio, Video,
  • Get geographic location
  • Better input validation
  • Web Storage (localStorage, sessionStorage)
  • WebWorkers (similar to multi-threaded concurrency)
  • webSocket

List the new features of Css3

  • The selector
  • Border (border-image, border-radius, box-shadow)
  • (background-clip, background-origin, background-size)
  • Gradients (Linear gradients, radial Gradents)
  • Font (@ the font – face)
  • Transform (transform)
  • Excessive (transition)
  • Animation (animation)
  • Flex-box model
  • Media Enquiries (@Media)

What’s the difference between transition and animation?

The transition attribute can realize the transition of the element state to the final state within a certain event, used to simulate a transition animation effect, but the function is limited, can only be used to make simple animation effects;

The animation property can be used to produce a Flash animation, and each step of the animation can be controlled through key frames, so that more complex animations can be made.