CSS-5-页面布局

两列布局

• 定位，margin,float解决
  • 结构一个父元素，两个子元素
  • 父元素pading-left:200px;
  • 左边子元素:float:left;height:400px;width:200px;border:2px solid red;position:relative;margin-left:-100%;left:-204px;
  • 右边子元素:float:right;height:400px;width:100%;border:2px;solid black;
  • 注意两个子元素的顺序，固定的放在自适应后边。
• flex解决
  • 结构一个父元素，两个子元素
  • 父元素：display:flex;
  • 左边子元素：width:200px;height:400px;border:2px solid red
  • 右边子元素：width:100%;height:400px;border:2px solid yellow

三列布局

• 圣杯布局
  • 第一个两列布局的第一种思想，多加了一个列
  • 双飞翼布局：父元素包裹三列，全部左浮动，把下面的两个固定宽高的盒子拉上去，拉上去方法同圣杯布局，中间盒子再定义一个div通过marign让其左右留出固定盒子的宽度。
  • flex布局
  • flex:有三个属性分别是，扩展，缩放，宽度；
  • 缩放默认是1，即子元素宽度和大于父元素触发缩放，不允许缩放可设置第二个参数为0
  • 扩展默认值0，如果希望填充整个父元素，则将扩展设置为1
  • 宽度： 我们可以自定义宽度，默认值是auto;
  • 采用flex实现三列就是让其中flex:1
  • 其他两列flex:0 1 200px；

头，身体，脚布局

• 首先正常三列，采用flex布局；在中间列采用定义三个元素，使用flex布局
• 补充：flex-direction:规定主轴的方向
• justify-content:规定主轴方向的排列
• align-items:规定测轴的排列，可以用这两个进行一个居中设置。