CSS Layout Summary 1

Briefly

For CSS learning, layout and positioning can be said to make the most critical part, but also the most basic part of the layout and positioning in the study should be the system, to summarize it once again, if only hastily over again, directly started to do the demo, will encounter a lot of pits, instead of the outweigh the gains. So I write this blog, readers if they find the problem, hope to enlighten.

A box of models

Before you talk about layout and positioning, summarize the box model. Box model is the basis of layout positioning.
The box model consists of the following four parts

• Content Area
• Inner margin
• Border
• Outer margin

Note: The background is applied to areas that consist of content and padding, and borders. This is the light area in the diagram.
Code:

background-image: url(images/background.gif);  

In CSS, width and height refer to the widths and heights of the content area. Increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box.

Assume that there are 10-pixel margins and 5-pixel padding on each edge of a box. If you want this element box to reach 100 pixels, you need to set the width of the content to 70 pixels, such as:

#box {  width: 70px;  margin: 10px;  padding: 5px;}

Two block elements and inline elements

A stream is the method used by the browser to place HTML elements on a page, starting at the top of the HTML file and displaying the individual elements encountered from top to bottom along the element stream.
Each block element has a single row, or there is a line break between the block elements.
Inline elements are positioned next to each other horizontally, adapting to line-wrapping as the browser or content area size.

Overlay problems Side-by

When two inline elements are placed side-by, the elements have margins, and if the left element margin is 10px and the right element margin is 20px, there is a 30px of space between the two elements.

When two block elements are placed up and down the browser, it folds their common margins and the folded margin height is the maximum margin height.

Floating elements

Specifies an identity that specifies the width. Note that all floating elements must have a width.

    #id{            width: 200px;         float: right;   }

The clear property solves the problem of overlapping floating elements.

Three-layout fluid layout

With DIV implementations, the content area expands to the entire browser's window. The main content can be fixed, the side bar floating, can fill the entire interface.

Freeze layout

As the name implies, the content area will not be adaptive browser window, regardless of browser window size and shape changes, content area size is unchanged, if the window is smaller than the size of the content area, then a portion of the content will not be seen.

    #content {             width：200px;             padding-top: 5px;             padding-bottom: 5px;             background-color: #675747;   }  

Gel layout

Gel between the fluid and freezing, for the content area to add div, the properties are as follows, can be implemented in the center, the content will not be as large as the flow layout of the entire browser window, determined the width, pull the browser interface, content area will be centered, left and right side will appear blank

    width: 800px;    margin-left: auto;    margin-right: auto;

CSS Table display

With table layout and other layouts have advantages and disadvantages, table is used for data hosting, or for simple page layout, but the code is redundant, not easy to adjust the structure, not easily change the layout. CSS does not control the table very well. It also has a big impact on performance. So the layout is best not table, there are many rows and columns of data need to be displayed when the container can be used. The relevant CSS code is as follows:

    #Container {            display:   table;            border-spacing:  10px      /*为单元格增加10px的边框间距*/    }    #tableRow {            display:  table-row;        /*指定行*/    }    #main {            display:  table-cell;              vertical-align: top;     /*确保表格两个单元格中的所有内容相对于单元格上边对其(而不是中间或下边对齐)*/    }    #sidebar {            display:  table-cell;             vertical-align:  top;    }

CSS Layout Summary 1