What is block layout? How to make a simple page of the site yourself?

Is there a desire to learn how to do website pages on your own? Then let's learn what block layout is. Novice make-up artists encounter a number of difficulties, they have many questions. Consider what constitutes a block layout.

Important advice

Use a visual editor to make everything clearer. Those who know HTML well, work in a notebook, because they understand everything. And newcomers can use such programs as FrontPage or, for example, Dreamweaver.

Types of site layout

There are several types of layout:

1. Tabular.
2. Block.
3. Mixed.

We are interested in block layout. What is its difference from tabular? The layout of blocks with the help of the DIV tag has certain advantages:

1. Downloading with the design blocks faster.
2. The contents of blocks are displayed (unlike tables) as the download occurs. As you know, the data of the tables will appear only after displaying the entire table.
3. Code with divs is easier to read.

These are not all the virtues that block layout is famous for.

How can I change the arrangement of div blocks?

In this we can use float - a property that can take the following values:

1. Left alignment left.
2. Right-justified alignment.
3. The item stays where it was, it does not move anywhere if none is specified. This value will be the default.

Another important property that we will need is clear. It can have 4 values:

1. To set the item under the previous one, moved to the right, the block is right.
2. Left sets the element below the previous one, which is moved to the left.
3. Both - installation under the previous moved block.
4. None says that there are no restrictions on the position of the block relative to those elements that are moved.

Example

Consider how the block layout of the div looks . Write our code:

Under the code, you see the result. Thus, based on several properties, it is possible to control the arrangement of the blocks as desired. We proceed to the next moment. We used text-align: center to center each block for any browser.

As you can see, the block layout of the site is quite simple. It is important to learn and apply more features in practice, which will allow for a more flexible page structure.

Another important thing

There is one popular property that is used in the layout - position, it is used for positioning.

Values for the position property:

1. Relative - sets the position of the elements relative to their original locations. Applying left, top, righ, bottom moves the element in a certain direction.
2. Static - the usual display of the element. There is no point in using right / left, top / bottom - this will lead to nothing.
3. Absolute - absolute positioning of the element.
4. Fixed is the same as absolute. The element is bound to a certain point on the screen, but it does not change its position even if the page is flipped.

Many layout designers have noticed that when applying a fixed, absolute or relative positioning, blocking occurs. And then it's interesting to know which of the blocks is lower, which is higher. To answer this question, you need the z-index property. It put the layout in blocks at a qualitatively new level. This makes it possible to do positioning not only on the plane, but also with the help of the third axis Z. The value of this property can be positive and negative.

Create 3 blocks. Next, we experiment with absolute positioning.

As can be seen from the example, it is easy to change the positions of the blocks. On the basis of what you now know, anyone will make an elementary block layout of the site page. And using more properties, you will improve your skills.