理解bootstrap的列偏移offset 和 推拉push/pull的區別?

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

實現方式的區別:col-md-offset-,是利用margin-left實現的,col-md-push-/col-md-pull-是利用相對定位實現的。 效果的區別:
一、col-md-offset-
只能向右偏移,由於實現方式就是margin-left, 它後面全部的內容 都要依次向右移動; 而push/pull由於是相對定位,既能夠左偏移也能夠右偏移, 並且是隻有當前使用了 列推拉的元素纔會移動, 其餘元素不會動, 所以, 就有可能發生 元素列之間的重疊! ~~若是一行的偏移量+實際的寬度綜合超過12,col-md-offset會換行顯示,也是由於margin,而push/pull只會一部分不可見(超出容器),由於是相對自身定位。 ~~~ offset原理是用了margin-left來實現的偏移,而pull和push是用的float。 ~~~ 從功能上來看:push和pull能夠用來給元素換位置,比較靈活。 使用的是 float , 是 改變排序 , 可能會 重疊!html

col-md-關於推拉的單詞順序?

它們都是 col-md-[動詞]-距離:
動詞, 包括 offset 偏移, push推, pull 拉. 動詞都是 在 md/xs/lg等的後面, 距離的前面, 而不是 相反 .
由於這個類表示的意思是: 向右(或左) 推拉 幾個... 因此 是push/pull/offset-xxxjquery

================================================正則表達式

再說一下vim的查找和替換:

  1. 若是查找到了, 會以高亮選中的方式來提醒, 並且被選中的第一個字符還會以閃爍動畫的方式提示. 若是設置了 incsearch, 則你在寫搜索pattern的時候, 若是有匹配的, 就會顯示出來.
  2. 澄清兩個要點: 搜索範圍, 默認的是當前行, 也能夠指定搜索行的範圍, 好比 1:10, .,G等, 也能夠用%表示 全部行(即所有正文); 在一行內搜索替換的次數, 默認 是隻替換一次, 若是要替換這一行中全部匹配的狀況, 使用 /g選項.
  3. 最重要的是, 要清楚vim默認的正則表達式(pattern)的規則, 有四種, 可是咱們只需記住最基本的一種就是 /m(基本magic的寫法和規則): 在pattern表達式中, 只有 四個特殊符號(元字符)不須要轉義, 即 點號., 星號*, 行開始^, 行結束$ 除此以外,其餘的元字符都要用 分斜槓轉義, 包括: 表示單詞開頭/結束的 尖括號 <, >, 等等, 並且在pattern中能夠採用 反向前置引用 \1, \2等等.

==============================================vim

關於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的 邊距! 因此 若是不符合你的須要, 就要修改覆蓋.net

=================================調試

注意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
相關文章
相關標籤/搜索