The core content of css: Standard stream, box model, floating, and positioning (you can say that you cannot understand these concepts to make a proper webpage)
1. Block-level elements: for example, <div> </div>
2. In-row elements: for example, <span> </span>
The differences between block-level elements and intra-row elements are as follows:
You can use CSS settings to convert row elements into block-level elements:
Standard stream: the label arrangement.
<Div class = "style2"> my future is not a dream </div>
<Span id = "st" class = "style1"> Topic 1 </span>
<Span class = "style2"> Column 2 </span>
<Br/>
<Span class = "guaiji style3"> sunshine boys </span>
<Span class = "style3"> column 3 </span>
The above is a label arrangement, and the following is the webpage content presentation, which is presented in the label arrangement.
This is our understanding of the standard stream (like the flow of water, appear before the label content, and appear behind the label content)
Box Model:
Set the border in the CSS style file as follows:
. Style1,. style2,. style3
{
Background-color: # FAFEB1;
Border-width: 2px;
Border-color: Blue;
Border-style: solid;
}
. Guaiji
{
Display: block;
}
The preceding settings can be abbreviated as: border: 2px blue solid; the running effect is the same.
Set the padding as follows:
. Style1,. style2,. style3
{
Background-color: # FAFEB1;
Border-width: 2px;
Border-color: Blue;
Border-style: solid;
Padding: 5px 0px 5px 10px;
}
. Guaiji
{
Display: block;
}
The above uneven border line is the effect of converting in-row elements into block-level elements.
Set the margin below
. Style1,. style2,. style3
{
Background-color: # FAFEB1;
Border-width: 2px;
Border-color: Blue;
Border-style: solid;
Padding: 5px 0px 5px 10px;
Margin: 4px;
}
. Guaiji
{
Display: block;
}
It should be noted that the row element does not work for certain style settings, such as: margin
The following content settings:
. Style1,. style2,. style3
{
Background-color: # FAFEB1;
Border-width: 2px;
Border-color: Blue;
Border-style: solid;
Padding: 5px 0px 5px 10px;
Margin: 5px;
Width: 200px;
Height: 70px;
}
. Guaiji
{
Display: block;
}
The page effect is as follows:
The above finds that the in-Row Element does not work. It further indicates that the in-row style is not supported by some styles.
Floating: Set float: left; that is, place the following box on the left edge of the above flow box
. Style1,. style2,. style3
{
Background-color: # FAFEB1;
Border-width: 2px;
Border-color: Blue;
Border-style: solid;
Padding: 5px 0px 5px 10px;
Margin: 5px;
Width: 200px;
Height: 40px;
Line-height: 40px;
Vertical-align: middle;
Float: left;
}
. Guaiji
{
Display: block;
}
The page effect is as follows:
After floating is set, the content is arranged as a non-standard stream
If you do not want to float style3 left, you can clear the float:
. Style3
{
Color: #00 bbdd;
Clear: left;
}
The effect is as follows:
Positioning: The next section is relative positioning, with the offset top: 50px; (offset relative to the original position)
. Style2
{
Color: # ff0000;
Position: relative;
Top: 50px;
}
The effect is as follows:
Change to absolute positioning:
. Style1
{
Color: # 0000ff;
Position: absolute;
Top: 70px;
}
The effect is as follows:
Absolute positioning is based on the parent tag of the tag. If there is no block-level element tag outside of the tag, the parent tag is <body> </body>.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
