Shulou(Shulou.com)06/03 Report--

This article focuses on "the layout model of css". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the layout model of css.

Flow model

The flow model is the default and most common layout mode for web page layouts. It has two characteristics:

1. Block elements are distributed vertically from top to bottom within the containing elements. Common block elements are: div,p,ul,ol,h2~h7,address, etc.

two。 Inline elements are displayed horizontally from left to right within the containing element. Common inline elements are as follows: a, span.img.input.textarea, etc.

Floating model

Floating model refers to the use of css to define block elements as floating. Usage: float:left/right/none

Layer model

Css defines a set of positioning attributes (position) to support the layout model.

1. Static positioning settings position:static

There is no special positioning, and the object follows the normal document flow. Attributes such as top,right,bottom,left will not be applied

two。 Absolute positioning settings position:absolute

Drag the element from the document stream and use attributes such as top,right,bottom,left to position it absolutely relative to its nearest parent containing the positioning attribute. If such an attribute block does not exist, it is relative to the body element, that is, to the browser window.

XML/HTML Code copies content to the clipboard

Css3 learning

.test {position:absolute;top:0px;left:0px;width:200px;height:200px;padding:5px 10pxbot background, match c00, colorside color, color, etc., 120%, 120%;}

I am the absolute positioning, relative to the parent div positioning here

3. Relative positioning settings position:relative

The object follows the normal document flow, but the location can be further determined by properties such as top,right,bottom,left, which is different from the static property.

4. Fixed positioning settings position:fixed

The difference between fixed and absolute positioning is that the element of fixed reference positioning is always the view itself (the page window on the screen), while absolute refers to the parent element with positioning attributes. The code is as follows:

XML/HTML Code copies content to the clipboard

Css3 learning

.test {position:fixed;top:0px;left:0px;width:200px;height:200px;padding:5px 10pxbot background, match c00, colorside color, color, etc., 120%, 120%;}

I am fixed positioning, relative to body positioning here.

At this point, I believe that you have a deeper understanding of the "css layout model", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.