布局问题

等高布局

• padding 补值法

  • 实现方法：将margin-bottom 设为负值，同时将padding-bottom的值设为正的margin值。
  • 缺点：等高的div没有底边的边框。
  • 解决方式：
    
    • 使用背景图来模仿底部边框或使用div来模仿列的边框。
    • 在等高元素中加入一个相对于容器绝对定位的div元素，并设置其高度为边框高度。

• flex布局法

  • 实现方法：将包含等高布局div的父div设置为display:flex;、align-items: stretch;

• display:table-cell;

两栏自适应布局

• 浮动布局

  左边div float:left;，右边div设置margin-left值，实现左边固定，右边自适应的布局效果。

• 绝对定位

  左边div position:absolute;、margin-right: -100%;，右边自适应元素设置margin-left的值来实现左边固定宽度右边自适应宽度的布局效果。

三栏自适应布局

• float+负margin

  HTML：先写中间元素，在写左元素和右元素。

  CSS：容器元素、左元素和右元素都是左浮动，左元素设置负margin为-100%，右元素设置负margin为负右元素的宽度，中间元素在容器元素中，设置margin-left为左元素的宽度+左元素和中间元素的间隔，设置margin-right为右元素的宽度+右元素和中间元素的间隔。

• float

  HTML中先写左右两个元素，最后写中间元素，左右两个元素分别左浮动和右浮动，中间元素设置margin-left和margin-right