The essence of web page layout is to put elements in the web page, such as text. Put pictures, etc. in a box, and then use css to place the box to achieve the desired effect, that is, the layout of the web page
Three models of css
1. Normal stream
2. Float
After the element is floated, it will be automatically converted into an inline block element
The purpose of floating is to allow multiple block elements to be displayed on the same line
Floating has to be eliminated, because if you don't, it will cause typographical clutter
Add overflower=hidden to the parent element or add a standard flow empty div behind the floating box to make the div clear=both to eliminate the floating
3. Positioning
Positioned properties include edge offset and positioning mode
Postion has 4 attributes static, default positioning, relative relative positioning, absolute absolute positioning, fixed fixed positioning
The static default positioning is the default, it is not possible to fix the position
Every time relative moves, it moves with its upper left corner, which is not off the mark.
Absolute is off-label. It does not occupy the position. It relies on the parent box to locate. If the offset is not set, it will follow the parent box.
As long as you pursue the principle of the son's absolute fatherhood, there is no problem at all. Let the father's position be made relative, and the child's position will follow the father's.
The flow of web page layout
1. First determine the version of the page
2. Analyze the row module in the page, and the column module of each row
3. Make html structure
4. CSS initialization, and then use the box model, div+css to control the module of the page