长期困扰的边框顶格 外边距融合的问题- 边距重合的问题...

不用过渡追求vim的 插件的 贪多, 基本的 插件配置 了 就形了. 插件安装多了, vim的加载速度也 会 拖慢, 而且 插件间的冲突 也会增多, 过多的插件对 编写代码 也没有 太 必要

工具链, 包括编辑器 vim 和 其他插件等...
生态系统, 包括所有有关 vim 的东西..

vim的css颜色显示插件:

1. 只能在独立的 css文件, 或 style标签内 ,不能在 style 属性中使用
2. 文件下载地址: http://www.vim.org/scripts/script.php?script_id=2150 : 图片 --(一定要 顶格写 )-- 不会 打断列表 模式?
   
3. 参考文章: http://www.cnblogs.com/Jason-Damon/archive/2011/10/31/2229692.html
   另外单独创建一个目录: ~/.vim/after/syntax, 将下载的css.vim放在syntax目录下. 这个文件在 bundle中 应该叫 css-color.vim

vim的字典功能

1. 安装是 : Bundle 'asins/vim-dict' 这个Bundle 就等于 Plugin. 随便你写哪一个. 即使你在.vimrc文件中 , 写成 Bundle, 在最后安装的时候, 还是 转变成 Plugin. -- 所以 Plugin应该是标准的..
   
   

2. 应用dict的快捷键是: ctrl+x, ctrl+k

---

1. div本身默认好像没有 外边距? 默认的 div的 margin=0? 但是 p,ul,dl,li,ul, table等都有10px, 8px 的默认外边距?

2. 当div下包含 p时, 由于p的 上-外边距和div的 上-外边距( 虽然为0, 但是还是 "存在的"), 直接接触? 所以div和p的外边距重合(融合), 于是div也就 距离 浏览器窗口 顶端一个 10px的外边距, 但是 给div加上边框后, div的上边距和p的上边距就 隔离了, 所以不能发生 外边距 融合, 于是, div紧贴浏览器窗口顶端....

3. 想象 每个 元素, 外部都 有 一个 边框, 外边距就 紧贴 着边框的!

   解决方案: https://segmentfault.com/q/1010000004315402/a-1020000004320264 这个上面讲得很好:

4. 边距重合, 只会发生在 垂直的方向上, 不会发生在 左右的方向上.

5. 边距发生的情形主要有两种:一种是兄弟并列，　另一种是　父子　包含

6. 外边距融合:　是指当　没有　ｂｏｒｄｅｒ或者 padding时, 外边距可以发生 穿透, 与其他 元素的外边距(或 穿透的 外边距) 发生 直接接触, 直接摩擦, 相互作用, 造成 外边距的表现方式 不跟常规的方式一样...

7. 兄弟元素的padding和border 都不能阻止 边距重合. 因为边距 总是在border和padding的外部, 父子包含元素, 父元素的border和padding都能够阻止 边距重合..

8. 边距重合后, 数值如何计算: (都不是 边距相加!)

    对于  父子元素 的 上-上边距重合,  应该取 "大值"作为 共同的 上边距; 
    
    对于 兄弟元素 的 上-下 边距重合, 应该取 "小值" 作为两者之间的边距.
   

---

什么叫bfc? block formatting context. 块级元素 格式化 上下文..有时为了排版的需要, 要故意的, 使 元素 BFC化!

Block Formatting Context当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。 为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。

怎样才能形成Block Formatting Context当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context
•float的值不为none。
•overflow的值不为visible。
•display的值为table-cell, table-caption, inline-block中的任何一个。
•position的值不为relative和static。

布局中使用 自适应布局, (还有flexbox layout, grid layout...). 有 "纯的div 流体特性布局, 但是需要知道 不同场景下的 左边/右边 浮动元素的尺寸, 然后才能使用 margin padding 等来布局. 而 使用 BFC化的 自适应布局.... 则不关心 /不需知道 浮动元素的尺寸, 且 浮动元素 与BFC 元素之间的 间距 写在 "浮动元素"上, BFC元素, 不用写间距等, 可以统一的使用一个类...

参考http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/