Brief description:
Display: block inline elements define height and width (converted to block elements)
Float: The left block element is located in the same row.
The Firefox area is floating, and float: left is added to the 2nd block elements.
IE6 BUG (the left distance from the browser is not 20 pixels defined in CSS code, but 40 pixels), display: inline
How can we make the red area horizontally positioned in the middle of the browser, regardless of the size of the browser window, the size of the display resolution. Margin: 0 auto;
<! 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 = gb2312"/>
<Title> CSS Learning Network --- "can accommodate inline and other block elements" </title>
<Style type = "text/css">
<! --
# Div1 {width: 300px; height: 300px; background: #900 ;}
# Div2 {width: 100px; height: 100px; background: #090 ;}
# Div3 {width: 100px; height: 100px; background: #009 ;}
A {color: # fff; background: # F93 ;}
-->
</Style>
</Head>
<Body>
<Div id = "div1">
<Div id = "div2"> </div>
<Div id = "div3"> </div>
<A href = "#"> can accommodate inline and other block elements </a>
<A href = "#"> Love CSS </a>
</Div>
<Body>
</Body>
</Html>
Effect:
==================================
Is there any way to make the defined width and height work on the inline element? The answer is: Of course. Because things are not absolutely true in CSS, because CSS has two elements: inline elements and block elements,
The width and height only work for block elements, but not for inline elements. If we convert an inline element into a block element, it does not have the features of block elements, of course, width and height work. If you can think of this idea, it proves that your brain is very active now. At this time, we just need to add a property display to the corresponding inline element: block.
a{color:#fff; background:#F93;width:100px;height:50px; display:block;}
Why are two 'A' not in the same row? That's because both of these inline elements are converted to block elements. Since they are successfully converted to block elements, it should have one of the most prominent features of block elements. Other elements cannot be the same as other elements.
One row, so these two a vertical lines ~ Is there any way to keep them in the same line? Of course.
[Example]. Requirements:
1) two squares, one red #900, one blue;
2) the width and height of the Red Square are both 200 pixels, the width of the blue square is 300 pixels, and the height is 200 pixels;
3) The upper margin (margin-top) and left margin (margin-left) of the Red Square blue are both 20 pixels;
It should be noted that although the width of the Red Square is not 100%, the blue is not in the same line as the red one, which means the block element is more "overbearing, (even if the block element is not 100% in width, it does not allow it
His element is in the same line with him.) in order to eliminate this "hegemony" and put the red and blue squares in one line, we need to use our powerful Float! You only need to add "float: left;" in the CSS of the Red Square.
In IE6, we can see that the blue square is indeed behind the Red Square and is in a row, but in FireFox, the result is as follows:
At this time, you should note that if the area above FF floats, the area behind it is likely to overlap with the area above and be misplaced. How can we solve this problem and solve the problem of browser compatibility? It is easy to add "Float: left;" to the CSS code of the blue square. The problem is solved, add a try to see if the blue square in FF is in a line with the Red Square ~ Here, we should understand the role of Float, which is a powerful tool to eliminate block element "hegemony! During page layout, it is sometimes necessary to eliminate block element hegemony before layout is good,
As you may notice, in IE6, the distance between the Red Square and the left of the browser is not 20 pixels defined in CSS code, but 40 pixels, for example:
In fact, this is a BUG in IE6 (double margin BUG in IE6). This BUG only appears if the following three conditions are met:
1) to be a block element;
2) float on the left;
3) There must be a left margin (margin-left );
It is easy to solve this BUG. You only need to add the corresponding block elements to the CSS tree.
"Display: inline;", the Code is as follows:
#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}
========================================================== ========
Make the Red Area 20 pixels away from the top and left of the browser
Margin-top: 20px;
Margin-left: 20px;
However, we can simplify the above writing
Margin: 20px 0 0 20px;
The numerical order is: Top right bottom left. Margin: 20px 0; is equivalent to margin: 20px 0 20px 0.
Then we will extend the question, how can we make the red area horizontally positioned in the middle of the browser, regardless of the browser window
Port size, display resolution size.
margin:0 auto;
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
