Task eight--the problem summary of the responsive grid (rasterized) layout

Topic See: Task Eight: Responsive Grid (rasterized) layout

　　One: The requirement is that the spacing between each element is 20px, the first implementation of the spacing has two methods:

Method 1.

 <  div  class  = "Container"     >  <  div  class  = "Col-sm-4 col-xs-6"  >  4-6</ div  >  </ div  > 
 
  

Container set box-sizing:border-box;width:100%;padding:10px; each div also sets box-sizing:border-box; Margin:10px;float:left; Because each div is set to float, so the margin is not merged, so the spacing is 20px, each div width with calc (corresponding%-20px);

. Container{box-sizing:Border-box;padding:10px;width:100%;}div[class^= "col-"]{box-sizing:Border-box;Border:1px solid #999;Height:50px;margin:10px;float: Left;Background-color:#eee;text-align:Center;vertical-align:Middle;}@media (min-width:769px){. col-sm-4{width:Calc (33.33%-20px); }

　　　Method 2.

<Divclass= "Container">    <Divclass= "outer">         <Divclass= "Inner col-sm-4 col-xs-6">4-6</Div>    </Div></Div>

Each div uses the parent element, which is outer, to adjust the percent width , box-sizing to Border-box, and then set padding. Add child elements inner set the specific height and style .

. Container{box-sizing:Border-box;width:100%;padding:10px; }. Outer{box-sizing:Border-box;float: Left;padding:10px; }. Inner{Height:50px;Background-color:#eee;Border:1px solid #999; }@media (min-width:769px){. col-md-4 {width:33.33333%; }

Attached: box-sizing value

Value	Describe
Content-box	This is the width height behavior specified by the CSS2.1. The width and height are applied to the element's content box, respectively. Draws the inner margin and border of the element outside the width and height.
Border-box	The width and height set for the element determines the bounding box of the element. That is, any padding and borders specified for the element will be drawn within the set width and height. The width and height of the content can be obtained by subtracting the border and padding from the set width and height.
Inherit	Specifies that the value of the Box-sizing property should be inherited from the parent element.

From

　　　　

　　　　Two: The layout of the above two methods is to use floating, in fact, there is another way of layout:

Because the arranged elements are so high, it is easier to use floating to lay out the layout, but if the elements are unequal, the floating layout is difficult to achieve in the problem. If this is the case, you can use Inline-block to layout.

Each div is set display:inline-block; *display:inline;*zoom:1, (compatible with IE6/7) but because the code is written with a space between each div or newline, resulting in the rendering of each div between the inexplicable extra pixel spacing, To eliminate the spacing you can add a font-size:0 on the container; Specific clearance method See: CSS Remove Inline-block element gap of several methods

. Container{font-size:0;padding:10px;width:Auto;}[class*= "col-"]{box-sizing:Border-box;Display:Inline-block;*display:inline-block;　　　　　　　　　　*zoom:1; /* Compatible with ie6,7*/border:1px solid #999;Background-color:#eee;margin:10px;Height:50px;}

Three: The problem comes to mind Margin Overlay the question, by the way, is summarized below briefly:

1. Only the vertical margins of the elements in the normal document flow will occur when the margin merges, the horizontal margin does not merge ;

　　　　　　2. The margin of the floating element, the Inline-block element, and the absolutely positioned element does not collapse with the margin of the other elements in the vertical direction (this refers to the upper and lower adjacent elements );

3: The element that created the block-level formatting context does not have a margin collapse with its child elements (this refers to the element that created the BFC and its child elements do not collapse),

Note: The factors triggering BFC are float (except none), overflow (except visible), display (Table-cell/table-caption/inline-block), position (except static /relative);

4. When the element has no content (that is, empty elements), padding, and borders, its upper and lower margins meet, resulting in an overlay (vertical direction). When you add content, padding, or borders to an element, the overlay is canceled.

5. It is recommended that you try to use margin in the same directionwhen writing, such as set to top or bottom, because you sometimes do not need to set a float, inline-block, or absolute for each element in practice.

Source: How to solve the problem of margin overlay?

Four: see people with outline set the border, outline (contour) is drawn around the element of a line, at the edge of the bounding rectangle, can play the role of prominent elements.

The differences with border are:

1.outline does not occupy space, and does not increase the extra width or height;

2.outline is likely to be non-rectangular.

Task eight--the problem summary of the responsive grid (rasterized) layout