Negative margins for two columns, three-column layout
Clear:both Clear Float
Two-column:
margin-right:-250px the right side of the content to the left 250px content
margin-right:250px to the left to apply a Div, and then set aside from behind 250px, so that the right overlay of 250px just two columns of layout
Three-column:
After the same two-column
margin-left:250px left the leftmost content floating, leaving 250px to themselves, while the middle of the content of adaptive, three-column form
Holy Grail layout:
feature, first write the middle part, the Grail part, and then write the left and right parts of the two sides, positioning the parent element: padding:0 200px 0 250px
Left: The left side of the margin-left:-100% is covered in the opposite part of the middle
Right: Right side of margin-right:-200%, opposite middle part.
Middle: position:relative relative positioning, removing the middle covering part of the left part
Three-column layout formation
960 grid Format Layout method:
At the resolution of 1024x768, when the width is 960, the resolution effect is the best
Typically there are 12 columns, 16 columns, and 24 column layout methods
12 columns: Pitch 20px, 60px per cell, three-format layout
16 Columns: Pitch 20px, 40px per cell, four-format layout
24 columns: Pitch 10px, 30px per cell, multi-format layout
Bootstrap framework is one of the most widely used frameworks, and it is a framework technology based on Jqury
Container container, in a body, can be side-by multiple, but generally only one, requires a fixed width
Fluid is 100% width
Row line, must be written in container, otherwise will run out of the page
Col column, col-xs-1, small on ultra small screen, accounting for 1 columns
Col-xs-push-2, under the ultra-small screen, according to the sibling element, push 2 lattice
Col-xs-pull-2, under the ultra-small screen, according to the sibling elements, pull 2 lattice
Col-xs-offset-2, for the front and rear positioning of the relative previous element, pushing 2 lattice
XS Ultra small screen pixel less than 700, mobile phone
SM small screen pixels in 768---more than 900, flat panel
MD Medium screen pixels between 900--1200, ordinary users
LG Super Large screen pixel above 1200, HD or Widescreen user
Bootstrap framework and other framework layout techniques