First to second HTML/CSS summary

Html:

HTML: A semantic label
DIV: block-level pages for segmentation

Span: In-line labels

　　
Img:

UL ol DL
Its children can only be Li

A:
HREF: Link Address Path = = "relative path:." /imgs/a.png

Table
Form
Input
Text-level Tags: p, A, span, I, EM can only put text, pictures, form elements

Layout Tags: div, ul, Ol, Li,

Inline Tags: text-level labels except p, other labels are inline labels (inline blocks)
Block-level Labels: all typographic labels are block-level labels, plus p,

CSS:
Display, floating, positioning, z-index*************
In-line label: Display:inline;
(1) Display in one line
(2) Cannot set width height
(3) Its width and height is the content of the wide height
Block-level Tags: display:block;
(1) Exclusive line
(2) wide height can be set
(3) The width of the parent box is 100%;
Inline block Tags: img input display:inline-block;
(1) Display in one line
(2) wide height can be set


The label is transformed by the display property None|inline-block|block

CSS selector:
Base Selector and Advanced Selector
Base selector:
Tag Selector: The ' commonality ' of the selected label, not the feature
div{}, ul{}, ol{}, form{}
Class selector:. box{}

ID selector: #box {} can only be selected for the characteristics of the device, mainly for JS

* Wildcard selector: RESET style

Advanced selector:
Descendant selector (son, grandson 、。。。。。 )
Div p{}
Descendant selector (son)
div>p{}
Combo selector:
div,ul,dl,form{}

Intersection selector: The first selector is the tag Selector, the second selector is the class selector
012
Form input.active{
width:200px;
}

002
Form input{

}

Pseudo-Class selector: "Code of Love and Hate"
a:hover{
}

Pseudo element selector:
p:first-letter{
}

p::after{

}

/* Solve the problem of float */
Content: ";

Clear:both;
Display:block;
Visibility:hidden;
height:0;
}

Weight issues:
Number of questions

Inline styles > Inline styles > Add-ins

Weight problem Comparison
100>010>001
Id> Class > label

(1) The Inheritance of CSS:
Inherited attribute weights are 0, if the weights are 0, who describes the near who first
#tt {}
. active{}

Inheritance and weights
Remember: Some attributes can be inherited: color, font-*, text-*, line-*. is primarily a text-level label element.

But like some box element attributes, positioned elements (floating, absolute positioning, fixed positioning) cannot be inherited.

(2) Box model:
(3) Standard document flow
Margin: Adjust the distance between brothers
padding: Adjust the position between parent and child tags, note the calculation of the box model


Pit 1:
Margin vertical collapse problem:
When setting the first box for margin-bottom:50px;
The second box is margin-top:100px, so the small margin falls into the big Magin, which is the margin collapse.
Workaround: Float floats will no longer collapse

There is no collapse problem in the horizontal direction.

Artifice
(4) The phenomenon of floating
(1) Off-label: The elements of the off-label are not in the standard document stream position
The browser thinks that the first box is not a standard document flow box, and that the second box is a box that flows from a standard document
(2) Floating elements snap to each other
(3) floating element has a character circumference effect
The first element floats, the second element does not float, then the text of the second element is displayed around the first floating element
(4) All the elements of the off-label (floating, absolute positioning, fixed positioning), do not distinguish between the row label or block label, wide height can be arbitrarily set
float is never a box in a float, to float together floating
(5) Benefits of floating:
1. Implement elements Side-by
2. You can follow your own rules (set the width and height of the box model)
(6) problems caused by floating
　　 The parent box can't hold up.
(7) Floating Solution:
(1) Set a fixed height for the parent box century unchanged navigation bar
(2) Inner wall method:
Adds a block-level label to the last floating element, and the label sets the property clear:both;
(3) Pseudo-Elemental removal method: ********
. clearfix:after {
Content: ".";
Display:block;
height:0;
Visibility:hidden;
Clear:both
}
(4) Overflow:hidden
(8) Overflow: The intention is to hide
Visible default value. The content is not trimmed and is rendered outside the element box.
Hidden content is trimmed, and the rest is not visible.
Scroll content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.
Inherit specifies that the value of the overflow property should be inherited from the parent element.

data-driven views

(9) issues with floating element margin
Standard flow of labels, between brothers using margin to adjust the position between father and son using padding to adjust the position of the sub-label (careful box model calculation)

Off-label elements, margin and padding can be used arbitrarily

Floating box: margin:0 auto; does not play any role

Use margin:0 Auto; NOTE:

1. Use margin:0 Auto; Horizontal center box must have width, to have a clear width, text horizontal center using Text-align:center;

2. Only the standard flow box can use margin:0 auto;

When a box floats, fixed positioning, absolute positioning (later speaking), margin:0 Auto; I can't use it.

3.margin:0 Auto; Center box. Instead of centering the text, the text is centered horizontally using Text-align:center;

CSS Unit selection:
PX: absolute unit Fixed constant
EM: Units set relative to the font size of the parent box
%：
REM: Adjusts the size of the box model for all labels on the page based only on the font-size of the HTML
　　　　　　
(one) Line-height
(1) Vertical centering for single-line text

Formula: The height of the line is equal to the height of the box, so that when the line text is centered vertically, note that only one line of text is applicable.

(2) Vertical centering for multiline text

The height of the rows cannot be less than the size of the font, or the upper and lower words will be close together.

The first step, a width 300*300 box, look at the box to show a few lines of text, if it is 5 lines, and then look at the row height, if the row is line-height:30px; Then you know how high *5=150px is.

The second step, let (the height of the box -150px)/2=75, then set the box padding-top:75px, at the same time to ensure that the height of the box 300px, then the height changed to 225px;

Background: is a CSS shorthand attribute used to centrally define various background properties, including color, image, origin and size, repeat mode, and so on
Background-image:url (./1.jpg)
Background-repeat:repeat|no-repeat|repeat-x|repeat-y
Background-position:x y;
X and Y, if positive, means to adjust the position of the current picture relative to the original position
X and Y if negative, cut the background, note: Be sure to have a clear width and height "Sprite graph technology"

　　　　　　

Sprite Chart Technology:

CSS Sprite is CSS sprites, others call it CSS Sprite, is a kind of CSS image merging technology, the method is to combine small icons and background image on a picture, and then use CSS background positioning to display the picture part that needs to be displayed

CSS Sprite Diagram Application principle:
There is only one big merge chart, how do each small icon node show a separate small icon?

In fact, it is to intercept a large portion of the display, and this part is a small icon.

Benefits of using Sprite charts:

1, the use of CSS sprites can be a good way to reduce the Web page HTTP requests, thereby greatly improve the performance of the page, which is the greatest advantage of CSS sprites, but also its widely spread and application of the main reason;
2, CSS sprites can reduce the number of bytes of the picture, once compared to a number of 3 images merged into 1 images of the byte is always less than the sum of the bytes of the 3 pictures.
3, solve the web designer in the image naming problems, just a set of pictures on the name on it, do not need to name every small element, thus improving the production efficiency of the page.
4, change the style convenient, only need to change the color or the style of the picture on one or less picture, the whole page style can change. More convenient to maintain.

Insufficient:

1) The biggest problem with CSS sprite is memory usage
2) Puzzle Maintenance More trouble
3) Making CSS difficult to write
4) CSS Sprite call picture cannot be printed

　　　To remember:
#000 Black
#fff White
#f00 Red
#333 Grey
#222 dark Grey
#ccc Light Grey
　　　　(Iconfont)

Iconfont icons can only be obtained from this http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3.

　　　　(14) Positioning:

(1) Relative positioning
If the current box is only set relative to the position, then it does not change with the original box,

There is only one function: the Father Shangzi absolutely
Do not use relative positioning to do gland phenomenon

Fine-Tune element position

Two kinds of phenomena:
1. No off-label
2. Will act separation home pit (nausea)

(2) Absolute positioning
Phenomenon:
1. Set the absolute positioning of the box, out of the standard flow
Reference point:
One, a single absolute positioning of the box

1. When I use the Top property description, the position is adjusted in the upper left corner of the page (as distinguished from the top left corner of the browser) as the reference point.
2. When I use the bottom attribute description. is to adjust the position in the lower left corner of the first screen page as a reference point. Ericsson

Second, the Father box as a reference point
1. Parent elements set relative positioning, child elements set absolute positioning, then will be the parents of the upper left corner of the element as a reference point, the father is not necessarily the father, it can also be grandpa, Grandpa.

2. If the father set the positioning, then the father as the reference point. So if the father does not set the positioning, then the parent element set positioning as the reference point

3. Not only the Father Shangzi, the father absolute son absolutely, the father of the son absolutely, all is the Father element as the reference point
Note: The father absolute son absolutely, there is no actual combat significance, do not appear in the station of the father absolute son absolutely. Because absolute positioning is out of standard flow, it affects the layout of the page. Instead of ' parent Shangzi ' in our page layout, it is a common layout scheme. Because the father sets the relative positioning, not out of the standard stream, the child element is set to absolute positioning, only to adjust the position of the element within the current ancestor element.

Also note that the absolutely positioned box ignores the parents ' padding
　　After setting the absolute positioning, margin:0 auto; it has no effect, if you want to center the absolutely positioned box. As a formula note to set the child element absolute positioning, and then left:50%; Margin-left is equal to half the width of the element, achieving absolute positioning of the box center
(3) Fixed positioning

Characteristics:

1. Off-label 2. Cover, lift level 3. Fixed

Reference point:

Set fixed positioning, described with top. So the top left corner of the browser is the reference point.
If described with bottom, it is the reference point in the lower left corner of the browser

Effect: 1. Back to top bar 2. Fixed navigation bar 3. Advertising

(): Z-index

This thing is very simple, it has four characteristics, each feature you remember, the page layout will not appear to find the box.

• • • The Z-index value indicates who is pressing, the numerical value of the large gland is small,
    • Only the elements that are positioned can have z-index, that is to say, regardless of relative positioning, absolute positioning, fixed positioning, you may use z-index, and floating elements cannot use Z-index
    • Z-index value has no unit, is a positive integer, the default Z-index value is 0 if everyone has no z-index value, or the same as Z-index value, then who writes behind the HTML, who presses others on it, positions the element, and forever presses the element that is not positioned.
    • From the father phenomenon: Father is a counsel, son no matter how good is useless

First to second HTML/CSS summary