布局

• 在做前端的过程中，主要操控的就是块元素，块元素才是影响布局的关键

1. position（★★★★）

position默认值是static

重要属性

• 1.position：absolute绝对定位
  设置了position属性之后,会激活4个属性——top，left，bottom，right，这四个属性相对于它的第一个position不为static的父元素

• 2.position：relative 相对定位
  在相对定位的情况下，色块原来的位置不会被其他元素挤占

• 3.position：fixed 对于浏览器窗口定位
  无论页面怎么滚动，fixed的元素，相对于屏幕的位置都不变

2. flex布局

• flex它可以把「块」元素变得有弹性，可伸缩
• flex布局的父元素会把一级的子元素变成可以伸缩，易排列的盒子,极大的提高了布局的效率
• 遇到布局问题，先考虑能不能用flex解决,再想其他的

3. 如何实现常见的页面布局

3.1 设置flex布局

3.2 设置justify-content延展方向(横向)

• flex-start

  

• flex-end

  

• center

  

• space-between & space-around

  

3.3 设置align-items

• flex-start & flex-end & center

3.4 微调子元素的位置