前端布局中的FC

2017-11-01

css布局中的FC

首先提出几个布局中常见的问题？？

子元素浮动导致父元素高度坍陷
如何实现两栏自适应布局
如何处理相邻两个box垂直外边距重叠

以上问题各位是如何解决？？为什么呢？

1、BOX

CSS 布局的对象和基本单位。元素的类型和display属性，决定了这个 Box 的类型。不同类型的Box内的元素会以不同的方式渲染。

block-level box:display 属性为 block, list-item, table 的元素。
inline-level box:display 属性为 inline, inline-block, inline-table 的元素。

2、什么是FC(W3C CSS2.1 规范中的一个概念)

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

CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

3、什么是BFC？

块级格式化上下文(Block formatting context),只有普通流中的Block-level box参与的一块渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

注：而float、position值不为relative\static的元素是脱离普通文档流的，不参与BFC的布局。

3.1 布局规则

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

外边距重合的问题？

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

元素浮动，其他元素被重叠？

BFC的区域不会与float box重叠。

清除浮动
两栏自适应布局，左侧浮动，右侧生成bfc

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算。

清除浮动
子元素浮动父元素高度坍陷？

3.1 这么厉害？怎么样才能成为BFC呢

根元素
float不为none
position不为relative和static
display:inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

3.2举个栗子解读BFC

<style>
    body {
        width: 300px;
        position: relative;
    }
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

根据BFC布局规则

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

怎么实现左边固定右边自适应?

根据BFC布局规则

BFC的区域不会与float box重叠。
让ian生成BFC？

1
2
3

.main {
    overflow: hidden;
}

如何选取方式生成BFC？
各生成BFC方式的总结

float:left 然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，因此，无法用来实现自动填满容器的自适应布局。
position:absolute 这个脱离文档流有些严重，我就不说什么了……关于定位又是一个比较复杂的布局方式
overflow:hidden 这个超棒的哦！不像浮动和绝对定位。也就是溢出剪裁什么的，本身还是个很普通的元素。
display:inline-block 会让元素尺寸包裹收缩，完全就不是我们想要的block水平的流动特性。
display:table-cell 让元素表现得像单元格一样，尺寸包裹收缩。

自适应两栏布局有很多的其他方法

4、IFC

内联格式化上下文

1.IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。
2.水平居中：当一个块要在水平居中时，设置为inline-block则会在外层产生IFC，通过text-align可以水平居中。
3.垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

5、FFC

(Flex Formatting Contexts)为”自适应格式化上下文”，

display值为flex或者inline-flex的元素将生成ffc
display: flex 或 inline-flex得到一个伸缩容器。Flexbox 定义了伸缩容器内伸缩项目该如何布局。

不定宽高的垂直水平居中方法
方法1：

.parent{
position:relative;
}
.content{
position:absoulte;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

方法2：

.parent{
justify-content:center; //子元素水平居中
align-items:center;     //子元素垂直居中
display:-webkit-flex;
}

点我了解FFC牛逼的地方

展开全文 >>

my new post

2017-10-24

欢迎使用 Cmd Markdown 编辑阅读器

我们理解您需要更便捷更高效的工具记录思想，整理笔记、知识，并将其中承载的价值传播给他人，Cmd Markdown 是我们给出的答案 —— 我们为记录思想和分享知识提供更专业的工具。您可以使用 Cmd Markdown：

整理知识，学习笔记

发布日记，杂文，所见所想

撰写发布技术文稿（代码支持）

撰写发布学术论文（LaTeX 公式支持）

除了您现在看到的这个 Cmd Markdown 在线版本，您还可以前往以下网址下载：

Windows/Mac/Linux 全平台客户端

请保留此份 Cmd Markdown 的欢迎稿兼使用说明，如需撰写新稿件，点击顶部工具栏右侧的 新文稿 或者使用快捷键 Ctrl+Alt+N。

什么是 Markdown

Markdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档：譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题，分割不同的段落，粗体或者斜体某些文字，更棒的是，它还可以

1. 制作一份待办事宜 Todo 列表

支持以 PDF 格式导出文稿
改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率
新增 Todo 列表功能
修复 LaTex 公式渲染问题
新增 LaTex 公式编号功能

2. 书写一个质能守恒公式[^LaTeX]

$$E=mc^2$$

3. 高亮一段代码[^code]

@requires_authorization
class SomeClass:
    pass
if __name__ == '__main__':
    # A comment
    print 'hello world'

4. 高效绘制流程图

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op

5. 高效绘制序列图

1
2
3

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

6. 高效绘制甘特图

title 项目开发流程
section 项目确定
    需求分析       :a1, 2016-06-22, 3d
    可行性报告     :after a1, 5d
    概念验证       : 5d
section 项目实施
    概要设计      :2016-07-05  , 5d
    详细设计      :2016-07-08, 10d
    编码          :2016-07-15, 10d
    测试          :2016-07-22, 5d
section 发布验收
    发布: 2d
    验收: 3d

7. 绘制表格

项目	价格	数量
计算机	\$1600	5
手机	\$12	12
管线	\$1	234

8. 更详细语法说明

想要查看更详细的语法说明，可以参考我们准备的 Cmd Markdown 简明语法手册，进阶用户可以参考 Cmd Markdown 高阶语法手册了解更多高级功能。

总而言之，不同于其它 所见即所得 的编辑器：你只需使用键盘专注于书写文本内容，就可以生成印刷级的排版格式，省却在键盘和工具栏之间来回切换，调整内容和格式的麻烦。Markdown 在流畅的书写和印刷级的阅读体验之间找到了平衡。 目前它已经成为世界上最大的技术分享网站 GitHub 和技术问答网站 StackOverFlow 的御用书写格式。

什么是 Cmd Markdown

您可以使用很多工具书写 Markdown，但是 Cmd Markdown 是这个星球上我们已知的、最好的 Markdown 工具——没有之一：）因为深信文字的力量，所以我们和你一样，对流畅书写，分享思想和知识，以及阅读体验有极致的追求，我们把对于这些诉求的回应整合在 Cmd Markdown，并且一次，两次，三次，乃至无数次地提升这个工具的体验，最终将它演化成一个 编辑/发布/阅读 Markdown 的在线平台——您可以在任何地方，任何系统/设备上管理这里的文字。

1. 实时同步预览

我们将 Cmd Markdown 的主界面一分为二，左边为编辑区，右边为预览区，在编辑区的操作会实时地渲染到预览区方便查看最终的版面效果，并且如果你在其中一个区拖动滚动条，我们有一个巧妙的算法把另一个区的滚动条同步到等价的位置，超酷！

2. 编辑工具栏

也许您还是一个 Markdown 语法的新手，在您完全熟悉它之前，我们在 编辑区 的顶部放置了一个如下图所示的工具栏，您可以使用鼠标在工具栏上调整格式，不过我们仍旧鼓励你使用键盘标记格式，提高书写的流畅度。

tool-editor

3. 编辑模式

完全心无旁骛的方式编辑文字：点击 编辑工具栏 最右侧的拉伸按钮或者按下 Ctrl + M，将 Cmd Markdown 切换到独立的编辑模式，这是一个极度简洁的写作环境，所有可能会引起分心的元素都已经被挪除，超清爽！

4. 实时的云端文稿

为了保障数据安全，Cmd Markdown 会将您每一次击键的内容保存至云端，同时在 编辑工具栏 的最右侧提示 已保存 的字样。无需担心浏览器崩溃，机器掉电或者地震，海啸——在编辑的过程中随时关闭浏览器或者机器，下一次回到 Cmd Markdown 的时候继续写作。

5. 离线模式

在网络环境不稳定的情况下记录文字一样很安全！在您写作的时候，如果电脑突然失去网络连接，Cmd Markdown 会智能切换至离线模式，将您后续键入的文字保存在本地，直到网络恢复再将他们传送至云端，即使在网络恢复前关闭浏览器或者电脑，一样没有问题，等到下次开启 Cmd Markdown 的时候，她会提醒您将离线保存的文字传送至云端。简而言之，我们尽最大的努力保障您文字的安全。

6. 管理工具栏

为了便于管理您的文稿，在 预览区 的顶部放置了如下所示的 管理工具栏：

tool-manager

通过管理工具栏可以：

发布：将当前的文稿生成固定链接，在网络上发布，分享
新建：开始撰写一篇新的文稿
删除：删除当前的文稿
导出：将当前的文稿转化为 Markdown 文本或者 Html 格式，并导出到本地
列表：所有新增和过往的文稿都可以在这里查看、操作
模式：切换普通/Vim/Emacs 编辑模式

7. 阅读工具栏

tool-manager

通过 预览区 右上角的 阅读工具栏，可以查看当前文稿的目录并增强阅读体验。

工具栏上的五个图标依次为：

目录：快速导航当前文稿的目录结构以跳转到感兴趣的段落
视图：互换左边编辑区和右边预览区的位置
主题：内置了黑白两种模式的主题，试试 黑色主题，超炫！
阅读：心无旁骛的阅读模式提供超一流的阅读体验
全屏：简洁，简洁，再简洁，一个完全沉浸式的写作和阅读环境

8. 阅读模式

在 阅读工具栏 点击或者按下 Ctrl+Alt+M 随即进入独立的阅读模式界面，我们在版面渲染上的每一个细节：字体，字号，行间距，前背景色都倾注了大量的时间，努力提升阅读的体验和品质。

9. 标签、分类和搜索

在编辑区任意行首位置输入以下格式的文字可以标签当前文档：

标签：未分类

标签以后的文稿在【文件列表】（Ctrl+Alt+F）里会按照标签分类，用户可以同时使用键盘或者鼠标浏览查看，或者在【文件列表】的搜索文本框内搜索标题关键字过滤文稿，如下图所示：

file-list

10. 文稿发布和分享

在您使用 Cmd Markdown 记录，创作，整理，阅读文稿的同时，我们不仅希望它是一个有力的工具，更希望您的思想和知识通过这个平台，连同优质的阅读体验，将他们分享给有相同志趣的人，进而鼓励更多的人来到这里记录分享他们的思想和知识，尝试点击 (Ctrl+Alt+P) 发布这份文档给好友吧！

再一次感谢您花费时间阅读这份欢迎稿，点击 (Ctrl+Alt+N) 开始撰写新的文稿吧！祝您在这里记录、阅读、分享愉快！

作者 @ghosert
2016 年 07月 07日

[^LaTeX]: 支持 LaTeX 编辑显示支持，例如：$\sum_{i=1}^n a_i=0$，访问 MathJax 参考更多使用方法。

[^code]: 代码高亮功能支持包括 Java, Python, JavaScript 在内的，四十一种主流编程语言。