Basic syntax for HTML--CSS 2

First, box model 1-1, what is a box model? HTML5 box models include:contents (content)Fillpadding, also known as the inner margin)、border (border)Boundarymargin, also called margin)。 These attributes can be used in everyday life common things-the box as a metaphor to understand, so call it box mode. CSS box model is a kind of thinking model used in the CSS technology which is often used in web design. (from Baidu Encyclopedia, I slightly modify,) 1-2, margin 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 in the parent container in the horizontal bureau!

1-3. padding inner margin

How to set it: exactly the same as margin

Note: Setting the padding will cause the div area to get bigger! You must pay attention to the actual width of the div as much as you use it.

1-4. Border Border

1. Set border requires three properties: Width style color
In principle three elements are indispensable, the order can be arbitrarily changed;
2, you can use top, right, Bottem, left to set four sides respectively

Such as:

#div {
width:200px;
height:200px;
background-color:red;

　　margin:0 Auto;

　　border:10px dotted #0000FF;
}

div page display, Blue dashed border:

[Border-radius fillet]

1, Border-radius can accept 8 attribute values, respectively, said:
X-axis (top-left, top-right, bottom-right, lower-left)/y axis (top left, top right, bottom right, bottom left)

Such as:

border-radius:10px 20px 30px 40px/10px 20px 30px 40px;

2, abbreviated form:
Write only x axis, Y axis default equals x axis
Four Corners not complete, default diagonal equal
Write only one value, default 8 numbers equal

Such as:

boeder-radius:50px 20px;

Or

border-radius:50px 20px 50px 20px;

Or

border-radius:50px 20px 50px 20px/50px 20px 50px 20px;

3, when the rounded arc >= Square half long, will be displayed as a circle.

[border-image picture Border]

1, Bordre-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;
You can divide the picture into 9 Gongge by dividing it by 4 tangent lines. 9 Gongge Four Corners corresponding to four corners of the border (no stretching is done),
9 Gongge four sides corresponding to four border (will be stretched/finished/repeated according to the settings)
Note: the PX unit must not be!!!!!! when writing
③ width of the border: 4 represents the width of the upper right-bottom left four borders
Note: when writing, it must be with PX units, and slice width with/split!!!
④ the way the border is repeated: stretch (stretched), round (paved), repeat (repeat)

[The difference between round and repeat]
Round: The 4 edges are properly stretched and compressed to ensure that four edges can repeat the whole number of times;
Rapeat: Will maintain the ratio of each variable length, may lead to the four corners, can not display a full edge;

2, the attribute value of the notation: Border-image:①②/③px④

Such as:

-webkit-border-image:url (img/border.png) 27/27px repeat;

3, Border-image in the WebKit kernel browser, you need to take-webkit-prefix.

* Minor Problems *

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.
"Solution"
1, to the parent box to add a little padding-top, not recommended to use, will lead to the parent box structure redundant 1px padding;
2, add 1px to the parent box border-top, not recommended to use, will also lead to 1px of extra space;
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.

[Box-shadow Box Shadow]

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

Outline perimeter Line

Appears outside the border and does not occupy space. May overwrite the surrounding content

[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 (weird box): We set the width and height, including content+padding+border;
Adding padding or border will compress the content area, but the total size of the box does not change;

[Manually set box type]

Box-sizing:border-box; Weird box;
Box-sizing:content-box; Standard box; default effect.

Second, CSS floating

1, the Block-level box in the standard flow, 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 position of the floating box, depending on the absence of the floating box. (floating box, will be covered on this 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 second reason, you can give the affected box, add the Clear property, clear off the floating box on its own impact

Clear optional values:

left--Clear left float effect

right--Clear Right float effect

both--at the same time clear left and right floating effect (Changxiang)

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]
① also adds floating to the parent box
② Add the Overflow property to the parent box, recommended!!! Overflow:hidden;
③ add an empty div with a height of 0 at the end of the parent box, add Clear:both to the Div, and delete the floating effect
④ can be a third div, with a pseudo-object selector:: After implementation:

#div4:: after{        display:block;        content: "";        height:0px;        Clear:both;    }

Third, CSS positioning 3-1, relative positioning realative

1, use position:relative; set element as relative positioning element;
2, use top, right, bottom, left to adjust the position of the element;
When left and right exist at the same time, left takes effect and when top and bottom are present simultaneously, top is in effect.
3, positioning mechanism:
① relative positioning is relative to their original position positioning, when the top and other properties are not specified, the position of the element will not change;
② relative positioning does not release the position of the element in the stream of the original document. 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, after the "arrivals." The back covers the front.
③ can use Z-index to manually adjust the upper and lower z-axis elements of the positioned element.
Z-index defaults to 0, and can only be used for locating elements.

3-2. Absolute positioning Absolute

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 (already positioned).
(That is, it is positioned relative to the ancestor elements that use relative, absolute, fixed positioning.) ）
② If all ancestor elements are not positioned, they are positioned relative to the upper-left corner of the browser.
③ elements that use absolute are completely removed from the document stream. The original space will be released.

3-3 fixed positioning

1, the use of position:fixed, set fixed positioning;
Fixed positioning, is a special absolute positioning!!! It's just that the ancestor element cannot be locked with positioning
2, positioning mechanism:
is always positioned relative to the top-left corner of the browser and does not scroll with the scroll bar scrolling.

3-4. Z-index Properties

1. Function: Determines the stacking order of elements in the z-axis according to the values set by the Z-index property
2. Requirements for use:
①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 the elements of the child container will not be constrained from the hierarchy of the parent container.
(That is, the parent container is set Z-index, the child container can only be the value of the parent container, and then set Z-index to the child container, can only adjust the child container within the parent container hierarchy order)
>>> 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.
3, Z-index:auto; & z-index:0; Difference
①z-index:auto; is the default value, with z-index:0; in the same flat aspect;
②z-index:0; constraint child elements must be in the same plane as the parent container;
Z-index:auto; The hierarchy of child elements is not constrained.

<!DOCTYPE HTML><HTML>    <Head>        <MetaCharSet= "UTF-8">        <title></title>        <styletype= "Text/css">#div1-1{width:200px;Height:200px;Background-color:Red;position:relative;Top:100px; Left:100px; Right:200px;Z-index:-1;            }#div1-2{width:200px;Height:200px;Background-color:Yellow;                /*position:relative;*/                /*z-index:10;*/            }#div1-3{width:200px;Height:200px;Background-color:Green;position:relative;Bottom:200px; Left:200px;Z-index:-2;            }    </style>    </Head>        <Body>                <DivID= "Div1-1">This is a div</Div>                <DivID= "Div1-2">This is a div</Div>                <DivID= "Div1-3">This is a div</Div>        </Body></HTML>    

Iv. use of CSS negative margins 4-1, implementing block-level elements horizontally vertically centered in the parent container

Set sub-container as positioning element;
left:50%; Margin-left:-WIDTH/2;
top:50%; Margin-top:-HEIGHT/2;

4-2. Use negative margins to increase the width of the element

① the width of the child container is not specified, only the height is specified, or the height is stretched by the content
②margin:0px-50px; Can make the left and right sides, are outside the parent container 50px;

Five, CSS new properties

[Display properties [very popular]
You can set what attribute status The element displays, with optional values:
None: Hide Elements
Block: Displayed as a chunk-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 with all the attributes of a block-level element, such as width, height, margin,padding, etc.

[Common Inline-block level tags?] ]
<input/> <textarea></textarea> <td></td>

[How to hide an element]
1. Width is set to 0px; with Overflow:hidden; properties
2, display:none; show Display:block;
3, opacity:0; Set to full transparency. But the element space will occupy.
4, Visibility:hidden, hidden elements, but the elements are still occupied space. and opacity:0; very much alike;
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: pixels, length is fixed, representing a few pixels of the resolution;
2,%: Indicates a 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: hook with the root element's font size, that is, the fongt-size hook 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 found until the root font size
②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 clipping display area of the background or back color.
The >>>border-box is displayed from the outer edge of the border.
The >>>padding-box is displayed from the inner edge of the border.
>>>content-box starting from the text content area
>>> if it is not in the display area of the background or back color, it will be cropped off and not displayed

2, Background-origin set the background map from where to start positioning.
>>>border-box: The top left corner of the background image starts at the edge of the border
>>>padding-box: The top left corner of the background image starts at the border edge
>>>content-box: The upper left corner of the background image starts from the text content area


3, Background-origin will not change the size of the background map display area, just decide where the upper left corner of the background map to start positioning
Background-clip is only responsible for cutting out the display area, but does not care where the background map is located

4, Background-attachment: The background map of the attachment way
>>>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, baccground abbreviation form:
BackgroundBackground-color Background-image background-reapeat background-atachment background-position;

[Transition: Over attribute, accepts four attribute values]

① set which CSS properties, participate in excessive; You can specify All/none directly
② too much time to complete, usually. 3s. 5s
③ over-styling effects. Usually choose ease
The ④ 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

"Transform Define Transformation Properties"
1. Common transformation functions
>>>translate (), pan, second not write default = 0
>>>scale (), zoom, second not written, default equals first
>>>rotate (), rotate, default around z-axis, can use Ratatex (), etc.
>>>skew (), twist, horizontal, vertical twist how many degrees

2, transform transform can achieve a variety of transformations, separated by a space
Transform:skew (20deg) scale (1.5) 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, and the first number is the x-axis

[Use of CSS3 animation]
1. Declaring a keyframe (animation)

@keyframes name{from{} to{}}

the wording of the stage :
① can directly use the from-to notation.
② can set the 0%-100% notation, but the beginning and end must be 0% and 100%;

2. In the CSS selector, use animation to invoke the declared animation:

"Abbreviated form of animation" (all can be written separately)
Animation-name: The animated name is the key frame we declared name;
Animation-duration: Duration of animation
Animation-timing-function: Animation speed curve, often selected ease
Animation-delay: Animation start time, delay time
Animation-iteration-count: The number of animation plays, default is 1. Infinite representation: Infinite
Animation-direction: The next time the animation is played in reverse, the default is normal (indicating no reverse playback), alternate indicates the next reverse play (100%-0%)
Animation-fill-mode: Specifies the state outside the animation time of the object. Indicates what state to stay in when the animation ends, and to use this property, the number of times the animation must be executed is limited.
(Forwards: Indicates the animation stays in the end state, backwards: Indicates that the animation stays in its initial state, the default effect)

>>>animation-name and Animation-duration must be set, other optional
>>>animation can set multiple animations at the same time, with multiple animated animations separated by commas
animation:frame1 1s,frame2 2s ...

Basic syntax for HTML--CSS 2