JavaScript02-页面布局

页面布局

基础问题

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。

• 浮动
• 绝对定位
• flexbox
• display:table-ceil
• grid布局

延伸问题

• 每个方案的优缺点

  • float，比较好的兼容性需要清除浮动，处理好与周边元素的关系
  • absolute，方便快捷，布局脱离文档流，导致方案的可使用性较差
  • flex布局，解决上述两个的缺点，移动端使用flex更多，ie8不支持
  • table-ceil布局，兼容性好，对SEO不够友好，每一个部分可以理解为单元格，当其中的一个表格高度变高，其他的两个表格也会变高
  • grid布局，代码量简洁，新技术

• 假设去掉高度，哪个不能再用

  • float不能用，中间的内容被左侧挡住，因为撑开高度以后，左侧没有了遮挡物，就会流向左侧。
    
    • 解决方案：创建BFC
  • absolute不能用
  • flex可以使用。
  • table-ceil可以使用。
  • grid不能用

• 考虑兼容性

小结

• 语义化总结到位
• 页面布局理解要深刻
• CSS基础知识扎实
• 思维灵活且积极上进
• 代码书写规范

页面布局的变通

• 三栏布局

  • 左右宽度固定，中间自适应
  • 上下高度固定，中间自适应

• 两栏布局

  • 左宽度固定，右自适应
  • 右宽度固定，左自适应
  • 上高度固定，下自适应
  • 下高度固定，上自适应

本文章所有内容均来自慕课网课程总结