1. 盒子的浮動
在標準流中,乙個塊級元素在水平方向會自動伸展，知道包含它的元素的邊接；而在豎直方向與相鄰元素依次排列，不能併排。
css中float屬性，預設為none。
將float屬性的值設定為left或right，元素就會向其父元素的左側或右側靠緊。
同時預設情況下，盒子的寬度不再伸展，而是根據盒子裡面的內容的寬度來決定。
float: left | right | none | inherit;clear: left | right | both;在css中有乙個position屬性，用來進行定位操作。position屬性可以設定為4個屬性值之一:
◊ static：預設的屬性值，該盒子按照標準流（包括浮動方式）進行布局；
◊ relative：相對定位，使用相對定位的盒子的位置常以標準流的排版方式為基礎，然後使盒子相對於它在原本的標準位置偏移指定的距離。相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。
◊ absolute：絕對定位，盒子的位置以它的包含框為基準進行偏移。絕對定位的盒子從標準流中脫離。它對其後的相鄰盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣。
◊ fixed：固定定位，它和絕對定位類似，只是以瀏覽器視窗為基準進行定位，當拖動瀏覽器的滾動條時，依然保持物件位置不變。
2.1 static
static為預設值，表示塊保持在原本的位置上，不會有任何移動的效果。沒有設定任何position屬性相當於使用static方式。
2.2 relative
使用relative相對定位，除了將position屬性設定為relative之外，還需要指定一定的偏移量，水平方向通過left或者right屬性來指定，豎直方向通過top或bottom來指定。
示例：
position相對偏移
◊ 使用相對定位的盒子，會相對於它原本的位置，通過偏移指定的距離，到達新的位置
◊ 使用相對定位的盒子仍在標準流中，它對父塊和兄弟盒子沒有任何影響。
2.3 absolute
示例：
box-1
box-2
box-3
使用absolute定位，修改#item-2的css**：
#item-2從預覽效果中可以看出，此時item-2的顯示範圍已經不在container中，不占用container所包含的空間。
修改#item-2的css**：
效果預覽：
修改了top和right的設定，，item-2顯示效果仍為以瀏覽器視窗為基準。
absolute定位並不是都只能以瀏覽器視窗為基準來定位的，修改container的css**：
#container這時的效果偏移距離沒有變化，但是偏移的基準不再是瀏覽器視窗，而是container，即父div。
對於absolute定位的描述：
◊ 使用absolute定位的盒子以它的「最近」的乙個「已經定位」的「祖先元素」為基準進行偏移。如果沒有已經定位的祖先元素，則以瀏覽器視窗為基準進行定位。
「已經定位」的含義是position屬性被設定，並且被設定為不是static的任意一種方式。
「最近」是指在這個節點的所有祖先節點中，距離該節點的層次最近的祖先節點，以距離最近的祖先節點作為定位基準。
◊ absolute定位的框從標準文件流中脫離，對其後的相鄰其他盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣。
2.4 fixed
fixed定位與absolute定位有些類似，區別在於定位的基準不是祖先元素，而是瀏覽器視窗或者其他顯示裝置的視窗。當訪問者拖動瀏覽器視窗的滾動條時，固定定位的元素將保持相對瀏覽器視窗不變的位置。
示例：
固定定位欄
box-1
box-2
box-3
從預覽效果中可以看出，設定了fixed定位的topbar欄沒有隨著瀏覽器的下拉滾動而變動位置。
3. z-index空間位置
z-index屬性用於調整定位時重疊的上下位置，頁面為x-y軸，垂直於頁面的方向為z軸，z-index值大的頁面位於其值小的上方。
z-index屬性的值為整數，可以是正數也可以是負數。當塊被設定了position屬性時，該值便可以設定各塊之間的重疊高低關係。預設的z-index值為0，當兩個塊的z-index值一樣時，將保持原有的高低覆蓋關係。
前端開發 CSS 盒子 浮動 定位
盒子模型 margin padding border content margin 外邊距 縮寫方式 分別代表 上右下 左 padding 內填充 縮寫方式 同上 補充padding的常用簡寫方式 浮動 float 在css的樣式中，是由三維空間的概念的，不僅由xy座標位置，也存在有不可見的z軸，在...
css盒子模型，定位，浮動
1.盒子模型 margin 外邊距 清除邊框外的區域，外邊距是透明的。border 邊框 圍繞在內邊距和內容外的邊框。padding 內邊距 清除內容周圍的區域，內邊距是透明的。content 內容 盒子的內容，顯示文字和影象。最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度 左填充 右填充 左...
CSS 盒子模型 定位流 浮動
目錄 css盒子模型 1 內容得寬度和高度 2 元素的寬度和高度 3 元素空間得寬度和高度 css定位流 了解 相對定位 了解 相對定位的應用 絕對定位 了解 固定定位 靜態定位 浮動與清除浮動 了解 一 標準流中的兩種排版方式 1 垂直排版 2 水平排版 浮動 浮動流排版方式 特點 什麼是浮動元素...