CSS FC布局指南

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_34068198

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量250

点赞数

CC 4.0 BY-SA版权

文章标签： ruby javascript ViewUI

原文链接：https://juejin.im/post/5ce21cdfe51d45107c773f36

1. 布局

1.1 什么是FC

FC（Formatting Context）格式化上下文，其实指的是一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素之间的关系和相互作用。

FC类型	描述
BFC	块级格式化上下文( Block formatting contexts )
IFC	行内格式化上下文( Inline formatting contexts )
FFC	自适应格式化上下文( Flex Formatting Contexts )（CSS3新增）
GFC	网格布局格式化上下文( GridLayout Formatting Contexts )（CSS3新增）

Formatting context是W3C CSS2.1规范中的一个概念。

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。

格式化上下文指的是初始化元素定义的环境。包含两个要点，元素定义的环境和初始化。

在 CSS 中，元素定义的环境有两种，一种是块格式化上下文( Block formatting context )，另一种是行内格式化上下文( Inline formatting context )。这两种上下文定义了在 CSS 中元素所处的环境，格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。

最常用的布局:

弹性盒子布局
普通文档流布局

移动端开发可以优先考虑flex布局

BOX:CSS布局的基本单位

Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。

元素的类型和 display 属性，决定了这个 Box 的类型。

不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

让我们看看有哪些盒子：

a：block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；

c：inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

1.2 弹性盒子布局

弹性盒子(Flex Box) 弹性布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

flex布局示例

<div style="display: flex">
    <div style="flex: 3"></div>
    <div style="flex: 1"></div>
</div>
复制代码

以下为外层容器6大属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

概念: 主轴交叉轴

1.3 普通文档流布局规则

浮动的元素是不会被父级计算高度
非浮动元素会覆盖浮动元素的位置
margin会传递给父级
两个相邻元素上下margin会重叠

盒模型

盒模型的组成大家肯定都懂，由里向外content,padding,border,margin。盒模型是有两种标准的，一个是标准模型，一个是IE模型。

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;
复制代码

盒模型的问题，BFC来处理。

1.4 块格式化上下文 BFC

具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。

解决了什么问题：

可以解决元素塌陷、折叠等问题
自适应两栏布局
主要是父子、兄弟之间的布局关系

触发BFC的方式：

overflow: hidden; 可以清除子元素浮动，Ps“你乱动我就消灭你”
其他的包括：float不为none时，position的值不为static或releative

常用布局实例

移动端：

粘连布局（footer 底部固定布局）
单列块容器边距差异布局
双飞翼布局

pc端：

多列自适应布局
圣杯布局
等高布局

2.图文排版

1. 文字和图片同一中间水平线

<img id='close' style='vertical-align:middle;' src='/images/declear.gif'  />
复制代码

不同字号的文字垂直居中:1. line-height; 
复制代码

// 行距要使用倍数，不要用像素值
line-height: 1.5;
复制代码

3. sass 和 less区别是什么？

Sass变量必须是$开始，而Less变量必须使用@符号开始。
Sass是基于Ruby的语言，功能更加强大

问答

什么是响应式布局？三种基本的布局类型，分别是固定布局、流式布局和弹性布局

垂直水平居中

1.使用Flex

只需要在父盒子设置：display: flex; justify-content: center;align-items: center;

代码演示

2.使用 CSS3 transform

父元素设置:display:absolute

子元素设置: display:absolute; transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

代码演示

3.使用 display:table-cell 方法

父元素设置:display:table-cell; text-align:center;vertical-align:middle;

子元素设置: display:inline-block;vertical-align:middle;

这种方法不要在H5使用

3.1 浮动（float）
3.2 层叠（z-index）
3.3 溢出（overflow）
3.4 resize（notIE）（CSS3）
3.5 分栏（column）（IE10+ notOperaMini）（CSS3）

圣杯和双飞翼异同

圣杯布局来源于2006年这篇文章，一代经典

圣杯布局代码演示

而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了以下要点：

两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列
只需要使用一个额外的<div>标签

h5工具

在线编辑器，代码在线预览

vue在线预览：jsrun.net/DfXKp/edit
codepen.io/
jsfiddle：需要科学上网
jquery：www.jq22.com/webide/