1咽筋、基線垂直對(duì)齊
`vertical-align:值距误; 控制行內(nèi)元素行內(nèi)塊元素垂直對(duì)齊 塊元素?zé)o效`
vertical-align:baseline宪拥;// 默認(rèn)值 基線對(duì)齊
vertical-align:top信夫;// 頂對(duì)齊
vertical-align:middle窃蹋;// 垂直居中對(duì)齊
vertical-align:bottom;// 底對(duì)齊
塊元素可以設(shè)置行高 及 line-height, 缺點(diǎn)是高度固定静稻,超出去的文本會(huì)折行
height: 30px;
line-height: 30px;
可以考慮由內(nèi)容自動(dòng)撐開警没,設(shè)置padding, 適用于有背景色的
<div class="tip">
<i class="tip-img"></i>
<span>哈哈哈~</span>
</div>
.tip {
background-color: rgba($color: #5c7cff, $alpha: 0.15);
padding: 0.18rem 0.2rem;
border-radius: 0.08rem;
margin-top: 0.5rem;
margin-bottom: 0.6rem;
text-align: center;
// line-height: 0.54rem;
span {
font-size: 0.14rem;
color: #5c7cff;
}
.tip-img {
display: inline-block;
vertical-align: middle;
margin-top: -1px;
margin-right: 3px;
width: 0.3rem;
height: 0.22rem;
background: url(../../images/png/xiaomao.png) no-repeat;
background-size: 100%;
}
}
2振湾、文字豎排顯示
<p style=“writing-mode: tb-rl”>你好</p>
3杀迹、Vue3 向window注入方法 TS警告 元素隱式具有 "any" 類型,因?yàn)樗饕磉_(dá)式的類型不為 "number" 問題解決押搪。
window['funcName'] = function(){};
// 'funcName'會(huì)標(biāo)紅警告
(window as any).funcName = function(){};
// 正確的!
4大州、定義props 參數(shù)類型控制臺(tái)報(bào)錯(cuò),可以這么改
uid: [Number, String],
5疮茄、兩端對(duì)齊
1:float: left; float:right;
2:
display: flex;
justify-content: space-between;
margin-left: auto; 自動(dòng)撐開