首頁 > web前端 > css教學 > css的定位有什麼? css定位的總結

css的定位有什麼? css定位的總結

不言
發布: 2018-08-09 16:36:12
原創
2031 人瀏覽過

這篇文章帶給大家的內容是關於css的定位有什麼? css定位的總結,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

定位分為:

#static(預設): 這是頁面元素position屬性的預設值,元素將依照瀏覽器對網頁中元素的排列規則排列。

注意:此時給元素設定left,right,top,bottom是並沒有任何作用的。

relative(相對定位):相對自己原來位置的定位!如果先前沒有設定position或position值為static,那麼設定relative後,元素的left,right,top,bottom的位置參考自身原來的位置進行移動。

absolute(絕對定位):這個大家應該都很了解,也就是脫離文件流的定位。定位參照物為自己的父級,但自己的父級必須擁有position屬性(父級position屬性為static也不行,必須為absolute,relative,fixed中的一個)。如果自己的父級沒有設定position屬性,會一直往上尋找有position屬性且不為static的的祖先元素,直到body元素。

fixed(固定定位):這個屬性是元素以相對瀏覽器視窗為基準進行定位的,無論怎樣移動你的滑動條,它都會固定在相對於瀏覽器視窗的固定位置,另外要注意,它的兄弟元素將會在位置排布上忽略它的存在。這時候用的top,bottom,left,right也是相對於瀏覽器視窗而言的。

下面分享一下我的心得:

1. fixed會產生相容問題,老IE6不支持,他是相對於瀏覽器進行定位的!

2. 父元素有position屬性(不為static)和padding值,子元素如果只設定absolute那麼不會忽略父元素的padding值,如果設定了left:0 ,top:0則會忽略父元素的padding值。

3. 分享一個擁有absolute屬性的元素的水平居中方法:

方法一:     平常情況下我們都是用left:50%,然後margin-left:-width/2來設定水平居中,下面再分享一個方法,如果在面試中被問到水平居中的方法,可以補充下面那種,加分項!

方法二:     設定子元素:left:0,right:0,然後設定margin: 0  auto 即可水平居中。

4. 大家要注意設定了position後再設定float、margin會有什麼變化,這很重要,以後再跟大家討論。

相關推薦:

CSS3 製作動畫的屬性:transform屬性的介紹

CSS3中偽元素實作氣泡框的程式碼( before、after)

以上是css的定位有什麼? css定位的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板