Home > Article > Web Front-end > Front-end interview guide pure welfare
Front-end interview guide pure welfare
- WBOYOriginal
- 2016-08-04 08:53:173069browse
1. HTML and CSS
1. In which browsers have the pages you created been tested? What are the cores of these browsers?
IE: trident kernel
Firefox: gecko kernel
Safari: webkit kernel
Opera: It used to be the presto kernel, but Opera has now switched to Google Chrome’s Blink kernel
Chrome:Blink (based on webkit, jointly developed by Google and Opera Software)
2. There is a very important thing at the beginning of every HTML file, Doctype. Do you know what this is for?
declaration is located at the very front in the document, before the tag. This tag tells the browser which HTML or XHTML specification the document uses. (Key point: tell the browser according to which specification to parse the page)
3. What is Quirks mode? What is the difference between it and Standards mode
Starting from IE6, Standards mode has been introduced. In standards mode, the browser attempts to process documents that comply with standards as correctly as in the specified browser.
CSS was not mature enough before IE6, so browsers before IE5 and other browsers had poor support for CSS. IE6 will provide better support for CSS. However, the problem arises at this time because many pages are based on old Written in layout mode, and if IE6 supports CSS, these pages will display abnormally. How to ensure that the existing pages are not destroyed and provide a new rendering mechanism?
We often encounter this problem when writing programs, how to ensure that the original interface remains unchanged and provide more powerful functions, especially when the new functions are not compatible with the old functions. A common approach when encountering this kind of problem is to add parameters and branches, that is, when a certain parameter is true, we use the new function, and if the parameter is not true, we use the old function, so that it does not destroy The original program provides new functions. IE6 does something similar. It treats DTD as this "parameter" because no one would write DTD on previous pages, so IE6 assumes that if DTD is written, it means that this page will use better support for CSS. layout, and if not, the previous layout will be compatible. This is Quirks mode (quirks mode, weird mode, weird mode).
Difference:
In general, there will be differences in three aspects: layout, style analysis and script execution.
Box model: In the W3C standard, if you set the width and height of an element, it refers to the width and height of the element's content. In Quirks mode, IE's width and height also include padding and border.
Set the height and width of inline elements: In Standards mode, setting wdith and height for inline elements such as will not take effect, but in quirks mode, it will take effect.
Set percentage height: In standards mode, the height of an element is determined by the content it contains. If the parent element does not set a percentage height, it is invalid for the child element to set a percentage height. Use margin:0 auto to set it. Horizontally centered: Using margin:0 auto can center the element horizontally in standards mode, but it will fail in quirks mode.
(There are many more. It doesn’t matter what he answers. The key is to see whether the answers he has come across in his own experience, or whether he just read them from articles, or even doesn’t know them at all.)
4. What are the advantages of div+css layout over table layout?
It is more convenient when revising the version. You only need to change the css file.
Page loading speed is faster, the structure is clear, and the page display is simple.
Separation of performance and structure.
Easy to optimize (seo) search engines are more friendly and it is easier to rank higher.
5. What are the similarities and differences between alt and title of img? What are the similarities and differences between strong and em?
a:alt(alt text): For user agents (UA) that cannot display images, forms or applets, the alt attribute is used to specify replacement text. The language of the replacement text is specified by the lang attribute. (In IE browser, alt will be displayed as tool tip when there is no title)
title(tool tip): This attribute provides suggested information for the element on which this attribute is set.
strong: Bold emphasis tags, emphasis, indicating the importance of the content
em: Italic emphasis tags are more strongly emphasized and indicate the emphasis of the content
6. Can you describe the difference between 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 additional 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 a complex status quo and tries to reduce the supply of user experience, while progressive enhancement starts from a very basic, functioning version and continuously expands it to adapt to the needs of the future environment. Degradation (functional decay) means looking backward; progressive enhancement means looking forward while keeping its foundation in a safe zone.
"Graceful downgrade" perspective
The "graceful degradation" view holds that websites 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 only provide 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.
The “progressive enhancement” perspective
The "progressive enhancement" perspective believes that focus should be on the content itself.
Content is what motivates us 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. This is why it was immediately adopted by Yahoo! and used to build its "Graded Browser Support (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?
7. Why is it more effective to use multiple domain names to store website resources?
CDN caching is more convenient
Break browser concurrency limit
Save cookie bandwidth
Save the number of connections to the main domain name and optimize page response speed
Prevent unnecessary security issues
8. Please talk about your understanding of the importance of web standards and standards-setting organizations.
Web standards and standard-setting organizations are all designed to make the development of the web more 'healthy'. Developers follow unified standards, reduce development difficulty and development costs, SEO will be better, and there will not be various problems caused by abusing code. BUG, security issues, and ultimately improve the usability of the website.
9. Please describe the difference between cookies, sessionStorage and localStorage?
sessionStorage is used to locally store data in a session. These data can only be accessed by pages in the same session and the data will be destroyed when the session ends. Therefore sessionStorage is not a persistent local storage, only session-level storage. LocalStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.
The difference between web storage and cookies
The concept of Web Storage is similar to that of cookies, but the difference is that it is designed for larger capacity storage. The size of the cookie is limited, and the cookie will be sent every time you request a new page, which wastes bandwidth. In addition, the cookie needs to specify a scope and cannot be called across domains.
In addition, Web Storage has setItem, getItem, removeItem, clear and other methods. Unlike cookies, front-end developers need to encapsulate setCookie and getCookie themselves. But Cookies are also indispensable: Cookies are used to interact with the server and exist as part of the HTTP specification, while Web Storage is only created to "store" data locally.
10. Briefly describe the difference between src and href.
src is used to replace the current element, and href is used to establish a connection between the current document and the referenced resource.
src is the abbreviation of source, pointing to the location of external resources. The pointed content will be embedded in the document at the location of the current tag; when requesting the src resource, the resource pointed to will be downloaded and applied to the document, such as js scripts, img Elements such as pictures and frames.
When the browser parses this element, it will pause the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same is true for elements such as pictures and frames, which is similar to embedding the pointed resource into the current tag. This is also why the js script is placed at the bottom instead of the head.
href is the abbreviation of Hypertext Reference, which points to the location of the network resource and establishes a link to the current element (anchor) or current document (link). If we add
to the documentThen the browser will recognize the document as a css file, download the resources in parallel and not stop processing the current document. This is why it is recommended to use the link method to load css instead of using the @import method.
11. What image formats do you know will be used in web page production?
png-8, png-24, jpeg, gif, svg.
But none of the above are the final answers the interviewer wants. The interviewer wants to hear that it's Webp. (Are you paying attention to new technologies and new things)
Popular science about Webp: WebP format, an image format developed by Google to speed up image loading. The image compression volume is only about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. Well-known websites such as Facebook Ebay have begun testing and using the WebP format.
With the same quality, the volume of WebP format images is 40% smaller than JPEG format images
12. Do you know what microformats are? Talk about understanding. Should microformats be considered in front-end builds?
Microformats is a collection of machine-readable semantic XHTML vocabulary and an open standard for structured data. It is a special format developed for special applications.
Advantages: Add smart data to web pages so that website content can display additional tips in the search engine results interface. (Application example: Douban, if you are interested, google it yourself)
13. After the css/js code goes online, developers often optimize performance. Starting from the time the user refreshes the web page, where will a js request usually be cached?
Answer: dns cache, cdn cache, browser cache, server cache.
14. There are a large number of pictures on a page (large e-commerce website), and the loading is very slow. What methods do you have to optimize the loading of these pictures to give users a better experience.
Lazy loading of images. You can add a scroll bar event to the unvisible area on the page to determine the distance between the image position and the top of the browser and the distance between the page and the page. If the former is smaller than the latter, it will be loaded first.
If it is a slideshow, photo album, etc., you can use picture preloading technology to download the previous and next pictures of the currently displayed picture first.
If the image is a CSS image, you can use CSSsprite, SVGsprite, Iconfont, Base64 and other technologies.
If the image is too large, you can use a specially encoded image. When loading, a particularly compressed thumbnail will be loaded first to improve the user experience.
If the image display area is smaller than the actual size of the image, the image will be compressed first on the server side according to business needs, and the compressed image size will be consistent with the display.
15. How do you understand the semantics of HTML structure?
When the style is removed or lost, the page can present a clear structure:
HTML itself has no performance. We see that for example,
is bold, with a font size of 2em, and bold; is bold. Don’t think that this is the performance of HTML. These are actually the default css of HTML. Styles are at work, so when the styles are removed or lost, the page can present a clear structure. This is not an advantage of the semantic HTML structure. However, browsers have default styles. The purpose of the default styles is also to better express the semantics of HTML. , it can be said that the browser's default style and the semantic HTML structure are inseparable.
Screen readers (if the visitor is visually impaired) will "read" your page based entirely on your markup.
For example, if you use semantic tags, screen readers will "spell out" your word instead of trying to pronounce it in full.
PDA, mobile phones and other devices may not be able to render web pages like ordinary computer browsers (usually because these devices have weak support for CSS)
Using semantic markup ensures that these devices render web pages in a meaningful way. Ideally, the viewing device is tasked with rendering web pages consistent with the conditions of the device itself.
Semantic tagging provides the device with the relevant information it needs, saving you the trouble of having to consider all possible display situations (including existing or new devices in the future). For example, a mobile phone can choose to have a paragraph tagged with a title The text is displayed in bold font. A handheld computer may display it in a larger font. Either way once you mark the text as a title, you can be sure that the reading device will display the page appropriately on its own terms. .
Search engine crawlers also rely on markup to determine the context and weight of individual keywords
In the past, you may not have considered that search engine crawlers are also "visitors" to the website, but now they are actually extremely valuable users. Without them, search engines will not be able to index your website, and then it will be difficult for general users to come Visit.
It is very important whether your page is easy to understand for crawlers, because crawlers will largely ignore the markup used for performance and only focus on semantic markup.
Therefore, if the title of the page file is tagged instead, then this page may appear lower in the search results. In addition to improving ease of use, semantic markup facilitates the correct use of CSS and JavaScript because it itself provides Many "hooks" to apply page styles and behaviors.
SEO mainly relies on the content of your website and external links.
Easy for team development and maintenance
W3C has set a good standard for us. Everyone in the team follows this standard, which can reduce many differentiated things, facilitate development and maintenance, improve development efficiency, and even achieve modular development.
16. Talk about what you need to consider when doing SEO from a front-end perspective?
Understand how search engines crawl and index web pages
You need to know the basic working principles of some search engines, the differences between search engines, how search robots (SE robots or web crawlers) work, how search engines sort search results, etc.
Meta tag optimization
Mainly includes theme (Title), website description (Description), and keywords (Keywords). There are also other hidden texts such as Author (author), Category (directory), Language (encoding language), etc.
How to select keywords and place them on web pages
You have to use keywords when searching. Keyword analysis and selection is one of the most important tasks of SEO. First, determine the main keywords for the website (usually around 5), and then optimize these keywords, including keyword density (Density), relevance (Relavancy), prominence (Prominency), etc.
Understand the major search engines
Although there are many search engines, there are only a few that determine website traffic. For example, the English ones mainly include Google, Yahoo, Bing, etc.; the Chinese ones include Baidu, Sogou, Youdao, etc. Different search engines have different rules for crawling, indexing, and sorting pages. You also need to understand the relationship between search portals and search engines. For example, AOL uses Google's search technology for web search, and MSN uses Bing's technology.
Main Internet Directory
Open Directory itself is not a search engine, but a large website directory. The main difference between it and a search engine is the way in which website content is collected. The directory is manually edited and mainly includes the homepage of the website; the search engine automatically collects it and crawls a large number of content pages in addition to the homepage.
Pay-per-click search engine
Search engines also need to survive. As Internet commerce becomes more and more mature, paid search engines have become popular. The most typical ones are Overture and Baidu, and of course Google's advertising project Google Adwords. More and more people use search engine click ads to locate commercial websites. There is also a lot of knowledge about optimization and ranking. You have to learn to get the most clicks with the least advertising investment.
Search engine login
After the website is finished, don’t lie there waiting for customers to fall from the sky. The easiest way to let others find you is to submit your website to a search engine. If you have a commercial website, the major search engines and directories will require you to pay to be included (e.g. Yahoo charges $299), but the good news is that (at least so far) the largest search engine, Google, is currently free, and it dominates Controls over 60% of the search market.
Link exchange and link popularity (Link Popularity)
Web content is linked to each other in the form of hypertext, and the same is true between websites. In addition to search engines, people surf through links between different websites every day. The more links other websites have to your website, the more traffic you will get. More importantly, the more external links your website has, the more important it will be considered by search engines, thus giving you a higher ranking.
Reasonable tag usage
17. Is there any way to set the CSS style of a DOM?
External style sheet, introduce an external css file
Internal style sheet, put the css code inside the
tag
Inline style, define the css style directly inside the HTML element
18. What selectors are there in CSS?
Derived selector (declared with HTML tag)
id selector (declared with DOM ID)
Class selector (declared with a style class name)
Attribute selector (declared using DOM attributes, belonging to CSS2, not supported by IE6, not commonly used, forget it if you don’t know)
In addition to the first 3 basic selectors, there are also some extended selectors, including
Descendant selector (use space separation, such as div .a{ })
Group selector (use comma separation, such as p,div,#a{ })
Then the question is, how is the priority of CSS selector defined?
Basic principles:
Generally speaking, the more special a selector is, the higher its priority. That is, the more accurately the selector points, the higher its priority.
Complex calculation method:
Use 1 to indicate the priority of the derived selector
Use 10 to represent the priority of the class selector
Use 100 to mark the priority of the ID selector
div.test1 .span var priority 1+10 +10 +1
span#xxx .songs li Priority 1+100 + 10 + 1
#xxx li Priority 100 +1
Then the question is, look at the following code, what color is the text in the
tag?
123
Answer: red. It is related to the order of style definitions in the file, that is, the later ones overwrite the previous ones, and has nothing to do with the order in
.
19. What attributes can be defined in CSS to prevent a DOM element from being displayed within the browser's visible range?
The most basic:
Set the display attribute to none, or set the visibility attribute to hidden
Technical:
Set the width and height to 0, set the transparency to 0, and set the z-index position to -1000
20. What is the problem that the hover style does not appear after the hyperlink is accessed? How to solve?
Answer: The hyperlink style that has been clicked and visited no longer has hover and active. The solution is to change the order of CSS attributes: L-V-H-A (link, visited, hover, active)
21. What is Css Hack? What are the hacks for ie6, 7, and 8?
Answer: The process of writing different CSS codes for different browsers is CSS hack.
Examples are as follows:
1
2
3
4
5
6
7
8
9
10
11
12
#test
width: 300px;
Height:300px;
background-color: blue; /*firefox*/
background-color:red9; /*all ie*/
background-color:yellow; /*ie8*/
+background-color:pink;
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
22. Please use Css to write a simple slide effect page
Answer: I know you need to use css3. Use animation to create a simple slideshow effect.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**HTML**/
div.ani
/**css**/
.ani{
width: 480px;
Height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: "loops";
-webkit-animation-duration: 20s;
- webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
0% {
background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jp g) no-repeat;
}
25% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-re peat;
}
50% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
}
75% {
background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
}
100% {
background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg ) no-repeat;
}
}
24. What is the specific difference between inline elements and block-level elements? Can the padding and margin of inline elements be set?
Block-level element (block) features:
Always occupy a separate line, which means starting on a new line, and the following elements must also be displayed on a new line;
Width, height, padding and margin can all be controlled;
Inline element (inline) features:
On the same line as adjacent inline elements;
Width, height, top/bottom of inner margin (padding-top/padding-bottom) and top/bottom of outer margin (margin-top/margin-bottom) cannot be changed (that is, padding and margin's left and right can be set), which is the size of the text or pictures inside.
Then the question is, what are the default inline-block elements that browsers have (which have intrinsic dimensions and can set height and width, but will not automatically wrap)?
Answer: , ![]()
,
25. What is margin overlap? What are the consequences of overlap?
Overlap of outer margins is margin-collapse.
In CSS, the margins of two adjacent boxes (which may be brothers or ancestors) can be combined into a single margin. This way of merging margins is called collapsing, and the resulting margins are called collapsed margins.
The folding results follow the following calculation rules:
When two adjacent margins are both positive numbers, the folding result is the larger value between them.
When two adjacent margins are negative, the folding result is the larger of the two absolute values.
When the two margins are one positive and one negative, the folding result is the sum of the two.
26. What is the difference between the transparency effects of rgba() and opacity?
rgba() and opacity can both achieve transparency effects, but the biggest difference is that opacity acts on elements and the transparency of all content within the elements,
And rgba() only acts on the color of the element or its background color. (Child elements of elements that set rgba transparency will not inherit the transparency effect!)
27. What are the two properties in CSS that can make text overlap vertically and horizontally?
Vertical direction: line-height
Horizontal direction: letter-spacing
Then the question is, do you know what are the wonderful uses of letter-spacing?
Answer: It can be used to eliminate the problem of newline spaces between inline-block elements.
28. How to vertically center a floating element?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//Method 1: Know the height and width of the element
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //The parent element needs to be positioned relatively
top: 50%;
left: 50%;
Margin-top:-100px; //Half height, width
margin-left: -100px;
}
//Method 2: Height and width of unknown element
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //The parent element needs to be positioned relatively
left: 0;
top: 0;
right: 0;
bottom: 0;
}
那么问题来了，如何垂直居中一个![]()
?（用更简便的方法。）
1
2
3
4
5
6
#container //![]()
的容器设置如下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
29. The difference between px and em.
Px and em are both units of length. The difference is that the value of px is fixed. It is whatever you specify and it is easier to calculate. The value of em is not fixed, and em will inherit the font size of the parent element.
The default font height of the browser is 16px. So unadjusted browsers comply with: 1em=16px. Then 12px=0.75em, 10px=0.625em.
30. Describe a "reset" CSS file and how to use it. Do you know normalize.css? Do you understand their differences?
There are many reset styles. Every front-end developer must have a commonly used reset CSS file and know how to use them. Are they doing it blindly or do they know why they are doing it? The reason is that different browsers have different default styles for some elements. If you don't handle it, there will be necessary risks in different browsers, or more dramatic consequences.
You may use Normalize to replace your reset style file. It does not reset all styles, but only provides a reasonable set of default style values. This makes it consistent and reasonable across browsers, but doesn't disrupt other things (like bold titles).
In this regard, it is impossible to do every reset reset. It's also really a bit more than a reset, and it handles quirks you'd never have to think about, like inconsistent audio elements or inconsistent line-height of HTML.
31. What are Sass and LESS? Why do people use them?
They are CSS preprocessors. It is an abstraction layer on CSS. They are compiled into CSS with a special syntax/language.
For example, Less is a dynamic style language. CSS is given the characteristics of a dynamic language, such as variables, inheritance, operations, and functions. LESS can be run on the client (supports IE 6+, Webkit, Firefox), or Runs on the server side (with Node.js).
Why use them?
Clear structure and easy to expand.
You can easily block browser private syntax differences. Needless to say, this encapsulates the repeated processing of browser syntax differences and reduces meaningless mechanical labor.
Multiple inheritance can be easily implemented.
Fully compatible with CSS code and can be easily applied to old projects. LESS only extends the CSS syntax, so old CSS code can also be compiled with LESS code.
32. What is the difference between display:none and visibility:hidden?
display : Hide the corresponding element without occupying the original space of the element.
Visibility: Hide the corresponding element and occupy the original space of the element.
That is, after using the CSS display:none attribute, the width, height and other attribute values of the HTML element (object) will be "lost"; and after using the visibility:hidden attribute, the HTML element (object) is only visually visible Invisible (completely transparent), while the spatial location it occupies remains.
34. The difference between link and @import in CSS is:
Link belongs to the html tag, while @import is provided in CSS
When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will not be loaded until the page is loaded
@import can only be recognized in ie5 or above, and link is an html tag, so there is no browser compatibility issue
The weight of styles introduced by Link is greater than the reference of @import (@import imports the referenced style into the current page)
35. Introduction to the box model:
There are two types of CSS box models: IE box model and standard W3C box model
Box model: content, padding, margins (generally not included in the actual width of the box), border
36. Why initialize the style?
Due to browser compatibility issues, different browsers have different default style values for tags. Failure to initialize will cause display differences between different browsers
But initializing CSS will have a small impact on search engine optimization
37. What is BFC?
BFC (block-level formatting context), a box that creates a new BFC is laid out independently, and the layout of the elements inside the box will not affect the elements outside the box. Two adjacent boxes in the same BFC have a problem of margin overlap in the vertical direction
BFC means that an independent rendering area is created in the browser. The layout of all elements in this area will not affect the layout of elements outside the area. This rendering area only works on block-level elements
38. What is html semantics?
When the page style fails to load, the page can show a clear structure
Conducive to SEO optimization and inclusion in search engines (more convenient for search engine crawler programs to identify)
Facilitates project development and maintenance, making HTML code more readable and easier to parse on other devices.
39. What is the role of Doctype? What is the difference between strict mode and mixed mode?
is used to tell the browser in which mode to render the document
In strict mode: page layout and JS parsing are performed according to the highest standards supported by the browser
Mixed mode: Not strictly implemented in accordance with the standard, mainly used to be compatible with old browsers and backward compatible
40. IE’s double margin BUG: horizontal margin is set after the block-level element floats, and the margin displayed by IE6 is larger than the set margin. Solution: join_display: inline
41. HTML and XHTML - what is the difference between them?
1. All tags must have a corresponding closing tag
2. The names of all tag elements and attributes must be in lowercase
3. All XML tags must be properly nested
4. All attributes must be enclosed in quotation marks ""
5. Encode all < and & special symbols
6. Assign a value to all attributes
7. Do not use "--" in comment content
8. Pictures must have captions
42. Common compatibility issues with HTML?
1.Double margin BUG caused by float using display
2.3 pixel problem caused by using float and using dislpay:inline -3px
3. Hyperlink hover will become invalid after being clicked. Use the correct writing order link visited hover active
4.Ie z-index problem Add position:relative to the parent
5.Png Transparent Use js code to change
6.Min-height minimum height! Important Solved’
7.select cover under ie6 and use iframe nesting
8. Why is there no way to define a width container of about 1px (caused by the default line height of IE6, use over: hidden, zoom: 0.08 line-height: 1px)
9.IE5-8 does not support opacity, solution:
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
10. IE6 does not support PNG transparent background, solution: use gif images under IE6
43. Understanding and understanding of WEB standards and W3C
Answer: Close tags, lowercase tags, no nesting, improve the search probability of search robots, use external link css and js scripts, separate structural behavior, faster file downloads and page speeds, and content can be accessed by more users Access, content can be accessed by a wider range of devices, less code and components, easy to maintain, easy to revise, no need to change the page content, provide a printed version without copying the content, and improve the usability of the website.
44. What are the inline elements? What are the block-level elements? The CSS box model?
Answer: Block-level element: div p h1 h2 h3 h4 form ul
Inline elements: a b br i span input select
CSS box model: content, border, margin, padding
45. What are the three layers of the front-end page? What are they? What are their functions?
Answer: Structure layer Html presentation layer CSS behavior layer js.
46. What is the role of Doctype? Strict mode and mixed mode - how to trigger these two modes and what is the significance of distinguishing them?
(1) The declaration is located at the very front of the document, before the tag. Tells the browser's parser what document type specification to use to parse this document.
(2) The strict mode typesetting and JS operation mode are run at the highest standard supported by the browser.
(3) In mixed mode, the page is displayed in a loose backward-compatible manner. Emulates the behavior of older browsers to prevent the site from not working.
(4). DOCTYPE does not exist or the format is incorrect, which will cause the document to be presented in mixed mode.
47. What are the elements within the industry? What are block-level elements?
What are the void elements?
(1) CSS specifications stipulate that each element has a display attribute, which determines the type of the element. Each element has a default display value. For example, the default display attribute value of div is "block", which becomes a "block-level" element; The default display attribute value of span is "inline", which is an "inline" element.
(2) Inline elements include: a b span img input select strong (emphasis tone) Block-level elements include: div ul ol li dl dt dd h1 h2 h3 h4…p
(3) Well-known empty elements:
![]()
Little known are:
48. CSS box model?
(1) Two types, IE box model and standard W3C box model; the content part of IE includes
border and pading;
(2) Box model:
Content, padding, margin, border.
49. What are the CSS selectors? What properties can be inherited? How is the priority algorithm calculated? What are the new pseudo-classes in CSS3?
*
1.id selector (#myid)
2. Class selector (.myclassname)
3. Tag selector (div, h1, p)
4. Adjacent selector (h1 + p)
5. Sub-selector (ul < li)
6. Descendant selector (li a)
7. Wildcard selector (*)
8. Attribute selector (a[rel = "external"])
9. Pseudo-class selector (a: hover, li: nth - child)
* * Inheritable: font-size font-family color, UL LI DL DD
DT;
* Not inheritable: border padding margin width height;
* * Based on the nearest priority principle, the one with the closest style definition shall prevail;
* * The loading style is subject to the last loaded positioning;
Priority is:
!important > id > class > tag
important has higher priority than inline
Examples of new pseudo-classes in CSS3:
p:first-of-type selects every
element that is the first
element of its parent element.
p:last-of-type selects every
element that is the last
element of its parent.
p:only-of-type Selects every
element that is the only
element of its parent element.
p:only-child Selects each
element that is the only child element of its parent element.
p:nth-child(2) Selects each
element that is the second child of its parent element.
:enabled, :disabled control the disabled state of form controls.
:checked, the radio button or check box is selected.
50. How to center a div, how to center a floating element?
Set a width to the div and then add margin:0 auto attribute
div{
width:200px;
margin:0 auto;
}
Center a floating element
Determine the width and height of the container
A layer of 500 meters wide and 300 meters high
Set the margins of the layer
.div {
Width:500px; height:300px;//The height can be omitted
Margin: -150px 0 0 -250px;
Position:relative; relative positioning
background-color:pink;//Easy to see the effect
left:50%;
top:50%;
}
51. What are the cores of browsers? What are the compatibility of commonly encountered browsers? The reasons, what are the solutions, and common hack techniques
?
* IE browser’s kernel Trident, Mozilla’s Gecko, Google’s WebKit, Opera kernel Presto;
* The background appears on the iE6 browser when the image is png24. The solution is to make it PNG8.
* The default margin and padding of browsers are different. The solution is to add a global *{margin:0;padding:0;} to unify.
* IE6 double-margin bug: After the block attribute label is floated and there are horizontal margins, the margin displayed in IE6 is larger than the set value.
生 The double distance generated by floating IE #Box {float: left; width: 10px;
margin:0 0 0 100px;}
In this case, IE will generate a distance of 20px. The solution is to add it to the float label style control.
——_display:inline;Convert it into an inline attribute. (_This symbol is only recognized by ie6)
Beinging a progressive identification method, is to gradually exclude parts from the whole.
First, the clever use of the "9" mark separates the IE browser from all situations.
Next, use "+" again to separate IE8 from IE7 and IE6, so that IE8 has been independently recognized.
css
.bb{
background-color:#f1ee18;/*All identifications*/
.background-color:#00deff9; /*IE6, 7, 8 recognition*/
+background-color:#a200ff;/*IE6, 7 recognition*/
_background-color:#1e0bd1;/*IE6 recognition*/
}
* Under IE, you can use the method of getting regular attributes to get custom attributes,
You can also use getAttribute() to get custom attributes;
Under Firefox, you can only use getAttribute() to get custom attributes.
Solution: Get custom attributes through getAttribute().
* Under IE, the even object has x, y attributes, but does not have pageX, pageY attributes;
Under Firefox, the event object has pageX and pageY attributes, but no x and y attributes.
* (Conditional comment) The disadvantage is that additional HTTP requests may be added under IE browser.
* By default, the Chrome Chinese interface will force text smaller than 12px to be displayed as 12px. You can add CSS attributes
-webkit-text-size-adjust: none; Solution.
The hover style will no longer appear after the hyperlink is visited. The hyperlink style that was clicked and visited no longer has hover and active. The solution is to change the order of CSS attributes:
L-V-H-A:
a:link {} a:visited {} a:hover {} a:active {}
52. List the values of display and explain their functions. What is the value of position, relative and absolute positioning origin?
1. block is displayed like a block type element.
none default value. Displayed as an inline element type.
inline-block is displayed like an inline element, but its content is displayed like a block type element.
List-item is displayed like a block type element and adds style list markup.
2. The value of position
*absolute
Generate absolutely positioned elements, positioned relative to the first parent element other than static positioning.
*fixed (old IE does not support)
Generate absolutely positioned elements, positioned relative to the browser window.
* relative
Generates relatively positioned elements, positioned relative to their normal position.
* static
default value. There is no positioning, the element appears in the normal flow
*(ignore top, bottom, left, right z-index declarations).
* inherit specifies that the value of the position attribute is inherited from the parent element.
53. How is the calculation method of absolute containing block different from that of normal flow?
54, position, display, margin
What will happen when the characteristics of collapse, overflow, and float are superimposed on each other?
55. Understanding and awareness of WEB standards and W3C
Closed tags, lowercase tags, no nesting, improve search probability of search robots, use external
Chain css and js scripts, separation of structural behavior, faster file download and page speed, content can be accessed by more users, content can be accessed by a wider range of devices, less code and components, easy to maintain
It is easy to maintain and revise, without changing the page content, providing a printed version without copying the content, and improving the usability of the website;
56. What is the basic statement structure of css?
Selector {Attribute 1: value 1; Attribute 2: value 2;…}
57. What is the difference between browser standard mode and weird mode?
Differences in box model rendering modes
Use
window.top.document.compatMode can show what mode
58. What attributes can be defined in CSS to prevent a DOM element from being displayed within the visible range of the browser?
The most basic:
Set the display attribute to none, or set the visibility attribute to hidden
Skills:
Set the width and height to 0, set the transparency to 0, and set the z-index position to -1000
59. What is the problem that the hover style does not appear after a hyperlink is accessed? How to solve?
Answer: The hyperlink style that has been clicked and visited no longer has hover and active. The solution is to change the order of CSS attributes: L-V-H-A (link, visited, hover, active)
60、What is Css Hack? What are the hacks for ie6, 7, and 8?
Answer: The process of writing different CSS codes for different browsers is CSS hack.
Examples are as follows:
#test
width:300px;
Height:300px;
background-color:blue; /*firefox*/
background-color:red9; /*all ie*/
background-color:yellow
+background-color:pink;
_background-color:orange; /*ie6*/ }
:root #test {
background-color:purple9; } /*ie9*/
@media all and (min-width:0px){ #test
{background-color:black
@media screen and
(-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
62
, please use Css to write a simple slideshow effect page
Answer: I know you need to use css3. Use animation to create a simple slideshow effect.
/**HTML**/
div.ani
/**css**/
.ani{
width:480px;
height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name:
"loops";
—webkit-animation-duration: 20s;
-webkit-animation-iteration-count:
infinite;
}
@-webkit-keyframes "loops" {
0% {
background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg)
no-repeat;
}
25% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg)
no-repeat;
}
50% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg)
no-repeat;
}
75% {
background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg)
no-repeat;
}
100% {
background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg)
no-repeat;
}
}
63 What is the specific difference between inline elements and block-level elements? Can the padding and margin of inline elements be set?
Block-level element (block) characteristics:
Always occupy a separate line, which means starting on a new line, and the following elements must also be displayed on a new line;
Width, height, padding and margin can all be controlled;
-
- Inline element (inline) characteristics:
- On the same line as adjacent inline elements;
- Width, height, top/bottom of inner margin (padding-top/padding-bottom) and top/bottom of outer margin (margin-top/margin-bottom) cannot be changed (that is, padding and margin's left and right can be set), which is the size of the text or pictures inside.
So here comes the question, Browsers also have default inline-block elements (which have intrinsic dimensions and can set height and width, but will not automatically wrap). What are there?
Answer: , ![]()
,
1
2
3
4
5
6
7
8
9
10
11
12
#test
width: 300px;Height:300px;
background-color: blue; /*firefox*/
background-color:red9; /*all ie*/
background-color:yellow; /*ie8*/
+background-color:pink;
_background-color:orange; /*ie6*/ }:root #test { background-color:purple9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
22. Please use Css to write a simple slide effect page
Answer: I know you need to use css3. Use animation to create a simple slideshow effect.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/**HTML**/ div.ani /**css**/ .ani{ width: 480px; Height:320px; margin:50px auto; overflow: hidden; box-shadow:0 0 5px rgba(0,0,0,1); background-size: cover; background-position: center; -webkit-animation-name: "loops"; -webkit-animation-duration: 20s; - webkit-animation-iteration-count: infinite; } @-webkit-keyframes "loops" { 0% { background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jp g) no-repeat; } 25% { background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-re peat; } 50% { background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat; } 75% { background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat; } 100% { background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg ) no-repeat; } } |
24. What is the specific difference between inline elements and block-level elements? Can the padding and margin of inline elements be set?
Block-level element (block) features:
Always occupy a separate line, which means starting on a new line, and the following elements must also be displayed on a new line;
Width, height, padding and margin can all be controlled;
Inline element (inline) features:
On the same line as adjacent inline elements;
Width, height, top/bottom of inner margin (padding-top/padding-bottom) and top/bottom of outer margin (margin-top/margin-bottom) cannot be changed (that is, padding and margin's left and right can be set), which is the size of the text or pictures inside.
Then the question is, what are the default inline-block elements that browsers have (which have intrinsic dimensions and can set height and width, but will not automatically wrap)?
Answer: , ,
25. What is margin overlap? What are the consequences of overlap?
Overlap of outer margins is margin-collapse.
In CSS, the margins of two adjacent boxes (which may be brothers or ancestors) can be combined into a single margin. This way of merging margins is called collapsing, and the resulting margins are called collapsed margins.
The folding results follow the following calculation rules:
When two adjacent margins are both positive numbers, the folding result is the larger value between them.
When two adjacent margins are negative, the folding result is the larger of the two absolute values.
When the two margins are one positive and one negative, the folding result is the sum of the two.
26. What is the difference between the transparency effects of rgba() and opacity?
rgba() and opacity can both achieve transparency effects, but the biggest difference is that opacity acts on elements and the transparency of all content within the elements,
And rgba() only acts on the color of the element or its background color. (Child elements of elements that set rgba transparency will not inherit the transparency effect!)
27. What are the two properties in CSS that can make text overlap vertically and horizontally?
Vertical direction: line-height
Horizontal direction: letter-spacing
Then the question is, do you know what are the wonderful uses of letter-spacing?
Answer: It can be used to eliminate the problem of newline spaces between inline-block elements.
28. How to vertically center a floating element?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
//Method 1: Know the height and width of the element #div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //The parent element needs to be positioned relatively top: 50%; left: 50%; Margin-top:-100px; //Half height, width margin-left: -100px; }
//Method 2: Height and width of unknown element
#div1{ width: 200px; height: 200px; background-color: #6699FF;
margin:auto; position: absolute; //The parent element needs to be positioned relatively left: 0; top: 0; right: 0; bottom: 0; } |
那么问题来了，如何垂直居中一个?（用更简便的方法。）
|
1 2 3 4 5 6 |
#container // { display:table-cell; text-align:center; vertical-align:middle; } |
29. The difference between px and em.
Px and em are both units of length. The difference is that the value of px is fixed. It is whatever you specify and it is easier to calculate. The value of em is not fixed, and em will inherit the font size of the parent element.
The default font height of the browser is 16px. So unadjusted browsers comply with: 1em=16px. Then 12px=0.75em, 10px=0.625em.
30. Describe a "reset" CSS file and how to use it. Do you know normalize.css? Do you understand their differences?
There are many reset styles. Every front-end developer must have a commonly used reset CSS file and know how to use them. Are they doing it blindly or do they know why they are doing it? The reason is that different browsers have different default styles for some elements. If you don't handle it, there will be necessary risks in different browsers, or more dramatic consequences.
You may use Normalize to replace your reset style file. It does not reset all styles, but only provides a reasonable set of default style values. This makes it consistent and reasonable across browsers, but doesn't disrupt other things (like bold titles).
In this regard, it is impossible to do every reset reset. It's also really a bit more than a reset, and it handles quirks you'd never have to think about, like inconsistent audio elements or inconsistent line-height of HTML.
31. What are Sass and LESS? Why do people use them?
They are CSS preprocessors. It is an abstraction layer on CSS. They are compiled into CSS with a special syntax/language.
For example, Less is a dynamic style language. CSS is given the characteristics of a dynamic language, such as variables, inheritance, operations, and functions. LESS can be run on the client (supports IE 6+, Webkit, Firefox), or Runs on the server side (with Node.js).
Why use them?
Clear structure and easy to expand.
You can easily block browser private syntax differences. Needless to say, this encapsulates the repeated processing of browser syntax differences and reduces meaningless mechanical labor.
Multiple inheritance can be easily implemented.
Fully compatible with CSS code and can be easily applied to old projects. LESS only extends the CSS syntax, so old CSS code can also be compiled with LESS code.
32. What is the difference between display:none and visibility:hidden?
display : Hide the corresponding element without occupying the original space of the element.
Visibility: Hide the corresponding element and occupy the original space of the element.
That is, after using the CSS display:none attribute, the width, height and other attribute values of the HTML element (object) will be "lost"; and after using the visibility:hidden attribute, the HTML element (object) is only visually visible Invisible (completely transparent), while the spatial location it occupies remains.
34. The difference between link and @import in CSS is:
Link belongs to the html tag, while @import is provided in CSS
When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will not be loaded until the page is loaded
@import can only be recognized in ie5 or above, and link is an html tag, so there is no browser compatibility issue
The weight of styles introduced by Link is greater than the reference of @import (@import imports the referenced style into the current page)
35. Introduction to the box model:
There are two types of CSS box models: IE box model and standard W3C box model
Box model: content, padding, margins (generally not included in the actual width of the box), border
36. Why initialize the style?
Due to browser compatibility issues, different browsers have different default style values for tags. Failure to initialize will cause display differences between different browsers
But initializing CSS will have a small impact on search engine optimization
37. What is BFC?
BFC (block-level formatting context), a box that creates a new BFC is laid out independently, and the layout of the elements inside the box will not affect the elements outside the box. Two adjacent boxes in the same BFC have a problem of margin overlap in the vertical direction
BFC means that an independent rendering area is created in the browser. The layout of all elements in this area will not affect the layout of elements outside the area. This rendering area only works on block-level elements
38. What is html semantics?
When the page style fails to load, the page can show a clear structure
Conducive to SEO optimization and inclusion in search engines (more convenient for search engine crawler programs to identify)
Facilitates project development and maintenance, making HTML code more readable and easier to parse on other devices.
39. What is the role of Doctype? What is the difference between strict mode and mixed mode?
is used to tell the browser in which mode to render the document
In strict mode: page layout and JS parsing are performed according to the highest standards supported by the browser
Mixed mode: Not strictly implemented in accordance with the standard, mainly used to be compatible with old browsers and backward compatible
40. IE’s double margin BUG: horizontal margin is set after the block-level element floats, and the margin displayed by IE6 is larger than the set margin. Solution: join_display: inline
41. HTML and XHTML - what is the difference between them?
1. All tags must have a corresponding closing tag
2. The names of all tag elements and attributes must be in lowercase
3. All XML tags must be properly nested
4. All attributes must be enclosed in quotation marks ""
5. Encode all < and & special symbols
6. Assign a value to all attributes
7. Do not use "--" in comment content
8. Pictures must have captions
42. Common compatibility issues with HTML?
1.Double margin BUG caused by float using display
2.3 pixel problem caused by using float and using dislpay:inline -3px
3. Hyperlink hover will become invalid after being clicked. Use the correct writing order link visited hover active
4.Ie z-index problem Add position:relative to the parent
5.Png Transparent Use js code to change
6.Min-height minimum height! Important Solved’
7.select cover under ie6 and use iframe nesting
8. Why is there no way to define a width container of about 1px (caused by the default line height of IE6, use over: hidden, zoom: 0.08 line-height: 1px)
9.IE5-8 does not support opacity, solution:
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
10. IE6 does not support PNG transparent background, solution: use gif images under IE6
43. Understanding and understanding of WEB standards and W3C
Answer: Close tags, lowercase tags, no nesting, improve the search probability of search robots, use external link css and js scripts, separate structural behavior, faster file downloads and page speeds, and content can be accessed by more users Access, content can be accessed by a wider range of devices, less code and components, easy to maintain, easy to revise, no need to change the page content, provide a printed version without copying the content, and improve the usability of the website.
44. What are the inline elements? What are the block-level elements? The CSS box model?
Answer: Block-level element: div p h1 h2 h3 h4 form ul
Inline elements: a b br i span input select
CSS box model: content, border, margin, padding
45. What are the three layers of the front-end page? What are they? What are their functions?
Answer: Structure layer Html presentation layer CSS behavior layer js.
46. What is the role of Doctype? Strict mode and mixed mode - how to trigger these two modes and what is the significance of distinguishing them?
(1) The declaration is located at the very front of the document, before the tag. Tells the browser's parser what document type specification to use to parse this document.
(2) The strict mode typesetting and JS operation mode are run at the highest standard supported by the browser.
(3) In mixed mode, the page is displayed in a loose backward-compatible manner. Emulates the behavior of older browsers to prevent the site from not working.
(4). DOCTYPE does not exist or the format is incorrect, which will cause the document to be presented in mixed mode.
47. What are the elements within the industry? What are block-level elements? What are the void elements?
(1) CSS specifications stipulate that each element has a display attribute, which determines the type of the element. Each element has a default display value. For example, the default display attribute value of div is "block", which becomes a "block-level" element; The default display attribute value of span is "inline", which is an "inline" element.
(2) Inline elements include: a b span img input select strong (emphasis tone) Block-level elements include: div ul ol li dl dt dd h1 h2 h3 h4…p
(3) Well-known empty elements:
48. CSS box model?
(1) Two types, IE box model and standard W3C box model; the content part of IE includes border and pading;
(2) Box model: Content, padding, margin, border.
49. What are the CSS selectors? What properties can be inherited? How is the priority algorithm calculated? What are the new pseudo-classes in CSS3?
* 1.id selector (#myid)
2. Class selector (.myclassname)
3. Tag selector (div, h1, p)
4. Adjacent selector (h1 + p)
5. Sub-selector (ul < li)
6. Descendant selector (li a)
7. Wildcard selector (*)
8. Attribute selector (a[rel = "external"])
9. Pseudo-class selector (a: hover, li: nth - child)
* * Inheritable: font-size font-family color, UL LI DL DD DT;
* Not inheritable: border padding margin width height;
* * Based on the nearest priority principle, the one with the closest style definition shall prevail;
* * The loading style is subject to the last loaded positioning;
Priority is:
!important > id > class > tag
important has higher priority than inline
Examples of new pseudo-classes in CSS3:
p:first-of-type selects every
element that is the first
element of its parent element.
p:last-of-type selects every
element that is the last
element of its parent.
p:only-of-type Selects every
element that is the only
element of its parent element.
p:only-child Selects each
element that is the only child element of its parent element.
p:nth-child(2) Selects each
element that is the second child of its parent element.
:enabled, :disabled control the disabled state of form controls.
:checked, the radio button or check box is selected.
50. How to center a div, how to center a floating element?
Set a width to the div and then add margin:0 auto attribute
div{
width:200px;
margin:0 auto;
}
Center a floating element
Determine the width and height of the container A layer of 500 meters wide and 300 meters high
Set the margins of the layer
.div {
Width:500px; height:300px;//The height can be omitted
Margin: -150px 0 0 -250px;
Position:relative; relative positioning
background-color:pink;//Easy to see the effect
left:50%;
top:50%;
}
51. What are the cores of browsers? What are the compatibility of commonly encountered browsers? The reasons, what are the solutions, and common hack techniques ?
* IE browser’s kernel Trident, Mozilla’s Gecko, Google’s WebKit, Opera kernel Presto;
* The background appears on the iE6 browser when the image is png24. The solution is to make it PNG8.
* The default margin and padding of browsers are different. The solution is to add a global *{margin:0;padding:0;} to unify.
* IE6 double-margin bug: After the block attribute label is floated and there are horizontal margins, the margin displayed in IE6 is larger than the set value.
生 The double distance generated by floating IE #Box {float: left; width: 10px; margin:0 0 0 100px;}In this case, IE will generate a distance of 20px. The solution is to add it to the float label style control. ——_display:inline;Convert it into an inline attribute. (_This symbol is only recognized by ie6)
Beinging a progressive identification method, is to gradually exclude parts from the whole.
First, the clever use of the "9" mark separates the IE browser from all situations.
Next, use "+" again to separate IE8 from IE7 and IE6, so that IE8 has been independently recognized.
css
.bb{
background-color:#f1ee18;/*All identifications*/
.background-color:#00deff9; /*IE6, 7, 8 recognition*/
+background-color:#a200ff;/*IE6, 7 recognition*/
_background-color:#1e0bd1;/*IE6 recognition*/
}
* Under IE, you can use the method of getting regular attributes to get custom attributes,
You can also use getAttribute() to get custom attributes;
Under Firefox, you can only use getAttribute() to get custom attributes.
Solution: Get custom attributes through getAttribute().
* Under IE, the even object has x, y attributes, but does not have pageX, pageY attributes;
Under Firefox, the event object has pageX and pageY attributes, but no x and y attributes.
* (Conditional comment) The disadvantage is that additional HTTP requests may be added under IE browser.
* By default, the Chrome Chinese interface will force text smaller than 12px to be displayed as 12px. You can add CSS attributes -webkit-text-size-adjust: none; Solution.
The hover style will no longer appear after the hyperlink is visited. The hyperlink style that was clicked and visited no longer has hover and active. The solution is to change the order of CSS attributes:
L-V-H-A: a:link {} a:visited {} a:hover {} a:active {}
52. List the values of display and explain their functions. What is the value of position, relative and absolute positioning origin?
1. block is displayed like a block type element.
none default value. Displayed as an inline element type.
inline-block is displayed like an inline element, but its content is displayed like a block type element.
List-item is displayed like a block type element and adds style list markup.
2. The value of position
*absolute
Generate absolutely positioned elements, positioned relative to the first parent element other than static positioning.
*fixed (old IE does not support)
Generate absolutely positioned elements, positioned relative to the browser window.
* relative
Generates relatively positioned elements, positioned relative to their normal position.
* static default value. There is no positioning, the element appears in the normal flow
*(ignore top, bottom, left, right z-index declarations).
* inherit specifies that the value of the position attribute is inherited from the parent element.
53. How is the calculation method of absolute containing block different from that of normal flow?
54, position, display, margin What will happen when the characteristics of collapse, overflow, and float are superimposed on each other?
55. Understanding and awareness of WEB standards and W3C
Closed tags, lowercase tags, no nesting, improve search probability of search robots, use external Chain css and js scripts, separation of structural behavior, faster file download and page speed, content can be accessed by more users, content can be accessed by a wider range of devices, less code and components, easy to maintain It is easy to maintain and revise, without changing the page content, providing a printed version without copying the content, and improving the usability of the website;
56. What is the basic statement structure of css?
Selector {Attribute 1: value 1; Attribute 2: value 2;…}
57. What is the difference between browser standard mode and weird mode?
Differences in box model rendering modes
Use window.top.document.compatMode can show what mode
58. What attributes can be defined in CSS to prevent a DOM element from being displayed within the visible range of the browser?
The most basic:
Set the display attribute to none, or set the visibility attribute to hidden
Skills:
Set the width and height to 0, set the transparency to 0, and set the z-index position to -1000
59. What is the problem that the hover style does not appear after a hyperlink is accessed? How to solve?
Answer: The hyperlink style that has been clicked and visited no longer has hover and active. The solution is to change the order of CSS attributes: L-V-H-A (link, visited, hover, active)
60、What is Css Hack? What are the hacks for ie6, 7, and 8?
Answer: The process of writing different CSS codes for different browsers is CSS hack.
Examples are as follows:
#test
width:300px;Height:300px;
background-color:blue; /*firefox*/
background-color:red9; /*all ie*/
background-color:yellow
+background-color:pink;_background-color:orange; /*ie6*/ }
:root #test { background-color:purple9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
62
, please use Css to write a simple slideshow effect page Answer: I know you need to use css3. Use animation to create a simple slideshow effect.
/**HTML**/div.ani
/**css**/
.ani{
width:480px;
height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: "loops";
—webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
0% { background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;
}
25% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
}
50% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
}
75% {
background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
}
100% {
background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
}
}
63 What is the specific difference between inline elements and block-level elements? Can the padding and margin of inline elements be set?Block-level element (block) characteristics:
Always occupy a separate line, which means starting on a new line, and the following elements must also be displayed on a new line;
Width, height, padding and margin can all be controlled;- Inline element (inline) characteristics:
- On the same line as adjacent inline elements;
- Width, height, top/bottom of inner margin (padding-top/padding-bottom) and top/bottom of outer margin (margin-top/margin-bottom) cannot be changed (that is, padding and margin's left and right can be set), which is the size of the text or pictures inside.
So here comes the question, Browsers also have default inline-block elements (which have intrinsic dimensions and can set height and width, but will not automatically wrap). What are there?
Answer: , ,