CSS讲解(4) 布局

简介

• CSS知识体系的重中之重
• 早期以table为主(简单)
• 后来以技巧性布局为主(难)
• 现代有flexbox/griod(偏简单)
• 响应式布局

常见布局方法

• table 表格布局
• float 浮动 + margin
• inline-block 布局
• flexbox布局

表格布局

布局简单

table中内容水平居中

模拟table:

display: table;
display: table-row;
display: table-cell;

一些布局属性

盒模型

display / position

• 确定元素的显示类型
  • block / inline / inline-block

• 确定元素的位置
  • static 默认，正常文档流
  • relative 相对定位
    • 相对自身
    • 不会影响文档流
    • 对absolute的限制作用
  • absolute
    • 绝对布局
    • 脱离文档流
  • fixed
    • 相对于屏幕
    • 脱离文档流

【前端Talkking】CSS系列——CSS深入理解之absolute定位
【前端Talkking】CSS系列——CSS深入理解之absolute定位

flexbox

• 弹性盒子
• 盒子本来就是并列的
• 指定宽度即可

inline-block

• 像文本一样排block元素
• 没有清除浮动等问题
• 需要处理间隙

响应式布局

• 在不同设备上正常使用
• 一般主要处理屏幕大小问题
• 主要方法
  • 隐藏 + 折行 + 自适应空间
  • rem / viewport / media query