CSS定位模型总结
2019獨角獸企業重金招聘Python工程師標準>>>
web前端css支持6種定位模型
靜態
絕對
固定
相對
浮動
相對浮動
設定位置
position:static;可以取消元素的定位設置,使之恢復為原先在常規流中的顯示方式.static是默認值.
position:relative;可以使元素相對于常規流的位置偏移一定距離.
position:absolute;可以使元素相對于常規流的位置或最近定位祖先元素的位置偏移一定的距離.
position:fixed;可以使元素相對于窗口偏移一定的距離.
z-index可以設置元素的堆疊順序,數值越大,元素越靠上.
如果有想從事前端這行不知道怎么學習的，或者對于前端學習效率很慢的可以來我的群570946165，群文件里有全套系統學習資料，也問題可以隨時問！
最近定位祖先元素
如果設定位置的元素沒有定位祖先元素,那么<body>就成為定位祖先元素,換言之,<body>是默認設定位置元素.
最近定位元素必須是有效的祖先元素(relative|absolute|fixed),css不支持相對于文檔中任意元素進行定位的方法.
position:relative;是一個非常好的創建定位祖先元素的方法,因為它不會離開常規流.使用這種方法,能夠創建出既保持常規流又實現絕對定位的布局
原子顯示
設定了位置的元素是原子顯示的,這意味著它的靜態后代元素,行內內容和背景之間不可能出現外部元素.通過使用相對定位,絕對定位和固定定位模式,就可以將元素設置為原子顯示,設置為overflow:scroll|auto的塊級元素也是原子顯示的
而沒設定位置的靜態塊級,當發生重疊時,他們的行內內容不會重疊,但是他們的邊框和背景
會發生重疊,但文字不會.z-index適用于所有元素,默認auto
-
z-index不是全局屬性,而是相對于設置了數字值z-index的最近定位祖先元素而定.根元素html會創建根堆疊上下文.每一個指定數字值z-index的設定位置元素都會創建一個本地的局部的堆疊上下文.
-
靜態定位元素按照文檔出現順序從后往前進行堆疊.
-
設定位置元素忽略文檔元素出現順序,而是根據z-index值由小到大的順序從后往前堆疊.負值的設定位置元素位于靜態定位元素和非設定位置浮動元素之下
一?web前端靜態定位模型
position:static;默認是static;
靜態元素的開始位置由前一個靜態元素的位置確定.靜態元素的尺寸,內邊距,邊框,和外邊距
決定了下一個元素的開始位置.
相鄰元素的垂直外邊距會合并在一起,最終的外邊距是兩個相鄰元素外邊距的較大值
將左右外邊距設置為auto,可以使已設定尺寸的靜態塊級元素居中顯示.
二?web前端絕對定位模型
position:absolute;百分數是相對于最近定位祖先元素的尺寸而言,而非父元素的尺寸.
將元素的left,right,top,bottom,設置為auto,可以使它恢復原先在常規流中的位置.
與浮動元素不同,絕對元素不會自動排列.不會受其他元素影響,也不會影響別的元素.
如果一個元素的所有子元素都設置為絕對定位,那么它的高度會變為0,所有它的子元素都離開了常規流.
如果不存在定位祖先元素,會根據<body>來定位
絕對定位居中,一般元素
- 絕對定位居中,靜態行內元素
-
對于靜態行內元素,如em,strong,span等,但是不包括行內可替換元素(input,img,textarea等),使用絕對定位模式absolute時,width和right可以使用為了要居中,需要額外的加上left:0;和right:0;使margin:0 auto;可以正常的生效.
-
注意,這里left和right必須是0才行.
三 固定定位模型
position:fixed;可以將任意元素變為固定位置元素
切記:固定定位的元素位置是相對于窗口而定,而非相對于最近定位祖先`,而且元素不會隨頁面滾動而滾動.
因為它是相對頁面來定位,所以不需要最近定位祖先
設置時最好以top,left來進行偏移定位,當同時設置top,left,bottom,right時,會優先使用top和left的值,只有當top和left不存在時,bottom和right才會生效
四?web前端相對定位
position:relative;
-
使用left和top來改變元素位置,left和top默認是auto,auto會使相對定位元素保持在常規流中原有位置.
使用float可以使一些元素成為浮動元素,通過relative可以浮動元素設置為相對定位,相對浮動元素仍然位于浮動元素所在的常規流中,可以使用left和top設置它在流中的偏移位置.
-
任何元素都可以設置position:relative;從而其絕對定位的后代元素都可以相對于它進行定位.
-
使用float:none;默認是none,可以覆蓋元素的其他浮動規則,也可以避免繼承浮動
使用float:left;和float:right;可以使元素離開常規流.
五?web前端浮動定位與復位
-
浮動元素不會影響塊級框的位置,而只影響行內元素
-
clear:left;clear:right;clear;both;
-
任意元素都可以設置為浮動元素,clear適用于表格,塊級元素和浮動元素
-
clear 不適用于行內,絕對定位或固定定位的元素、
-
如果有想從事前端這行不知道怎么學習的，或者對于javascript學習效率很慢的可以來我的群570946165，群文件里有全套系統學習資料，也問題可以隨時問！
六?web前端相對浮動定位
-
只有positon:relative;和position:static;適用于浮動元素.而設定為absolute和fixed時,顯示結果是不確定的.
零散
-
在css中,如果參數值是0的話,不要加單位,
-
瀏覽器在渲染一個元素內容之前,會先渲染它的框,順序是從背景顏色開始,然后是背景圖片,接著是邊框,最后,瀏覽器會在框之上渲染框的內容
轉載于:https://my.oschina.net/u/2391658/blog/979173
總結
- 上一篇： 数据库程序接口——JDBC——功能第五篇
- 下一篇： 【干货】Html与CSS入门学习笔记12