CSS Layout Courseware

1. What is a CSS box model

Our web page is made up of a single box.

2. A box has properties: Widthand height (width and height), padding (padding), border ( Border), margin (margin)

Width is the meaning of "breadth",which is the width of the content inCSS , not the width of the box.

Height is a "high" meaning,the height of theCSS refers to the level of the content, not the height of the box

Padding is the meaning of "inner margin".

Border is the "border"

Margin is "margin"

3. Width and height

1) Width and Height only act on the content area

2) Generally does not specify the height, because our content can put our box to open

3) CSS2 began to introduce a percentage value to our wide height

4) The inline style is not set to a wide height

4. Inner margin

1) The background color of the box can be extended to the padding area.

2) If you set the border, then you should also set padding, so that the border tightly squeeze the content.

3) Padding not allowed to have negative values

4) Padding The order of the values is up, right, down, left (clockwise memory)

5) Padding not coincident ( compared to margin)

set a box with a left padding of 20px and a 30px Upper-right margin.

6) Some elements, default with padding, such as the ul tag.

So when we do stand, for ease of control, always like to clear this default padding and margin

*{margin:0; padding:0;}

5. Border

1) Border has three features to specify: style, width, and color, if not, the default is black. The other two properties are not written and do not show up borders.

2) Writing in separate words:

border-width:1px;

Border-style:solid;

border-color:red;

The Border attribute can be disassembled in two different ways:

1) Press 3 elements : Border-width,border-style, Border-color

2) by direction:border-top,border-right,border-bottom ,border-left

If you don't feel the egg hurts, you can break it into a sentence .

written by:border:1px solid red;

6. Margin

1) The margin is always transparent, can not set the color, emphasizing that there is no margin-color This property (of course, there is no padding-color this attribute)

2) margin can be negative

3) margin collapse phenomenon (margin overlap): Up and down overlap, take maximum value, left and right do not overlap

4) Margin:0 Auto centering principle

Attention:

use margin:0 auto; the box, must have width , there is a clear width

only the standard flow box, can use margin:0 auto; Center.

In other words, when a box floats, absolutely positioning, fixed positioning, can not use margin:0 auto;

margin:0 Auto; is centered in the box, not centered on the text. Text Center If there is text-align:Center;

7. Normal Flow layout

macro-speaking, our Web page and photoshop and other design software has the essential difference: The production of Web pages, is a "flow", Must be from top to bottom, like "Knit sweater". and design software, where you want to draw a thing, can draw.

1) format layout from top to bottom (block level), left to right (inline)

2) Normal flow is not made out of the Web page

8. conversion of block-level elements and inline elements

Block-level elements can be set to inline elements

Inline elements can be set to block-level elements

display is the meaning of "show mode", which is used to change the element's inline, block-level properties (inline,blocks)

9. element Float

float is CSS inside the layout with the most properties.

The first thing to know is thatDiv is a block-level element that has a single line in the page, arranged from top to bottom, which is the legendary stream.

floating can be understood as leaving a div element out of the standard flow, floating above the standard stream, and not a hierarchy of standard flows.

1) When the element floats, the element is treated as a block level (take a tag distance)

The floating element will be detached from the normal stream, and its container (parent) element will not get out of the height of the child element of the normal stream.

2) only horizontal float, and no vertical float.

3) Floating elements snap to each other

conclusion: if a div element a is floating if a a ( a element will be squeezed to the next line ) a a a " is always aligned with the bottom of the previous element.

The order of the DIV is determined by the order of the div in the HTML code .

near the edge of the page is the front, away from the edge of the page after the end.

the property values of float are none,leftandright, with several points:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

4) The character circumference effect of floating element

using floating to make navigation bar

One by one. Clear Floating

What are the effects of floating on a page?

Solve the height collapse, will go rear-end

Several types of positioning: static positioning, relative positioning, absolute positioning, fixed positioning

Static positioning: That's our standard flow

relative positioning: no off-label will act separation

default is set to auto

The space occupied in the document flow is reserved for two general purposes

1) to fine tune the elements

2) use with absolute positioning.

absolute positioning: off-label

Absolutely positioned elements are completely detached from the document stream, and the occupied space is not retained

fixed positioning: off-label

Handling Overflow

Overflow:hidden

set the visibility of an element

Visibility:visible ( visible ),hidden ( hidden ),inherit ( Inheritance ) ( default )

15.visibility:hidden; and the Display:none; difference:

Visibility:hidden; when hidden, its space still exists, and Display:none; The space does not exist when it is hidden ( that completely disappears ) .

the overlap of processing elements

use the Z-index property to set the height of the element, which is only position to absolute or relative is valid

CSS Layout Courseware