Web Front-end study notes, practice (4) CSS layout

In actual project development, the most possible layout method we use is floating layout. In fact, there is also an absolute positioning of the layout.

In web page technology, we can regard the plane as a piece of paper, and the lattice we need to draw can be arranged by the float attribute. Float has four attributes: Left, right, inherit, and none. When writing a floating-based page, you should also pay attention to clear the floating, You need to define a style class .. Clear {clear: Both ;}. How do I clear the float? You only need to add a blank structure in the structure. For example:

<Div class = "nav">

<Structure 1>

<Structure 2>

<Div class = "clear"> </div>

</Div>

In the floating layout, the left attribute is at the far left of the browser. The right attribute is on the rightmost side of the browser.Suggestion: In the same Dom, it is recommended that you do not use left right as a combination, and use an attribute as the benchmark.

Absolute positioning: This layout method appears in DHTML. Its Attribute scope is only in the position: relative; defined in the parent structure. Example:

Position: absolute; position: relative; the attribute has four optional values: Top left right bottom, which are respectively linked to the relative attribute of the parent container closest to it. Of course, there are positive and negative values.

. Nav {width: 965px; Height: 100px; position: relative ;}

. Dell {width: 200px; Height: 200px; position: absolute ;}

<Div class = "nav">

<Div class = "Dell"> </div>

</Div>

Dell Div, which can be active in a div with a width of 965px and a height of 100px (as you can imagine, it is active in it, with four coordinate values selected .)

Supplement: The position attribute also has a selection value. Position: fixed is used to define a value that is fixed in the browser and does not roll over ].