1.display: none and visibility: hidden difference?
display: none to hide the corresponding elements, space is no longer assigned to it in the document layout, it will close the sides of the elements,
When he would never exist.
visibility: hidden hides the corresponding elements, but still retain the original space in the document layout.
2. Clear floating in several ways, as well as their strengths and weaknesses
(1) empty tag to clear float clear: both.
Principle: Adding an empty div, css increased use clear: both clear float, so that the parent can automatically get div height
Advantages: easy to understand, easy to grasp
Disadvantages: adds a lot of meaningless empty label, contrary to the structure and performance of separation, it will be in the post-maintenance nightmare
. (2) definition of the parent div overflow: hidden
Principle: You must define the width or zoom: 1, at the same time can not be defined height, use overflow: when hidden, the browser will automatically check the height of the floating zone
Advantages: simple, less code, better browser support
Disadvantages: it can not be used in conjunction with position, because the size of the excess will be hidden
(3), definition of pseudo parent div class: after and zoom (for non-IE browser)
Principle: IE8 above and non-IE browsers only support: after, principles and method somewhat similar, zoom (IE turn have attributes) resolves ie6, ie7 float problem
Advantages: browser support is good , not prone to blame the problem (currently: large sites are using, such as: Tencent, Netease, Sina, and so on).
Disadvantages: Code and more , to two codes used in combination to make major browsers support
(4), the parent div defined height
Principle: parent div manually defined height, will be solved automatically parent div can not get to the level of the problem.
Advantages: simple, less code, easy to grasp
(5) the definition of parent div overflow: auto
Principle: You must define the width or zoom: 1, at the same time can not be defined height, use the overflow: auto, the browser will automatically check the height of the floating zone
Advantages: simple, less code, better browser support
Disadvantages: internal width and height than the parent div, scroll bar will appear
3.CSS the link and @import difference is?
(1) link part of the HTML tags, and CSS @import is provided;
(2) the page is loaded, link will also be loaded, and references @import CSS will wait until the page has finished loading before loading;
(3) import IE5 only to identify more, the HTML link tag, no compatibility problems;
4. explain CSS sprites, and how do you use it in a page or website
CSS Sprites in fact, the number of pages in the background image integrated into an image file, and then use the CSS "background-image", a combination of "background-repeat", "background-position" in the background positioning, background-position can be used digital can accurately locate the position of the background image. This can reduce the cost lots of pictures of the request, because the request takes longer; although requests can be complicated, but there are limits, are six general browser
The difference 5.null and undefined?
When the variable declaration has not been initialized, the default variable is undefined
null is used to indicate the object does not yet exist, the function used to represent an attempt to return the object does not exist
What 6.new specific operator did it?
1. Create an empty object, and this variable refers to the object, but also inherited the function prototype
2. The properties and methods are added to the object referenced by this
3. The newly created object referenced by this, and finally return to this implicit
7.iframe advantages and disadvantages
advantage:
1. solve slow loading third-party content and advertising icons such as the loading problem
2. Security sandbox
3. parallel load script
Disadvantages:
1. iframe block the main page of the event Onload
2. Instant content is empty, it takes time to load
3. There is no semantic
Several ways to create objects 8.javascript
1. factory pattern
2. Constructor mode
3. prototype model
4. Mix and prototype model constructor
5. Dynamic prototype model
6. spurious mode Constructor
7. secure mode Constructor
6 ways inherited 9.javascript
1. prototype chain to inherit
2. borrow constructor inheritance
3. The combination of inheritance (+ borrowing prototype configuration)
4. prototypal inheritance
5. Parasitic inheritance
6. parasitic combined inheritance
10 lists the value of the display, indicating their role. position value, relative and absolute are positioned relative to whom?
display the role of values:
As 1.block display target block type element.
2.inline default. The same as the type of display element rows.
3.inline-block elements within the same row as the display, but the same content as the block type display element.
4.list-item display the same elements as block type, and add style list mark.
positioning position difference values:
1.absolute generate an absolute positioning element with respect to the first ancestor of the positioning elements other than static positioning.
2.fixed generating element fixedly positioned relative to the positioning of the browser window (old IE does not support).
3.relative generating element relative positioning, positioning relative to its position in the normal stream.
4.static default. No positioning element occurs in the normal flow (ignoring top, bottom, left, right z-index statement).
5.inherit provisions inherited from the value of the position property of the parent element.
11.CSS selectors What? What attributes can be inherited? How priority algorithm? New CSS3 pseudo-classes are those?
CSS selectors:
1.id selector (# myid)
2. class selector (.myclassname)
3. tag selector (div, h1, p)
4. adjacent selector (h1 + p)
The child selector (ul> li)
6. descendant selectors (li a)
7. Wildcard selector (*)
8. attribute selector (a [rel = "external"])
9. The pseudo class selector (a: hover, li: nth-child)
Inheritable style:
1.font-size
2.font-family
3.color
4.text-indent
Not inheritable style:
1.border
2.padding
3.margin
4.width
5.height
Priority algorithm:
1. Under the priority principle of proximity, the same weight, whichever the case recently defined style;
2. Load last loaded positioning styles to prevail;
3.!important > id > class > tag
4.important higher priority than inline, inline but higher than id
Example CSS3 new pseudo-class:
p: first-of-type selecting each <p> element belonging to the first parent element <p> element.
p: last-of-type selecting each <p> element belonging to the last parent element <p> element.
p: only-of-type selecting each <p> element belonging parent element only <p> element.
p: only-child selects each <p> element unique child elements belonging to the parent element.
p: nth-child (2) for each selected <p> elements belonging to the parent element of the second subelement.
: Enabled: disabled control form control disabled.
: Checked radio button or check box is selected