Thoroughly understand the CSS box mode three

Last Update:2017-02-28 Source: Internet

Author: User

Tags comments modify relative window xmlns

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Css

Thoroughly understand the CSS Box Mode III (floating performance and clear Readme)

1. Thoroughly understand the CSS box mode one (div typesetting quick Start)
2. Thoroughly understand the CSS Box mode II (navigation bar instance)
3. Thoroughly understand the CSS box mode four (absolute positioning and relative positioning)

One, below please see float's wonderful performance, welcome.
Hello, I am float, welcome to visit the CSS family, in the CSS family, in today's CSS typesetting popular era, I can play an important role oh. Because my job is very useful to web designers, just as important as the previous align help you locate page elements, but I seem to be much more powerful than align. Next I will show you the scene of my skills, watch carefully oh. Of course, I may not be able to all of my skills to give you a demonstration, because some of the skills I may not remember it, then please those who know me better to help me add it, such as moderator and so on.

First of all, my main job is to help align to like in the Web page, once I issue a float:left or Float:right command, the image I float will move left or right until it encounters a border (border), fills (padding), boundaries (margin Or the edge of another block object, and of course there are some seemingly special situations, such as when a negative boundary (margin) is set by the element I float. I can also make text flow around the right image that I float, which is also my feature. Also note that it is best to set the floating object width, otherwise there will be some unexpected trouble. I have two main floating types, they are float:left and float:right, of course, I have a function is float:none, but float:none less use, this is my default value, sometimes very useful, I will speak. Now I'm starting to perform. My stage can be IE (Internet Explorer), or FF (Firefox), but some skills I must be in the standard stage, such as FF in order to do, please pay attention to my instructions, or you use IE is not to see the effect.

1. I am quiet (when my properties are not set), that is: Float:none, or the style does not write this item, the elements in the Web page will be arranged according to their own appearance, is generally the side of the line, the first appeared in front, the following run box is Div first appear, p after the appearance, So P is in the back of the Div, notice that there's a lot of space on the right side of the Div, but the P text doesn't go with it on the right. Look:

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

2. I issued a float:left command to the box, at which point the box floated to the left, although it seems my position and the above example does not change, but at this time the text followed me can be wrapped around the right side of the floating box, look at the following:

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Haha, look how many of my performances are starting to feel a bit annoying, so simple and boring, then give you perform a few special, I hope you are not IE admirers, because the following effect you use IE is not to see the effect, please use a standard browser like FF to run the Code box or test it.

4. When a floating object has a negative boundary, the floating object may float outside the parent object, which is somewhat like the effect of absolute positioning, but unlike absolute positioning, it can also affect the text flow in its place, see the following code effect in standard browser FF:

<TEXTAREA class= "FM" id= "Code3" rows= "" cols= "" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title> floating object has a negative boundary" [Please view]</title><style type= "Text/css" ></style></pead><body><div id= "box" > <div id= "Box2" >margin-top:-15px</div > Upper right Small box border is margin:-10px 10px 0px 0px;,folat:right, this effect is also OK, this is not to use relative, or absolute positioning to do, some text still has wrapping effect. If in the above small box loses the title, in this big box inside loses the content, this kind of page layout effect also can, everybody can extrapolate, makes the other similar effect to come. </div></body></ptml> </textarea>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

5. If a wider child box has a floating property in a narrower parent box, the child box will not affect the width of the parent box, the child box beyond the parent box will be more to the outside of the parent box, but the more outside the parent box will not cause the movement of the outside text flow, but will directly cover the outside text, See the following code effects in standard browser FF:

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

6. If the parent box is not set to a height or height is automatic, and its child box set floating, and the height of the parent box, in the standard browser, the parent box height is not adaptive height, but this highly adaptive is often what we need, how to make highly adaptive, the common way is in the parent, Add the following code behind the floating sub box: <div style= "Clear:both" ></div> clear out the float of the small box. Please do your own code in the comments section to eliminate comments to see the effect, there is no adaptive situation, please use the standard browser FF preview and test the code effect:

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

7. The following example is important to illustrate the many features of floating elements, you run the Code box and then manually adjust the browser window size, to see what changes in the layout, I will explain the common problems and skills.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title> understand some of the characteristics of floating </title><style type=" text/css "></style></pead><body><div class= "box" ></div> what is the CSS box mode? Why do you call it a box? First, let's talk about the property names we hear in Web design: content, padding (padding), Borders (border), boundaries (margin), <div class= "box" ></div> CSS box patterns all have these attributes. These attributes we can transfer to our daily life in the box (box) to understand that the daily life of the box also has these properties, so call it box mode. The content is the contents of the box, and the filling is afraid of the things in the box (valuable) damaged and added foam or other seismic accessories; <div class= "box" ></div> border is the box itself. As for the border, the box can not be all piled together, to leave a certain gap to maintain ventilation, but also to facilitate the removal of it. In web design, content often refers to words, pictures and other elements, but can also be small box (div nesting), and in real life box is different, <diV class= "box" ></div> real life things generally can not be larger than the box, otherwise the box will be broken, and the CSS box is elastic, inside the box itself to the maximum size, but it will not damage. Padding has only width attributes, can be understood as the life of the box in the seismic material thickness, and the border has the size and color of the points, we can understand the thickness of the box in life and the box is made of what color material, the border is that the box and other things to retain how much distance. In real life, suppose we in a square, the different size and color of the box, with a certain gap and order, and finally look down from the square, see the graphics and structure like we want to do the page layout design, the following figure. <div class= "box" ></div> what is the CSS box mode? Why do you call it a box? First, let's talk about the property names we hear in Web design: content, padding (padding), Borders (border), boundaries (margin), <div class= "box" ></div> CSS box patterns all have these attributes. These attributes we can transfer to our daily life in the box (box) to understand that the daily life of the box also has these properties, so call it box mode. The content is the contents of the box, and the filling is afraid of the things in the box (valuable) damaged and added foam or other seismic accessories; <div class= "box" ></div> border is the box itself. As for the border, the box can not be all piled together, to leave a certain gap to maintain ventilation, but also to facilitate the removal of it. In web design, content often refers to words, pictures and other elements, but can also be small box (div nested), and the real life box is different, <div class= "box" ></div> real life things generally can not be larger than the box, or the box will be broken , and the CSS box is resilient, the inside is bigger than the box itself, but it won't be damaged. Padding has only width attributes, can be understood as the life of the box in the seismic material thickness, and the border has the size and color of the points, we can understand the thickness of the box in life and the box is made of what color material, the border is that the box and other things to retain how much distance. In real life, suppose we in a square, the different size and color of the box, with a certain gap and order, and finally look down from the square, see the graphics and structure like we want to do the page layout design, the following figure. <div class= "box" ></diV><div style= "Clear:both" ></div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

(1) In a box floating around like float, its left and right edges do not necessarily depend on the parent object's inner filler or border, the top 9 boxes are floating on the left, but in the case of maximizing the window, only the first box and the left edge of the last box on the left side of the parent box.
(2) There is no overlap between floating objects. The above is about floating to like the outside of the situation, then a floating box will be more to another floating object, in essence they will not overlap, that is, the use of negative boundaries to look like overlapping.
(3) The same floating direction side-by-side of the same as in a row, you can automatically wrap. When you browse the following code, change the browser window, you will see what I said.
(4) The position of the floating box appearing in this flow will affect its horizontal floating position, like the following box effect, those boxes are not closely followed together, there is text between, so the result is that all the boxes are not the same straight line appear, and become a certain gradient. If the text flow block between two boxes is greater than the height of the front floating element, the object immediately following the same floating direction will be automatically wrapped. In the example below, if you resize the browser window to be as small as possible, all boxes may appear on the left side of the parent box, because shrinking the browser also increases the height of the text stream to the right of the box.

Visible do not look down on me floating, skilled master I will give you typesetting brings a lot of unexpected effects oh.

8. Another note, at the beginning I did not say to the floating object to set a width, otherwise there will be unexpected results, that is not set width and no content of the object after floating width will be nearly 0. Please revise the following code. I comment the front width (can only delete one), the test to see the effect of what is going on.

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Second, I would like to ask my good friend clear out to tell you about its story, please.
Hello, everyone. I am clear, I am very honored to see so many people to join, although my role in the web design work is often ignored, but I also have some role is no one can replace, I will say a few of my practical use to stimulate interest in me:
1. If you want a text stream on both sides can appear floating on the image, you can use Clear:none, look at the following effect, the blue background paragraph on both sides of the box is floating oh.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title> allows floating objects on both sides of the object to exist </title><style type=" Text/css "></style></pead><body><div class= "Box1" ></div><p> if you want to try a page layout without a table, Instead of using CSS to format your Web pages, that is, often listen to use div to organize your web page structure, or you want to learn the standard design of Web pages, or to say that your boss to change the traditional form of table layout, improve the competitiveness of enterprises, then you must be exposed to a knowledge point is the CSS box mode, This is the core of Div typesetting, the traditional table layout is through the size of tables and tables nested to locate the content of the layout page, instead of CSS layout, is defined by the size of the CSS box and box nested to arrange the page. Because the page code that is formatted in this way is simplifiedClean, easy to update, can be compatible with more browsers, such as PDA equipment can also be normal browsing, so give up their favorite table layout is also worthwhile, more importantly, the advantages of CSS typesetting page is far more than these, I do not say here, I can go to find relevant information. Understand the CSS box model what is the CSS box pattern? Why do you call it a box? Let's start with the attribute names we often hear in web design: content, padding (padding), Borders (border), boundaries (margin), and CSS box patterns. CSS box mode </p><div class= "Box2" ></div><p id= "Clearf" > These attributes we can move it to the box (box) in our daily life to understand, The boxes seen in daily life also have these properties, so call it box mode. So the contents are the things in the box; The filling is afraid of the contents of the box (valuable) damage and added foam or other seismic accessories; The border is the box itself; As for the border, the box can not be all piled together, to leave a certain gap to maintain ventilation, but also for easy removal. In web design, the content often refers to words, pictures and other elements, but can also be a small box (div nesting), and real life in the box is different, real life things generally can not be larger than the box, otherwise the box will be propped up bad, and the CSS box is elastic, inside of the box itself up to the maximum size, But it's not going to be damaged. Padding has only width attributes, can be understood as the life of the box in the seismic material thickness, and the border has the size and color of the points, we can understand the thickness of the box in life and the box is made of what color material, the border is that the box and other things to retain how much distance. In real life, suppose we in a square, the different size and color of the box, with a certain gap and order, and finally look down from the square, see the graphics and structure like we want to do the page layout design, the following figure. </p></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

2. If you're going to have a footer block for a Web page, such as <div id= "Footer" ></div>, when you're designing a Web page, you want to keep it in front of you, regardless of how you float it in front of you and don't want the heel to go up. And the line is independent display, then give this footer block style add a clear:both bar.
3. I can also quickly erase different pairs of floats that have floating properties in the Web page, if there are a lot of words, my role can be more effective, of course, you can also use a style to delete the floating style, but I am sure this is not my convenience, the following effect, no clear floating before the float is horizontal, But after clearing it into a vertical row (this example is just to illustrate the problem, no matter how practical it is), please delete my comment section for comparison.

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

OK, my introduction is over, are you satisfied? What is not satisfactory can be put forward oh. Your opinion is like a mirror, it can let me very clearly find my shortcomings, and then improve it.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Thoroughly understand the CSS box mode three

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Thoroughly understand the CSS box mode three

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support