1. Achieve a three-column layout (fixed width on the left and right sides, adaptive in the middle)

1) Float :left and float:right (This can cause problems with height collapse, so clear the float. Clear the float by: a. Set height to the parent box; B. Set overflow:hidden to parent box; C. Add clear:both to the box before the end of the parent box; D. The parent box is also set to float; E. Parent div defines pseudo classes: after and zoom,

.clear::after{display:block; clear:both; content:""; visibility:hidden; height:0; } .clear{zoom:1; }Copy the code

2) Set position: Absolute for the three boxes on the left, middle and right; 3) Flex layout parent box display:flex; Flex :1 4) Display :table; Display :table-cell; The width of the left and right boxes is set separately; 5) Grid layout parent box setting display:grid; grid-template-columns:300px auto 300px;

2. The difference between == and ==

=== is the identity symbol: If the values on both sides of the equality sign are of the same type, it returns true. If the values on both sides of the equality sign are of different types, it returns false.

== is an equivalent character: When the values on both sides of the equal sign are of the same type, the value is compared to check whether the value is the same. When the values on both sides of the equal sign are of the same type, the type is automatically converted to the same type and then compared. A, if one is null and one is undefined, then equal. B. If one is a string and the other is a number, convert the string to a number and compare. C, if any value is true, convert it to 1 and compare; If either value is false, convert it to 0 and compare. D. If one is an object and the other is a number or string, convert the object to a value of the underlying type and compare. The object is converted to the base type using its toString or valueOf methods. The js core built-in class will try valueOf before toString; The exception is Date, which utilizes the toString conversion. Objects that are not in the core of the JavaScript language are converted to their original values through methods defined in their respective implementations. E. Any other combination is not equal.

3. The transition and animation

Transition 1) Syntax transition is a compound attribute, and you can set four transition attributes as follows: transition{ transition-property transition-duration transition-timing-function transition-delay} Transition-property: specifies the transition effect when one of the properties of an element changes. The values are None, all, indent, If the value of this attribute is set to None, the transition function stops. If the value of this attribute is set to all, the transition function stops. Transition-duration: specifies the duration of the transition process, in seconds or milliseconds. Transition-timing-function: a time function that changes the conversion rate of attribute values as time advances. Values ease (gradual slowing), Linear (constant speed), ease-in (acceleration), ease-out (deceleration), ease-in-out (acceleration and then deceleration), cubic- Bezier (customize a time curve); Transition-delay: Specifies the time at which an animation starts to execute after the value of an element attribute is changed. The unit is s (seconds) or ms (milliseconds). 2) the trigger mode Pseudo-classes trigger: : hover, : focus, checked, : active js trigger: ToggleClass 3) Changing the property value will not have a transition effect a.buckground-image in the following cases, such as URL (a.jpg) to URL (B.jpg) (related to browser support, Not supported by some browsers) and other b.float float elements c. eight or width convert none to other values (block, inline-block, inline) using the auto d. Display attribute Transition from static to Absolute

<style> #box2{ height: 100px; width: 100px; background: blue; } #box2:hover{ transform: rotate(180deg) scale(.5, .5); background: red; transition: background 2s ease, transform 2s ease-in 1s; } </style> </head> <body> <div id="box1">BOX1</div> <div id="box2">BOX2</div> </body>Copy the code

Animation {animation-name animation-duration animatino-timing-function animation-delay Animation-iteration -count animation-direction animation-play-state animation-fill-mode} animation-name: Used to call the animation defined by @keyframes, the same as the animation name defined by @keyframes; Animation-duration: specifies the duration for which the element plays the animation; Animation-timing -function: same as transition-timing-function in transition. According to the analysis in @Keyframes above, there may be multiple small animations in the animation, so the value here is set for the property transformation rate within the time range of each small animation. Animation-delay: defines the time to wait before the browser executes the animation. This means the time to wait before the animation executes. Animation-rotund-count: Defines the number of times an animation is played. This is usually an integer. The default is 1. Animation-direction: sets the number of animation playback times. It has two values: Normal: the default value. Each animation session is played in sequence. Alternate: Animation-play-state: property used to control the animation state of an element. Alternate: Animation-play-state: property used to control the animation state of an element. There are two main values: RUNNING: this value can be used to rerun the suspended animation, not from the beginning of the element animation, but from the position of the suspended animation. Paused: Paused the playback. Animation-fill-mod: By default, when the animation ends, the style of the element will return to its initial state. The animation-fill-mode property controls the style of the element after the animation ends. There are four main property values: None (default, back to the state before the animation started). Forward (animations stay in the end state after animation ends),backwords (animations return to the first frame state),both (animations are handled forward and backwards in rotation according to animation-direction). Animation example:

<style> .box{height:100px; width:100px; border:15px solid black; animation: changebox 10s ease-in-out 3 alternate paused; } .box:hover{ animation-play-state: running; } @keyframes changebox { 10% { background:red; } 50% { width:80px; } 70% { border:15px solid yellow; } 100% { width:180px; height:180px; } } </style> <body> <div class="box"></div> </body>Copy the code
4. Event capture of bubbling events

Events bubble up, events start at the innermost element and propagate all the way up to the Document object; Event capture is the opposite of event bubbling, which starts with the Document object and continues to the most concrete element;

5. Differences between GET and POST

1. Send mode: GET Puts the request data in the URL, that is, the HTTP protocol header. POST puts the data in the HTTP package. 2. Size limitation: Parameters passed by GET are limited in length, because browsers have limits on the length of urls. POST is theoretically unlimited. 3. Security: GET requests can be cached and stored in browser history; Posts cannot be cached. GET is less secure than POST because the data sent is part of the URL.