cool hit counter Front End Basics - CSS+DIV Layout_Intefrankly

Front End Basics - CSS+DIV Layout

Copyright: This is an original post by the blogger and may not be reproduced without the blogger's permission.

Open a random web page, press F12, you will find a bunch of dense "DIV", yes, most of the web pages are now using the CSS + DIV layout method.

The previous article said the box model, here is the box model as the basis for a simple understanding of a common way of web layout: CSS + DIV layout.

CSS+DIVdisposition, It's the overall use of<div> Markup divides the page into blocks, Then for each<div> block forCSS locate, Finally, add the appropriate content to each block。

It's like building a steel structure., Start by framing the entire page, Then refine the localization separately, here<div> Just like steel, Responsible for building the framework,CSS It's the equivalent of the rules of construction, According to certain rules( i.e. business requirements) Weld up the rebar.。

So let's imagine the layout of a web page as a process of building this building, and here it is divided into two steps.

1, choose the material, to have an understanding of the steel that needs to be used, that is, to understand the DIV

Before a friend asked me: "What is the box model, is it DIV?" I rejected him, in my opinion, many elements in 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.

Only when we build the overall layout of the page, we generally use DIVs to act as the "steel" in the above example.

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

2、Cutting and welding of materials

Once you understand the basics of DIVs and box models, you have to cut these materials (design DIVs of different sizes) and weld them (position the corresponding DIVs with CSS).

Cutting, needless to say, is drawing the DIV and specifying its size and shape (i.e., margin, border, and padding values) with CSS.

The focus here is on welding, and welding requires picking DIV blocks of varying sizes for reasonable placement, also known as DIV positioning, including the setting of the DIV's position, float, and z-index properties.

position attribute: the four attribute values are static, absolute, relative, fixed, the following table is the W3C description of the values of these attributes.

happen to



Default. No positioning, the element appears in the normal stream (ignoring top, bottom, left, right or z-index declarations).


Specifies that the value of the position attribute should be inherited from the parent element.


Generates an absolutely positioned element that is positioned relative to the first parent element outside of static positioning. The position of the element is determined by the "left", "top", "right" and "bottom" Properties to be specified。


Generates a relatively positioned element that is positioned relative to its normal position. therefore,"left:20" will add a new element to the element's LEFT Location added 20 pixels。


Generate absolutely positioned elements, Positioning relative to the browser window。 The position of the element is determined by the "left", "top", "right" and "bottom" Properties to be specified。

In general, when an element's position attribute has a value of absolute or fixed, it is no longer bound by its parent element and is positioned based only on the values of left, top, right, and bottom to the page.

The float attribute, with four attribute values of left, right, none, and inherit.

happen to



Default. element does not float and will be displayed in the position it appears in the text.


Specifies that the value of the float attribute should be inherited from the parent element.


element floats to the left.


element floats to the right.

Details will not be said, unclear students can do a few small examples of their own hands-on practice, or to the W3School practice, where there is a wealth of web tutorials and some small examples can be practiced online.

float is both difficult and important here, and the reader is expected to be proficient.

z-index attribute.

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

These two images, In the first picture threediv ofz-index happen to separately:A<B<C; In the first picture threediv ofz-index happen to separately:A>B>C。

These are only the most basic knowledge of CSS + DIV layout, want to really eat through, but also need to continue to practice and appreciate the layout of some small skills. For example, the use of negative values for margin is a very practical tip, if you want to make the container fixed width centered display (assume the container width of 700px), you can use the relative positioning method for the container, left value of 50% of the page, and then set the margin-left for their own half of the width, so that the display effect is fixed width and centered, regardless of the resolution of the browser, as follows.

How to keep the bottommost footer (copyright registration section) always at the bottom when not enough content is displayed in the page can also be achieved by setting a negative value for margin.

Build up more, and I look forward to growing with you.

1、Blockchain pet Ether Cat to land in China most expensive cat worth 770000
2、Browser caching in a nutshell
3、Angry Information Technology Co
5、Linux Processes and Timed Tasks

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送









    Contact US

    Welcome to Intefrankly.

    Intefrankly is a platform that you can show your opnions related to IT technology, and communicates to the people who interested in IT and Artificial Intelligence area.