Front-end interview questions CSS Rollup

1, what are the inline elements? What are block-level elements? What are the empty elements? CSS box model?

Block-level elements: div p H1 H2 H3 h4 form ul Li
Inline elements: A b br i span input Select

Empty elements: HTML elements that do not have content, such as: BR, meta, HR, LINK, input, img
CSS box model: content,padding,border, margin (box model order)

The margin padding of the inline element is invalid and needs to be display:inline

Forces a block-level element into an inline element with Display:inline-block. Note that there is a 3px pitch. Letter-spacing can eliminate this spacing

2, describes the role and use of CSS reset.

Reset the browser's CSS default property browser to a different breed, style different, and then reset to make them unified.

3, how to reduce the server pressure on the picture request

Reduce the number of server requests for pictures using sprite graphs

4,css for Vertical Horizontal centering

HTML structure:

    <div class="wrapper"> <div class="content"></div> </div> 

Css:

    . Wrapper{PositionRelative;Width500px;Height500px;Background-color:#ddd;}. Content{Background-color:#6699FF;Width200pxheight:200pxposition: absolute//parent element requires relative positioning top: 50% left: 50%margin-top:-100px span class= "KW"; //one-second height,width margin-left: -100px 
               /span>                

5, briefly describe the difference between src and href

The href is a link to the location of the network resource, the establishment and the current element (anchor point), or the current document (link), for hyperlinks.

SRC is the location of the external resource, which is embedded in the document where the current label is located, and the resources it points to are downloaded and applied to the document when the SRC resource is requested, such as JS scripts, IMG images, and frame elements. When the browser resolves to the element, it pauses the download and processing of other resources until the resource is loaded, compiled, executed, and so on, like pictures and frames, similar to embedding the resource in the current tag. This is why the JS script is placed at the bottom instead of the head.

< span class= "kw" > < span class= "kw" > 6, what is CSS hack? CSS hack solve the problem?

< span class= "kw" >< Span class= "Hljs-attribute" > CSS Hack is by adding some special symbols to the CSS style, so that different browsers recognize different symbols (what kind of browser recognizes what symbols are standard, CSS hack lets you remember this standard) to achieve the purpose of applying different CSS styles

< span class= "kw" >< Span class= "Hljs-attribute" > CSS Hack is used to solve a problem where some CSS properties appear differently in different browsers (Reference document: http://www.kwstu.com/Admin/ViewArticle/201409011604277330)

< span class= "kw" ><　　Span class= "Hljs-attribute" >

7. The difference between PX and EM

PX and EM are length units, the difference is that the PX value is fixed, specifying how much is how much, the calculation is relatively easy. The EM value is not fixed, and EM inherits the font size of the parent element.
The browser's default font height is 16px. So the unmodified browser is compliant with: 1EM=16PX. So 12px=0.75em, 10px=0.625em.

8, what is the way to set its CSS style on a DOM?

External style sheet, introducing an external CSS file

Internal style sheet, placing CSS code inside the label

inline style, which defines the CSS style directly inside the HTML element

9. What are the selectors for CSS? Derived selectors (declared with HTML tags)

ID selector (declared with Dom's ID)

Class selector (declared with a style class name)

Property Selector (with Dom property declaration, belongs to CSS2,IE6 not supported, not commonly used, do not know to forget)

In addition to the first 3 basic selectors, there are some extension selectors, including

Descendant selectors (using space spacing, such as Div. a{})

Group selector (using comma interval, such as P,div, #a {})

The more special The selector, the more accurate the selection point, and the higher the priority.

CSS odd, even selectors. Odd: P:nth-child (odd); even: P:nth-child (even)

What is the difference between the transparency of 10,rgba () and opacity?

Both Rgba () and opacity can achieve transparency, but the biggest difference is that opacity acts on the element, as well as the transparency of all content within the element,

The RGBA () is used only for the color of the element or its background colors. (Setting the child elements of an RGBA transparent element does not inherit the transparency effect!) ）

What is 11,sass and less? Why do you use them?

They are CSS pre-processors. He is a layer of abstraction on CSS. They are a special kind of grammar/language compiled into CSS.

For example, less is a dynamic style language. CSS is assigned to dynamic language features such as variables, inheritance, operations, and functions. Less can be run on the client (ie 6+, Webkit, Firefox) or on the server (with node. js).

Why use them?

The structure is clear and easy to expand.

It is easy to block browser private syntax differences. This needless to say, the package of browser syntax differences in the repetition of processing, reduce meaningless mechanical labor.

Multiple inheritance can be easily implemented.

Fully compatible with CSS code, can be easily applied to the old project. Less just expands on CSS syntax, so old CSS code can also be compiled with less code.

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

Answer:

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:

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

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

3. When two margin is a positive and negative, the result of folding is the sum of the two.

Front-end interview questions CSS Rollup