Sing Xing's interpretation of css section 6 in 2014

Sing Xing's interpretation of css section 6 in 2014

In this section, we will talk about the layout. In fact, the layout itself is very simple, but it is not that simple to make a proper arrangement. Just like we write articles, it is very simple to write an article, however, it is very difficult to write a famous book. This requires us to have a solid foundation and a good understanding of literature. However, a journey of a thousand miles begins with a complete step. Let's start.

*************

1. Sometimes we will set an element display method. For example, when we make a navigation bar, we will use display: inline to make them inline styles.

2. Next, let's not talk about this display. Let's talk about the visibility attribute. It can be set to hidden, that is, it is not displayed, so the block area will be blank. A similar method is to use display: none. It is also set to not display, but its function is to make the element disappear, and the subsequent elements will automatically occupy its space.

3. we can use display: block to make its display a block-level element. It can be understood as a mandatory line feed, while display: inline is mandatory to keep the line feed and arrange it to the right.

4. changing the display type of an element depends on how the element is displayed and what type of element it is. For example, setting an inline element to display: block does not allow its nested block elements.

***************

1. For an HTML element, we can set its size by setting its width and height attributes, that is, its width and height.

2. There are some other attributes for setting the size, which are not frequently used, that is, not listed.

*****************

1. The first method of positioning is the default method. It is a top-down, left-to-right mode and the simplest mode.

2. the second is fixed positioning. Its position is fixed relative to the window position of the browser. Even if the window is rolled, it will not be moved. This can be used for such advertisements, the following is an example. The code in the HTML file is as follows:

    2014 X-star CSS teaching summer edition    
     
Xinxing, blog Park, unlimited warmth

Then I wrote the my.css file. Here we want to see that the position of the text remains unchanged with the scroll bar, we need to provide a certain size of the browser window:

body{width:400px;height: 900px;}p{position: fixed;top:30px;left: 50px;}

3. The above method is not compatible with browsers, which must be described below IE8! DOCTYPE is supported. The top here refers to the distance from the top of the browser to the top of the browser, and left refers to the distance from the right end to the right end of the browser.

4. relative positioning: here we need to clearly identify the relative "who". Here, relative positioning is relative to the first method, that is, positioning by default, it will make some modifications based on the default method. You can set left and other attributes. If left is set to-20px, it indicates that it moves 20 pixels left relative to the original position, it also needs to be assigned as relative in the postion attribute.

5. absolute positioning: it must specify the position as absolute. You can also set the left, top, or right attributes. If the element does not have a parent element, its position is relative to the entire browser window.

****************

1. This section describes the display and positioning modes to lay a foundation for the subsequent layout.

2. We will explain the layout issues in the next section.