css 小知識點：inline/inline-block/line-height

icattlecoder 發布于2019-04-23 13:27 / 2638人閱讀

摘要：此元素會被顯示為內聯元素，元素前后沒有換行符。因此無法設置寬度和高度行內塊元素。元素前后沒有換行符新增的值用通俗的話講，就是不獨占一行的塊級元素。只是現在兼容性不太好，無奈臉。。。

inline:

此元素會被顯示為內聯元素，元素前后沒有換行符。因此：無法設置寬度和高度～

inline-block:

行內塊元素。元素前后沒有換行符（CSS2.1 新增的值）

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

line-height:

對于塊級元素，line-height指定了元素內部line-boxes的最小高度
對于非替代行內元素，line-height用于計算line-box的高度
對于替代行內元素，例如input、button，line-height沒有影響

這個屬性可以實現多行文本垂直居中：


    基于行高實現的...


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

效果：

單行文本，垂直居中：


     單行文本垂直居中


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

效果圖：

最后結語：實現垂直居中的方法，我還是最喜歡flex，簡單易懂，沒那么多妖娥子。只是現在兼容性不太好，無奈臉。。。

云服務器 GPU云服務器小知識 javaweb小知識關于網絡安全的小知識知識點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1893.html

前端一些小知識點

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

yzzz 2019-04-23 11:48 評論0 收藏0
CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
關于網頁的一些小知識點

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

CarterLi 2019-08-30 15:52 評論0 收藏0
關于網頁的一些小知識點

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

galois 2019-08-01 16:17 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0