HTML布局定位

2021-09-29 22:05:15 字數 2169 閱讀 3098

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的距離來進行詳細的位置定位。

html頁面布局 定位

相對定位 1 相對的是自身原有的位置 2 相對定位移動後,會保留原有位置 可以使用定位占用,但普通寫法時,無法占用 3 不會影響文件流 position relative 開啟該元素的定位 具體的位置 left top 父級 main 子級 box絕對定位 1 脫離當前文件流,使元素 飄 起來,父級...

html 定位 CSS Position定位

說明position 屬性指定了元素的定位型別。position 屬性的五個值 元素可以使用的頂部,底部,左側和右側屬性定位。所有的css定位屬性 bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。值 clip 剪輯乙個絕對定位的元素 cursor 顯示游標移動到指定的型別 lef...

css 布局布局定位心得

1 區域性絕對定位。當我們在乙個預設定位方式的div內巢狀的div實用 絕對定位 absolute 的時候,它會脫離上乙個div的控制,要實現乙個巢狀div相對上乙個div的絕對定位,只需要給上乙個div的定位加上 相對定位 relative 屬性即可,一般不會影響父div的顯示效果。2 盡量使用 ...