前端學記CSS 顯示 布局

設定控制項顯示方式

display: block;

display: inline;

display: inline-block;

display: none;

position: relative;

position: absolute;

position: fixed;

float: left;

其他特性

clear: both;

//常用語法

.clearfix
:after

display: flex;

//行，方向從左向右

flex-direction
: row;
//行，從右向左
flex-direction
: row-reverse;
//從上向下
flex-direction
: column;
//從下向上
flex-direction
: column-reverse;
//換行
flex-wrap
: wrap;
//反向換行
flex-wrap
: wrap-reverse;
//同時設定flex-direction和flex-wrap
flex-flow
: row nowrap;
//預設為0，數值越小排名越靠前
order
: 1;
//設定彈性元素的初始寬高
flex-basis
: auto;
//初始值為0，設定比例，在彈性布局中的空餘空間顯示比重
flex-grow
: 1;
//初始值為1，設定比例
flex-shrink
: 1;
//左對齊
justify-content
: flex-start;
//右對齊
justify-content
: flex-end;
//平分空白空間首尾無空白空間
justify-content
: space-between;
//平分空白空間首尾有空白空間
justify-content
: space-around;
//居中對齊
justify-content
: center;
//設定輔軸方向上的元素對齊方式
align-items
: stretch;
//設定輔軸方向上的元素內容對齊方式
align-self
: stretch;

級別越高越據上層

z-index
: 100;棧層級

CSS顯示 列表 布局

1.顯示 1 顯示方式 屬性 display 取值 1 none 讓生成的元素不顯示 隱藏 特點 脫離文件流 2 block 讓元素表現的和塊級元素一樣 特點 1 獨佔一行 2 允許修改尺寸 3 允許正常處理垂直方向的外邊距 3 inline 讓元素表現的和行內元素一樣 特點 1 多個元素一行內顯示...

前端css布局之BFC

哈嘍，各位小夥伴好！今天來整理下前端關於css布局的乙個知識點 bfc block fomatting context 如果知識點梳理有出錯的地方，望夥伴們幫忙指出，一起進步 bfc 可以理解為建立乙個布局容器，容器裡按自己的方式來布局，且與容器外界的元素互不影響。wrap fl div 這是div...

css布局九決,學css不再難

css布局九決，學css不再難簡單的幾句ccs布局口訣，就可以寫出精簡，標準的樣式。一 ie邊框若顯若無，須注意，定是高度設定已忘記 二 浮動產生有緣故，若要父層包含住，緊跟浮動要清除，容器自然顯其中 三 三畫素文字慢移不必慌，高度設定幫你忙 四 相容各個瀏覽須注意，預設設定行高可能是隱患 五 獨立...