1. Inline elements and block-level elements? What is img? How to convert inline elements into block-level elements?
Inline elements: and All other elements are on a line, and the height, line height, outer margins, and inner margins cannot be changed. The width of the text image cannot be changed. It can only accommodate text or other inline elements; where img is a line element Block-level element : Always starts on a new line, the height, line height, margins and padding can all be controlled, and can accommodate inline elements and other elements; Ways to convert line elements into block-level elements: display: block;
2. Set multiple elements How many ways to clear floats for the same row?
Set multiple elements to the same row: float, inline-block How to clear floats: Method 1: Add new elements, Apply clear: both; Method 2: Parent p defines overflow: hidden; Method 3: Use :after and :before to insert two element blocks inside the element to achieve the effect of clearing the float. .clear{zoom:1;} .clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
3. Weird box model box-sizing? Flexible box model | Box layout?
The box model in standard mode: total box width/height=width/height padding border margin Under the box model in weird mode, the box's The total width and height include padding and border width. The total width/height of the box = width/height margin = content area width/height padding border margin; box-sizing has two values. One is content-box, the other is border-box. When set to box-sizing:content-box, standard mode parsing and calculation will be used; When set to box-sizing:border-box, weird mode parsing and calculation will be used.
4. Briefly describe a few css hacks?
(1) Picture gap Insert a picture into p, and the picture will expand the bottom of p by 3px. hack1: Write
and on the same line. Hack2: Add display: block; dt li to the image gap in . Hack: Add display: block to (2) Default height. In versions below IE6, some block elements have a default height (less than 18px) hack1: Add: font-size to the element : 0; hack2: Statement: overflow: hidden; The form row height is inconsistent hack1: Add a statement to the form: float: left; height: ; border: 0; Mouse pointer Hack: If you unify the mouse pointer of a certain element to a hand shape: cursor: pointer; When a in li is converted into a block element, set float to a, and a ladder shape will appear in IE hack1: Add display to a : inline-block; hack2: Add float to li: left;
5. The difference between href and src? title and alt
href (Hypertext Reference) Specifies the location of a web resource (hypertext reference), thereby defining a link or relationship between the current element or current document and the required anchor or resource defined by the current attribute. Used on elements such as link and a. The src (Source) attribute only embeds the current resource into the position defined by the current document element. It is an essential part of the page and is an introduction. Used on img, script, iframe and other elements. title: It is both an html tag and an html attribute. When title is used as an attribute, it is used to provide additional descriptive information for the element. alt: alt is an attribute of the html tag, and the alt attribute is used to specify replacement text. It can only be used in img, area and input elements (including applet elements). It is used to provide text descriptions for users to understand the image information when the images on the web page cannot be displayed normally.
6.transform? animation? The difference?animation-duration
Transform: Like width and left, it defines many static styles of elements to implement functions such as deformation, rotation, scaling, displacement, and perspective. Through a combination of functions, we Can achieve very cool static effects (non-animated). Animation: Acts on the element itself rather than the style attribute. It belongs to the category of keyframe animation. It itself is used to replace some purely expressive javascript code to implement animation. The attribute value of the current frame can be explicitly controlled through keyframe. animation-duration: Specifies the time it takes to complete the animation, in seconds or milliseconds.
7.nth-of-type | nth-child?
Example:
111
222
1
2
< ;li>3
li:nth-of-type(2): Represents the second li element under ul li:nth-child(2): Represents both The li element is the second element under ul (cannot be found). It is recommended to generally use nth-of-type, which is less likely to cause problems.
8. What is the difference between :before and ::before?
Single colon (:) is used for CSS3 pseudo-classes, and double colon (::) is used for CSS3 pseudo-elements . For pseudo-elements that existed before CSS2, such as :before, the single colon and the double colon::before have the same effect.
Answer: css3 strengthens the functions of css2, adds new attributes and new tags, and deletes Some redundant tags reduce the amount of code in terms of layout. The previously complicated layout can now be solved with just one attribute (attributes such as columns). More effects have been added (rounded corners, animations, etc.), and improvements have been made to the box model and list modules. However, CSS3 compatibility is not good, and only some advanced versions of browsers support it.
11. Flexible box model? flex|box difference?
(1) The purpose of introducing the flexible box layout model is to provide a more effective way to Items in the container are arranged, aligned, and white space allocated.
The flexible box layout model can work normally even if the size of the items in the container is unknown or changes dynamically. In this layout model, a container adjusts the size and order of the items it contains to best fill all available space according to the needs of the layout.
When the size of the container changes due to screen size or window size, the items contained in it will also be dynamically adjusted. For example, when the size of the container becomes larger, the items contained in it will be stretched to fill the excess empty space; when the size of the container becomes smaller, the items will be shrunk to prevent them from exceeding the scope of the container. Flexbox layout is direction-independent.
In the traditional layout method, the block layout arranges the blocks in the vertical direction from top to bottom; The inline layout arranges the blocks in the horizontal direction. Flexbox layout has no such inherent direction restrictions and can be freely manipulated by developers.
(2) The difference between flex and box: display: box is an old standard. If you want to take into account the antique machine, add it; after the parent element has the display: box; attribute. Add the box-flex attribute to its child elements. You can let child elements occupy a certain proportion of space according to the width of the parent element. Flex is the latest and is not supported by Dong Ji's old machines;
After the parent element sets display:flex, the width of the child element will change with the width of the parent element, but display:box will not. Android UC browser only supports display: box syntax; while iOS UC browser supports both methods.
12.viewport all properties?
(1)width: Set the width of the layout viewport, which is a positive integer, or the string 'device-width'; (2)initial-scale: Set the initial scaling value of the page , is a number, with decimals allowed. (3)minimum-scale: The minimum scaling value allowed by the user, which is a number and can contain decimals. (4)maximum-scale: The maximum zoom value allowed by the user, which is a number and can contain decimals. (5)height: Set the height of the layout viewport. This attribute is not important to us and is rarely used. (6)user-scalable: Whether the user is allowed to zoom, the value is 'no' or 'yes' . Android also supports: target-densitydpi, which represents the density level of the target device. Its function is to determine how many physical pixels 1px in CSS represents. (7) target-densitydpi: The value can be a numerical value or high-dpi, One of these strings medium-dpi, low-dpi, device-dpi
13. How to understand the semantics of HTML structure?
The so-called label semantics refers to the meaning of the label. The main purpose of semantics is to let everyone intuitively understand the purpose and function of tags (markup) and attributes (attributes), and to be friendly to search engines. With good structure and semantics, our web page content will naturally be easily crawled by search engines. This approach, which complies with search engine retrieval rules, can save a lot of effort in website promotion and is more maintainable because the structure is clear and very easy to read. This is also an important step in search engine optimization (SEO).
14. Pseudo-class selectors and pseudo-elements? Are there any pseudo-class selectors introduced in c3? What are the pseudo elements in c3?
Pseudo-classes are represented by one colon, while pseudo-elements are represented by two colons.
Pseudo-class selector: Since the state changes dynamically, when an element reaches a specific state, it may get a pseudo-class style; when the state changes, it will lose this style. .
Pseudo element selector: is not a selector used for real elements, but a selector used for pseudo elements that have been defined in CSS;
Introduced in c3 Pseudo-class selector: :root() selector, root selector, matches the root element of the document where element E is located. In an HTML document, the root element is always . The :root selector is equivalent to the element.
: The:not() selector is called a negative selector, which is exactly the same as the :not selector in jQuery. It can select all elements except a certain element.
:The empty() selector represents empty. Used to select elements without any content. No content here means no content at all, even a space.
: The target() selector is used to specify a style for a target element on the page (the id of the element is used as a hyperlink in the page). This style is only used when the user clicks a hyperlink on the page. And it works after jumping to the target element.
: The first-child() selector represents the selection of the element E that is the first child element of the parent element. A simple understanding is to select the first child element in the element. Remember that it is a child element, not a descendant element.
:nth-child() selects one or more specific child elements of an element.
:nth-last-child() starts counting from the last child element of a parent element to select a specific element
:nth-of-type(n) selector and: The nth-child(n) selector is very similar, except that it only counts child elements of a certain type specified in the parent element.
:only-child means that an element is the only child element of its parent element.
:first-line Use styles for the first line of text of an element.
:first-letter Use a style for the first letter or first word of text in an element.
:before Insert some content before an element.
:after Insert some content after an element.
Pseudo elements in c3: ::first-line selects the first line of the element, for example, changing the style of the first line of text in each paragraph ::before and::after The two are mainly used to insert content in front or behind the element. These two commonly used "content" are used together. The most common one I have seen is to clear the float. ::selection is used to change the default effect of selecting text when browsing web pages
15.What are the new features of html5 and which elements have been removed? How to deal with browser compatibility issues with HTML5 new tags? How to differentiate between HTML and HTML5?
* HTML5 is now no longer a subset of SGML, it is mainly about the addition of images, location, storage, multitasking and other functions. * Drag and drop API Better semantic content tags (header, nav, footer, aside, article, section) Audio, video API (audio, video) Canvas API Geolocation ) API Local offline storage localStorage long-term storage of data, the data is not lost after the browser is closed; sessionStorage data is automatically deleted after the browser is closed Form controls, calendar, date, time, email, url, search New technology webworker, websocket, Geolocation * Removed elements Purely expressive elements: basefont, big, center, font, s, strike, tt, u; Elements that have a negative impact on usability: frame, frameset, noframes; Support HTML5 new tags: * IE8/IE7/IE6 supports tags generated by the document.createElement method. You can use this feature to make these browsers support HTML5 new tags. After the browser supports the new tags, you need to add The default style of the tag: * Of course, the best way is to directly use a mature framework. The most used one is the html5shim framework * How to distinguish: DOCTYPE statement\new structural element\functional element
16.placeholder? How to make the effect of placeholder compatible on ie8
1. Minimize the number of HTTP requests 2. Reduce the number of DNS lookups 3. Avoid jumps 4. Cacheable AJAX 5. Delay loading of content 6. Preparation Loading 7. Reduce the number of DOM elements 8. Divide page content according to domain names 9. Minimize the number of iframes 10. Do not cause 404 errors 11. Use content distribution network 12. Specify Expires or Cache-Control for the file header 13. Gzip compress the file content 14. Configure ETag 15. Refresh the output buffer as early as possible 16. Use GET to complete the AJAX request 17. Put style sheets at the top 18, Avoid using CSS expressions 19, Use external JavaScript and CSS 20, Cut JavaScript and CSS 21, Use instead of @ import 22. Avoid using filters 23. Place the script at the bottom of the page 24. Eliminate duplicate scripts
19.jquery version? 1.11 compatible?
The Query 2.x series has the same API as jQuery 1.x, but it no longer supports IE6, 7, and 8. It is recommended to use the 1.x version, unless you are sure that IE6, 7, and 8 users will no longer access the website. jquery1.11 belongs to the 1.x version, which is compatible with IE6, 7, and 8, so it also supports IE9.
20. Block level? Inside the industry? Empty elements?
Inline elements: They are on the same line as other elements. The height, line height, outer margins, and inner margins cannot be changed. The width of the text image cannot be changed and can only accommodate text. Or other inline elements Block-level elements: always start on a new line, height, line height, margins and padding can be controlled, can accommodate inline elements and other elements; Empty elements: in HTML Elements, HTML elements without content are called empty elements. Empty elements are closed in the opening tag. is an empty element without a closing tag.
21.media attribute? screen? All? The max-width?min-width?
media attribute specifies the device on which the linked document will be displayed. The media attribute is used to specify different styles for different media types. Screen is the computer's default screen, all is applicable to all devices, max-width will not be executed if it exceeds the maximum width, and min-width must be greater than the minimum width before execution.
22. What is the name attribute value of the meta tag?
The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used by search engine robots to find information and classify information. The syntax format of the name attribute of the meta tag is: . The name attribute mainly has the following parameters: A. Keywords (keywords) description: keywords are used to tell the search engine what the keywords of your web page are. B, description (website content description) Description: description is used to tell search engines the main content of your website. C, robots (robot guide) description: robots are used to tell search robots which pages need to be indexed and which pages No index is required. The parameters of content include all, none, index, noindex, follow, nofollow, and the default is all. Example: ＜meta name="robots" content="none"＞D, author(author)
23. How many ways are there to cut pictures on mobile pages?
Responsive layout, flexible layout display: flex, use js to write and set the proportion, set pixels for the root element, and use rem as the unit.
24. What is the difference between px/em/rem? Why is the font size usually set to 62.5%
The font size relative to the text in the current object. If the current font size for inline text has not been manually set, it will be relative to the browser's default font size. 1. The value of em is not fixed; 2. Em will inherit the font size of the parent element. When using rem to set the font size for an element, it is still a relative size, but it is only relative to the HTML root element. This unit can be said to combine the advantages of relative size and absolute size. Through it, you can adjust all font sizes proportionally by modifying only the root element, and you can avoid the chain reaction of compounding font sizes layer by layer. rem is scaled relative to the browser. The default value of 1rem is 16px. In responsive layout, it is too troublesome to convert one by one into rem, so reset rem body{font-size=62.5% } At this time 1rem = 10px; if it is 12px, it is 1.2rem .
25. What is the difference between sass and scss? How is sass generally compiled?
The file extensions are different. Sass uses the ".sass" suffix as the extension. , and SCSS uses the ".scss" suffix as the extension; the syntax is written differently. Sass is written with strict indented syntax rules, without braces ({}) and semicolons (;), while SCSS's The syntax writing is very similar to our CSS syntax writing.
26. How to deal with optimization of css?
Compress and package, integrate images, avoid using Hack, solve compatibility issues, use abbreviations, so that CSS can ensure future maintenance.
27. How to compress and merge css files? gulp ?
Use gulp, install gulp globally on the homepage. 1. npm install --global gulp 2. Secondly, install gulp locally. npm install gulp --save-dev 3. Create a file named gulpfile.js in the project root directory var gulp = require('gulp'); gulp.task('default' , function() { //Put your default task code here}); 4. Run gulp. (The default task named default will be run. If you want to execute a specific task separately, please enter gulp ) gulp Merge and compress JS , CSS file Compress JS, CSS file needs to reference the following components: gulp-minify-css: Compress css
28. Component? Modular programming?
Component programming: wrap js css html together to provide methods and effects; Modularization: extract the same functions and store them in one location for programming
29. Display pictures and text on the same line?
1 Add the "vertical-align:middle" attribute to p in css. 2 Put the pictures and text into different p respectively, and then use the "margin" attribute to position them so that they can be displayed on the same line. 3 Set the image as the background image.
30. Disable event bubbling
event.stopPropagation()
31. Disable default events
event.preventDefault()
32. What is the correct setting sequence for the active hover link visited in the a tag?
a tag’s link, visited, hover, Active has a certain order a:link a:visited a:hover a:active
33. How to disable href jump page in a tag Or locate the link
e.preventDefault(); href="javascript:void(0);
34. Long-term clicks on pictures on the mobile phone will cause How to deal with selected pictures?
onselect=function() { return false }
35. Several attribute methods of video tag
src: URL of the video poster: video cover, no picture displayed during playback preload: preloading autoplay: automatic playback loop: loop playback controls: browser's own control bar width: video width height : Video height
36. How many common video encoding formats are there? How many video formats are there?
Video formats: MPEG-1, MPEG-2 and MPEG4 , AVI, RM, ASF and WMV formats Video encoding formats: H.264, MPEG-4, MPEG-2, WMA-HD and VC-1
37.canvas on the label What is the difference between setting the width and height and setting the width and height in the style?
The width and height of the canvas tag are the actual width and height of the canvas, and the graphics are drawn on this. And the width and height of the style Height is the height and width of the canvas when it is rendered in the browser. If the width and height of the canvas are not specified or the values are incorrect, they are set to the default values.
38.border-image?box -sizing?
Border-image : Graphical border Box-sizing : Property allows you to define specific elements that match a certain area in a specific way. Syntax: box-sizing: content-box | border-box Content-box: padding and border are not included in the defined width and height. The actual width of the object is equal to the sum of the set width value, border, and padding, that is (Element width = width border padding). This property behaves as a box model in standard mode. Border-box: padding and border are included in the definition Within the width and height. The actual width of the object is equal to the set width value. Even if border and padding are defined, the actual width of the object will not be changed, that is (Element width = width). This attribute behaves like a box model in weird mode.
39. Progressive enhancement and graceful degradation
Progressive enhancement: Build pages for low-version browsers to ensure the most basic functions, and then improve effects, interactions, and add functions for advanced browsers to achieve a better user experience. Graceful degradation: Build complete functionality from the beginning, and then make it compatible with lower version browsers. Difference: Graceful degradation starts from the complex status quo and tries to reduce the supply of user experience, while progressive enhancement starts from a very basic, functioning version and continues to expand to adapt to the needs of the future environment. . Degradation (functional decay) means looking back; while progressive enhancement means looking forward, while ensuring that its foundation is in a safe zone. "Elegant downgrade" point of view The "graceful downgrade" point of view believes that the website should be designed for the most advanced and complete browsers. Arrange the testing of browsers that are considered "outdated" or have missing functions at the last stage of the development cycle, and limit the test objects to the previous version of mainstream browsers (such as IE, Mozilla, etc.). Under this design paradigm, older browsers are considered to provide only a "poor, but passable" browsing experience. You can make some small adjustments to suit a specific browser. But since they are not the focus of our attention, other differences will be ignored except for fixing larger bugs. "Progressive enhancement" perspective The "progressive enhancement" perspective believes that focus should be on the content itself. Content is our incentive to build a website. Some websites display it, some collect it, some seek it, some operate it, and some websites even include all of the above, but the same thing is that they all involve content. This makes "progressive enhancement" a more reasonable design paradigm. That's why it was immediately adopted by Yahoo! and used to build its "Graded Browser Support" strategy. Then the question comes. Now the product manager sees that the web page effects of IE6, 7, and 8 are much less rounded corners and shadows (CSS3) than modern browsers of higher versions, and they require compatibility (use image backgrounds and abandon CSS3). How will you convince him?
40. Explain the weird box model and the weird box model and flexible box model of c3 in lower versions of IE?
IE When the value of padding border is less than width or height: The width of the box model = margin (left and right) width (width already contains the values of padding and border) The height of the box model = margin (up and down) height (height already contains the values of padding and border) When the value of padding border is greater than width or height: The width of the box model = margin (left and right) padding (left and right) border (left and right) The height of the box model = margin (up and down) padding (up and down) border (top and bottom) 19px (plus a default line height of 19px) So it is equivalent to the padding border and width or height ratio, whichever is larger. The above DOCTYPEs are all standard document types. No matter which mode is used to completely define the DOCTYPE, the standard mode will be triggered. If the DOCTYPE is missing, the weird mode (quirks mode) will be triggered under ie6, ie7, and ie8 CSS3box -sizing has two values, one is content-box and the other is border-box. When set to box-sizing:content-box, the standard mode will be used for analysis and calculation, which is also the default mode; When set to box-sizing:border-box, the weird mode will be used for analysis and calculation; Css3 flexbox model introduces a new box model - the flexbox model, which determines how a box is distributed among other boxes and how the available space is treated. Using this model, you can easily create a fluid layout that adapts to the browser window or a flexible layout that adapts to the font size.
41.Animation corresponding attributes
Writing method: animation: name duration timing-function delay iteration-count direction; The following is an introduction to the corresponding attributes animation-name specifies the keyframe name that needs to be bound to the selector. animation-duration specifies the time it takes to complete the animation, in seconds or milliseconds. animation-timing-function Specifies the speed curve of animation. animation-delay Specifies the delay before the animation starts. animation-iteration-count Specifies the number of times the animation should be played. animation-direction Specifies whether the animation should be played in reverse in turn.
42.transition?
css transition allows css attribute values to transition smoothly within a certain time interval. This effect can be triggered by a mouse click, focus, being clicked, or any change to the element, and smoothly changes the CSS property value with an animation effect. Note the difference between transform, which performs 2D transformations such as movement, scaling, and inversion. Come over, rotate, and stretch elements.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
