CSS (ii) Parsing CSS Box

In other words, there are some inexplicable excitement about blogging ...

these days have been busy time to catch the beef brisket video, late CSS box, please understand.     

CSS box, at first it sounded a bit tall on the bright. Later on, it was easy to understand what was found. It 's easy to be functional, but it's not so easy to really do a good job of skilled use.

As a core part of Div, it can be said that the majority of the foreground, which is relatively not easy to do is mainly "floating" and "relative/absolute positioning" problem.

Let's say what the CSS box is. Please look.

Let's first think of a real-life paper box with a light bulb in the box.

First of all, the box itself must have a thickness, that is border, light bulb fragile, and the box has a protective layer to cushion the role, the protective layer is padding; When we ship this box, we should try to be as different as possible to other fragile products or to produce strong pressure next to each other, to have a separate space, namely margin Our light bulb is the content of the box.

Seeing this, everyone must have understood what the box was. So how does it work in Web page design? What is the relationship to CSS? Why is it produced and widely used?

In fact, when developing Web pages with Css+div, the pictures, lines/paragraphs, buttons, and so on on the page are actually grouped together in a box, and in the code, they exist in the div block. CSS is the "controller" that controls how these boxes are placed, where they are placed, and in what form. That is, the separation of structure and performance is realized.

It is clearly more flexible and easy to manipulate than traditional forms and tables that are nested to position them to compose web content.

Brief introduction to Floating and positioning:

Floating: Floating is primarily a help object to align in a Web page. For example, a block level element is small, but a row, we want to let him move to the top of the line, then it will be used floating.

It is divided into none, left/right alignment, box nested sets and many other situations. For more information, the next blog will explain to you.

Positioning: The positioning is divided into static and dynamic two categories, static (absolute positioning) is "contribution", that is, it is removed to allow others to replace their own location, while its location is reference to the parent, reflected in the code is the body. Dynamic (relative positioning) is "selfish", and it does not allow others to replace their original position when it is removed; (After a detailed description ~ ~ ~)

Summary: CSS box We can break it down into two ways: one is its implementation principle, the other is its control application. The principle is embodied in the Css+div design thought, the application manifests in the Web typesetting and the design.