盒布局相關屬性

2022-05-09 20:24:22 字數 1933 閱讀 4590

box-align:start | end | center | baseline | stretch

start:設定彈性盒模型物件的子元素從開始位置對齊

center:設定彈性盒模型物件的子元素居中對齊

end:設定彈性盒模型物件的子元素從結束位置對齊

baseline:設定彈性盒模型物件的子元素基線對齊

stretch:設定彈性盒模型物件的子元素自適應父元素尺寸

box-pack:start | center | end | justify

start:設定彈性盒模型物件的子元素從開始位置對齊(等同於左對齊)

center:設定彈性盒模型物件的子元素居中對齊

end:設定彈性盒模型物件的子元素從結束位置對齊(等同於右對齊)

justify:設定或彈性盒模型物件的子元素兩端對齊

box-align:center垂直居中

box-orient:horizontal | vertical

horizontal:設定彈性盒模型物件的子元素為水平排列

vertical:設定彈性盒模型物件的子元素為縱向排列

box-direction:normal | reverse

normal:設定彈性盒模型物件的子元素按正常順序排列

reverse:反轉彈性盒模型物件的子元素的排列順序

box-flex使用浮點數指定物件所分配其父元素剩餘空間的比例

box-lines:single | multiple

single:彈性盒模型物件的子元素只在一行內顯示

multiple:彈性盒模型物件的子元素超出父元素的空間時換行顯示

布局相關的屬性

1.position 定位方式 1.正常定位 relative 2.根據父元素進行定位 absolute 3.根據瀏覽器視窗進行定位 fixed 4.沒有定位 static 5.繼承inherit 2.定位 left 左 right 右 top 上 bottom 下 離頁面頂點的距離 3.z ind...

XSL FO頁面布局相關屬性

xsl fo 頁面尺寸 page width 定義頁面的寬度 page height 定義頁面的高度 xsl fo 頁面邊距 margin 定義所有邊的邊距 margin top 定義上邊距 margin bottom 定義下邊距 margin left 定義左邊距 margin right 定義右...

flex布局及相關屬性

flex direction屬性,決定主軸的方向 即專案的排列方向 box flex wrap屬性,預設情況下,專案都排在一條線 又稱 軸線 上。flex wrap屬性定義,如果一條軸線排不下,如何換行。box flex flow屬性,flex flow屬性是flex direction屬性和fle...