womoso項目總結

原創

2020-02-21 17:01

1 關於元素命名問題

將元素的樣式標籤與行爲標籤分開，便於日後的操作。
比如一個刪除按鈕

<button class="btn btn-theme-bg ac-btn-delete">delete</button>

在文檔遷移中知道自己命名的壞毛病了吧，自己給自己挖坑能怪誰呀

2 很多項目可以使用很多共同的樣式比如margin padding 等等。可以搭建自己的一套樣式列表在配合bootatrsp的使用

margin-left-10{margin-left:10px;}
等等

3 對於項目中相同部分組件，保持使用相同結構，命名。比如購物車頁面和訂單頁面都有的table列表。

4 background-clip background-origin

這個部分是用的背景圖 <div id="view" ></div>
然後是padding border 配合使圖像與邊界之間空出4px間隙..

所以要求背景圖在內容區域顯示，這就用到了

background-clip:content-box;

出來啦。

然後找一下相關屬性background-origin
先看看w3c 對於兩者的解釋，

注意，background-origin只適應於背景圖片的相關操作，因爲要配合 background-position 的使用

background-clip 同時可以處理背景圖與背景色

background-clip

也就是說，如果你是用的clip ,背景圖會發生裁剪。這個從clip –裁剪，也可以看出來

5 圖片在某個盒子中垂直水平居中

<div class='box'>
   <img  src='img/test.img'/>
</div>

對應的css

           .box{
             width: 500px;
             height: 400px;
             border: 1px solid saddlebrown;
             text-align: center;
             line-height: 400px;
            }   
            img{ vertical-align: middle; }

也就是說，當父級盒子設置
text-align:center;line-height:height;
同時子元素img , 是內聯元素而非塊元素的時候，圖片會居中。注意，要配合vertical-align:middle;來使用。

這個問題是關於line-height 與 vertical-align 的，之前在文章中小小的提到過一次，今天又仔細讀了張大神的文章，自己寫一遍，加深理解。

如果將css代碼改爲這樣

          .box{margin: 50px auto;
             width: 300px;
             border: 1px solid saddlebrown;
             text-align: center;
             background: #A6E1EC;
            }   
            img{width: 200px;}

得到樣式如下：

按理說盒子的高度應該是img撐起來的高度，但是，底部卻有多餘的空隙出現。

           .box{margin: 50px auto;
                width: 300px;
             border: 1px solid saddlebrown;
             background: #A6E1EC;
            }   
            img{width: 200px; display: block;}

看。間隙消失了。
也就是說，這個間隙的存在是與子元素（這裏是img）的內聯還是塊級屬性有關。

But,why?

在HTML5文檔聲明下，塊狀元素內部的內聯元素的行爲表現，就好像塊狀元素內部還有一個（更有可能兩個-前後）看不見摸不着沒有寬度沒有實體的空白節點.

來，用事實說話，檢測檢測

       <div class="box big">
            <a>試驗檢測試驗檢測</a>
        </div>
        <div class="box big">
            <p>試驗檢測試驗檢測</p>
        </div>

          .box{
             border: 4px solid #000;
             background: #A6E1EC;
            }   
            a , p{ font-size:64px; border: 2px solid red;  }

看出來了吧。真的是這樣。

（我用ps看了一下，圖片的底部間隙是3px ，文字底部間隙也是3px ）

繼續說，如果在圖片後寫幾個字，會出現這樣的情況。

這樣我們思考兩個問題，1 vertical-align默認的對齊方式是？
2 後面文字的高度從何而來？

w3c解釋如下：

所以圖片以及文字在默認與基線對齊的情況下，出現了上圖所以情況。而他們的基線就是文字z的下邊。

文字的高度則是由於line-height 決定的。
對於同樣文字大小相同但是line-height設置不同的a strong元素，表現如下


a , strong {font-size: 20px;color: #fff; display: inline-block; background: #000;}
a{line-height: 40px; text-decoration: none;}
strong{line-height: 50px;}

所以說，文字的高度則是由於line-height 決定的。

所以之前，爲什麼最開始展示的那個圖片底部會有間隙，就是因爲vertical-align和line-height同時作用造成的呀。下面的空隙高度，實際上是文字計算後的行高值和字母xz下邊緣的距離。

那怎麼解決呢？
既然是這兩人的問題，那就對症下藥。
圖片默認是inline水平的，而vertical-align對塊狀水平的元素無感。所以設置圖片爲block。就會發現間隙消失。

因此，任意尺寸的圖片（或者內聯塊狀化的多行文字）的垂直居中效果。就是使用，vertical-align和line-height來實現。

對於想要垂直居中一段文字：
將該元素設置爲display:inline-block; vertical-align:center;
注意，本身也要設置line-height;否則將繼承自父級元素，換行之後會發生錯誤。

<div class="boxs">
            <strong>隔了百年的光陰，那些人，那些事，那些孤寂而平淡的日子，一旦過去，便是再也、再也無法回來了。
　原來,即便是生命裏最深的愛戀,也終究抵不過時間萬里的迢梯,浮世骯髒</strong>
        </div>

核心css樣式

         .box{
             line-height:350px;
             text-align: center;
            }   

            strong{
             display: inline-block;
            vertical-align: middle;
             line-height: 24px;  }