Springside Development Combat (III): Ramble on CSS and page layout

This essay is not specifically aimed at springside, but only for each programmer to see.

Still remember Hugo ridicule "the Promise" in the layout of the King's Palace "Circle Set Circle" Casino, also remember I just started to do web development, "table-Nested Table" page layout. In most programmers, may also use the table layout, the use of table layout of the great disadvantage is that when the page changes a little bit, it is possible to completely disrupt the appearance of the page, but also very unfavorable and art cooperation. Of course, many artists are also using tables to layout, they design the page in the graphics software, and then use the slicing tool to do everything, but it gives us the need to dynamically add content on the Web page of the programmer caused trouble. With the popularity of CSS today, we should have let the form do its job long ago.

There are many tutorials on the web that use div + CSS for layout, there are many defects, one is the layout of the CSS model is not clear, it is difficult to understand the relative positioning, floating and other concepts; second, although the "Table set table" to avoid the shortcomings, but brought the "div set div" shortcomings, excessive use of div tags Three is too much class, causing class disaster.

To use CSS correctly, the basic of CSS is not enough to understand. Since it is a ramble, I will only talk about four aspects here, and finally give the Xkland project as an example.

Block model in CSS

In the definition of CSS, some HTML tags by the browser as a block to display, such as Div, table, p, UL, and so on, we call it block elements, and some HTML tags are displayed in the browser in the text line, such as a, span, font, etc., we call the inline elements. Inline elements I'm not going to talk about it here, just talking about the model of the block element.

Each block element can be divided into the context, padding, boder and margin several parts, we often say that the width and height, refers only to the scope and height, padding represents the fill between the content and the border, the margin represents the white space outside the border, the following figure:

These parts can be specified through CSS, of course, CSS can also control the background, so we can use CSS to flexibly control the appearance of our pages.

Second, the document Flow model in CSS

All block elements are arranged in an HTML document in the order in which they appear in the document (except, of course, in the case of nesting), and each block will be on a separate line. The following figure: