HTML佈局定位

html我總結了下定位方法大致有floaposition
1.floa浮動是讓元素脫離了文檔流,不佔網頁的位置,講到了這兒我就不得不說下block元素和inline元素在文檔流中的排列方式。
(1).block元素(塊級元素)有自己特有的形式如:.block元素獨佔一行;多個block元素在一起的時候,每個元素都會獨佔一整行,當元素沒有設置寬高的時候,block元素的寬高由內容決定,block元素明顯的特點是可以設置width,right,margin,padding屬性。
(2).inline元素(內聯元素)不會獨佔一行,直到一行排列不下的時候纔會換到下一行繼續排列,無法設置元素的寬高,元素的寬高由內容的大小決定,水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果;但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom對它沒有任何的效果。
(3).我自己總結了下block元素(塊級元素)大致有:div元素,form元素,table元素,p元素,pre元素,h1-h5元素,dl元素,ol元素,ul元素 …
inline元素(內聯元素)有:span元素,a元素,label元素,input元素,select元素,textarea元素,img元素…
1.float浮動定位
1.浮動元素脫離了普通的文檔流不佔據頁面空間的其他沒有浮動的元素會自動上前部位
2.浮動元素會停靠在父級元素的左邊或者右邊,或者停靠在其他已經浮動的元素的邊緣上
3.浮動元素只會在當前行內浮動
4.浮動元素依然位於父元素內
5.讓多個元素在一行內顯示
2.語法:float: left(左浮動) right(右浮動) none(默認,無浮動的效果)
3.清除浮動:
如果元素浮動起來之後,除了影響到自己的位置還會影響到後續的元素
在這樣的情況下 不想被前面浮動元素影響的話 可以使用清除浮動來解決這個問題。
語法;
clear:

left:清除當前元素前面的元素左浮動帶來的影響(只和自己相關,並不和前面的元素相關)
當前元素不會向前佔位並且左邊不允許有浮動元素。
right:
清除當前元素前面的元素右浮動帶來的影響,當前元素不會向前佔位並且右不允許有浮動元素。
both:
清除當前元素前面的元素左浮動和右浮動帶來的影響,當前元素不會向前佔位並且左右不允許有浮動元素。
浮動引發的特殊效果:
1.父級元素的寬度不夠的時候,浮動的子元素會的最後一個會被自動換行
2.元素一旦浮動起來之後,那麼寬度將變成自適應(非人爲指定的情況下)
3.元素一旦浮動起來後,那麼將變成塊級元素尤其對行內元素影響最大
4.文本元素和行內元素,行內塊元素會採用環繞方式排列,是不會被浮動元素壓在底下的胡巧妙的避開浮動元素。
浮動元素對父元素帶來的影響
由於浮動元素脫離了文檔流所以導致不佔據父元素頁面空間
解決問題:
1.直接給父級元素設置高度
弊端:必須要知道父級準確的高度
2.設置父級元素的浮動
弊端:對後續的元素會有影響
3.設置父級元素overflow hidden或auto
弊端:如果子級溢出的話 會一起被隱藏
4.在父元素中追加一個空元素(子元素)並且設置他clear:both

position定位又分爲:
1.relative 相對定位
元素會相對於原來的位置的左上角進行位置偏移相對定位是佔有之前的位置空間的。
2.absolute 絕對定位
元素不會佔有之前的位置(脫離了文檔流),
絕對定位的元素相對於它最近的已有定位的父級及以上元素進行位置偏移,如果沒有已經有定位的父級相對於最初的body進行位置偏移。
3.fixed 固定定位
將元素固定在頁面的某個地方,不會隨着滾動條變化而發生變化。
注意:
脫離了文檔流
是隨着頁面的body標籤的左頂點進行位置偏移的

position定位通過調left,top,right,bottom的距離來進行詳細的位置定位。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章