Third day of CSS + Div

I reviewed the basic CSS knowledge the day before yesterday and learned some layout knowledge yesterday. Today is the third day. I started to create a CSS + Div layout page by myself. The process of making the first page of the camel was very depressing, with countless errors in the middle. However, it is these errors that make camels see different theoretical knowledge and practices. So, camels summed up their mistakes. Although they are naive, they are always a process of growth ~ 0 ~, It is worth remembering.

First, let's look at the three CSS

# Left {float: left;

Background-color: # cccccc;
Width: 100px;
Height: 100px;
Text-align: center;
Line-Height: 1.8em;
Border-top: 3px groove # ff6600;
Border-left: # ff6600 dashed 3px;
Border-Right: # ff6600 3px solid;
Border-bottom: # ff6600 3px solid;

/* Margin: 20px, 20px, 20px, 20px ;*/
/* Word-break: Break-all ;*/
/* Padding: 10px, 10px, 10px, 10px ;*/
}

# Center {float: left;
Width: 500px;
Background-color: # ff0000;
Border-top: dashed 4px # ff6600;
Border-left: Double 3px # ff6600;
Border-Right: solid 3px # ff6600;
Border-bottom: solid 3px # ff6600;
Text-align: left;
}

# Right {float: right;
Width: 200px;
Background-color: # ff0000;
Border-top: dashed 4px # ff6600;
Border-left: Double 3px # ff6600;
Border-Right: solid 3px # ff6600;
Border-bottom: solid 3px # ff6600;
Text-align: left;
}

# Box {
Border-top: # cccccc 2px solid;
Border-Right: # cccccc 2px solid;
Border-bottom: # cccccc 2px solid;
Border-left: # cccccc 2px solid;
Width: 100%;
}

# Fix {
Width: 100%;
Text-align: center;
}

The front-end call code is like this.

<Div id = "sample"> jfskldjg </div>
<Div id = "box">
<Div id = "fix"> This example shows a relatively positioned layer </div>
<Div id = "right"> test test test </div>
<Div id = "Left"> faintshit </div>
<Div id = "center"> </div>
</Div>

If I change the left of # center float: Left; to right, the result will become

Yes! Float is a legend of relative positioning. Its Parameter: Right | left | none. Needless to say, it does not need to be located. Rigoal and left are only for the layer above it. This is why the above situation occurs.

Of course, position is also involved in CSS positioning. If it is graphic design, float is generally used. The first Div will use position to locate the initial position, because when float is used, we do not need to use left to define the margin on the left side of the page rejection. When position is used, left is used for each layer, top to define the margin between the DIV and the left side and the top side of the page.

If the design is not limited to a plane, that is to say, when we need a three-dimensional structure, we need to use position absolute positioning.

In this case, the width: 500px of the # center is changed to width: 900px, because we didn't set the Z-index and used relative positioning, therefore, the relationship between layers is not the same as that between tables. The relationship between layers is independent.