css 小知識(shí)點(diǎn)：inline/inline-block/line-height

icattlecoder 發(fā)布于2019-04-23 13:27 / 2632人閱讀

摘要：此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。因此無(wú)法設(shè)置寬度和高度行內(nèi)塊元素。元素前后沒(méi)有換行符新增的值用通俗的話講，就是不獨(dú)占一行的塊級(jí)元素。只是現(xiàn)在兼容性不太好，無(wú)奈臉。。。

inline:

此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。因此：無(wú)法設(shè)置寬度和高度～

inline-block:

行內(nèi)塊元素。元素前后沒(méi)有換行符（CSS2.1 新增的值）

用通俗的話講，就是不獨(dú)占一行的塊級(jí)元素。然后擁有塊級(jí)元素的屬性，可以設(shè)置寬度和高度。

line-height:

對(duì)于塊級(jí)元素，line-height指定了元素內(nèi)部line-boxes的最小高度
對(duì)于非替代行內(nèi)元素，line-height用于計(jì)算line-box的高度
對(duì)于替代行內(nèi)元素，例如input、button，line-height沒(méi)有影響

這個(gè)屬性可以實(shí)現(xiàn)多行文本垂直居中：


    基于行高實(shí)現(xiàn)的...


CSS：
.box {
    width: 280px;
    line-height: 120px;
    background-color: #f0f3f9; // 為了看到外面盒子
    margin: auto;
}
.content {
    display: inline-block; // 設(shè)置為內(nèi)聯(lián)元素，并且可以有塊級(jí)屬性
    line-height: 20px;
    margin: 0 20px;
    text-align: left;
    vertical-align: middle;
}

效果：

單行文本，垂直居中：


     單行文本垂直居中


css:
div{
      background-color: #abcdef; // 為了看
      line-height: 400px; // 只需要設(shè)置line-height
}

效果圖：

最后結(jié)語(yǔ)：實(shí)現(xiàn)垂直居中的方法，我還是最喜歡flex，簡(jiǎn)單易懂，沒(méi)那么多妖娥子。只是現(xiàn)在兼容性不太好，無(wú)奈臉。。。

GPU云服務(wù)器云服務(wù)器小知識(shí) javaweb小知識(shí) 關(guān)于網(wǎng)絡(luò)安全的小知識(shí) 知識(shí)點(diǎn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1893.html

相關(guān)文章

前端一些小知識(shí)點(diǎn)

摘要：兩個(gè)只會(huì)一個(gè)有效。值大的那個(gè)有效幼圓無(wú)效有效幼圓解決只設(shè)置一個(gè)六，不加載情況下網(wǎng)站能運(yùn)作的一個(gè)小例子圖片作為超鏈接時(shí)，網(wǎng)速不佳不能加載，依然可以繼續(xù)操作。然后高度為零此時(shí)圖片就顯示不出來(lái)。一，主流瀏覽器及內(nèi)核 Chrome? ? ? ? ? Webkit/blink IE? ? ? ? ? ? ? ? ? ? Trident Firfox? ? ? ? ? ? ? Gecko Safari?...

yzzz 2019-04-23 11:48 評(píng)論0 收藏0
CSS及布局

摘要：經(jīng)過(guò)半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來(lái)的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看...

jaysun 2019-08-29 14:04 評(píng)論0 收藏0
關(guān)于網(wǎng)頁(yè)的一些小知識(shí)點(diǎn)

摘要：元數(shù)據(jù)是關(guān)于數(shù)據(jù)的信息。標(biāo)簽提供關(guān)于文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。典型的情況是，元素被用于規(guī)定頁(yè)面的描述關(guān)鍵詞文檔的作者最后修改時(shí)間以及其他元數(shù)據(jù)。 Web前端的基礎(chǔ)知識(shí) 什么是web？WEB標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的總稱，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1....

CarterLi 2019-08-30 15:52 評(píng)論0 收藏0
關(guān)于網(wǎng)頁(yè)的一些小知識(shí)點(diǎn)

摘要：元數(shù)據(jù)是關(guān)于數(shù)據(jù)的信息。標(biāo)簽提供關(guān)于文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。典型的情況是，元素被用于規(guī)定頁(yè)面的描述關(guān)鍵詞文檔的作者最后修改時(shí)間以及其他元數(shù)據(jù)。 Web前端的基礎(chǔ)知識(shí) 什么是web？WEB標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的總稱，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1....

galois 2019-08-01 16:17 評(píng)論0 收藏0
前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

princekin 2019-08-20 11:28 評(píng)論0 收藏0