CSS box model, css box

CSS box model, css box

We browse webpages and log on to various websites every day, but have we found that even though the number of webpages is numerous, every webpage is neatly listed and the page setting page is very reasonable. How is this done? Does every webpage require a large number of people to manage it? This is what this blog will discuss-the CSS box model.

This is strange. What we usually see is reasonable planning, neatly arranged, and frequently seen Excel, which is also related to tables. How can we use the box? Excel can do this, but have you ever seen Word use tables? Isn't it reasonable? In fact, they all use table-like technologies, but Excel is a visible table, and Word tables are invisible to you. Here we also discuss an invisible box CSS-box model.

Let's take a look at the box model:

So what does this box mean? How to use this box model? In web form design, we can regard a row of data or a piece of (rectangle) data as a whole, and then treat this block as a box for processing. Border is the border of the box; margin is the gap between the boxes; padding is the distance between the box border and the content in the box; width and height are the width and height of the content of the box; content is the specific content. With such a detailed division, we can easily design the web interface.

We can use a simple span tag to process a line of content. If there are multiple lines of complex content, we need to use the div block for processing. This is the famous CSS + div. Of course, a box cannot solve all the interface problems, so we need multiple boxes. Multiple boxes can be in a parallel relationship, that is, two or more boxes are used together to complete the creation of an interface. If two boxes are used to complete a function, refer to the following in the css file. Boxes can also be nested, so the interface design is more refined.

Nested box nesting

From the nested box model above, there are still differences between the box model and the Excel table. There can be spacing between box models, while there is no spacing between excel tables, and the box border can also be set freely.

The use of the box model makes it easy to design the web interface. However, due to the compatibility problem of the browser, we should pay attention to the fact that the same CSS box appears different interfaces in different browsers.

Whether the height and width of the box in the css box model contain margin

The second is correct.

~
Width: 628px; height: 24px;
Solid line is the box size, including border-width padding width/height
Margin is the margin of the box.



Whether the height and width of the box in the css box model contain margin

The second is correct.

~
Width: 628px; height: 24px;
Solid line is the box size, including border-width padding width/height
Margin is the margin of the box.