2018-06-08CSS Common style + floating + positioning + box model

CSS layout style:

Common styles:

① fonts

② Color

③ background

Layout:

① Floating

② positioning

③ Label Properties

Label Box Model:

① Inner margin

② border

③ outer margin

Animation:

① rotation

② Gradient

The correct use of link:

<link rel= "stylesheet" href= "Zuoye1.css" >

Common styles:

① font:

Size, color, weight, font!

The child tag inherits the style of the parent tag (not all styles will be inherited)!

For text:

①text-align Horizontal Center

②line-height Vertical Center

---text-decoration text retouching!

Text-indent: Indent (This indentation is passed to the child label, and the row label span does not work because the row label size changes according to the content)!

Font is the beginning of font:

Font-family: Font style, recommended to use Microsoft YA black!

Font-style:

Font-size: Font size (general use of 12th font, a little larger 14th, not more than 16th number)!

1EM=16PX (also a unit)!

Font-weight: Defines how thick the font is!

Normal: OK!

Bold: Bold!

You can also customize the adjustment values (such as: 150,256, etc.)!

List:

List-style-type: The style of the list item!

This is the list item!

List-style-image: Add a list item picture!

List-style-position:

Inside: Inside!

Outside: External!

Inherit: Inherit the design format of the parent Div!

Background-image: Background image!

Path problem:

①js and HTML introduction files from the HTML file to start looking!

②css introduce files from CSS file start looking!!!

Background-repeat: Tile!

Repeat-x:x Axis Tile!

Repeat-y:y Axis Tile!

No-repeat: Uneven Shop!

Background-position: background picture Position!

Equivalent: The page position has been fixed, manually adjust the location behind the picture!

Abbreviated form: Background: Background color background picture flat uneven shop picture position;

Example:

Background-repeat:no-repeat;

background-position:0% 0%;

Form:

CellSpacing: Assuming a value of 0, it is the same as the border thickness of adjacent cells (2px)!

Collapse: The same value is 0, it is a border (1px)!

Alignment in CSS:

Text alignment: Text-align (horizontal) line-height (vertical)

Block Label Alignment: Margin-auto

You can also force centering with padding!

Line-height: Row High! To center vertically, set the parent tag's height first, and then line-height=height!!!

If the text ran, look at it is not because of the width of the set, text wrap?

Vertical-align is the table (example is in TD) inside the vertical center!

Layout:

①float:top/bottom/left/right

②position:top/bottom/left/right

float float Just remember one point: To add a parent tag to a floating element, and set the width high!

Div can also add ol/ul/li

Cursor: Refers to the effect that the mouse puts on the display (small hand, Doji star, arrow)!

http://www.runoob.com/cssref/pr-class-cursor.html--Usage details!

It is important to note that: Cursor:url (.. /pic/ceshi.ico) default;

Must be an ICO file, followed by a default!!!

Position positioning:

①fixed:top/bottom/left/right (unit: PX)

②absolute:top/bottom/left/right (unit: PX)

③relative:top/bottom/left/right (unit: PX)

Fixed: Position relative to Window!

top:100px;

right:100px;

Add the position:fixed, whether it is in the Div, don't care if nested, the previous position is not!

Absolute: Relative to page positioning!

top:100px;

right:100px;

Relative to the page position, care about nesting!

Two cases:

① positioning relative to the label (body)

② relative to the recent position attribute of the parent tag positioning, the final label or body, there is no position of itself!

Relative: Relative to its own location, position also! Often used for fine tuning (parent tag)!

Added to the parent tag to specify the absolute! of the sub-label

Ps: With FN+F12 can take off the picture, try!

Label properties (display):

①block

②inline

③inline-block

④none (Nothing, no position, equivalent to delete code)

Similarly there is a: visibility:hidden-location is still there!

Box Model:

①padding:top/bottom/left/right

②border:top/bottom/left/right

③margin:top/bottom/left/right

How to define border:

①border-width

②border-style

③border-color

Shorthand:

border:20px solid red;

Border-style:dotted/solid/dashed/double

Make a rounded rectangle of the border:

The border is rounded out:

border-radius:50% 50%;--into a Border circle!

Box-sizing:border-box;

Regardless of how much padding,border,margin is set, it is always the width and height!!! of the previous Div set

2018-06-08CSS Common style + floating + positioning + box model