牛叉叉的前端布局概述

前端布局小谈

学习资源：MDN和w3s

前端布局分类

1. 传统布局
2. flex布局
3. grid布局

传统布局：div+css，浮动，定位。基于css2，兼容性好，对浏览器友好。

flex布局：flex布局方式，父盒子规定子盒子排列方式。ie9以上兼容，方便，代码优雅。

grid布局：二维布局，ie9以上支持。

基础知识

标准盒模型

盒模型组成：四条边划分四个区域content edge，padding edge， border edge， margin edge分别对应 content area，padding area， border area， margin area 控制区域属性：width，margin，border， padding

box-sizing属性

属性值：border-sizing | content-sizing （注意：firefox支持padding-sizing）

content-sizing: content-area ==> width

border-sizing: content-area + padding-area + border-area => width + padding + border

兼容性：ie8+，在ie8下border-sizing不能与，min-*和max-*合用，因为min和max的解析是content-area解析的。

元素分类

从布局上分类：块级元素（block-level），行内元素（inline-level），行内块级元素（block-inline-level）

块级元素（block-level）: display为block，table，flex，grid等属性

行内元素（inline-level）： display为inline等属性

行内块级元素（block-inline-level）：display为inline-block，inline-table,inline-flex, inline-grid等属性

元素分类布局特点

块级元素

布局特点：

1. 默认占一行，width默认100%.
2. 可以设置width，padding，border，margin

行内元素

行内细分：可置换元素和不可置换元素

可置换元素：通过外部资源引入，可替换的元素。比如img的src引入。img，audio，video，input，textarea等

不可置换元素：可置换元素以外的行内元素。比如a，span

布局特点：

1. 不独占一行，从左往右排列
2. 不可置换元素不能设置width，padding，和垂直margin，可置换元素可以
3. 对齐方式，水平受父盒子text-align，垂直受自身vertical-algin，默认baseline。（注意如果父盒子为table-cell,也受父盒子的vertical-algin控制）

行内块级元素

布局特点：

1. 从左往右排列，不独占一行
2. 对齐方式和行内一样
3. width默认为0，但可以设置任何值

格式化上下文（formatting context）

格式化上下文：css布局格式化规则（布局规则）的上下文环境。其中的元素根据其规则进行布局。

分类：块级格式化上下文（block formatting context），行内格式化上下文（inline formatting context），弹性格式化上下文（flex formatting context）， 栅格格式化上下文（grid formatting context）

BFC（块级格式化上下文）

BFC布局规则：

1. 块级元素从上往下一个个排列，通过margin隔离，垂直方向合并margin
2. 行内和行内块级从左往右排列

BFC元素：具有BFC格式化的元素。决定了BFC的content元素的内的渲染规则。

BFC元素创建方式

1. 根元素或其包含他的元素
2. 浮动元素不为none
3. 定位position是absolute和fixed
4. 内联块display：inline-block
5. 表格元素display：table-cell（默认表格属性）
6. overflow不为visible
7. 弹性盒子display：flex及子元素inline-flex
8. 栅格盒子display：grid及子元素inline-grid

BFC特性：

1. 对应一个独立、封闭的渲染区域，子元素的CSS样式不会影响BFC元素外部；
2. 浮动元素参与计算高度，也就是说BFC元素识别浮动元素的高度；
3. 占据文档流的BFC元素（可使用overflow: auto创建），能够识别浮动的兄弟元素；
4. 占据文档流的BFC元素（可使用overflow: auto创建），width为auto时，自动占满当前剩余宽度

IFC（行内格式化上下文）

IFC创建：IFC的创建是隐式创建，是由内部的元素创建，可以是文本，inline或inline-block。

IFC特性：

1. 从左往右排列，从上到下顺序
2. 内部元素通过vertical来调整对齐方式
3. 内部区域的矩形框形成一行，叫行框

FFC（弹性格式化上下文）和 GFC（栅格格式化上下文）

两者分别是flex布局和grid布局的。略过

包含块

定义：设置元素属性（width，padding，border，margin）的百分比或偏移偏移属性有个参考对象。 那么这些参考对象一般是包含这个元素的父对象，或者position为非static的最近的祖先元素。 因此具有相对参考的祖先元素，其容纳区域有个专业名称，包含块。

初始包含块（ICB）

W3C规定，html根元素是有包含块的，是一个不可见的框，被称之为初始包含块。 （根元素的包含块就是首屏）

其他包含块

• static和relative的元素，包含块是块级祖先元素（一般是父元素）的content box区域

• absolute元素的包含块是，非静态static的祖先元素的padding box区域，如没找到就是初始包含块

• fixed的包含块是当前viewport视口

基本原理

文档流

定义：存放盒子的容器。

特性：

1. 从左往右，从上往下排列，页面元素根据自身特性展示。
2. 元素相互识别，有序

脱离文档流

定义：从默认盒子脱离到另一个盒子。不参高度计算，出现塌陷现象。

创建方式：float 和 position为absolute和fixed

浮动

属性：左浮动，右浮动，或none

清除浮动：

当前对象：clear属性的元素（可以是浮动元素或非浮动块级元素）-- 块内能识别浮动 清除对象：浮动元素 作用效果：识别浮动元素，换行显示

清除浮动的元素合并margin问题：

1. 浮动元素和浮动元素垂直方向合并margin
2. 浮动元素和非浮动元素垂直方向不合并margin

定位

属性：static，relative，absolute，和fixed

定位参考：static和relative，祖先元素content box absolute最近祖先非static元素，无就是初始包含块 fixed相对于视口 原理

1. static无偏移
2. relative在文档原位置，不同脱离文档流
3. absolute脱离文档流，非static的祖先元素为参考
4. fixe脱离文档流，视口作参考

行框

定义：包含IFC内部的所有子元素的虚拟矩形区域，形成的每一行，称为line box。

line box模型

组成七线谱：top，text-top， middle， baseline， text-bottom， bottom

行半局：top到text-top或text-bottom到bottom 内容区域： text-top到text-bottom 行距：行半距加内容区域

待续。。。。

总结：

笔记笔记笔记