CSS Basic Syntax three

"Pseudo class selector"
1, the wording: pseudo-class selector, after the selector, with: separated, immediately pseudo-class state;
Eg:. a:link
2, the Pseudo-class status of hyperlinks:
: Link-No access status: visited-access status
: hover-Mouse Pointing state: Active-Activates selected state (mouse point is not loose)
Note: When multiple pseudo-class states of hyperlinks exist at the same time, they must follow the order of link-visited-hover-active, otherwise the partial selectors will not take effect;
3, the Pseudo-class state of input:
: Hover:focus-Get focus Status: Active
Note that when multiple states of input exist simultaneously, they must be in the order above;
4, other tags, basic only: hover event

"Box Model"

Margin outside margin:
1. Write only one value: indicates that the outer margin around is the specified value;
2, write two values: The first number is the upper and lower margin the second number is left and right margin;
3, write three values: the upper, right, and next three directions, left default equals to the right;
4, write four values: the upper, right, bottom, left four clockwise direction;
5, margin:0 Auto; Set block-level elements to center horizontally in the parent container!!!
padding inner margin:
Set up in exactly the same way as margin;
Note: Setting the padding will cause the div area to be big!!! Use must pay attention to the actual width of the DIV is how much!!!!!
Border
1. Set border requires three properties: Width style color
In principle, three attributes are indispensable, the order can be arbitrarily modified;
2, you can use top, right, bottom, left to set four sides respectively

When the parent box wraps the child box and adds margin-top to the child box, the sub-box is not separated from the parent box's top line, but it causes the two boxes to come down simultaneously.
[Workaround]
1, add a little padding-top to the parent box, not recommended, it will cause the parent box structure redundant 1pxpadding;
2. Add 1px border-top to the parent box, which will also result in 1px extra space, not recommended;
3, to the parent box or the child box to add floating, may be due to float, to a certain extent affect the layout of the page;
4. Add the overflow property to the parent box, and recommend the way to use it.

[Border-radius fillet]
1, Border-radius can receive 8 attribute values, respectively, said:
X-axis (upper left, upper right, lower right, lower left)/y Axis (upper left, upper right, bottom right, bottom left)
eg:border-radius:10px 20px 30px 40px/10px 20px 30px 40px
2, abbreviated form:
Only the X-axis is written, and the y-axis defaults to the x-axis;
Four corner is not complete, the default diagonal is equal;
Write only one value, default 8 numbers equal;
eg:border-radius:50px 20px;
= border-radius:50px 20px 50px 20px;
= border-radius:50px 20px 50px 20px/50px 20px 50px 20px;
3, when the fillet radian >= square side length half, will be displayed as a circle.

[Border-image picture Border]
1, Border-image: Altogether can put 10 attribute values:
Path to ① Picture: url ();
② the slice width of the picture: 4 values, representing the top, right, bottom, and left four edges respectively;
With 4 tangent cuts, you can divide the picture into 9 Gongge. 9 Gongge Four Corners corresponding to four corners of the border (no stretching is done), 9 Gongge four edges corresponding to four borders (will be stretched/paved/duplicated according to Settings)
Note: When writing, must not take PX units!!!!
③ width of the border: 4 values, respectively, representing the width of the top, right, bottom, and left four borders;
Note: When writing, the PX unit must be used, with the width of the slice/divider!!!
④ the way the border is repeated: stretch (stretched), round (paved), repeat (repeat)
[The difference between round and repeat]
Round: The four edges are properly stretched and compressed to ensure that four edges can repeat the whole number of times;
Repeat: will keep the length of each side of the proportion of the same, may result in four corners, can not display a full edge;
2, the attribute value writing: Border-image:①②/③px④;
3, Border-image in the WebKit kernel browser, must be prefixed with-webkit-.

[Box-shadow Box Shadow]
1, 6 attribute values, space-delimited:
①x axis Shadow Distance (required): can be negative, positive--right shift, negative--left shift;
②y axis Shadow Distance (required): can be negative, positive--Move down, negative--Move up;
③ shadow Blur radius (optional): Only positive, default is 0. The larger the value, the more blurred the shadow;
④ Shadow expansion radius (optional): Can be negative, default is 0. The value increases, the shadow expands, the number decreases, and the shadow shrinks;
⑤ shadow Color (optional): Black by default
⑥ inside and Outside Shadows (optional): The default is an outer shadow. Inset represents the inner shadow;

Outline Perimeter line:
Appears outside the border and does not occupy space. May overwrite the surrounding content.

Floating

1, the standard flow in the block-level box, the width will automatically extend to 100%;
and the floating block-level box, the width does not extend automatically, but by the content of the Open

2. When a box floats, other boxes that are not floated in the standard flow will occupy the original position of the floating box as if the floating box does not exist. (floating box, will cover above the box)
However, the text content in the non-floating box will be affected by the width of the floating box. (The contents of the non-floating box will not be covered by the floating box)

3, because of the reason of the second article.
You can add the clear property to the affected box to remove the effect of the floating box on itself.
Clear Optional value: left-clear left floating effect, right-clear right floating effect;
both-at the same time clear left and right floating effect, often selected;

4, the parent box does not specify a height. If the child box does not float, the height of the parent box can be opened by the quilt box.
If all the child boxes in the parent box are floating, the parent box height becomes 0;
[Resolve all sub-box floating, parent box height collapse problem]
① to the parent box is also added floating;
② Add overflow property to parent box;
③ at the end of the parent box, add an empty div with a height of 0. Add Clear:both to the Div, and remove the floating effect from the property.
④ can be a third div, with a pseudo-object selector:: After implementation:
#div4:: after{
Display:black;
Content: "";
height:0px;
Clear:both;
}

[Box Model classification]
1, the Standard box (the box): We set the width and height, only contains the Content section, and then add padding or border, will cause the box to become larger;
2, IE box (strange box): We set the width and height, including Content+padding+border, and then add padding or border, will compress the content area, but the total size of the box is unchanged;
[Manually set box type]
Box-sizing:border-box; Weird box;
Box-sizing:content-box; Standard box; default effect.

Positioning

[Relative positioning relative]
1, the use of position:relative; Set elements as relative positioning elements;
2. Use top, right, bottom, left to adjust the position of the element. When left and right exist at the same time, the left takes effect; when top and bottom exist simultaneously, top takes effect.
3, positioning mechanism:
① relative positioning is relative to their original position positioning. When the top property is not specified, the position of the element does not change;
② relative positioning does not release the position of the element in the original document stream. Does not affect the location of other document flow elements;
4, about the element Z axis overlap:
① positioned elements, the default z-axis is higher than the normal document flow element.
② the same as the positioning element, "later on the habitat." The back covers the front.
③ can manually adjust the upper and lower z-axis order of positioning elements using Z-index;
Z-index defaults to 0, and can only be used for locating elements.

[Absolute positioning]
1, the use of position:absolute; Set the element to absolute positioning;
2, positioning mechanism:
① is positioned relative to the ancestor element of the first non-static location.
(i.e., positioned relative to the first ancestor element using relative, absolute, fixed positioning)
② If all ancestor elements are not positioned, they are positioned relative to the upper left corner of the browser;
③ uses absolute elements, which are completely removed from the document stream. The original space will be released.
[Fixed positioning]
1, the use of position:fixed; Set fixed positioning;
Fixed positioning, is a special absolute positioning!! Only ancestral elements cannot be locked using positioning;
2. Customization mechanism:
is always positioned relative to the top-left corner of the browser and does not scroll with the scroll bar scrolling;

[Z-index Properties]
* 1, function: According to the value set by the Z-index property, determines the stacking order of the element in the z-axis direction;
* 2, use requirements:
*①z-index can only adjust the stacking order for positioned elements.
* Relative, Absolute, fixed
*② the Z-index attribute of the element, consider the constraint of the parent container z-index;
>>> If the parent container has the Z-index property set, all elements of the child container will not be freed from the parent container hierarchy constraint. (That is, the parent container is set to Z-index, the child container can only be the value of the parent container.) Set the Z-index for the sub-container and only adjust the cascade order of the sub-containers within the parent container hierarchy.
>>> If the parent container is not set Z-index, or is set to Z-index:auto, the child container adjustment z-index will not be constrained by the parent container hierarchy.
3, Z-index:auto; & z-index:0; Similarities and differences
①z-index:auto; is the default value, with z-index:0; in the same plane;
②z-index:0; constraint child elements must be in the same plane as the parent container;
Z-index:auto; does not constrain the hierarchy of child elements;

[Clip Properties]
1, Function: Clip property is used to crop the picture label, display the picture's designated area;
2, use requirements: Clip properties, can only be used for absolute or fixed positioning of the picture label;
3, clip properties, accept a rect () function, the function passed four values, respectively, the position of the upper, right, bottom and left four tangents;
Note: Unlike other properties, the four values in Rect, the top and bottom two worth the distance are from the top volume, left and right two values are taken from the left;

"Use of negative margins"

[1. Implement block-level elements to center horizontally vertically in the parent container]
① set sub-container as positioning element;
②left:50%; Margin-left:-WIDTH/2;
top:50%; Margin-top:-HEIGHT/2;

[2, using negative margin to increase the width of the element]
① the width of the child container, not specified, only the height is specified, or the height is open by the content;
②margin:0px-50px; Can make the left and right sides, are outside the parent container 50px;

"New Properties"

Display Properties
You can set the state in which the element is displayed, with optional values:
None: hidden elements;
Block: Displayed as a blocks-level element;
Inline: Displayed as a row-level element;
Inline-block: Displayed as an inline block-level element. itself will be a row-level element, but it has all the attributes of the block-level element. such as width, height, margin, padding, etc...
[Common Inline-block-level labels?] ]
<input/> <textarea></textarea> <td></td>
[How to hide an element]
1, width or height is set to 0px; with Overflow:hidden; Property
2, Display:none; Display Display:block;
3, opacity:0; Set to full transparency. But the space of the elements will occupy;
4, Visibility:hidden; Hides the element, but the space in which the element resides is still occupied. The effect is very similar to that of opacity:0;
Show visibility hidden elements, visibility:visible;

"CSS3 new Attribute prefix"
1,-webkit-: Chrome/safari browser;
2,-moz-: Firefox browser;
3,-ms-: IE browser;
4.-o-: Opera Open Gate Browser
"CSS Length units"
1, px: indicates pixels. The length is fixed, representing a few pixels of the resolution;
2,%: Indicates the percentage relative to the default value;
3, EM: Length and the size of the element hook. The font size that represents several times.
4. REM: Hooks the font size of the root element. That is, with the [em vs. REM difference]
EM is a font-size hook to the current element itself, and if the current element is not set, the nearest ancestor element font size is searched up until the font size is followed;

REM is independent of the current element font size and is directly linked to the root element font size.

CSS3 Background Properties
 1, Background-clip: Sets the crop display area for the background or back color.
 >>> Border-box starts from the outer edge of the border;
 >>> Padding-box starts from the inner edge of the border;
 >>> Content-box starting from the text content area;
 >>> If the background or background color is not in the display area, it will be cropped and not displayed;
 2, Background-origin: Sets the background map from which to start positioning.
 >>> Border-box: The upper left corner of the background image starts from the outer edge of the border;
 >>> Padding-box: The upper-left corner of the background image starts at the border edge;
 > >> Contentbox: The upper left corner of the background image starts from the text content area;
 3, Background-origin does not change the size of the display area of the background map, but determines where the upper-left corner of the background map begins to locate;
  Background-clip is only responsible for cutting out the display area, but does not care where the background map is located;
 4, background-attachment: How the background map is attached;
 >>> Scroll: Background graph follows area scrolling. Default effect;
 >>> fixed: The background map fills the entire area, and the background map is fixed and does not scroll with the scroll bar;
 5, background abbreviated form:
 background: Background-color background-image background-repeat background-atachment background-position;

Transition: Transition attribute, accepts four attribute values
① set that CSS property to participate in the transition; You can specify All/none directly
② How long the transition is completed. usually. 3s. 5s
③ the style effect of the transition. usually choose ease;
The ④ transition is delayed a few seconds before starting. Can omit not to write;
The Transition property can define multiple transitions at the same time, separated by commas.
Eg:transition:width. 5s Ease,height 1.5s ease;

[Transform define Transform properties]
1. Commonly used transformation functions:
>>> translate (10px,10px) translation, the second one does not write by default is 0
>>> Scale (1.1) zoom, the second one does not write, the default equals the first one
>>> rotate (90deg) rotation, the default around the z-axis can be used Rotatex (), etc.
>>> skew (20deg,30deg) twisted, horizontal, vertical distortion of how many degrees;
2, transform can implement a variety of transformations at the same time, separated by a space
Eg:transform:skew (20DEG) scale (1.3) translate (100px);
3. Transform-origin: Defines the starting point of the transformation, often used for rotational transformations.
Optional value: Left/center/right bottom/center/top
You can also specify the x and Y coordinate points directly, the first number is the x axis;
Example: Transform:rotate (90DEG);
Transform-origin:right Bottom;
means: Rotate 90 degrees around the lower right corner.

CSS Basic Syntax three