笔记整理（三）

发表于   |   分类于   |  

布局

  • 左右定宽中间自适应的三栏布局

    1. 利用BFC不和浮动元素重叠的特性实现
      • 三栏的顺序分别为左-右-中
      • 左右两栏分别设置宽度以及左浮动和右浮动，脱离普通流，这时如果让中间栏高度大于2个边栏会发现两边栏实际上是叠在main上面的，因为main是块状元素，独占一行，浮动元素向相应的方向浮动，直到遇到容器的边框
      • 中间栏设置overflow：hidden创建BFC，这样就可以利用BFC不和浮动元素重叠的特性，让中间栏的宽度自适应
      • 在线demo
    2. 圣杯布局
      • 三栏的顺序为中-左-右，并包裹在warp容器内
      • 三栏同时设置float:left，左右两栏定宽、中间宽度100%
      • 利用负的外边距分别把left和right拉上来，这时视觉上left和right是叠在main上面的
      • 设置warp的左右padding分别为左右栏的宽度
      • 利用相对定位让left和right回到合适的位置
      • 在线demo
    3. 双飞翼
      • 三栏的顺序为中-左-右
      • 双飞翼布局跟圣杯很像，区别在于圣杯利用padding控制main的位置，双飞翼用margin控制main的位置
      • 需要额外在main里面加一层div，用于margin控制，但是可以免去左右两栏的相对定位
      • 在线demo
    4. Flex
      • 三栏的顺序为左-中-右，并包裹在warp容器内
      • warp设置display: flex，如果三栏高度自适应又希望顶部对齐，需要添加align-items: flex-start
      • 在线demo

  • 响应式网格（栅格化）布局

    • 模拟BootStrap 的响应式 12 栏网格布局
    • 盒模型改为border-box
    • 给.container添加padding属性，否则会出现水平滚动条
    • @media设置断点，width用百分比作为单位
    • 在线demo

参考资料：

关于兼容性

  • 前三种方法理论上支持IE8及以上浏览器和各种现代浏览器
  • flex布局部分支持IE10+和现代浏览器，具体参见CAN I USE

关于浮动清除