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

This article mainly introduces the ways of web page layout, which can be used for reference. I hope you can learn a lot after reading this article. Let's take a look at it.

The three ways of web page layout are: 1, standard document flow; 2, floating; 3, absolute positioning. Among them, the absolute positioning is completely separated from the standard document stream, and the location based on the containing block is established, with offset attributes and z-index attributes.

There are three ways to layout a web page:

One: standard document stream

1. From top to bottom, from left to right (block-level element [div,ul,li,dl,dt,p] and row-level element [upper plate, img,strong,input])

2. Box model

1) Box model properties:

Border border

Inner margin padding [(top, right, bottom, left) (top, right, bottom) (up, down, left)], outer margin margin [(top, right, bottom, left) (top, left, bottom) (up and down, left and right)].

3. Box 3D model

1) Box 3D model level

1,border

2) contentless padding

3BackgroundSumimg

4BackgroundWhitcolor

5,margin

4. The box model size is equal to the frame + outer margin + inner margin + middle content size of the box.

Two: floating float

Float:left,right,none

Clear floats:

1. Clear:both; (usually used to clear floats next to the following elements)

2. Set width:1000% (fixed width) + overflow:hidden at the same time

Note: (the clear:both method is not valid when the parent contains a fast reduction to one bar; the second method of clearing floats is generally used)

Three: absolute positioning

1 static positioning 2 relative positioning 3 absolute positioning

Thank you for reading this article carefully. I hope the article "what are the ways of web layout" shared by the editor will be helpful to everyone? at the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you 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.