Front-end Interview Collection--css Chapter

Third, CSS Chapter 3.1, Talk about your understanding of CSS layout

3.2, please list several ways to clear the float (at least two kinds)

Floats float on top of a normal stream, like a cloud, but can only float around. It is this characteristic that causes the inside of the box to exhibit a height of 0 (highly collapsed) due to the absence of other ordinary flow elements.

A. Add additional tags, such as <div ></div>

B. Use the BR tag and its own HTML attributes, such as <br clear= "all"/>

C. The parent element is set Overflow:hidden; in IE6, it is also necessary to trigger haslayout, such as zoom:1;

D. Parent element set Overflow:auto property, same IE6 need to trigger haslayout

E. Parent element also set floating

F. Parent element Settings display:table

G. Use: After pseudo-element; Because ie6-7 is not supported: After, use zoom:1 to trigger haslayout.

In CSS2.1 there is a very important concept, that is block formatting contexts (block-level formatting context), referred to as BFC.

The element that creates the BFC is a separate box in which the child elements do not affect the outside elements on the layout, while the BFC still belongs to the normal flow in the document.

The IE6-7 display engine uses an internal concept called layout.

Refer to the floats we cleared together over the years

3.3, please list several methods of hidden elements

A. Visibility:hidden; This property simply hides an element, but the space occupied by the element exists.

B. opacity:0; A CSS3 property, set 0 to make an element completely transparent, making the same effect as visibility. Compared to visibility, it can be transition and animate

c. position:absolute; leave the element out of the document flow, above the normal document, and set a large left negative position to position the element outside the visible area.

D. display:none; the element becomes invisible and no longer occupies the space of the document.

E. Transform:scale (0); set an element to be infinitely small, and this element will not be visible. The location where the element was originally located will be preserved.

F. HTML5 hidden Attribute;hidden properties and display:none; Same, this property is used to record the state of an element

G. height:0; Overflow:hidden the element in the vertical direction by shrinking it to 0 so that the element disappears. This technique works as long as the element does not have a visible border.

H. filter:blur (0); set the blur of an element to 0, so that the element "disappears" in the page.

See the 4 ways to hide HTML elements using CSS, 4 ways to hide and display elements through HTML and CSS

3.4. How to capitalize the first letter of all English words in a text

Text-transform:

none| Capitalize (converts the first letter of each word to uppercase) | Uppercase (convert each word to uppercase) | lowercase (convert each word to lowercase)

3.5. Please outline CSS style sheet inheritance

CSS style sheet inheritance refers to the passing of specific CSS properties down to descendant elements. The attributes that will be inherited are as follows: Refer to the CSS style sheet inheritance detailed

Text Related: Font-family,font-size, font-style,font-variant,font-weight, Font,letter-spacing,line-height,color

Related lists: List-style-image,list-style-position,list-style-type, List-style

3.6, please outline the CSS selector

Element selector: *, E, E#id, E.class

Relationship selector: E, F, E>f, E+f, e~f

Property selector: E[att], e[att= "Val"], e[att~= "Val"], e[att^= "Val"], e[att$= "Val"], e[att*= "Val", E[att|= "Val"]

Pseudo-Class selectors: E:link, e:visited, E:hover, E:active, E:focus, E:lang (FR), E:not (s), E:root, E:first-child, E:last-chil, etc.

Pseudo-Object selectors: E:first-letter/e::first-letter, E:first-line/e::first-line, E:before/e::before, E:after/e::after, E:: Selection

Refer to "selector list"

3.7. The difference between CSS pseudo-class and CSS pseudo-object

CSS introduces the concept of Pseudo-class and pseudo-elements to describe something that the existing CSS cannot describe.

The fundamental difference is: Do they create new elements (abstractions)

Pseudo-class: the first used to represent the dynamic state of some elements, then the CSS2 standard extends its conceptual scope, making it a "ghost" category that all logically exists but is not necessarily identified in the document tree

Pseudo-object: Represents a child element of an element that, while logically present, does not actually exist in the document tree

Reference to "CSS pseudo-class and CSS pseudo-elements of the difference and origin"

3.8, please outline the weight rules of CSS

One inline style +1000, one id+100, one property selector/class class/Pseudo class selector +10, one element name/pseudo Object selector +1.

The relationship selector is split into two selectors and then calculated. Refer to "CSS weights"

3.9, please write a variety of high-level layout

A. False high column: Use the background image, on the parent element of the column to use this background map for the y-axis placement, so as to achieve a high-level column of false image

B. Use a separate background color (fixed layout) for the container div (fluid layout): Supports the other <div> container heights with the maximum height of the <div> element

C. Create a two-column, high-level layout with a border: Use Border-left, only two columns.

D. Using positive padding and negative margin hedging to implement multi-column layout methods: Use positive upper, lower padding and negative upper and lower margin in all columns, and add a container outside all columns, set Overflow:hiden to cut out the overflow background

E. Using borders and positioning to simulate columns such as High: but not used in multiple columns

F. mimic table layout and other high-column effects: Poor compatibility, ie6-7 not working properly

3.10, in CSS style often use px, EM, what are the pros and cons, in the performance of what is the difference?

PX is a relative length unit, relative to the display screen resolution.

EM is the relative length unit, relative to the font size of the text within the current object.

PX defines a font that cannot be zoomed in with the browser font.

The value of EM is not fixed, it inherits the font size of the parent element, 1÷ the parent element's Font-sizex needs to convert the pixel value = em value.

3.11. What is the difference between link and @import in CSS?

A. Link is an HTML tag, and @import is provided by CSS and can only be loaded with CSS

B. When the page is loaded, link is loaded at the same time, and the CSS referenced by @import waits until the page is loaded and then loaded

C. Import is only recognized above IE5, and link is HTML tag, no compatibility problem

D. Link style weights are higher than @import weights

E. When using Javascript to control the DOM to change the style, you can only use the link mode, because @import eye only CSS, not DOM can control

3.12. Position's absolute and fixed common and different points

Same:

A. Changing the presentation of elements in the line, display is set to block

B. Leaving elements out of normal flow, not occupying space

C. Default overrides on non-anchored elements

Difference:

The "root element" of the absolute can be set, while the fixed "root element" is pinned to the browser window.

When you scroll the page, the distance between the fixed element and the browser window is constant.

3.13, position value, relative and absolute respectively is relative to who carries on the localization?

Absolute: Creates an absolutely positioned element, positioned relative to the first ancestor element other than the static location

Fixed: Generates an absolutely positioned element that is positioned relative to the browser window. (IE6 not supported)

Relative: Generates a relatively positioned element, positioned relative to its position in the normal stream

Static: The default value. No positioning, element appears in normal stream

3.14. What are the new features of CSS3?

CSS3 achieve fillet (Border-radius), Shadow (Box-shadow), add effect to text (Text-shadow), linear gradient (gradient), deform (transform)

Added more CSS selectors multi-background rgba, the only pseudo-elements introduced in CSS3 are:: Selection, media query, multi-column layout

Reference to "CSS3 in the animation", "CSS3 Border-radius, Box-shadow and gradient that little thing"

3.15. Why CSS styles are initialized?

Because of browser compatibility issues, different browsers have different default values for some tags, and if the CSS is not initialized, the page display differences between browsers will often occur.

Of course, the initialization style will have a certain impact on SEO, but the fish and bear cake can not be combined, but to minimize the impact of the case of initialization.

3.16, explain the CSS sprites principle, advantages and disadvantages

CSS sprites is actually to integrate some of the background images of the Web into a picture file,

Then using the CSS "Background-image", "Background-repeat", "background-position" of the combination of background positioning,

Background-position can be used to pinpoint the position of the background image with a number.

Advantages:

A. Reducing HTTP requests for Web pages

B. Reducing the byte of a picture

C. Solve the problem of the Web Designer in the name of the picture, just a picture of a collection of the name on it, do not need to name every small element

D. Easy to change style, only need to change the color or style of the picture on one or fewer pictures, the whole page style can be changed.

Disadvantages:

A. In widescreen, high-resolution screen under the Adaptive page, your picture if not wide enough, it is easy to appear background break

B. CSS sprites when developing, use Photoshop or other tools to measure the exact position of each background unit

C. In the maintenance time is more troublesome, if the page background has a little change, it is generally necessary to change the merged picture

3.17, explain the float and how it works?

A. Floating elements out of the document stream, not occupying space (causing "high collapse" phenomenon)

B. The floating element touches the bounding rectangle that contains it or the bounding rectangle of the floating element.

3.18. Problems caused by floating elements

A. The height of the parent element cannot be stretched, affecting elements that are siblings of the parent element

B. Non-floating elements that are siblings of the floating element follow

C. The element before the element also needs to float unless the first element floats, otherwise it will affect the structure of the page display

3.19, what is Fouc (no style content flashing)? How do you avoid fouc?

Importing a CSS using the import method causes some strange behavior for some pages in IE under Windows:

A momentary flicker of the content of a page in a no-style fashion, known as a short document style lapse (Flash of unstyled content), referred to as Fouc.

Principle: When the stylesheet is loaded later than the structured HTML, the page stops rendering before it is loaded into this style sheet. After the stylesheet is downloaded and parsed, the page will be re-rendered, and a brief display of the flower screen appears.

WORKAROUND: Use the link tag to place the style sheet in the document head.

3.20. What is the difference between the line-height three kinds of assignment methods? (with unit, pure number, percent)

With unit: PX does not calculate, EM will make the element with its parent element font-size value as reference to calculate its own row height

Pure numbers: passes the proportions to descendants, such as parent row height 1.5, child element font 18px, child element row height is 1.5*18=27px

Percent: Pass calculated values to descendants

Refer to "Line-height understanding", "analysis of Line-height and vertical", check the online source code.

3.21,: Link,: visited,: hover,: What is the order of execution of active?

L-v-h-a,l (link) ov (visited) e H (hover) A (active) TE, which is summed up in two words like and hated

3.22. What are the browser compatibility frequently encountered? How to solve?

A. Browser default margin and padding are different

B. IE6 bilateral margin bug

C. The element height in Ie6,ie7 exceeds its own set height. The reason for this is that the IE8 in the previous browser will cause the element to be set to the high height of the default line

D. Min-height does not work under IE6

E. Transparent IE with filter:alpha (opacity=60), while other mainstream browsers use opacity:0.6

F. Input border problem, remove input border generally with border:none; Yes, but because of the bug (priority problem) IE6 when parsing the input style, it is not valid under IE6

3.23. Is there a way to set its CSS style for a DOM?

A. External style sheet: Introducing an external CSS file via <link> tags

B. Internal style sheet: Place CSS code inside the <style> tag

C. Inline styles: Define CSS styles directly inside HTML elements

3.24, what is the margin overlap? What are the overlapping results?

margin overlap is margin-collapse.

In CSS, the margins of the adjacent two boxes (which may be sibling or ancestor relationships) can be combined into a single margin. This way of merging the margins is known as folding, and thus the outer margin that is combined is called the folded margin.

The collapsed results follow the following calculation rules:

A. When two adjacent margins are positive, the collapsed result is a larger value between them.

B. When two adjacent margins are negative, the collapsed result is a larger value of both absolute values.

C. Two margins a positive and negative, the result of folding is the sum of the two.

3.25. What are the different transparency effects of RGBA () and opacity?

A. Opacity acts on the element, as well as the transparency of all content within the element, RGBA () is used only for the color of the element or its background colors.

B. Setting the child elements of an RGBA transparent element does not inherit the transparency effect!

3.26. What is the role of CSS properties content? What is the application?

The content property of the CSS is specifically applied to the before/after pseudo-element and is used to insert the generated content.

You can display special symbols in conjunction with a custom font.

Original link: http://www.gbtags.com/gb/share/10029.htm

Front-end Interview Collection--css Chapter