Front end must be CSS finishing

1. Three ways to set CSS styles?
External style sheet, introducing an external CSS file
Internal style sheet, placing CSS code inside the inline style, which defines the CSS style directly inside the HTML element

What selectors do 2.css have?
ID Selector
Class Selector
Tag Selector

can also be subdivided into:
Derived selectors (including descendant selectors, child element selectors, neighboring sibling selectors)
Pseudo element Selector
Property Selector
Group Selector
Wildcard Selector

CSS priority definition?
In general, the more specific the selector, the more accurate and higher the priority;
Calculation method:
Tag Selector priority is 1
Class Selector priority is 10
ID Selector priority is 100
In-line style priority is 1000
！ Important infinitely large;

(c: SS selector execution efficiency and compatibility Details: http://www.cnblogs.com/xiaowuzi/p/3726835.html)

The attribute definition in 3.css so that DOM elements do not appear in the browser visual range?
1.display property is None, visibility is set to hidden (but still occupies page space)
2. Set the width height to 0/transparency 0/z-index Position-1000 (attached: This property only takes effect in the anchor element);

(Attached: The difference between Display:none and Visibility:hidden)
Display: Hiding the corresponding element does not occupy the original space. Visibility: Hides the corresponding element still occupies the space position.

4. Hover style does not appear after hyperlink access? How to solve?
Change the ordering of CSS properties (LVHA) Link visited hover active

The principle of 5.css hack?
Due to different browser and browser versions of CSS support and parsing results are not the same, and CSS priority on the effect of the browser display, we can apply different CSS for different browser scenarios.

What are the categories of CSS hack?
CSS hack has three representations, CSS attribute prefix method, selector prefix method and IE conditional annotation method (i.e. head reference if IE). Most of the CSS hack in the actual project was introduced for differences in performance between different versions of IE browsers.

5.1 Attribute Prefix method:
Example: IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*" (the above version is not supported), but do not recognize the underscore "_", Ie6~ie10 Know "\9", but other browsers do not support (that is, you can use this feature disgusting and use the old version of the user, haha) ("\9" Test URL http://www.jb51.net/css/24944.html)
5.2 Selector Prefix method (selector hack)
Example: IE6 can identify *html. CLASS{},IE7 can identify *+html. class{} or *:first-child+html. class{};
5.3ie Conditional Annotation Method:
For all IE (ie10+ no longer supports conditional annotations):<!--[If Ie]>ie browser displays the content <! [Endif]-->, for IE6 and the following versions:<!--[if LTE IE 6]> only the contents shown in IE6 and below <! [ENDIF]--&GT: This type of hack is not only valid for CSS, but all code written in the judgment statement will take effect.

CSS hack writing order:
Generally, the scope of application is wide, the ability to recognize the strong CSS definition in front. Because the code that is written in the back will overwrite the previous identified if it is identified.
(Hack reference: http://blog.csdn.net/freshlover/article/details/12132801)

6. What are the specific differences between inline and block-level elements? Can the padding and margin of the inline elements be set?
Block-level elements: Always exclusive line, wide, high, padding, margin can be controlled.
Inline elements: With adjacent inline elements on the same line, wide, high, up and down margins, and up and down margins are immutable.
Block-level elements:
Div, p, H1~h6, HR, UL, OL, Li, DL, DT, DD, form, table, Tbody, TFOOT, THEAD, (header, article, footer, NAV)
Inline elements:
Span, A, B, BR, EM, Strong, IMG, input, abbr, button, label, textarea
(Expand: Browser default Inline-block Element)
<input>, , <button>, <textarea>, <label>

(Attached: inline block elements for compatibility use?) ）
div{
Display:inline-blcok; Trigger IE's haslayout
Display:inline;
｝
div{
*display:inline;*zoom:1;
｝
7: What is margin overlap? What is the result?
In CSS two (normal document streams) The margins of the box in the vertical direction (not separated by non-empty content, padding, border, or clear) can be combined into a single margin. This way of merging the margins is called folding, and the combined margin becomes the folded margin.
Note: The parent block-level box is adjacent to the child block-level box in the vertical direction and also causes the margin to overlap;

Calculation rules:
Two the adjacent margins in the vertical direction are positive, and the collapsed result is a larger value between them.
When two contiguous margins in the vertical direction are negative, the collapsed result is a larger value of both absolute values.
Two the adjacent margin in the vertical direction is a positive and negative, and the result of folding is the sum of the two;

(attached: How to make the element up and down margin not collapsed?) )
1, floating, inline-block, absolute positioning;
2. Create a block-level formatting context (BFC) element, not and its child elements occur margin folding;
(Detailed link: https://www.zhihu.com/question/19823139)

The difference between the transparency effect of 8.RGBA () and opacity ()?
RGBA () and opacity all achieve transparency, but the biggest difference is that opacity acts on the element, as well as the transparency of all content within the element, whereas Rgba () only works on the element's color or its background.
(CSS style inheritance extension: http://www.cnblogs.com/thislbq/p/5882105.html)

Horizontal vertical center of text in 9.CSS?
Line-height Set to box height
Text-align Center;

10. Vertically centering a floating element?

. son{
Background-color: #ff0000;
width:200px;
height:200px;
Position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}

. son{
width:200px;
height:200px;
Background-color: #ff0000;
Margin:auto;
Position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}
Report:
. father{
Display:flex;
Justify-content:center;
Align-items:center;
}
(Detailed C3div Horizontal vertical center: http://www.cnblogs.com/shenxiaolin/p/5387623.html)

How to center a . father{
Display:table-cell;
Text-align:center;
Vertical-align:middle;
}

The difference between 11.px and EM
Both PX and EM are units of length.
The value of PX is fixed, and the specified number is how much it is easy to calculate. The value of EM is not fixed, and EM inherits the font size of the parent element.
The browser default font height is 16px. By default, this is: 1em=16px. 12px=0.75em.

What is the content property of 12.css? What is the role and application?
The content property of the CSS is specifically applied to the before/after pseudo-element, which is used to insert the generated content.
Common pseudo-classes clear floating:
. clearfix:after{
Content: ".";
Display:block;
height:0;
Visibility:hidden;
Clear:both;
}
. clearfix{
*zoom:1;
}
(Attached: How to clear the float?) )
1. Define height for parent element
2. Add empty div tag clear:both at the end;
3, the parent element defines the pseudo-class: as above;
4, the parent element defines Overflow:hidden;
5, the parent element defines Overflow:auto;
6, the parent element also floats, need to define the width;
7, the parent element defines display:table;
8. Add br tag Clear:both at the end;

Third: After pseudo-element method cleans up floating, document structure clearer

13.box-sizing commonly used properties? What are the roles of each?
Box-sizing:content-box|border-box|inherit;
Content-box: Wide, high applied to the content box of the element. Draws the inner margin and border of the element outside the height and width (default effect);
Border-box: Any padding and borders of an element are drawn within the set width and height.
At this time the width of high =content+padding+border;

Original address: http://www.qdfuns.com/notes/38026/8e1b4794c7af07cad88a75a0ea11d819.html

Front end must be CSS finishing