前言
最近老師讓大家單獨寫前后端分離項目，真是大家卷完后端，一起去卷前端了。（我以前都是主要負責后端，處於只大致看的懂的級別，說多了都是淚啊）。
真是處於一邊學一邊寫的狀態，基本就是每天早上看上兩~三小時視頻（主要是復習css、js、vue框架），之后開始敲代碼。
只有等到晚上回到寢室才有空寫寫文章，復習和總結一遍。
CSS：vertical-align 屬性
vertical-align 屬性設置元素的垂直對齊方式。
我們直接用案例來說明：
1）代碼：
html代碼：
<div class="box1">
<img
style="width: 100px; height: 100px;"
src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d483b036e58b43e9a0ac93192da02f7d~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?">
我是博主 寧在春,希望能和大家一起交流學習
</div>
css代碼
.box1{
width: 500px;
height: 100px;
border: 1px solid green;
}
展示的效果如下：
2）問題：
你會發現這行字並不和圖片對齊，而是稍微在圖片下方一點。這個點對於我這個新手小白是真的難受，我一開始是拿<span>標簽包住，然后再做處理。
然后今天才知道這個vertical-align屬性（大伙們不要罵我😁，剛來前端，請大家多指導）
vertical-align有以下值：
| baseline | 默認值。元素放置在父元素的基線上。 |
|---|---|
| sub | 垂直對齊文本的下標。 |
| super | 垂直對齊文本的上標 |
| top | 把元素的頂端與行中最高元素的頂端對齊 |
| text-top | 頂端對齊 |
| middle | 居中對齊 |
| bottom | 把元素的頂端與行中最低的元素的頂端對齊。 |
| text-bottom | 把元素的底端與父元素字體的底端對齊。底端對齊 |
| inherit | 規定應該從父元素繼承 vertical-align 屬性的值。 |
如果我們想讓文字和圖片底部標准的對齊，不留縫隙的話，只要給img標簽設置個vertical-align:text-bottom.
效果圖：
居中如下：
其他的也給大家做了一個動圖展示：
自言自語
我之前可以說是一直是個純后端，只看過前端視頻，存有理論經驗。前端框架中只了解過vue框架。
個人所談：
基礎真的是非常重要。我現在就是要寫什么，很多東西不會，但是一查又是學過的，也是非常簡單的。
多學多看多敲。
紙上得來終覺淺，絕知此事要躬行,我之前看源碼也是如此。一定要實踐。代碼一定要規范，這個一定要形成習慣，因為代碼始終是給別人看的。
大家好，我是博主寧在春：主頁
一名喜歡文藝卻踏上編程這條道路的小青年。
希望：我們，待別日相見時，都已有所成。
持續更新踩坑記錄，最近都是在學習前端....
