技術標籤：前端htmlcssweb

盒子模型——浮動、定位

對頁面結構進行修改和控制的方法

浮動

浮動是多個塊標籤處於同一行的位置處理方法。
浮動一共有兩種，左浮動和右浮動；當盒子向左或向右進行浮動時，後面的元素會擠上來。

內邊距、外邊距和橫向居中

1.增大內邊距時，內邊距不會向內部佔用空間，而是將塊標籤放大來保證塊標籤內部容量不變。例如一個div的寬和高都為20px，又為其新增5px的內邊距，那麼這個div的寬高會變為25px，容量為20*20px。
2.外邊距：當前塊標籤外部和父級塊標籤的距離。
3.如果要盒子居中，可以通過==margin:0 auto;==來實現，但是隻能達到橫向居中，因為一個網頁的縱向是可以無線延申的。

定位

定位分為絕對定位、相對定位和相對瀏覽器定位。
原版圖片：

絕對定位：
通過網頁頁面進行定位，釋放本身原點位置。

				position: absolute;
				top: 200px;
				left: 500px;

相對定位：
相對於原版位置進行定位，不釋放原點位置。

				position: relative;
				top: 20px;
				left: 200px;

3.相對瀏覽器定位
通過瀏覽器位置進行定位，不隨頁面的下拉等移動而移動；例如網頁內的廣告或者跳轉介面。