CSS布局

table 表格布局

table - tr - td
还有一种是都用div来模仿表格，通过给属性赋值来达到表格的效果，

.table {
	dispaly: table;
	width: 800px;
	height: 200px;
}
.table-row {
	display: table-row;
}
.table-cell {
	vertical-aling: center;
	display: table-cell;
}

display / position

display常用的属性：block / inline（没有宽高） / inline-block（有宽高）
position常用属性：

• static：正常文档流
• relative：相对于它的正常位置，偏移后不会影响正常布局
• absolute：脱离文档流，选取其最近一个的relative/absolute父级对象进行绝对定位，如果对象的父级没有设置定位属性，将以body坐标原点进行定位，可以通过z-index进行层次分级
• fixed：脱离文档流，相对于可视区域固定
  z-index可以设置的属性值：relative，absolute，fixed

flex（display）

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

.container {
	width: 800px;
	height: 200px;
	display: flex;
	border: 1px solid red;
}
.flex {
	background: black;
	margin: 5px;
	flex: 1;
}

float

• 元素浮动，脱离文档流，但不脱离文本流
• 对自身的影响
  • 形成块（BFC），有自己的布局，比如可以让inline类型元素span设置宽高
  • 位置尽量靠上
• 对兄弟的影响
  • 不影响其他块级元素位置
  • 影响其它块级元素内部文本
• 对父级元素的影响
  • 从布局上消失，引起高度坍塌
• 配合margin做两栏，三栏布局

inline-block

• 像文本一样排block元素
• 没有清除浮动等问题
• 需要处理间隙（把他当成字体，字体大小设置为0就可以去除间隙）

响应式布局

• 在不同设备上正常使用
• 一般处理屏幕大小的问题
• 主要方法
  • 隐藏 + 折行 + 自适应空间
  • rem 通过html字体大小来确定元素大小
  • viewport用js确定界面
  • media query 根据不同设备的特性来匹配不同的样式

面试真题

• 实现两栏（三栏）布局的方法
  • 表格布局
  • float+margin
  • inline-block
  • flexbox布局
• position: absolute / fixed有什么区别
  • 前者相对最近的absolute / relative
  • 后者相对于屏幕（viewport）
• display:inline-block的间隙
  • 原因：字符间距
  • 解决：消灭字符或者消灭间距
• 如何清除浮动
• 适配移动端
  • viewport
  • rem / viewport / media auery
  • 设计上：隐藏 折行 自适应