- Layout ： Divide the page into pieces , Press left middle right 、 Top, middle and bottom .
- The layout is usually divided into ：
- Fixed width layout , The general width is 960/1000/1024px
- Not fixed width layout , The layout is mainly based on the principle of document flow （ It's generally used in mobile phones ）.
- Responsive layout ： stay PC Top fixed width , There is no fixed width on the phone , It's a hybrid layout .
- From big to small ： Set the big picture first , Then refine the small layout of each part .
- From small to large ： Finish the little layout first , And then combine them into a big layout .
- CSS Three patterns of layout
1. float Layout
- Add... To the child element float: left and width
- Add... To the parent element .clearfix
Some experience ：
- Experienced people will leave some space or leave the last one blank width
- There's no need to be responsive , Because there's no IE, And this layout is dedicated to IE To prepare the .
- IE 6/7 There are double margin bug, There are two solutions ： One is for IE 6/7 hold margin halve ; Second, add one display: inline-block.
- In the use of border When debugging , sometimes border It interferes with the width , It can be changed to outline（ Does not occupy a space ）.
- float When making an average layout , It's going to be negative margin.
- float The programmer needs to calculate the width himself , inflexible .
2. flex Layout
- flex Of container and items
- flex container The style of ：
- Let an element become flex Containers
- change items Direction of flow （ Spindle ）
- Change the line
- Spindle alignment
- Secondary axis alignment
- Multi line content （ Rarely use ）
- order： control item The order that appears in the container .
- flex-grow： This is defined. item The ability to grow when necessary . It's accepted as a unitless value of proportion . It determines item The amount of space available inside the telescopic container .
- flex-shrink： This is defined. item The ability to contract when necessary .
- flex-basis： Control base width .
- align-self: This allows for a single item Override the default alignment （ Or by the align-items Specified alignment ）.
Can pass flex Frog game to practice flex Usage of ：flexboxfroggy.com/#zh-cn
Two dimensional layout with Grid.
You can practice it with a little game grid Usage of ：Grid Garden cssgridgarden.com/#zh-cn