2014 Sinsing interpretation of CSS section sixth

This section we will talk about layout, in fact, layout itself is particularly simple, but to reasonable cloth good Bureau is not so simple, as we write articles, write an article is very simple, but to write a masterpiece is very difficult, this needs our solid foundation and the understanding of literature, but, the beginning of a step, we begin.

Display Mode *************

1. Sometimes we set the display of an element, such as when we are doing the navigation bar, we use display:inline to make them inline styles.

2. The following does not say this display, first say the visibility property, it can be set to hidden, that is not displayed, then the Block area will show a blank. A similar approach is to use Display:none, which is also set to not display, but it is to let the element disappear, the subsequent elements will automatically occupy its space.

3. We can use Display:block to make its display a block-level element, which can be interpreted as a mandatory line break, while Display:inline is mandatory so that it is not wrapped and aligned to the right.

4. Change the display type of the element to see how the element is displayed, see what kind of element it is, such as an inline element set to Display:block is not allowed to have its inner nested block element.

Size ***************

1. For an HTML element, we can set its size by setting its Width property and height property, that is, its widths and heights.

2. There are other settings for the size of the properties, the feeling is not very common, that is not listed.

Positioning *****************

1. The first way of positioning is the default way, it is a top-down, left-to-right mode, is also the simplest mode.

2. The second is fixed positioning, its position relative to the browser window position is fixed, even if the window scrolling, it will not move, this can be used to do the kind of advertising bar, we do an example below, the first is the HTML file to write code as follows:

 " stylesheet  "  type= " text/css  "  Href= " my.css  "  >
Then write the My.css file, here we want to see with the scroll bar scrolling, the position of the text is unchanged, we need to give the browser window a certain size:
Body{width:400px;Height:900px;}P{position:fixed;Top:30px; Left:50px;}
3. The above approach to browser compatibility is not good, in IE8 below need to describe! DOCTYPE, where top refers to the distance above the top of the browser, left refers to the distance from its right end to the right end of the browser.
4. Relative positioning: Here need to clear the relative "who" positioning, where the relative positioning is relative to the first way of positioning, that is, the default way of positioning, it will be in the default mode based on some modifications, you can set left and other properties, if set left for -20px, It means that it moves 20 pixels to the left relative to the original position, and it needs to be assigned a value of relative in the Postion property.
5. Absolute positioning: It needs to specify position as absolute, or you can set properties such as left and top or right, if the element does not have a parent element, its position is relative to the entire browser window.
Summary ****************
1. This section explains the display mode and positioning method, which lays a foundation for the subsequent layout.
2. Our next section will explain the layout aspects of the problem.
2014 Sinsing interpretation of CSS section sixth