文章目錄
overflow
overflow 屬性用於控制內容溢出元素框時顯示的方式
| 屬性值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈現在元素框之外 |
| hidden | 內容會被修剪，並且其餘內容是不可見的 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容 |
# 內容會被修剪，瀏覽器會顯示滾動條以便查看其餘內容
overflow: scroll;
# 設置 水平 垂直 滾動條狀態
overflow: scroll hidden;
# 設置 水平滾動條
overflow-x: scroll;
# 設置 垂直滾動條
overflow-y: hidden;
float
文檔流
指得是盒子按照 HTML 標籤編寫順序依次從上到下的順序，塊元素獨佔一行，行內元素在同一行從左到右依次排列，先寫的先排，後寫的後排，每個盒子有自己的位置
浮動特性
浮動: 指的是標籤浮動到指定的位置上，浮動之後不會和之前的元素保持同一層
- 浮動會脫離文檔流，不再佔用位置，會覆蓋後面的沒有浮動的元素
- 浮動只有兩個方向，即 左浮動(left) 和 右浮動(right)
- 浮動會造成文字環繞效果
- 停止浮動
- 當浮動遇到父元素的邊界停止浮動
- 如果前面有浮動的元素，碰到前面的浮動元素並列一排顯示
- 如果前面有未浮動的元素，換行浮動
- 當浮動的元素的寬度，超過父類元素的邊界時，自動換行
阻止浮動
要想阻止浮動框，需要對該框使用 clear 屬性
clear 屬性的值可以是 left，right，both 或 none，它表示框的哪些邊不應該挨着浮動框！
父元素佔據空間
因爲浮動元素脫離了文檔流，所以包圍的圖片和文本的 div 不佔據空間
此時，當元素浮動起來後，無法撐開父元素的高度，就會出現如下場景：
此時，爲父元素設置如下屬性即可：
父元素:after{
content: "";
display: table;
clear: both;
}
Position
position 屬性用來指定一個元素在網頁上的位置，一共有 5 種定位方式，即 position 屬性主要有 5 個值
- static
- relative
- fixed
- absolute
- sticky
static
static 是 position 屬性的默認值，表示沒有定位，或者說不算具有定位屬性。如果省略 position 屬性，瀏覽器就認爲該元素是 static 定位
這時，瀏覽器會按照源碼的順序，決定每個元素的位置。每個塊級元素佔據自己的區塊，元素與元素之間不產生重疊，這個位置就是元素的默認位置
static 定位所導致的元素位置，是瀏覽器自主決定的，所以這時 top ， bottom ， left ， right 這四個屬性無效
relative , absolute , fixed
relative , absolute , fixed 這三個屬性值有一個共同點，都是相對於某個基點的的定位，不同之處僅僅在於基點不同。
這三種定位都不會對其它元素的位置產生影響，因此元素之間可能產生重疊
relative
相對定位，相對於元素的默認位置進行偏移，定位基點是元素的默認位置
首先按默認方式 (static) 生成一個元素，
然後相對於默認的位置進行偏移，移動的方向和幅度由 top ， bottom ， left ， right 屬性確定，偏移之後原來位置還在佔用，新的位置不佔用空間
div{
position: relative;
left: 50px;
top: 50px;
}
absolute
絕對定位，相對於最接近的一個具有定位屬性的父元素進行定位
如果父類元素有定位屬性，那麼則以父類元素爲參照物進行定位
如果父類元素沒有定位屬性，那麼依次向上找，直到 body元素，即相對於瀏覽器窗口進行定位
<div id="outter">
<div id="inner">
</div>
</div>
#inner{
position: absolute;
top: 50px;
}
上面的代碼中，父元素是 relative 定位，子元素是 absolute 定位，所以子元素的定位基點是父元素，相對於父元素的頂部向下偏移 50px，如果父元素是 static 定位，上面的例子就是相對於網頁的頂部向下偏移 20 px
注意，absolute 定位的元素是不佔空間的，會脫離文檔流
fixed
固定定位，相對於瀏覽器窗口進行偏移，即定位基點是瀏覽器窗口。這會導致元素的位置不隨頁面的滾動而變化，好像固定在網頁上一樣
例如： 網頁 回到頂部 按鈕
div{
position:fixed;
bottom: 50px;
right: 30px;
}
sticky
粘性定位，跟前面的四個屬性值都不一樣，它會產生動態效果，很像 relative 和 fixed 的結合：一些時候是 relative定位（定位基點是自身默認位置），另一些時候自動變成 fixed 定位（定位基點是瀏覽器窗口）
因此，它能夠形成 “動態固定” 的效果。比如，網頁的搜索工具欄，初始加載時在自己的默認位置 (relative定位)
頁面向下滾動時，搜索欄變成固定位置，始終停留在頁面頭部（fixed定位）
等到頁面重新向上滾動回到原位，工具欄也會回到默認位置
必須指定 top ， bottom ， left ， right 其中之一，瀏覽器把它當作 sticky 的生效門檻，否則就等同於 relative 定位，不產生 動態固定 的效果。
#item {
position: sticky; top: 50px;
}
在瀏覽器頂部與 元素 item 的距離大於 50 px 時，元素爲相對定位。之後，元素將固定在與頂部距離 50 px 的位置，直到瀏覽器窗口回滾到超過閾值