浮動介紹和定位注意點
阿新 • • 發佈：2019-08-28
本文轉載於:猿2048網站浮動介紹和定位注意點
18年元月24日，一如既往的寫了一會，外面下著雪，我在屋內叼著煙，上班好辛苦，成人的世界哪有容易二字，慢慢來，少年你還年輕，重在堅持，不要灰心。
<!DOCTYPE html> <html> <head> <title>浮動，清浮動及定位的理解</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } li{ float: left; width: 20px; height: 20px; margin-left: 10px; text-align:center; line-height: 20px; background-color: red; } /*對於浮動的元素，他們有以下特性： 1，浮動的元素排在同一排 2，浮動的元素支援所有的css樣式（這句話可以給行標籤加上浮動， 那麼可以不用來轉換標籤的樣式了。一樣支援所有的css樣式。） 3，浮動的元素脫離文件流 4，浮動的元素提升層級半級。*/ /*那麼我們為什麼來清除浮動呢，就是用來處理浮動元素脫離文件流的 問題（父級的盒子高度變為0，下面元素擠上去，影響佈局效果） 常見的清除浮動有6中方式 1，父級也浮動 2，父級加高度（比如height寫死） 等*/ /*最常用的方式就是為偽類清浮動*/ .clear:after{ content: ""; display: block; clear: both; } clear{ zoom:1; } /*偽類：向選擇器定義樣式（可以新增特定效果） :link ,:hover,:nth-child等*/ /*這只是我對一個知識點的理解，關於為什麼會這樣，有這樣的效果 便沒有過多的測試*/ /*接下來便是一些定位問題了 相對定位*/ div{ position: relative; top: 20px; } /*相對定位是針對自己本身的位置進行定位*/ /*1，他不影響本身的一些特性 2，不使文件脫離文件流*/ /* 絕對定位（值得注意的一點） 它是針對最近的的一層有定位的父級進行定位 *不一定要和relative一起使用（沒有定位父級，針對document進行偏移）*/ /*固定定位（不相容ie6），針對視窗進行定位*/ /*如果絕對定位或固定定位的子級有浮動，可以省略清浮動操作（ 相對定位無法觸發bfc）*/ </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div style="width: 100px;height: 100px;background-color: yellow;"></div> </body> </html>