用什么CSS布局?

image.png
把页面分成一块一块,按左中右,上中下等排列
二维布局用Grid,一维布局用Flex


布局标签

  • main:主要内容
  • header:头
  • footer:脚
  • nav:导航
  • aside:边栏

布局分类

  1. 固定宽度布局:一般宽度为960/1000/1024px
  2. 不固定宽度布局:主要靠文档流的原理来布局
    1. 文档流是自适应的,不需要加额外的样式
  3. 响应式布局:PC上固定宽度,手机上不固定宽度(混合布局)

布局的思路(两种)

  1. 从大到小(老手)
    1. 先定下大局
    2. 然后完善每个部分的小布局
  2. 从小到大(新手)
    1. 先完成小布局
    2. 然后组合成大布局