css 中display屬性認識

2021-08-19 18:03:46 字數 826 閱讀 8707

none:設定元素不顯示。相當於對應元素不存在,不佔據空間。(可以改善重排和重繪,這個不懂,需要去了解)

inline:行內元素,顯示在一行。設定的width,height,text-align都不起作用。設定line-height可以讓文字垂直居中

block:設定元素為塊級。

inline-block:css2.1 新增屬性,具有 block 的寬高 和 inline 一行顯示的特性。可以和 父元素text-align: justify實現列表兩端對齊。具體參考 老師部落格

flex:彈性布局。子元素的float, clear, vertical-align屬性都不會起作用了。主要屬性分為 容器屬性 和 專案屬性。具體參考 阮一峰老師文章

-webkit-box:某x5瀏覽器某些版本還不支援最新版的flex布局。所以可以使用這個值。最好是在使用 flex 的地方同時使用這個值

table:塊級**,進行多列多行布局時使用。inline-table,table前後沒有換行。table-row(類似 tr), table-column(類似 col), table-cell(類似 td)list-item:預設把元素作為列表顯示

run-in:根據上下文作為塊級元素或內聯元素顯示

css中display屬性詳解

display屬性值 none 此元素不會被顯示。block 此元素將顯示為塊級元素,此元素前後會帶有換行符。inline 預設。此元素會被顯示為內聯元素,元素前後沒有換行符。inline block 行內塊元素。css2.1 新增的值 list item 此元素會作為列表顯示。run in 此元素...

CSS中的display屬性

display中文為顯示的意識,顯而易見它的功能就是為了控制頁面元素顯示方式 display中為我們提供了很多屬性,其中最常見的有 none屬性代表著元素不會被顯示 比如很多 的頂部導航欄都會有二級選單,只有當我們的滑鼠移動或點選時二級選單才會顯示出來。這是就可以使用到display none這個屬...

CSS屬性 display 顯示屬性

演示示例 visibility 屬性?該css屬性用來設定物件如何顯示。的預設值都為 inline。值 block none inline inline block list item table header group table footer group inherit 可用值值的說明 blo...