前端HMTL彈性盒子display小知識

2021-10-14 07:35:49 字數 1263 閱讀 3024

display:none 此元素不被顯示。

display:block 此元素顯示為塊級元素,支援寬高,獨佔一行。

display:inline 此元素為內聯元素,不支援寬高,不獨佔一行。

display:table 此元素作為塊級**來顯示。

display:flex 此元素為彈性盒模型

display:list-item此元素會作為列表顯示

預設值,自左向右:flex-direction:row 

對齊方式與row相反:row-reverse

自下向上:column

對齊方式與column相反:column-reverse

預設值。不換行:nowrap

換行:wrap

從反過來換行,把底部當成開始:wrap-reverse

從開始位置對齊:flex-start

從結束位置對齊:flex-end

居中對齊:center

兩邊居中對齊,兩邊無縫隙,中間空間相同:space-between

向中間居中對齊,兩邊空間相同,大小是中間空間的一半:space-around

預設值如果子元素沒有高度,會將繼承父元素的高度:stretch

基於文字對齊,與寬高無關:baseline

頂部對齊:flex-start

底部對齊:flex-end

居中對齊:center

預設值,剩餘空間平分:stretch

頂部對齊:flex-start

底部對齊:flex-end

居中對齊:center

兩邊無空間,中間空間相同:space-between

兩邊空間空間相同:space-around

order:設定子元素出現的順序,預設為0,數值越小優先順序越高

align-seif:設定子元素單獨在交叉軸的對齊方式。預設auto

align-start:交叉軸起始位置的邊界

align-end:交叉軸結束的邊界

center:居中對齊

baseline:該值將參於基線對齊

stretch:如果設定高度,則按照hieght,未設定。拉伸為盒子高度

auto:預設值

畫素值百分比

content:基於內容自動計算

前端學習 visibility和display

1.首先visibility和display都可以將元素塊隱藏,visibility隱藏的時候還是會占用網頁的空間,而display none不會占用網頁的空間了 2.總體概念 block元素可以包含block元素和inline元素 但inline元素只能包含inline元素。要注意的是這個是個大概...

flex彈性盒子,,彈性盒子布局

flex 彈性 布局 2009年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局 ie10 以往的網頁布局 layout 方式 基於盒模型,依賴display屬性 margin屬性 position屬性 float屬性特殊布局比較麻煩 比如元素的垂直居中 一.flex是什麼?flex...

彈性盒子(flexible box

將父元素盒子變為彈性盒子的方法 加display webkitt box 瀏覽器或設定為其他,box也可設定為inline box horizontal 設子元素為水平排列 預設 vertical 子元素為縱向排列start 子元素從開始位置對齊 大部分情況等同於左對齊 center 子元素居中對齊...