zoukankan      html  css  js  c++  java
  • 理解bootstrap的列偏移offset 和 推拉push/pull的区别?

    参考: http://www.cnblogs.com/jnslove/p/5430481.html & https://blog.csdn.net/hly_coder/article/details/78968729

    实现方式的区别:col-md-offset-,是利用margin-left实现的,col-md-push-/col-md-pull-是利用相对定位实现的。 效果的区别:
    1、col-md-offset-
    只能向右偏移,因为实现方式就是margin-left, 它后面所有的内容 都要依次向右移动; 而push/pull因为是相对定位,既可以左偏移也可以右偏移, 而且是只有当前使用了 列推拉的元素才会移动, 其他元素不会动, 因此, 就有可能发生 元素列之间的重叠! ~~如果一行的偏移量+实际的宽度综合超过12,col-md-offset会换行显示,也是因为margin,而push/pull只会一部分不可见(超出容器),因为是相对自身定位。 ~~~ offset原理是用了margin-left来实现的偏移,而pull和push是用的float。 ~~~ 从功能上来看:push和pull可以用来给元素换位置,比较灵活。 使用的是 float , 是 改变排序 , 可能会 重叠!

    col-md-关于推拉的单词顺序?

    它们都是 col-md-[动词]-距离:
    动词, 包括 offset 偏移, push推, pull 拉. 动词都是 在 md/xs/lg等的后面, 距离的前面, 而不是 相反 .
    因为这个类表示的意思是: 向右(或左) 推拉 几个... 所以 是push/pull/offset-xxx

    ================================================

    再说一下vim的查找和替换:

    1. 如果查找到了, 会以高亮选中的方式来提醒, 而且被选中的第一个字符还会以闪烁动画的方式提示. 如果设置了 incsearch, 则你在写搜索pattern的时候, 如果有匹配的, 就会显示出来.
    2. 澄清两个要点: 搜索范围, 默认的是当前行, 也可以指定搜索行的范围, 比如 1:10, .,G等, 也可以用%表示 所有行(即全部正文); 在一行内搜索替换的次数, 默认 是只替换一次, 如果要替换这一行中所有匹配的情况, 使用 /g选项.
    3. 最重要的是, 要清楚vim默认的正则表达式(pattern)的规则, 有四种, 但是我们只需记住最基本的一种就是 /m(基本magic的写法和规则): 在pattern表达式中, 只有 四个特殊符号(元字符)不需要转义, 即 点号., 星号*, 行开始^, 行结束$ 除此之外,其他的元字符都要用 分斜杠转义, 包括: 表示单词开头/结束的 尖括号 <, >, 等等, 而且在pattern中可以采用 反向前置引用 1, 2等等.

    ==============================================

    关于css的格式, 参考有影响力的其他文件
    一是, 建议缩进都采用 两个字符 就好 了
    二是, css的元素/类/id 等 应该被看作是一个单词, 所以 后面的"左大括号" 前面应跟 一个 空格

    =======================

    在form表单中的 col-md-x中使用 inline 和 block的区别?

    1. inline和 block虽然 都能在 外观上 显示, 但是 它们在 padding, margin, 甚至 width...等方面还是有较大区别的, 特别是在 多个控件 需要 对齐的情况下, 却对不齐 就很是麻烦了. 所以在 form表单中 , 如果控件是放在 col-md-x 栅格中的话, 在用js进行显示/隐藏 控制的时候, 最好是写none, block, 不要写inline, 甚至是 inline-block 都不行!

    2. 再次证明了 如果出现问题, 一定要用f12调试控制台, 看 "实时代码". 因为 这个实时代码 就反映了当前 真实的情况, (不要只看 源代码) , 因为这个实时代码, 可能是来自多方面的效果合成: 可能 是html源代码的, 也可能是css代码的, 甚至是 js代码 实时 添加/修改 进来的! 这样 跟html源代码 以对比就更容易找到问题 所在了!

    3. 注意 bs中的 p标签, 默认的规则就是: p {margin: 0 0 10px; } 也就是 , p的下方margin有10px的 边距! 所以 如果不符合你的需要, 就要修改覆盖

    =================================

    注意jquery在写事件时的方式 和 原生的 js 写事件 的区别:

    1. 原生的js, 需要两步: 一是定义一个事件处理函数, 二是在属性中指明: onkeydown=func() , 而jquery则是直接写一个 事件函数, 比如: $('document').keydown(function(){....}); 就把原生的js的 两步工作都做了.

    2. 显示的使用 on 函数, 比直接使用 事件函数 要更直观一些 比如: $(document).on('keydown', function(event){...});
      使用 键盘事件时, 一定要返回ifalse 才能 屏蔽 浏览器的默认行为!

    =========================================

    在写html或css时的一些常规思想:

    • 外部间距: 对于div或区块, 常常要做的是: 要调整区块和区块 在 纵向上的 间距, 一般 只需要规定 每个区块 在 下方的margin就可以了: 即只需要规定: margin-bottom: 10px就好了
    • 内部 间距: 对于一些panel或容器, 为了保证 容器中的 内容, 不会紧挨着/ 抵拢边框, 一般规定 四周方向 上一个paddign: 比如: 规定 padding: 5px
  • 相关阅读:
    sencha touch 扩展篇之将sencha touch打包成安装程序(上)- 使用sencha cmd打包安装程序
    sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
    一个不错的android组件的网站
    sencha touch 扩展篇之使用sass自定义主题样式 (上)使用官方的api修改主题样式
    sencha touch 入门系列 (九) sencha touch 布局layout
    面试题总结
    国外接活网站Elance, Freelancer和ScriptLance的介绍和对比
    sencha touch 入门系列 扩展篇之sencha touch 项目打包压缩
    Android Design Support Library——Navigation View
    设计模式——命令模式
  • 原文地址:https://www.cnblogs.com/bkylee/p/10323503.html
Copyright © 2011-2022 走看看