前言：
最近在搭一個仿京東的移動app
移動端相比PC端的後臺管理少了很多邏輯，但是相對難的就是佈局的實現。
所以最近重心都在佈局，知識的吸收和鞏固都集中在css，sass等上面了
由下記錄我在開發過程中遇到的一些值得記錄&思考的東西：
1. css實現文本最多兩行，超過則用省略號結尾
overflow: hidden;//超出部分首先隱藏
text-overflow: ellipsis;//然後省略號補齊空位
display: -webkit-box;// 設置display，將對象作爲彈性伸縮盒子模型顯示
-webkit-line-clamp: 2;// 限制在一個塊元素顯示的文本的行數
text-overflow: -o-ellipsis-lastline;//在文本的最後一行加上省略號
-webkit-box-orient: vertical;//規定框的子元素應該被水平或垂直排列2. 文本單行居中，多行居左
//html
<h2><p>單行居中，多行居左</p></h2>p {
display: inline-block;
text-align: left;//內層居左
}
h2{
text-align: center;//外層居中
}參考鏈接：單行居中顯示文字，多行居左顯示，最多兩行超過用省略號結尾
3. 多列均勻佈局問題
我使用的是flexbox佈局，因爲移動端已經完全適配flex了。
借鑑了bootstrap的設計思想，把佈局的都寫成一個class然後需要的時候直接引用相應的class標籤
如實現全適應的均勻三列布局：
關於flexbox的知識點參考：
阮一峯的網絡日誌—Flex 佈局教程：語法篇
擴展鏈接：多列均勻佈局問題
4. 消失的邊界線問題
我們要完成如上效果，列與列之間有個短豎線，初看很簡單直接每列加上左邊框：
<div class="div_class_Grid">
<div class="div_class_GridCol_Col33">
<p>154.4萬</p>
<p>關注人數</p>
</div>
<div class="div_class_GridCol_Col33">
<p>98</p>
<p>全部商品</p>
</div>
<div class="div_class_GridCol_Col33">
<p>1</p>
<p>店鋪動態</p>
</div>
</div>.div_class_GridCol_Col33{
border-left:1px solid $bordercolor;
}然後就有點尷尬了，
意料之外情理之中的事發生了：
多了一個邊界線、
我解決的辦法是，只給中間的那塊元素加邊框。。左邊一個右邊一個
.div_class_GridCol_Col33:nth-child(2){
border-left:1px solid $bordercolor;
border-right:1px solid $bordercolor;
}
得虧只有三列。。如果超過三列呢。
所以我們應該直面問題，把邊界的那個去掉。。
這裏有個奇淫技巧：
思路：實現把左邊的那個邊框想辦法給移出去
實現：把每列向左移動1px， 然後父容器規定超出的就隱藏，然後get √
.div_class_Grid{
overflow: hidden;
}
.div_class_GridCol_Col33{
margin-left:-1px;
border-left:1px solid $bordercolor;
}參考鏈接：7、消失的邊界線問題
備註：這位騰訊的大神寫的這個整理真心實用 ，歎爲觀止。
5. 多列布局等高的實現
比如說我們要佈一個這樣的局
要在右邊的列加個border-bottom
需要面對的問題是：
左邊的高度是由圖片撐開的，隨着設備屏幕的增大縮小圖片會自適應變化。
右邊的文字部分是由文字撐開高度的。雖然文字也是rem爲單位隨着屏幕變化而變化但是變化的程度終究沒有圖片來的陡峭。
問題的直接原因以上。
如果通過解決直接原因的辦法解決：
我想的是右邊加個padding-top ,padding-bottom 的高度。然後撐開右邊的高度。
然而還是會面臨rem變化與圖片變化程度不一的問題。
而解決問題的根本路徑便是：讓左右兩列等高。
1.因爲是用到flex佈局。
所以：使用align-items:stretch屬性即可撐開
備註：爲啥沒考慮到這個屬性呢。。
因爲之前設置流式佈局的時候用align-items:flex-start
使用的是如果一行排不下就單獨起行。
現在改掉這個屬性爲stretch或者直接刪除這個屬性均可實現自動撐開。
對flex佈局就是這麼強大。。
參考鏈接：9、巧妙的多列等高佈局
6.未完待續
TODO:
1.移動端1px的問題
2.