Answer: Question about css + div layout on February 19,-04-5. Getting started with divcss Layout

Answer: Question about css + div layout on February 19,-04-5. Getting started with divcss Layout

The original question is red and the answer is black.

The first time a static Web page is laid out, many details need to be explored by yourself, and the following problems occur:

1. layout problem: a div is often squeezed out? Do one div layout in half?

Before the layout, we should lay a good framework to determine the height and width of each place and strive to be accurate to each pixel (whether or not it contains border pixels). However, the sketch on paper should be more accurate, practical drills are also required.

Answer:

(1) Positioning: absolute positioning is relative to parent div (which has been located), but it is a form without positioning; relative positioning is equivalent to moving its own default position; floating positioning is also equivalent to parent div; note that the current div adopts absolute positioning. When the next div adopts relative positioning, determine which parent div is? Have you located it?

(2) element positioning: If no position is located, left (does not work) and margin-left (Works) are different; if the position is located; left and margin-left are the same.

(3) Use the background color to distinguish different parts during layout, rather than border.

2. positioning problem: Why is div layout still messy when it is clearly located?

(Unknown) Why can I solve this problem by setting the value of margin-left/right to a negative number, but the display effect is still incorrect in other browsers?

A: An error occurred while locating the parent div;

3. Why cannot I locate the image in div Based on the theoretical value?

Is the Image Positioning Error or the reference div incorrect?

A: The div where the image is located must be located. If it is not located, left and margin-left have different functions. The div where the image is located is relatively different.

4. What are the problems between the internal margin and the external area?

It can be clearly defined. Why is it always ineffective in actual use? Where is the problem?

A: The train of thought is not clear and the positioning is wrong.

5. What is the text alignment and line spacing in div?

No problem with alignment. How can I adjust the line spacing? Is line-height used? How to adjust the spacing between words?

A: The line spacing is set by line-height, and determined by the numerical value.

6. What is the application of the ordered list in div?

The ordered list in div can be used as a horizontal and vertical menu bar and a border can be set, but how can we narrow down the points before it? How can I align the image and text when I insert an image into the serial number? Why is it messy?

A: It is best not to use an image as the serial number. Otherwise, the image will be as big as it is. (currently, I can only do this if I am not able to do anything ..)

In addition to using a separate div, why is a row automatically empty when I use the <span> label?

A: The test is correct now. I don't know where the error is. I haven't found it yet.

7. Why can't a static webpage be properly displayed in this browser and changed to another one?

Is it code error or browser compatibility?

A: either Locating errors or compatibility issues