CSS Box model

We browse the Web every day, log on to a variety of sites, but have not found, despite the number of pages, but each page is a neat list of information, page Setup page is very reasonable. How did this happen? Does every webpage need a lot of manpower to manage it? This is what this blog will discuss ----CSS box model.

         This is strange, we usually see the plan is reasonable, neatly arranged, often seeExceland so on, it has to do with the table, how does this use the box? UseExcelyou can do it, but you've seen it.WordDo you use the form? Isn't it reasonable? In fact, they all use a similar form of technology, justExcelis a visible table,Wordyou can't see the form. What we're talking about here is an invisible box .CSS----box model.

Let's take a look at this box model:

        So what does this box show? How do you use the box model in particular? In theWebForm Design, we can treat a row of data or a piece of data (a rectangle) as a whole, and then treat the block as a box. Borderis the frame of the box;marginis the spacing between the boxes;paddingis the distance between the box border and the contents of the box;widthand theHeightis the width and height of the contents of the box;contentis the specific content. With such a detailed division, we are designingWebinterface is handy.

           One line of content we can choose a simple span label to handle, if it is more than the line of complex content you need to use the div block to deal with, this is the famous css +div css In the file, whichever is behind. Boxes can also be nested, so that the interface design is more sophisticated.

Nesting of box nesting cases

from the nested box model above, the box model and Excel The table is still different. There is space between the box models, and There is no space between the Excel tables, and the box borders are free to set.

The use of box models allows us to design conveniently Web interface, but due to browser compatibility issues, the same CSS boxes in different browsers appear different interface, also we should pay attention to.

CSS Box model