DIV + CSS standardized webpage layout (2) floating layout, divcss

DIV + CSS standardized webpage layout (2) floating layout, divcss

 

Box Model and floating Layout

When talking about the box model, experienced friends must be familiar with it.Content, padding, border, and border);

These attributes can be transferred to the boxes in our daily life for understanding. The boxes we see in our daily life are a kind of boxes that can hold things. They also have these attributes, so it is called the box mode.

First:

Clearly shows the specific expression style of the box model; margin + border + padding + content;

Since the box model is called the box model ~ So we can compare it to an LCD screen Packaging Box (the landlord just bought one, so I used it as a metaphor. We all know that padding can be a lot of things during express delivery) when we split the parcel, the display screen inside was the content and the bubble? It is the shell outside the padding (padding) that is (border), and then the distance between the box and other boxes (margin), which forms the box model in our css;

The box model in css has many forms:Block, inline, and inline-block. Setting css display can change the expression of the box.

I personally think css can be understood as follows: it defines the packaging style of the box, the position of the box, the length, width, height of the box, etc. The browser is like a house, waiting for people to fill it with boxes;

 

Next, let's give a brief introduction.Content, padding, border, and border)The specific manifestation in css and the alternative attributes of the seemingly bugs they carry.

1. content)

　　The content includes text, block boxes, images, and box models of content boxes ...... chestnut:

<! DOCTYPE html> 
The result of the Code is: (the landlord directly typed in the editor)
 
The div tag is a block box by default.
The default format of div labels isBlock,Through observation, we can see that the default width of the block box is 100%, while the height of the right text is supported, and the text is its content. If there is no text and no height is specified, the height is 0;

The image text height is 21. The padding inside and outside the border is 0 and the width is 100% (14-inch on the main screen );
Block, which is usually used by an external container to carry the required content. Commonly Used block-level elements include div, p, h1, header, footer, nav, etc ......
Inline)
In-row elements, as the name suggests, the elements in a row, the elements in the block, common include a tag, I (skewed tag), em, span, s (strikethrough ), strong (BOLD), B, etc.
The internal element of a row is mainly filled with content. By default, it has no upper or lower margins, and can only be left or right;
<Div class = "div1"> the div tag is a block box by default. <a href = "#"> This is a hyperlink </a> </div>

The Code represents the representation of an element in the row. Its width and height are equal to the content width and height. You cannot directly set its width and height. Setting the width and height is useless;
We can use display: block; to make it block. You can also use display: inline; To change blocks into rows;
Because the length is too long, the landlord can only wait for a while. The concept and difference of block and inline transfer door: block, inline and inline-block
 
2. padding)
The padding specifies the padding distance between the content and the border. For example:
　　
<Style type = "text/css">. div2 {padding: 20px; border: 1px solid #000099 ;}. div2 a {background: red ;}</style> <div class = "div2"> <a href = "#"> the div tag is a block by default) box </a> </div>
 
The div tag is a block box by default.
The landlord sets the inner margin of div2 to 20 PX on the top, bottom, and left. Note that the height of div2 is padding + content + border, 20x2 + 2 = 42px this may cause some confusing problems in some cases, but it is correct in the concept of a box model;
That is, the height of the box includes the padding, but the css attribute sets the content height. For example, the div3 height is set to 100px. Note that the actual height of div3 is equal to 100 + 40 + 2 = 142px.
<Style type = "text/css">. div3 {padding: 20px; border: 1px solid #000099; height: 100px;}/* Note that the actual height of div1 is equal to 100 + 40 + 2 = 142px */. div3 a {background: red ;}</style> <div class = "div3"> <a href = "#"> the div tag is a block by default) box </a> </div>
 
The div tag is a block box by default.
 3. border (border)
The default value of border is 0. You can specify the border of one of its edges at will. The attribute owner of border will not introduce it one by one. Another portal will be introduced: CSS border attribute tutorial (color style)
4. margin (margin)
The outer margin specifies the distance between the box and the box, so it is not calculated to the overall width and height of the box, the margin of the box in the box affects the width and height of the parent element;
Margin is used to separate the spacing between elements and elements; padding is used to separate the interval between elements and content. Margin is used to separate elements so that elements and elements are irrelevant. padding is used to separate elements from the content, so that there is a "breathing distance" between the content (text) and (Package) elements ". Here is also a direct portal. It is too long to write this blog post ...... detailed explanation of css margin
 
Floating
W3shool:
A floating box can be moved to the left or right until its outer edge hits the border of the contained box or another floating box.
Because the floating box is not in the normal stream of the document, the block box in the normal stream of the document performs as if the floating box does not exist.
Take the box pushing game as an example. Push the box to the left until it hits the boundary or another box stops. See the figure below:
　　
The Blue Box floats to the left (float: left). The red box floats to the left (float: left;). The orange box floats to the right (float: right;). After the border is reached, the Blue Box stops in the upper left corner. The red color closely follows the left floating, and it encounters the blue color of the left floating element, so it stops at the end of the blue. The Orange square floats to the right until it encounters a boundary or an element that floats to the right;
A floating element exists in a special form out of the current document stream because it is no longer in the Document Stream, so it does not occupy space.;

Box 1 floats to the left, because Box 1 no longer exists in the document stream, and box 2 is covered by Box 1. Figure 2 when the three boxes float to the left at the same time, they are float elements, columns;
Another feature is that if the box width is smaller than the total width of the Internal Floating element, the floating element moves down until there is enough space;

If the height of floating elements is different, they may be "stuck" by other floating elements when moving down ":

 
Line box and cleanup
The row box next to the floating box is shortened to leave space for the floating box. The row box is centered around the floating box.
Therefore, creating a floating box allows the text to be centered around the image:
<Style type = "text/css">. div1 {height: 200px; width: 100px; float: left; background: # ff9000 ;}. div1 a {background: red ;}. div2 {height: 200px; width: 100px; float: left; background: red ;}. div3 {height: 200px; width: 100px; float: right; background: #002A80 ;} </style> <div class = "div1"> </div> <div class = "div2"> </div> <div class = "div3"> </div> <div class = "text"> This is text </div>

If you want to change another line of text without interfering with the floating box, you need to apply the clear attribute to the box. The value of the clear attribute can be left, right, both, or none, which indicates which sides of the box should not be placed in the floating box.
<Style type = "text/css">. div1 {height: 200px; width: 100px; float: left; background: # ff9000 ;}. div1 a {background: red ;}. div2 {height: 200px; width: 100px; float: left; background: red ;}. div3 {height: 200px; width: 100px; float: right; background: #002A80 ;} </style> <div class = "div1"> </div> <div class = "div2"> </div> <div class = "div3"> </div> <div>
 
What is CSS clear float?
In a non-IE browser (such as Firefox), when the height of the container is auto and the container content contains floating elements (float is left or right), in this case, the height of the container cannot be automatically stretched to adapt to the height of the content, so that the content Overflows out of the container and affects (or even damages) The layout. This phenomenon is called floating overflow. CSS processing to prevent this phenomenon is called clearing floating.
In the W3C example, the news container is not surrounded by floating elements.
.news {  background-color: gray;  border: solid 1px black;  }.news img {  float: left;  }.news p {  float: right;  }<div class="news"><p>some text</p></div>
 
Floating clear method
Method 1: use an empty element with the clear attribute
Use an empty element after the floating element, such as <div class = "clear"> </div>, and assign the. clear {clear: both;} attribute to the CSS to clear the floating. You can also use <br class = "clear"/> or 
.news {  background-color: gray;  border: solid 1px black;  }.news img {  float: left;  }.news p {  float: right;  }.clear {  clear: both;  }<div class="news"><p>some text</p><div class="clear"></div></div>
Advantages: simple, less code, and good browser compatibility.
Disadvantage: a large number of non-semantic html elements need to be added. The code is not elegant enough and is not easy to maintain in the future.
 
Method 2: Use the overflow attribute of CSS
Adding overflow: hidden; or overflow: auto; to the container of the floating element can clear the floating. In addition, hasLayout needs to be triggered in IE6. For example, setting the container width and height for the parent element or setting zoom: 1.
After the overflow attribute is added, the floating element returns to the container layer, supporting the height of the container to clear the floating.
.news {  background-color: gray;  border: solid 1px black;  overflow: hidden;
  *zoom: 1;  }.news img {  float: left;  }.news p {  float: right;  }<div class="news"><p>some text</p></div>
 
Method 3: Add a float to the container of the floating Element
Adding the floating property to the container of the floating element can clear the internal floating, but this will make the overall floating, affecting the layout, not recommended.
 
Method 4: Use Adjacent Elements for processing
Do nothing. Add the clear attribute to the element after the floating element.
.news {  background-color: gray;  border: solid 1px black;  }.news img {  float: left;  }.news p {  float: right;  }.content{  clear:both;  }<div class="news"><p>some text</p><div class="content"></div></div>
 
Method 5: Use the "after" pseudo element of CSS.
Combined with: after pseudo elements (note that this is not a pseudo class, but a pseudo element, representing the latest element after an element) and IEhack, it can be perfectly compatible with mainstream browsers, here, IEhack refers to triggering hasLayout.
Add a clearfix class to the container of the floating element, and then add an invisible Block element to the end of the after pseudo element to clear the floating.
. News {background-color: gray; border: solid 1px black ;}. news img {float: left ;}. news p {float: right ;}. clearfix: after {content: "020"; display: block; height: 0; clear: both; visibility: hidden ;}. clearfix {/* trigger hasLayout */zoom: 1 ;} <div class = "news clearfix">  <p> some text </p> </div>
The CSS pseudo element adds an invisible space "020" or dot "." at the end of the internal element of the container, and assigns the clear attribute to clear the float. Note that for IE6 and IE7 browsers, add a zoom: 1 to the clearfix class to trigger haslayout.
 
Summary
Through the above example, we can easily find that the methods for clearing floating can be divided into two types:
First, use the clear attribute, including adding an empty div with the clear: both attribute at the end of the floating element to close the element. In fact, use: the after pseudo-element method is also implemented by adding a content at the end of the element as a vertex with the clear: both attribute.
The second is to trigger the Block Formatting Contexts (Block-level formatcontext) of the floating element parent element so that the parent element can contain floating elements.
 
Recommendation
Use the "after" pseudo-element method in the main layout of the webpage as the main way to clean up the floating; Use overflow: hidden in small modules such as ul; (pay attention to possible hidden overflow element issues ); if it is a floating element, the internal floating can be automatically cleared without extra processing. In the body, use the adjacent element to clear the previous floating.
Finally, we can use the perfect: The after pseudo element method to clear the floating, and the document structure is clearer.