css box layout, and the layout of the floating developing simple animations

08.05 self-summary

I. box layout

Composition of the cassette layout

• margin
• border
• padding
• content

2.margin

margin Margin is, the display control box on his position relative to a

left, top control itself, right, bottom impact Brothers

3.border

• Width: border-width

• Color: border-color

• Transparency: transparent

• Style: border-style:

  Common styles

  • none: No border
  • solid:solid line
  • dasheddotted line
  • dotted点或者方框根据浏览器不同样式有有点区别

• Transparency: rgb color inside the color with the fourth parameter to control to control

4.content

content是宽x高，作为内容或子标签的显示区域

The distance between the padding and border

The shadow box

box-shadow: x y axis offset axis offset shadow width Bleaching shadow color

6. Key

• Box model: margin, padding coordinate operations, try to use padding with padding, then consider using margin
• Sons generated from the top level, it is recommended to use padding
• margin, padding parameter auto automatic acquisition using the margin area centered blank where applicable

II. Floating layout

1. Floating Layout

float

1. Referring parent subset width floating
2. subset of the floating height of the parent is no longer distraction
3. parent process needs its own height, otherwise it will affect the layout Brothers, using clear float process

2.after|before

after与before是伪类

They directly with CSS selectors: Connect

after element after

before elements appear before

3. Clear float

Parent clear float, is in width to determine if they are, can ensure a high degree of parent just a subset of the parcel

Arranged side need layout block floating, and the parent must be clear float

method one:

.浮动的标签:after {
    content: '';
    display: block;
    clear: both;
}

Method Two:

.浮动标签下一个要显示的标签(会受到他浮动影响的):before {
    content: '';
    display: block;
    clear: both;
}

III. Animation

1. explicit and implicit

1) display: none | block can not be done animation
2) opacity: 0 | 1 can animate
3) width: 0 | height: 0 animation can do

2. Animation

transition: animation time (.5s) delay time (.1s) animated property (all) motion curve (EASE)