Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what is the role of Doctype in css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. What is the function of Doctype? How do strict mode and hybrid mode trigger these two modes respectively, and what is the point of distinguishing them?

(1) the declaration is at the front of the document, before the tag. Tells the browser's parser what document type specification to use to parse the document.

(2) the strict mode of typesetting and JavaScript operation mode runs according to the highest standards supported by the browser.

(3) in promiscuous mode, the page is displayed in a loose backward compatible manner. Simulate the behavior of older browsers to prevent the site from working.

(4) the absence of DOCTYPE or incorrect format can cause the document to be rendered in promiscuous mode.

two。 What are the elements in the line? What are the block-level elements? What are the void elements?

(1) the CSS specification stipulates that every element has a display attribute, which determines the type of the element, and each element has a default displayvalue, such as div default display attribute value of "block", called "block level" element; span default display attribute value of "inline", which is an "inline" element.

(2) the elements in the line are: a b span img input select strong (tone of emphasis)

The block-level elements are: div ul ol li dl dt dd h 2 h 3 h 4 h 5... P

(3) well-known empty elements:

What is little known is:

3. How to understand the box model of CSS?

Each HTML element is a rectangular box.

(1) there are two kinds of box models, IE box model and standard W3C box model, and the content part of IE contains border and pading.

(2) the box model includes: content (content), filling (padding), boundary (margin), border (border).

4. What's the difference between link and @ import?

(1) link belongs to the XHTML tag, while @ import is provided by CSS.

(2) when the page is loaded, the link will be loaded at the same time, and the CSS referenced by @ import will wait until the page is loaded.

(3) import can only be recognized above IE 5, while link is a XHTML tag and there is no compatibility problem.

(4) the style weight of link is higher than that of @ import.

5. What are the CSS selectors? Which attributes can be inherited? How is the priority algorithm calculated? What are the new pseudo classes in CSS 3?

L id selector (# myid)

L class selector (.myclassname)

L tag selector (div, H2, p)

L adjacent selector (H2 + p)

L sub-selector (ul

< li） l 后代选择器（li a） l 通配符选择器（ * ） l 属性选择器（a[rel = "external"]） l 伪类选择器（a: hover, li: nth - child） 可继承： font-size font-family color, UL LI DL DD DT; 不可继承 ：border padding margin width height ; 优先级就近原则，样式定义最近者为准，载入样式以最后载入的定位为准。 优先级为： !important >

Id > class > tag

Important has higher priority than inline

Examples of pseudo classes added to CSS3:

L p:first-of-type selects the first one that belongs to its parent element

Each of the elements

element.

L p:last-of-type selects the last that belongs to its parent element

Each of the elements

element.

L p:only-of-type chooses the only one that belongs to its parent element

Each of the elements

element.

L p:only-child selects each of the only child elements that belong to its parent element

element.

L p:nth-child (2) selects each of the second child elements that belong to its parent element

element.

L: enabled,: disabled control the disabled state of the form control.

L: the checked radio box or check box is selected.

6. How to center div, how to center a floating element?

(1) set a width for div, and then add the margin:0 auto attribute

Div {

Width:200px

Margin:0 auto

(2) Center a floating element

Determine the width and height of the container, such as 500 wide and 300 high, and set the outer margin of the layer:

.div {

Width:500px; height:300px;// height may not be set

Margin:-150px 0 0-250px

Position:relative; relative positioning

Background-color:pink;// is convenient to see the effect.

Left:50%

Top:50%

7. What are the kernels of the browser? What are the compatibility of browsers you often encounter? What are the reasons and solutions, and what are the common skills of Hack?

(1) IE browser kernel Trident, Mozilla Gecko, Google WebKit, Opera kernel Presto

(2) compatibility of frequently encountered browsers:

L png24 for the picture appears in the background on the IE6 browser, the solution is to make PNG8.

The default margin of the browser is different from padding, and the solution is to add a global * {margin:0;padding:0;} to unify it.

L IE6 double distance bug: after the block attribute tag float, when there is a horizontal margin, the margin display in IE6 is larger than the set one.

Double distance generated by floating ie # box {float:left; width:10px; margin:0 00 100px;} in this case IE produces 20px distance. The solution is to add _ display:inline; to the tag style control of float to convert it into an inline attribute. (_ this symbol is recognized only by IE 6).

First of all, the ingenious use of the "\ 9" flag separates the IE browser from all situations.

Then, use "+" again to separate IE 8 from IE 7 and IE 6, so that IE 8 has been identified independently.

Css

.bb {

Background-color:#f1ee18; / * all identities * /

.background-color:#00deff\ 9; / * IE6, 7, 8 Identification * /

+ background-color:#a200ff; / * IE6, 7 Identification * /

_ background-color:#1e0bd1; / * IE6 recognition * /

(3) skills commonly used in Hack:

Under IE, you can use the method of getting general attributes to get custom attributes, or you can use getAttribute () to obtain custom attributes; under Firefox, you can only use getAttribute () to get custom attributes. Solution: get custom attributes uniformly through getAttribute ().

Under IE, the even object has an XMague attribute, but no pageX,pageY attribute; under Firefox, the event object has a pageX,pageY attribute, but no XMagi y attribute. The solution is conditional comments, but the disadvantage is that additional HTTP requests may be added in IE browsers.

Text smaller than 12px will be forced to be displayed according to 12px by default in the Chrome Chinese interface, which can be solved by adding the CSS attribute-webkit-text-size-adjust: none;.

The hover style does not appear after the hyperlink is accessed. The hyperlink style that has been clicked and accessed no longer has hover and active. The solution is to change the order of the CSS attributes:

L-V-H-A: a:link {} a:visited {} a:hover {} a:active {}

8. What are the new features of HTML5\ CSS3 and what elements have been removed? How to deal with the browser compatibility of new HTML5 tags?

HTML5 is no longer a subset of SGML, but is mainly about the increase of image, location, storage, geolocation and other functions. The new features are:

L paint canvas element

L video and audio elements for media playback

Local offline storage localStorage long-term storage data, data will not be lost when the browser is closed

L sessionStorage's data is automatically deleted after the browser is closed

L better semantic content elements, such as article, footer, header, nav, section

L form controls, calendar, date, time, email, url, search

CSS3 to achieve fillet, shadow, add special effects to the text, adding more CSS selectors, multi-background rgba, new technologies are webworker, websockt, Geolocation.

The elements removed include:

L pure expressive elements basefont, big, center, font, s, strike, tt, u

L elements that have a negative impact on usability: frame, frameset, noframes.

Solutions to browser compatibility problems:

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 browsers support new tags, you also need to add the default style of tags. Of course, the best way is to directly use mature frames:

9. How do you implement the page design, and how do you think the front end should get the job done with high quality?

L is divided into head, body and foot first.

L to achieve the effect drawing is the most basic work, accurate to 2px

Communicate with designers and product managers and participate in projects

L well-done page structure, page reconstruction and user experience

L deal with Hack compatibility and write beautiful code format

L optimize for server, embrace HTML5.

10. List the values of display, indicating what they do. In the value of position, what is the origin of relative and absolute?

The value of display:

L block is displayed like a block type element.

L none default value. Displayed as an inline element type.

L inline-block is displayed like an inline element, but its contents are displayed like a block type element.

L list-item appears like a block type element and adds a style list tag.

Relative and absolute locate the origin:

L absolute: generates an element that is absolutely positioned, relative to the first parent element other than static positioning.

L relative: generates an element that is relatively positioned, relative to its normal position.

11. How to operate page refactoring?

Change "sites that do not use CSS and heavily use HTML for positioning and layout, or sites that have adopted CSS but do not follow HTML structured standards" to "return tags to their original meaning. Sites that separate the actual content of the page from the format in which they are rendered by using structured tags in HTML documents and using CSS to control page performance." The process is to reconstruct the website

Why should the website be reconstructed (the benefits of website refactoring)

A, make the page load faster

B. reduce the cost caused by bandwidth and save cost

C. Make you more efficient and cost less when modifying your design

D. help maintain visual consistency throughout your site

E, more conducive to search engine retrieval (in line with SEO specifications)

F, make the site easier to be used by various browsers and users

Write CSS to rationalize the page structure, enhance the user experience, achieve a good page effect and improve performance.

twelve。 Semantic understanding?

L HTML semantics is to make the content of the page structured, making it easy for browsers and search engines to parse.

L is also displayed in a document format without a style CSS, and is easy to read

Search engine crawlers rely on tags to determine the context and the weight of each keyword, which is good for SEO.

L makes it easier for people who read the source code to block the site, making it easy to read and maintain and understand.

13. Offline storage of HTML5?

L localStorage stores data for a long time, and the data is not lost after the browser is closed.

L sessionStorage data is automatically deleted after the browser is closed.

14. Why initialize the CSS style?

Due to browser compatibility problems, different browsers have different default values for some tags, and page display differences between browsers often occur if there is no initialization of CSS.

Of course, the initialization style will have a certain impact on SEO, but you can't have both, but try to initialize with minimal impact.

The simplest initialization method is: * {padding: 0; margin: 0;} (this is not recommended)

Initialization of Taobao style:

Body, h2, h3, h4, h5, h6, h7, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin:0; padding:0;}

Body, button, input, select, textarea {font:12px/1.5tahoma, arial,\ 5b8b\ 4f53;}

H2, h3, h4, h5, h6, h7 {font-size:100%;}

Address, cite, dfn, em, var {font-style:normal;}

Code, kbd, pre, samp {font-family:couriernew, courier, monospace;}

Small {font-size:12px;}

Ul, ol {list-style:none;}

A {text-decoration:none;}

A:hover {text-decoration:underline;}

Sup {vertical-align:text-top;}

Sub {vertical-align:text-bottom;}

Legend {color:#000;}

Fieldset, img {border:0;}

Button, input, select, textarea {font-size:100%;}

Table {border-collapse:collapse; border-spacing:0;}

15. Understanding of the BFC specification?

BFC is a concept in the W3C CSS 2.1 specification that determines how elements position their content, as well as their relationships and interactions with other elements.

16. What are the shortcomings of iframe?

L iframe blocks the Onload event on the main page

L iframe and the main page share connection pooling, while browsers have restrictions on connections in the same domain, which affects the parallel loading of pages.

You need to consider these two disadvantages before using iframe. If you need to use iframe, it is best to dynamically add the src attribute value to the iframe through JavaScript, so that you can get around the above two problems.

17. How does CSS define weight rules?

The following are the rules for weights: the weight of the tag is 1, the weight of the class is 10, and the weight of the ID is 100. The following examples demonstrate the weight values of various definitions:

/ * the weight is 1 percent /

Div {

/ * the weight is 10 seconds /

.class1 {

/ * the weight is 100 percent /

# id1 {

/ * the weight is 100 "1" 101 "/

# id1 div {

/ * the weight is 10 "1" 11 "/

.class1 div {

/ * the weight is 10 "10" 1 "21" /

.class1 .class2 div {

If the weights are the same, the last defined style will work, but this should be avoided.

18. How to understand the separation of performance and content?

The separation of presentation and structure simply means that only the presentation of tag elements in HTML is completely controlled by CSS files.

19. How to solve the problem of bilateral distance of IE6?

To solve the IE 6 bilateral distance problem, add display:inline; inline elements to block level elements and then add display:table after the block level element display:inline.

20. How do I define a container with a height of 1px?

Div {

Heigh:1px

Width:10px

Background:#000

Overflow:hidden

This problem under IE 6 is caused by the default line height. Overflow:hidden | zoom:0.08 | line- height:1px can also be solved.

21. How to solve the 3-pixel problem of IE 6?

_ zoom:1; margin-left: value; _ margin-left: value-3px

twenty-two。 How to solve the problem that the height of the container cannot be opened by the text under Firefox?

Clear floating .clear {clear:both; height:0px; overflow:hidden;}

23. How can I make the layer appear on top of Flash?

The solution is to set the transparency property for Flash

Or

24. How to solve the problem that cursor:hand does not show small hands under FF?

Cursor; pointer

25. What if the content in IE adapts to the height, while the FF does not?

Add a layer to the layer to which you want to adapt the height, and the style is

.clear {clear:both;font-size:0px;height:1px}

In this way, there is a small problem, the height will be one more pixel. Another solution is to add a pseudo class to the current layer.

# test:after {

Content: ".

Display: block

Height: 0

Clear: both

Visibility: hidden

This is the end of the content of "what is the role of Doctype in css". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.