CSS 布局

[shuangmianxiaoQ]

table 表格布局

1. 使用table布局
2. 使用div代替table布局

一些布局属性

1. 确定元素位置：position: static/relative/absolute/fixed
   • absolute和fixed是脱离文档流的
   • absolute相对于最近的父级为relative或absolute的元素进行定位的
   • relative, absolute, fixed可以设置z-index来确定层级

flex 布局

CSS布局--Flex布局（弹性布局）

float 布局

1. 元素浮动，脱离文档流，不脱离文本流
2. 对自身的影响：形成块BFC，位置尽量靠上，尽量靠左/右
3. 对兄弟的影响：不影响其他块级元素的位置，影响其他块级元素内部文本
4. 对父级的影响：从布局上消失，高度塌陷 清除浮动的两种方法：
   • 父级元素overflow设为hidden
   • .clear-float::after { content: ""; clear: both; display: block; }

inline-block 布局

需要处理间隙问题：将父元素字体大小设置为0，再设置还原子元素字体大小

响应式设计和布局

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

面试真题

1. 实现两栏（三栏）布局的方法

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

2. position: absolute / fixed 有什么区别

   • 前者相对最近的父元素为absolute / relative定位
   • 后者相对屏幕 (viewport)

3. display: inline-block 的间隙

   • 原因：html换行时空白字符产生
   • 解决：消灭字符或消灭间距

4. 如何清除浮动

   • overflow: hidden/auto
   • ::after { clear: both }

5. 如何适配移动端页面

   • viewport
   • rem / media query
   • 设计上：隐藏 折行 自适应空间