Front-end first phase testing
choose
1. [Single Choice] Which of the following is the descendant selector A?
A、p>b
B、p b
C、p+b
D、p.b
2. [Single Choice] Which of the following descriptions about the attribute value of the CSS attribute position is wrong? B
A. static: No positioning, the element appears in the normal flow
> B. fixed: Generate absolutely positioned elements and position them relative to the parent element.
>fixed means fixed positioning, don’t think about it complicated
C. relative: Generate relatively positioned elements and position them relative to the normal position of the element itself
D. Absolute: Generate absolutely positioned elements and position them relative to the first ancestor element other than static positioning
3. [Single Choice] What are the similarities and differences between the alt and title elements? Choose the correct one? B
A. The performance is the same
> B. alt appears as the alternative text of the picture, and title is the explanation text of the picture.
C. Title appears as an alternative text for the image, and alt is the explanation text for the image.
D. None of the above statements are correct
4. [Single Choice] The attribute of the space between merged cells in the table is B
A、cellpadding
> B、cellspacing 设置cellspacing=0
C、rules
D、border
5. [Single Choice] In which of the following HTML can we introduce CSS files? B
A、<style> B、<link> C、<meta> D、<script>
6. [Single selection] Among the css selectors, the correct priority order is D
A. id selector>label selector>class selector
B. Label selector>class selector>id selector
C. Class selector>Tag selector>id selector
> D. id selector > class selector > label selector
7. [Single Choice] Does the attribute value of the display attribute in CSS not include? E
A、inline
B、block
C、inline-block
D、table
E、hidden
8. [Single choice] Which of the following is an html comment? D
A, /* Comment content*/
B. // Comment content
C. # Comment content
D.<!--注释内容-->
9. [Single Choice] What is the default value of the enctype attribute of the form element? A
A、application/x-www-form-urlencoded
B、multipart/form-data
C、text/plain
D、appliction/json
10. [Single Choice] What attributes are added when the a tag opens a link in a new window? A
A、target
B、href
C、src
D、width
11. [Single Choice] Which of the following is not a characteristic of Html block elements? D
A. Exclusive space in one line
B. Width and height can be specified
C. Height is determined by content
== D. Can share a line space with other inline elements ==
12. [Multiple Choice] What are the core attributes of html elements? ABCD
A、id
B、class
C、title
D、style
E、src
13. [Multiple choice] What are the three CDEs of the three front-end elements?
A、vue
B、react
C、html
D、css
E、Javascript
14. [Multiple Choice] Which of the following is not an Html block element DE
A、<div></div>
B、<p></p>
C、<h1></h1>
D、<span></span>
E、<em></em>
Q&A
15. [Q&A]
What is the difference between display:none and visibility:hidden?
1. Hidden elements do not occupy the original space, and binding js events do not take effect, causing the browser to reflow and redraw
2. Hidden elements occupy space, and binding js events do not take effect. , causing the browser to redraw
16. [Q&A]
Explain the relationship between px, em and rem
1.px is a pixel unit
2.em is a relative unit, relative to its own font-size. If it does not have its own font-size, refer to the font-size of the parent element. The default is 1em. =16px
3.rem is a relative unit, relative to the font size of html elements
17. [Q&A]
How to implement responsive layout?
Core Concepts of Media Query Usage Scenarios Using Media Query Methods Link Style @media
18. [Q&A]
Briefly describe float layout and how it works?
1. Function: Allows block elements to be typed horizontally,
2. Features: Use floating layout elements to break away from the document flow, the original position is not retained, and the original space is not occupied, 2. The parent element sets the following to the parent element: :after{display: block; content: " "; clear: both} 1. The sibling element sets clear:both to the sibling element Clear float:
3. When using floating layout elements, you need to clear the floating.
19. [Q&A]
Briefly describe the http protocol
1. Hypertext Transfer Protocol, browser and server request response communication protocol.
2. The data sent by the browser to the server will be encapsulated into a request message:
Request line: method url http1.1
Request header: Content-Type
Blank line: Carriage return and line feed to split the request header
Request body: The data carried by the post request will be encapsulated in the request body Response body: {status:200,data:[],message:””} Response header: Content-Type Response line: status code status code description http1.1
3. The data the server responds to the browser will be encapsulated into a response message:
20. [Q&A]
List at least 5 animation sub-attributes and explain their meanings
Animation-name animation name
duration animation duration
timing-function animation speed curve
delay animation waiting Time
iteration-count number of animation iterations
Whether derivation animation plays in reverse direction
Fill-mode animation plays which frame a>
21. [Q&A]
Briefly describe the core concepts, common rules, usage techniques, etc. in telescopic box layout
Core concept: Container flexible element crosses the main axis
Set the display to flex for the element, the element becomes a flexible box, and the sub-elements, that is, the flexible elements, are always arranged along the main axis. The main axis direction defaults to the horizontal direction
The cross axis direction defaults to the vertical direction. The main axis and cross axis can change the arrangement direction container properties through flex-direction:
display:flex Open the flex box
flex-direction:row (default value) column row-reverse column-reverse Change the main axis arrangement direction
flex-wrap: Set the parent container to have insufficient space Whether to wrap or not display by default nowrap (default value) wrap (line wrap) wrap-reverse (line wrap reverse)
flex-flow: abbreviation of flex-direction and flex-wrap< a i=7> justify-content sets the alignment of the flex element on the main axis flex-start flex-end center center align-self sets the alignment of the elastic element itself on the cross axis flex:flex-grow flex-shrink flex-basis abbreviation flex-basis sets the width of the elastic element. The default auto priority is higher than width flex-shrink. When the parent container has insufficient space, whether to perform equal-proportional compression. The default is equal-proportional compression. The default value is 1 flex-grow when the parent container Whether the space is full or not. The default is not full. The default value is 0 order changes the order of flex elements stretch element attribute: flex-start< /span> space-between space-around center flex-end align-content sets the multi-line alignment of flexible elements strecth baseline flex-end flex-start align-items sets the alignment of flex elements on the cross axis strect space-evenly space-between space-around
22. [Q&A]
Briefly describe a box inside another boxCenter horizontallyMethods?
1.margin parent width-child width/2 is set to the left and right
2.Padding parent height-child height/2 is set to the left and right and border-box is set to the parent element
3. The son has no father-like appearance, left and right are 0, margin:auto
4. The son has no father-like appearance, left:50% margin-left:-width/2< /span> 6. Parent element display:flex justify-content:center
5. Parent element diaplay:flex child element margin:auto;
23. [Q&A] Briefly describe the method of vertically centering text in a box?
Line-height:hreight
24. [Q&A] Briefly describe the box model of CSS3
1. Content box w3c box standard box
2. Border box weird box IE box
3. Content box width and height are set to the box The width and height of the content area
4. The width and height of the weird box are set to the box itself
25. [Q&A] Briefly describe how to calculate the priority of the same rule in CSS3
Inline style>Internal style/External style
!important has the highest priority
Style attribute 1000
Id selector 100
Class pseudo-class attribute 10
Tag pseudo-element 1 Wildcard 0
26. [Q&A] Briefly describe what are the CSS3 selectors?
Id class tag descendant descendant pseudo class selector pseudo element selector negated pseudo class sibling selector combined selector