常见的页面布局方式

1,固定布局(最基本的布局:固定宽高)

2,流式布局(百分比布局)

  • 把元素的宽,高,margin,padding,不再使用固定值改用百分比,这样元素的宽,高,margin,padding,会根据页面的尺寸随时调整,已达到适应当前页面的目的。
  • 百分比是基于元素父级的大小计算而来
  • 边框不能用百分比设置

3,弹性布局(伸缩布局)

  • CSS3引入的一种新的布局模式,flex布局
  • flex-direction:决定主轴的方向及起点(项目的排列方式) row | row-reverse | column | column-reverse
  • flex-wrap:nowrap(不换行),wrap(换行,第一行在上方),wrap-reverse(换行,第一行在下方)
  • justify-content:定义横向对齐方式,flext-start | flex-end | center | space-between | space=around
  • align-items:定义项目在交叉轴(竖直)上的对齐,flex-start | flex-end | center | stretch | baseline
  • flex-grow:定义项目的放大比例,该属性用来设置当父元素的宽度大于所有子元素的宽度之和时(即父元素还有剩余空间),子元素如何分配父元素剩余空间的,他的默认值是0,就是不索取父元素的剩余空间,如果大于0,表示索取,值越大,索取的越厉害。
  • flex-shrink:定义项目的缩小比例,该属性是用来设置父元素的宽度小于所有子元素的宽度之和时(即子元素会超出父元素),子元素如何缩小自己的宽度,他的默认值是1,子元素宽度减小,值越大减小的越厉害,如果值为0,表示不会减小。

4,浮动布局(float:left | right)

5,定位布局

  • position:fixed(固定布局)
  • position:relative(相对定位,相对于元素自身定位,不脱离文档流)
  • position:absol(绝对定位,脱离文档流)

6,grid布局