CSS (ii) Parsing CSS Box

Saying. There are some inexplicable excitement about blogging ...

These days have been crowded time busy catching beef brisket video, late CSS box. Please understand.     

CSS box, the beginning sounds a bit tall on the bright.

Later learned, found that the facts are very easy to understand. It's very handy in terms of functionality, but it's not so easy to really do a good job of skilled use.

It serves as a core part of the Div. To be able to say that the majority of the front desk, among the less easy to do is mainly "floating" and "relative/absolute positioning" problem.

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

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvdtaxmde5mti0mw==/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/center ">

Let's first think of a real-life carton. The box is filled with light bulbs.

First of all. The box itself must have a thickness, that is, the border. The light bulb is fragile, and the box has a protective layer to cushion the effect, the protective layer is padding. When we ship this box. Try to be as close to other fragile items as possible or to produce strong pressure. To have an isolation space. That is, our light bulb is the content of the box.

Seeing this, everyone must have made clear 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 in fact a combination of boxes, which exist in the div block in the code. CSS is the "controller" that controls how these boxes are placed, where they are placed, and in what form. That 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.

Such as. A block-level element is very small. And we want him to move to the top of the line. The float will be used.

It is divided into none, left/right aligned. Boxes nested in a variety of 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, when it is removed, it agrees to replace its position, and at the same time its position is based on the parent. Reflected in the code is the body.

Dynamic (relative positioning) is "selfish", and it does not agree with others to replace their original position after removal. It takes its own reference.

(After a detailed description ~ ~ ~)

Summary: CSS box We can break it down into two aspects: one is its implementation principle, and the other is its control application. The principle is now css+div design ideas, the application of today's Web layout and design.

CSS (ii) Parsing CSS Box