4.CSS layout
( 1 ) automatic layout (default document flow)
HTML + CSS element complex structures called page frame layout.
The default is to page layout document flow without any modification, automatic layout elements, which is characterized as follows :
Order and display order of elements in the page element appearing in the code is the same ;
Block elements on a separate line space width default parented 100% , the height is determined by the height of the content ;
And other elements within the rows share one row, width and height determined by its content.
By to display the specified property block, inline, inline-block and other elements can be changed in the normal stream forms the mutual conversion between the block elements and inline elements, improving the operability of the layout.
( 2 ) Floating layout
The main use of the floating arrangement is to allow block-level elements in one row (column layout level) , arranged float properties such floating display element from the document flow, float attributes have the following values:
left: left floating element
right: right-floating elements
none: [defaults], do not float
inherit: Floating way inherited from the parent element
From the document flow element has the following characteristics:
Width Height is determined by the default content
Original location will be preempted other block elements
Floating elements are sequentially arranged in one row, when the line will not fit wrap
application:
Floating left and right does not float ( applicable than two column layout )
.content > .left{
float:left;
width:220px;
}
.content > .right {
margin-left:230px;
}
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
All floating ( for multi-column layout )
ul> li {
float:left;
with: Calculation and customizations ;
}
ul::after {
display:block;
content:"";
clear:both;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
( 3 ) positioning layout
Positioning layout is divided into static and relative positioning, commonly used in the frame mode, the drop-down menu, two menus, stationary billboards, web chat page, etc.
Static positioning is the default targeting all elements. Means that one element is positioned in the default flow of the document, the default setting is position: static ;.
Relative positioning is similar to the static positioning. The relative positioning of elements we can attribute top, bottom, left, right to change the final position of the element. When the mobile element is moved relative to the position of the current element is located , the default setting position: relative ;.
position has the following values:
relative: positioning element ( relative positioning ), without departing from the document flow , a reference point to the current position of the original elements
absolute: positioning element ( absolute positioning ), out of the document flow , referring to the current element from the nearest parent positioned elements, if not all of the parent element positioned elements, referring to the browser viewport
fixed: positioning element ( fixed positioning ) , out of the document flow , with reference to the browser viewport
sticky: positioning element ( viscous positioning ) , without departing from the document flow , relative and fixed binding , such as the style set element to top: 100px, the current element from the top of the browser viewport 100px when embodied fixed characteristics , the remaining case reflects the relative characteristics
( 4 ) stretching layout cartridge
Telescopic cassette layout may be understood as an adaptive layout, it is possible to have to change the display range (browser viewport) with width and height of the element specific adjustments made, generally it should be responsive layout (mobile App ) .
When the parent element is set to a telescopic cartridge layout (display: flex;) when:
Column layout format layout of the default main X axis ( Flex-direction: Row; ), cross-axis is the default Y -axis, the elements are arranged along the major axis direction (transverse arrangement), the parent element occupies the default height in the cross-axis direction element height;
When setting flex-direction: column; when the layout format of line layout, a spindle to an Y -axis, the elements are arranged along the major axis direction (longitudinal arrangement), the default width of the element occupies the width of the parent element in the cross-axis direction.
flex-wrap for setting a sub-element width of whether the wrap is greater than when the parent element , the default value for the nowrap not wrap , set to wrap wrapping .
flex style sheet:
flex-basis: based on the value of the spindle element ( width / high )
flex-grow: distribution of surplus space
flex-shrink: contribution to the loss of space
flex: grow shrink basis; Sketch (and as flex: 1; represents Flex: 0. 1. 1; )
application:
Proportional division
section {
display: flex;
}
article {
flex: 1;
}
article:nth-of-type(3) {
flex: 2;
}
The parent element section of a telescopic box container, article half and a third article accounts for 2 parts . If the total . 3 an article , the first, second article accounts for 1/4 , accounting for a third 1/2 .
Dividing ratio of the remaining portion other
section {
display: flex;
}
article {
flex: 1 200px;
}
article:nth-of-type(3) {
flex: 2 200px;
}
The parent element section of a telescopic container box, each article a width of at least 200px , for the rest of the screen, article half and a third article accounts for 2 parts . If the total . 3 an article , the first, second article accounts for 1/4 , accounting for a third 1/2 .