CSS布局方式

CSS布局知识框架

• css知识体系中的重点
• 早期以table为主
• 后来以技巧性布局为主
• 现在有flexbox/grid
• 响应式布局

---

常用布局方法

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

表格布局优点外部宽度可以固定，内部元素自适应，文字自动vertical-align：middle

---

盒子模型

• margin
• border
• padding
• content（width，height）

---

display/position

• 确定元素的显示类型 display（block/inline/inline-block）
• 确定元素的位置 position（static/relative/absolute/fixed）

relative 是相对于元素本身的位置，不会改变其他元素对于布局的计算
absolute 是相对于最近的带有ralative的父元素，与文档流无关，绝对定位元素居中可使用 transform: translate(-50%, -50%);来移动元素位置。

fixed 是相对于可视区域，与文档流无关
sticky 初始和relative一样，如果给定距离且划出距离范围的时候等同于fixed

tips:
z-index 设定Z轴层级 relative absolute fixed sticky 可以设定而且其默认层级高于static， static默认是0且不可更改
absolute、fix指定的元素默认初始宽高是0，relative、sticky初始宽高是取决与外部宽度的

---

flexbox弹性盒子

低版本的IE不支持
即使是chrome firefox 等浏览器对其支持的版本也不同
详细使用方法会再开一篇文章来描述
详细内容：

---

grid 网格布局

详细内容：

---

float

适合做图文混排

• 元素浮动
• 脱离文档流
• 但不脱离文本流

对自身的影响

• 形成“块”（BFC）
• 位置尽量靠上

对父级元素的影响

• 脱离文档流
• 高度塌陷

详细内容：

---

inline-block

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

处理间隙方式，父元素文本大小设为0
间隙是由于HTML中写法两个子元素中间的空白导致的，可以删掉或注释掉中间的空白。
适合用于固定宽度的布局

---

※响应式布局

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

/*媒体查询*/
@media(max-width:640px){
	selecter{
		property:value;
	}
} 

rem=root em
rem是根目录的字体大小