Front-end Base--css+div layout

Open a Web page, press F12, you will find a bunch of "DIV", yes, most of the pages are now using the Css+div layout method.

The previous article said the box model, here is a box model based on a simple way to understand a common page layout: css+div layout.

Css+div layout, that is, in the overall use of <div> tags to divide the page into several blocks, and then the various <div> block CSS positioning, and finally add the corresponding content in each block.

As the construction of a steel structure, the entire framework of the page is set up, and then the local refinement, where <div> is like steel, responsible for building the framework, CSS is equivalent to build the rules, in accordance with certain rules (i.e. business needs) to weld the rebar.

So let's think of the layout of the page as a process of building it, divided into two steps:

1, the choice of materials, to need to understand the reinforcement, that is, to understand the Div

A friend of mine asked me before: "What is a box model, a div?" I vetoed him, and in my opinion, many elements of the Web page can be seen as a "box", such as p, H1,form, div, span, table, TR, TD, etc. They all have margin, border, padding attributes.

But when we build the overall page layout, we generally use Div to act as the "rebar" in the example above.

The box model is the foundation of the DIV+CSS and also the key. Simply put, the core of the box model is in the "box" of the margin, border, padding these properties, want to lay out a reasonably beautiful web page, this is the basic skills.

2, the material is cut, welding

Once you know the basics of div and box modeling, you'll want to cut the material (design different div sizes) and weld it (using CSS to position the div).

               

Cutting does not have to say much, is to draw a div and CSS to specify its size shape (that is, margin, border, padding value).

The focus here is welding, you need to select the size of the div block, for reasonable placement, that is, the Div positioning, including the div position, float, Z-index property settings.

Position Properties: Four property values are static, absolute, relative, fixed, and the following table describes the values of these properties:       

Value	Describe
Static	The default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).
Inherit	Specifies that the value of the position property should be inherited from the parent element.
Absolute	Creates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
Relative	Creates a relative positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the left position of the element.
Fixed	Generates an absolutely positioned element that is positioned relative to the browser window. The position of the element is passed "left", The "Top", "right" and "bottom" attributes are specified.

In general, when an element's Position property value is absolute or fixed, it is no longer constrained by the parent element and is positioned only on the values of left, top, right, and bottom of the page.

The Float property has left, right, none, inherit four attribute values:

Value	Describe
None	The default value. The element does not float and appears in its position in the text.
Inherit	Specifies that the value of the float property should be inherited from the parent element.
Left	Element floats to the left.
Right	The element floats to the right.

details no longer say, unclear students can do a few small examples of hands-on practice, or to w3school practice, here are a rich web tutorials and some small examples of online practice.

Float Here is the difficulty is also the focus, hope that the reader proficiency.

z-index Properties:

The value of Z-index can be any integer value, can be a positive number or negative, representing the element "priority displayed", the higher the value, the higher the priority of the display. Two simple pictures suffice to illustrate:

These two pictures, the first picture of the Z-index value of the three Div respectively:a<b<c; the first picture of the three div z-index values are: A>b>c.

These are just css+div layout of the most basic knowledge, want to really thoroughly understand, but also need to continue to practice, experience the layout of some tips. For example, the use of negative value of margin is a very practical trick, if you want to let container fixed width center display (assuming container width of 700px), you can use relative positioning method for container, left value is 50% of the page, Set the Margin-left to half the width of your own, so that the displayed effect is fixed width and centered, regardless of the resolution in the browser, such as:

   

When the content on the page is not displayed enough, how to make the bottom footer (the Copyright Registration section) always at the bottom, or you can set a negative value to the margin method to achieve.

Accumulate more, look forward to working with you to grow together.

Front-end Base--css+div layout