Press enter to see results or esc to cancel.

Web page layout basis – Css Elements – Css Tutorial

Share this

The W3C standard
is a set of standards developed by the World Wide Web Consortium, including:

• Structured Standard Languages
(HTML and XML)
• Performance Standard Language (CSS)

• Behavioral Standard Language (DOM and ECMAScript)

 advocate structure, style, behavior separation

Web page layout basis - Css Elements - Css Tutorial - Web page layout basis - Css Elements - Css Tutorial - Web page layout basis - Css Elements - Css Tutorial -

Topic: Web page layout basis – Css Elements – Css Tutorial

CSS positioning mechanism in
CSS, there are three kinds of positioning mechanism:
 Standard document flow (Normal Flow)
 float (Floats)
 absolute positioning (Absolute positioning)
standard document flow
 from top to bottom, left to right, Output document content
 composed of block-level elements and row-level elements of the
block-level elements
of the
characteristics of

 from left to right full of the page, exclusive line
 touch the edge of the page, it will automatically wrap.

Topic: Web page layout basis – Css Elements – Css Tutorial

Row-level element
 can be displayed on the same line
 will not change the HTML document structure

Block-level elements and row-level elements are box models

Box model
box model – the cornerstone of the page layout, composed of four parts
 border (border)
 margin (margin)
 padding (padding)
 box content (content)

Topic: Web page layout basis – Css Elements – Css Tutorial

Box size
size calculation:
box model size = border + margin + inner margin + content in the box size of
a div of the border for the 3px, the margin is 2px, the right margin of 10px, into its internal one Width of 120px picture, the div width is how much?
Div width = 2xborder + 2xpadding + margin + image width = 140px

Automatic centering layout of the layout of the
page layout is one of the most common layout of the way
 main application skills
 standard document flow
 block level elements
marmargin attribute – set automatically centered

Floating layout
CSS specified in the second
positioning mechanism  able to achieve horizontal multi-column layout (horizontal two columns, horizontal three columns … horizontal N columns)
 by setting the float attribute to achieve

Float property
attribute values  left-left floating
 right-right floating
 none-not floating
 Features: The element will move left or right until it touches the container
 Set the floating element, still in the standard document Flow in the stream

Float property
 effect on the elements
immediately adjacent to it • Adjacent elements move up, occupy the subsequent position
 Next to it, side by side display

Floating causes problems
Frequently Asked

 The parent element height can not be automatically extended
 The element is moved up to fill the right (or middle) gap of the
floating element

 The effect of the floating element on the adjacent elements will cause the page layout to chaos to
clear the floating common method
. Clear property: always clear: both;
 set width: 100% (or fixed width) + overflow: hidden;

Topic: Web page layout basis – Css Elements – Css Tutorial

Horizontal two-column layout
One of the most common ways to layout web pages
 Main
application skills float properties – Make the vertically arranged block-level elements
horizontally arranged marmargin property – Set the spacing between two columns

Absolute positioning of the layout of the
CSS specified in the third positioning mechanism
 to achieve horizontal multi-column layout and more complex
positioning  by setting the position attribute to achieve

Position attribute
has three positioning forms: 1. Static positioning, 2. Relative positioning, 3. Absolute positioning
can be set to 4 attribute values
 static (static positioning)
 relative (relative positioning)
 absolute (absolute positioning)
 fixed (fixed Positioning)

The relative positioning of
 offset with respect to their original position
 standard is still in the document flow
 then have offset properties and z-index property

Absolute positioning
 established to include a positioning reference block
 completely out of the standard document flow
 then have offset properties and z-index attribute
absolute are all fixed and absolute positioning

The same point of absolute and fixed
 is completely out of the standard document flow – the sibling element is no longer affected by it
 positioning with the parent containing the block as the base – the initial position in the upper left corner of the parent containing block

Absolute and fixed
1. offset
reference reference absolute
 no positioning ancestor element to <html> as the reference base for the offset
 has been positioned ancestor element, to its nearest location of the ancestor of the offset is the
reference reference fixed
 Yes, no positioning ancestor elements, are based on the browser visual window for the offset reference

2. The form of expression (when
generating a scroll bar) absolute
 position will change with the rolling bar
fixed position, will not change with the scroll bar
 by his cover elements, you can cross through the
horizontal column layout
using absolute horizontal Two columns of layout – commonly used in a fixed width, another column width adaptive situation
 main
application skills relative – relative positioning of parent elements
absolute-adaptive width element absolute positioning

Note: Fixed width column height> Adaptive width column

How useful was this Lesson?

Click on a star to rate it!

Average rating / 5. Vote count:

Be the first to rate this post.!

As you found this post useful...

Follow us on social media!

We are sorry that this lesson was not useful for you!

Let us improve this lesson!

Tell us how we can improve this lesson?

Share this