資訊專欄INFORMATION COLUMN
摘要：問題描述兩個(gè)屬性都是但是一個(gè)有內(nèi)容一個(gè)沒有內(nèi)容為什么會(huì)出現(xiàn)高低不平的現(xiàn)象看效果解決方法是給元素添加造成原因是內(nèi)的元素基線變了
問題描述
兩個(gè)div屬性都是display：inline-block;但是一個(gè)有內(nèi)容一個(gè)沒有內(nèi)容 為什么會(huì)出現(xiàn)高低不平的現(xiàn)象？
看效果~
.div-3, .div-4 {
display: inline-block;
width: 100px;
height: 50px;
line-height: 50px;
background: #003366;
text-align: center;
}
.div-3 a, .div-4 a {
color: #fff;
}
div-2
.div-1, .div-2 {
display: inline-block;
width: 100px;
height: 50px;
line-height: 50px;
background: #003366;
text-align: center;
vertical-align: top;
}
.div-1 a, .div-2 a {
color: #fff;
}
div-1
div-2
解決方法是給inline-block元素添加vertical-align:middle or top or bottom
造成原因是inline-block內(nèi)的元素基線變了文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110937.html
摘要：而行內(nèi)塊元素，顧名思義，就是位于行內(nèi)的塊元素。紅線表示行高的頂邊和底邊，綠線表示字體高度，藍(lán)線表示基線。紅線表示外邊距的邊界，黃色是邊框，綠色的內(nèi)邊距，藍(lán)色是內(nèi)容區(qū)，藍(lán)線是每個(gè)行內(nèi)塊元素的基線?，F(xiàn)在，我們已經(jīng)知道了對(duì)齊相關(guān)的一切要素。 好，我們聊聊vertical-align。這個(gè)屬性主要目的用于將相鄰的文本與元素對(duì)齊。而實(shí)際上，verticle-algin可以在不同上下文中靈活地對(duì)齊...
摘要：前端面試重點(diǎn)居中問題在頁面布局開發(fā)中，居中問題是我們經(jīng)常碰到的問題，掌握居中問題對(duì)于解決頁面布局非常重要，同時(shí)它也是常見的面試重點(diǎn)。已知寬高的元素父元素相對(duì)定位，子元素絕對(duì)定位。以上才支持的兼容性寫法完 前端面試重點(diǎn)——居中問題 在頁面布局開發(fā)中，居中問題是我們經(jīng)常碰到的問題，掌握居中問題對(duì)于解決頁面布局非常重要，同時(shí)它也是常見的面試重點(diǎn)。本文匯總一些常見的居中方式以及一些注意點(diǎn)，權(quán)當(dāng)...
摘要：前端面試重點(diǎn)居中問題在頁面布局開發(fā)中，居中問題是我們經(jīng)常碰到的問題，掌握居中問題對(duì)于解決頁面布局非常重要，同時(shí)它也是常見的面試重點(diǎn)。已知寬高的元素父元素相對(duì)定位，子元素絕對(duì)定位。以上才支持的兼容性寫法完 前端面試重點(diǎn)——居中問題 在頁面布局開發(fā)中，居中問題是我們經(jīng)常碰到的問題，掌握居中問題對(duì)于解決頁面布局非常重要，同時(shí)它也是常見的面試重點(diǎn)。本文匯總一些常見的居中方式以及一些注意點(diǎn)，權(quán)當(dāng)...
摘要：視覺格式化模型瀏覽器在解析渲染我們所寫的內(nèi)容，順序渲染普通文檔流。渲染結(jié)果如下圖這兒有一個(gè)知識(shí)點(diǎn)文檔流按我的理解就是在瀏覽器渲染顯示的一個(gè)模式，這個(gè)模式的特點(diǎn)自上而下，從左到右排列規(guī)則。如果不特殊指定，瀏覽器會(huì)默認(rèn)當(dāng)前的渲染是按文檔流模式。 CSS視覺格式化模型 瀏覽器在解析渲染我們所寫的html內(nèi)容，順序渲染（普通文檔流）。 1 2 3 4 ...
閱讀 2908·2021-11-11 16:55
閱讀 955·2021-09-28 09:36
閱讀 3807·2021-09-22 15:22
閱讀 2239·2021-09-06 15:12
閱讀 1771·2021-08-19 10:55
閱讀 2896·2019-08-30 12:52
閱讀 503·2019-08-29 14:03
閱讀 1211·2019-08-29 12:27
