<> front end — Every day 5 Pavement test questions （ twelve ）
Progress every day 1% Not much Just 1%
<> one ,CSS3 What are the new features
1. colour ： newly added RGBA,HSLA pattern 2. Text shadow （text-shadow,） 3. frame ： fillet （border-radius） Border shadow ：
box-shadow 4. Box model ：box-sizing 5. background ：background-size Set the size of the background picture background-origin
Sets the origin of the background picture background-clip Set the clipping area of the background picture , with ”,” Multiple backgrounds can be set for separation , For adaptive layout
6. Gradual change ：linear-gradient,radial-gradient 7. transition ：transition, Can realize animation 8. Custom animation animate
@keyfrom 9. stay CSS3 The only pseudo element introduced in is ：：selection. 10. Media query , Multi column layout @media screen and (
width:800px){ … } 11. border-image 12.2D transformation ：transform：translate(x,y) rotate(x,y)
skew(x,y) scale(x,y) 13. 3D transformation 14 Font Icon font-face 15 Elastic layout flex
<> two ,CSS3 What are the new pseudo classes ?
*
：first-child selector Matches the first child element in the parent element
*
：last-child selector Matches the last selector in the parent element
*
：nth-child(number|odd|even| multiple ) Which element odd Represents an odd number ,even Represents an even number ,2n:2 Multiple of , 4n:4 Multiple of
*
:checked The radio box or check box is selected
*
stay Web In the form , Some form elements （ Such as input box , Password box , Check boxes, etc ） yes “ available ” and “ Not available ” this 2 Kind of state . By default , These form elements are available . stay CSS3 in , We can use :enabled Selector and :disabled The status of the form elements can be set separately from the unavailable status of the form elements CSS style .
<> three ,CSS3 Animation and JS What are the main differences in animation ?
<> Functional coverage ,JS than CSS3 large
① Defines the of the animation process @keyframes Recursive definitions are not supported , If there are many similar animation processes , If multiple parameters need to be adjusted to generate , There will be a lot of redundancy （ such as jQuery
Mobile Animation scheme for ）, and JS Naturally, multiple different animation processes can be realized with a set of functions
② On time scale ,@keyframes Coarse animation granularity , and JS The animation granularity control can be very fine
③ CSS3 Very few time functions are supported in animation , Not flexible enough
④ With existing interfaces ,CSS3 Animation cannot support more than two state transitions
<> realization / Reconstruction is difficult ,CSS3 than JS Simpler , Fixed performance tuning direction
<> For low version browsers with poor frame rate ,CSS3 Natural degradation can be achieved , and JS You need to write additional code
<>CSS Animation has natural event support （TransitionEnd,AnimationEnd, But they all need to be prefixed for the browser ）,JS You need to write your own events
<>CSS3 Compatibility issues , and JS Most of the time, there is no compatibility problem
<> four , use css Draw a triangle , circular , ellipse ?
css Draw a circle
css Draw a triangle
css Draw an ellipse
<> five , What is? Web Worker? Why do we need it
View the following code （ The simulation executes heavy code millions of times ）：
function test(){ for(i=0;i< 10000000000 ; i ++){ x = x + i; } }
* If the above code is in
HTML Click the button to execute , This execution is synchronous , Namely , The browser must wait until this is done before it can do anything else . Because this operation takes a long time , Then this operation will cause the browser to freeze and not respond , In addition, abnormal information will appear on the screen .
* If you can move this heavy code to Javascript In the file , It runs asynchronously , Can solve this problem . This is it. web worker Role of .Web
Worker For asynchronous execution JavaScript file , Improve browser agility .
Technology