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 子元素居中對齊...