CSS入门06

• 三栏自适应 双飞翼布局
  • 左中右(left、middle、right)三列布局,渲染顺序中间列书写在前保证提前渲染,左右两列定宽,中间列自适应剩余宽度
  • middle是自适应宽度的，所以100%;
  • middle、left、right都是float:left;，但是main的宽度是100%，所以left、right被挤到第二行；
  • 让left移动到左边就容易了，需要向左边移动一个middle的宽度就可以了，所以就是margin-left:-100%;
  • middle的宽度是100%，要让right移动到右边，则只需要给right一个自身的宽度，让它移动上去就行了，所以就是margin-left:-npx
  • left和right实际上是叠在middle的左右两边的，在写结构时，要在middle里面多写一层content，只要给content一个margin-left:left宽&margin-rightt:right宽；里面的内容就不会被left和right挡住；