前端(六)——CSS之浮动和定位
生活随笔
收集整理的這篇文章主要介紹了
前端(六)——CSS之浮动和定位
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 1. 浮動 Float
- 2. 父級邊框塌陷問題
- 3. 相對定位
- 4. 絕對定位
- 5. 固定定位
- 6. z-index
1. 浮動 Float
- 定義:是元素的一種屬性,設置了浮動屬性的元素會脫離標準文檔流的控制,移動到其父元素中指定位置的過程,可以讓任何盒子在一行排列,用浮動來布局。
- 標準文檔流:文檔流指的是元素排版布局過程中,元素會自動從左往右,從上往下的流式排列。并最終窗體自上而下分成一行,并在每行中從左至右的順序排放元素。造成空白折疊、高矮不齊,底邊對齊以及自動換行等現象。
- 格式:選擇器 { float:屬性值;}
屬性值:left——元素向左浮動;right——元素向右浮動;none——元素不浮動(默認值) - 特性:①脫離標準流,不占位置,只有左右浮動;②一浮動就創建一個包含塊級的概念,在外邊加一個父盒子,再對齊;③若上一個元素浮動則與其在頂部對齊,若上一個元素是標準流則上下排列。
- 塊級元素:獨占一行 如h1~h6 p div 列表…
行內元素:不獨占一行 如span a img strong…
行內元素可以被包含在塊級元素中,反之則不可以 - display:block 顯示為塊元素 / inline 顯示為行內元素 / inline-block 顯示為塊元素,但是可以內聯,在一行 / none 元素不會被顯示
- 實例演示
2. 父級邊框塌陷問題
- clear:清除浮動元素
clear: right; 右側不允許有浮動元素
clear: left; 左側不允許有浮動元素
clear: both; 兩側不允許有浮動元素
clear: none; 無浮動元素
解決方案:
(1)增加父級元素的高度
(2)增加一個空的div標簽,清除浮動
(3)在父級元素中增加一個 overflow: hidden;
(4)父類添加一個偽類:after
- 小結
(1)設置父元素的高度:簡單,元素假設有了固定的高度,就會被限制;
(2)浮動元素后面增加空div :簡單,代碼中盡量避免空;
(3)overflow:簡單,下拉的一些場景避免使用;
(4)父類添加一個偽類:after(推薦):寫法稍微復雜一點,但是沒有副作用。
3. 相對定位
- position屬性常用值:static——自動定位(默認);relative——相對定位;absolute——絕對定位;fixed——固定定位
- position: relative;
- 偏移屬性:top——頂部偏移量;bottom——底部偏移量;left——左側偏移量;right——右側偏移量
- 相對于原來的位置,進行指定的偏移,相對定位的話,它任然在標準文檔流中,原來的位置會被保留。
- 實例代碼
- 運行結果
4. 絕對定位
- position: absolute
- 定位:基于xxx定位,上下左右(top、bottom、left、right)
(1) 沒有父級元素定位的前提下,相對于瀏覽器定位;
(2) 假設父級元素存在定位,我們通常會相對于父級元素進行偏移;
(3) 在父級元素范圍內移動。
相對于父級或瀏覽器的位置,進行指定的偏移,絕對定位的話,它不在在標準文檔流中,原來的位置不會被保留。 - 實例代碼
- 運行結果
5. 固定定位
- position: fixed
- 元素的位置相對于瀏覽器窗口是固定位置
6. z-index
-
元素的定位與文檔流無關,所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序(哪個元素應該放在前面,或后面)
z-index--------設置元素的堆疊順序--------值:number/auto
z-index: 默認是0,最高無限制 -
opacity 透明度的屬性值從0.0 - 1.0。值越小,使得元素更加透明。它是針對整個元素的,一旦設置了透明度,則背景色,文字顏色都有透明度。
-
實例代碼
-
運行結果
總結
以上是生活随笔為你收集整理的前端(六)——CSS之浮动和定位的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端(五)——CSS之美化页面
- 下一篇: SpringMVC(二)——转发和重定向