（1）相對定位 position: relative
（2）絕對定位 position: absolute
（3）固定定位 position:fixed
生成絕對定位的元素，相對於瀏覽器視窗進行定位
（4）預設值position:static
預設值。沒有定位，元素出現在正常的流中
（5）position:inherit
規定應該從父元素繼承 position 屬性的值。
（1）flex-direction: 定義伸縮方向
取值：row：橫向排列(預設值)
column：縱向排列
（2）flex-wrap: 定義伸縮容器裡是單行顯示還是多行顯示
取值：nowrap：單行顯示(預設值)
wrap：多行顯示
（3）flex-flow: flex-direction和flex-wrap屬性的復合屬性
（4）justify-content : 定義主軸對齊方式
取值：flex-start：居左排列(預設值)
flex-end：居右排列
center：居中排列
space-between：兩端對齊，空隙平分
space-around：每個專案兩側的間隙相等
（5）align-items: 定義側軸對齊方式
取值：flex-start：排列在上方(預設值)
flex-end：排列在結尾
center：垂直居中排列
（6）align-content : 定義伸縮行在伸縮容器裡的側軸對齊方式
取值：flex-start：排列在上方(預設值)
flex-end：排列在結尾
center：垂直居中排列
在伸縮子元素中我們可以設定flex:1按照比例來劃分容器的寬高
（1）文字垂直水平居中
line-height:盒子的高度;
text-align: center;
/* 父元素設定 */
.box1
/* 子元素設定 */
.box2
/* 子元素設定 */
.box2
/* 子元素設定 */
.box2
（1）去除ul中li距離左邊的間隙
*在html中將行內塊元素在同一行顯示
在父元素上設定word-spacing的值為合適的負值
將行內元素設定為浮動狀態，可能會有打亂頁面布局
css彈性盒子
css3 彈性盒子 flexible box 或 flexbox 是一種 用於在頁面上布置元素的 布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。css...
css 彈性盒子
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
CSS 彈性盒子
清除浮動影響 很難實現居中 結構不靈活 不能隨時新增盒子 非常靈活 提供一套瀏覽器內建布局 特點 一維布局 固定的css屬性 外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳 img ae7v8cwh 1607776830159 media 彈性盒相容性.png 決定了 這個布局一般用在移...