一、標準流
1、塊元素,自上而下
2、行內元素/行內塊元素,自左向右
二、浮動
1、塊元素在一行顯示
2、塊元素左對齊、右對齊
3、注意要現有乙個父元素,在父元素裡面做浮動
三、定位
定位 = 定位模式（定位方式） + 邊偏移（最終位置）
定位模式
position：static--靜態定位
position：relative--相對定位
1、，相對於它原來的位置對齊
2、保留原來的位置
position：absolute--絕對定位
1、沒有父元素，以瀏覽器對齊
2、有父元素，沒定位，以瀏覽器對齊
3、有父元素，有定位，以最近的父元素對齊
4、不再占有原有位置
5、水平居中：1、left：50%， 2、margin-left：負值自己寬度的一半
父相對、子絕對--（典型案例--輪播圖的下一張，小圓點）
position：fixed--固定定位
1、以可視區域對齊
2、不占有原有位置
3、去到版心的右下角，隨著版心的變化而變化
1、給元素固定定位
2、lef：50%
3、margin-left：走版心的一半
邊偏移top、button、left、right`在這裡插入**片`
彈性盒子 CSS3布局方式
1.彈性盒子 伸縮盒子 如果要使用彈性盒子屬性，首先要將父級元素變成彈性盒子 flex direction 設定伸縮盒子的內部元素的排列方式 row 從左到右安行排列 column 從上到下按照列排列 row reverse 從右到左按照行排列 column reverse 從下到上按照列排列 fl...
CSS3彈性盒子flex布局方式
一 css3彈性盒子 css3 彈性盒子 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。二 css3 彈性盒子內容 彈性盒子由彈性容器 和彈性子元素組成。彈性容器通...
前端盒子布局
方法一 position 分別使用 position absolute fixed,脫離文件流，相對父級一級一級查詢，第一次出現position的容器進行定位自身位置會被後面的元素占用，或者是relative，相對自身定位，自身的位置依然保留在文件流中，使用top,left,bottom,right...