Hello everyone, I am Xiao Qiang teacher, today to explain a little bit of knowledge ha
I don't know what to compare.
I can't see it, it's beautiful!
There are dowager and beauty in wood.
Oh, a lot of things are like this, good things only compare to feel good.
We know there are three patterns in our web page layout. Normal flows normal flow (standard flow, regular flow) float (float) and positioning (position)
Standard flow
The standard stream is actually the meaning of the order in which the label elements in a Web page are arranged normally, such as a block-level element that is exclusive to one line, and the elements in the row are arranged in order;
This layout, we still prefer, because he is the default layout mode, stability, floating and positioning after all is off the mark. Will bring a lot of inconvenience.
Therefore, some places we can use the standard flow or can avoid the use of floating and positioning, we call the avoidance of calibration .
Here are two simple examples:
1. Margin-left:auto;
If you want to do the following example:
Want a small blue box to the right of the red box. In addition to floating and positioning
In fact, we can use Margin-left:auto to move the small blue squares to the right.
The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title > Untitled Document < / Title >
<style type="text/css">
.father{width:350px;height:45px; border:1px solid red; margin:100px auto;}
.son{width:15px;height:15px; background-color:#00F; margin-left:auto; margin-top:15px; margin-right:5px;}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
Just fine. Margin left: the outer margin on the left side of auto is filled automatically, which pushes the box to the right.
At the same time, you also understand why we used to write margin: 0 Auto; why can we make the block level width align with the box center. Separately, it is margin - left: Auto;
Margin right: Auto; of course, the upper and lower margin is 0; the left side is automatically filled, and the right side is also automatically filled. The box ensures that the left side is automatically filled, and the right side is also automatically filled, which is in the middle.
Of course, this element can only be block level and no other elements can be used on the left. This is the limit of use. But if we meet this situation, we know that there is such a way of writing.
2. vertical-align：middle;
Let's see how to do the following cases?
Two uses of CSS to avoid unmarshalling - two uses of the present perfect
Pay attention to the Red Square, it must have the size, because the background picture should be filled in later.
Because there's text behind it. On the same line, you may want to float or locate.
In fact, it is more appropriate for us to use inline block + vertical align: middle, because there is no standard flow for de labeling.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title > Untitled Document < / Title >
<style type="text/css">
*{margin:0;padding:0}
h2{width:240px; margin:100px auto; border:1px solid red; font-size:14px; line-height:35px;}
H2 s{
display:inline-block;
Width:15px;
Height:15px;
background-color:#930;
vertical-align:middle;
margin:-3px 5px 0;
}
</style>
</head>
<body>
<h2><s> My title</h2>
</body>
</html>
Internal block + vertical align are two good friends. They are very convenient to use together. At the same time, vertical align is essentially an independent individual, and there is no direct relationship with the following line level elements. You can move the red box up and down at will without causing the text to move.
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
