Article directory
foreword
对于布局float与float总是运用的不够熟练，在学习响应式布局前，把这部分总结如下
One, float
Layout two div boxes
<div class="box1"></div> //黑
<div class="box2"></div> //蓝
- Neither box is floated
-
Both boxes are left floated
-
Both boxes are floated right
-
Box1 adds left float, box2 does not add float
-
Box1 does not add float, box2 adds left float,
the first fan box floats, the second green box does not float, and the third orange box floats
Summary of floating settings:
1. If the standard flow is carried out first (imagine the standard flow down as a wall), and then the floating is performed, the standard flow will not be covered and will not work (the effect is similar to not setting the floating) 2. If the floating is performed first
, then Float first to leave a space, and the standard flow is on the bottom side.
3 If both are float, it will be converted into a row
float common layout
Example 1:
1. First lay out a parent box, and lay out two child boxes inside.
2. The height of the two child boxes should be the same as the parent box. The width of box 1 +
the margin-right of box 1: 10px + box 2 = the length of the parent box
3Finally , set floating for Box 1 and Box 2.
Example 2:
1. First lay out a parent box, which contains eight child boxes.
2 box 1+ margin-right of box 12345+ box 1234 = width of parent box
3 Upper box + lower box + upper box margin-bottom = parent box height
4 Finally, add left floating to all 9 boxes
box 1 settings
.box .smallbox1{
float: left;
height: 600px;
width: 300px;
background-color: blue;
margin-right: 10px;
}
box 23456789 settings
.box div{
float: left;
height: 290px;
width: 240px;
background-color: rgb(61, 148, 192);
margin-right:10px;
margin-bottom: 20px;
}
Finally, the 59 margins are processed
.box .smallbox5,
.box .smallbox9{
margin-right: 0;
}
Practical use (an independent case imitating Xiaomi’s official website)
Note❗
1 The floating layout must be constrained by the parent element, all floating is positioned according to the parent element
2 If a child element floats, then other sibling elements must also floating without confusion
clear float
- Why clear the float?
In many cases, the height of the parent box is not given (too many elements or the article does not need to be symmetrical), but the child box floats and does not occupy the position so that the height of the parent box is 0, which will affect the standard flow box below, so lead Cleared the concept of floating.
- clear floating nature
The essence of clearing floating is to clear the influence of floating elements. If the parent box itself has a height, there is no need to clear the floating. After clearing the floating, the parent will automatically detect the height according to the floating child box. With the height of the parent, it will not affect the standard flow below
1. Additional Labeling Method (Partition Wall Method)
Add an extra tag at the end of floated elements Clear float styles
<div style = ''clear:both'></div>
Or write clear for the last child element in the css style: both
Note: This new empty tag must be a block-level element
2. Add the overflow attribute to the parent
You can add overflow to the parent element , set the attribute to hidden, auto or scroll
The disadvantage is that the overflow part cannot be displayed, and the overflow part will be cut off
3. Add the after pseudo-element to the parent
It is equivalent to an upgraded version of the extra tag (you can use the multi-class name method of class)
to be understood as adding a wall behind the child element
4. The parent adds a double element
It is understood as adding a wall before and after the child element
two, position
Why do you need positioning? When elements need to be fixed to the page, neither standard flow nor floating can be realized quickly. At this time, positioning is required to achieve it.
Therefore:
1. Floating allows multiple block-level boxes to be displayed in a row without gaps, and is often used to arrange boxes horizontally.
2 Positioning It can move the position of the box in a certain box or fix a certain position on the screen , and can press other boxes .
3 Positioning = positioning mode + edge offset
The positioning mode is used to specify the positioning method of an element in the document;
edge The offset determines the final position of the element (right left top bottom)
static positioning
position：static;
- Static positioning places the position according to the standard flow characteristics, it has no edge offset
- The default positioning method, no positioning meaning
relative positioning
position：relative
- The moved position is relative to the original position of the element (not relative to the parent element, nor relative to the browser)
- After the move, the original position in the standard stream will continue to be occupied (without taking off the label, the original position will continue to be maintained, and any element in its previous position cannot continue to be used)
absolute positioning
position：absolute;
- If there is no ancestor element or the ancestor element is not positioned , the browser will prevail (Document document)
When there is no ancestor element: left: 0; bottom: 0, the box ran to the lower left corner - If the ancestor element has positioning (relative, absolute, fixed positioning), move the position with the nearest level of positioned ancestor element as the reference point (include the child element in the parent element)
- Absolute positioning no longer occupies the original position
Example 1:
.father{
position: relative;
height: 200px;
width: 300px;
background-color: rgb(26, 25, 25);
}
.son{
position: absolute;
right: 0px;
bottom: 0;
height: 30px;
width: 40px;
background-color: rgb(49, 159, 218);
}
Method 1: Son and father (used when the father needs to occupy the position) as shown in the figure above
Method 2: Self-destruction of the father (if the parent element does not need to occupy the position, the son and father will also be used)
Case: Hot uses the son to kill the father
.father{
height: 270px;
width: 225px;
position: relative;
left: 200px;
}
.father .hot{
position: absolute;
right: -5px;
top: 5px;
}
fixed positioning
position：fixed
It is fixed at the position of the visible area of the browser (regardless of whether the browser window is zoomed in or out according to the specified data). The
main usage scenario: the position of the element will not change when the browser page is scrolled.
The characteristics are as follows
- Moves the element using the browser's viewport as a reference point
- Has nothing to do with the positioning of the parent element
- Scroll without scrolling
- does not occupy the original position
Example: Fixed to the right side of the center of the page
Small algorithm:
1 Let the fixed positioning box left: 50% , walk to half of the browser's viewable area (also can be regarded as the center of the page)
2 Then let the fixed positioning box margin-left : Half the distance of the core width
//版心规定如下
.box{
margin:0 auto;
}
Example 2: Sticky positioning (the left frame of JD.com)
position: sticky; add top: 10px; (can be fixed to the top)
The characteristics of sticky positioning:
1 Move elements with the browser's visible window as the reference point (the characteristics of fixed positioning )
2 Sticky positioning occupies the original position (the characteristic of relative positioning)
3 One of top, left, right, and bottom must be added to be valid
Positioned stacking rules
Z-index: 1 to control the order of positioning and stacking
- The value can be a positive integer, negative number or 0, the larger the value, the higher the box
- If the attribute values are the same, they are all auto by default, then follow the writing order, and come from behind
- Units cannot be added after the number
- Only positioned boxes can have a z-index property
Summarize
如有问题还望指出
