09 浮動(dòng)與定位
一、浮動(dòng)
二、清除浮動(dòng)的影響
三、display屬性
四、position定位
1、靜態(tài)定位static
2、relative? ? 相對(duì)定位（自戀型）
3、absolute? ? 絕對(duì)定位
4、fixed? ? 固定定位
09 浮動(dòng)與定位
一、浮動(dòng)
定義：定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置
分類：
- 普通流定位
- 浮動(dòng)定位
- 相對(duì)定位
- 絕對(duì)定位
- 固定定位
浮動(dòng)定位指
- 將元素排除在普通流之外
- 元素將不在頁面中占據(jù)空間
- 將浮動(dòng)元素放置在包含框的左邊或右邊
- 浮動(dòng)元素依舊位于包含框之內(nèi)
浮動(dòng)的框可以向左或者向右移動(dòng)，直到他的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?/p>
- 浮動(dòng)元素的外邊緣不會(huì)超過其父元素的內(nèi)邊緣
- 浮動(dòng)元素不會(huì)互相重疊
- 浮動(dòng)元素不會(huì)上下浮動(dòng)
- 元素浮動(dòng)后會(huì)變?yōu)閴K級(jí)元素
語法：float:none/left/right? ?
二、清除浮動(dòng)的影響
清除浮動(dòng)是在使用了浮動(dòng)之后必不可少的，為了網(wǎng)站布局的效果，清除浮動(dòng)也變得非常麻煩
屬性：clear
值：left、right、both
清除浮動(dòng)常見方式：
- 結(jié)尾處家空div標(biāo)簽?? clear:both（或者在下一個(gè)元素上加clear：both；）
- 浮動(dòng)元素的父元素定高
- 浮動(dòng)元素的父級(jí)div定義? overflow：hidden
- 浮動(dòng)元素的父級(jí)div定位? 偽元素：：after
三、display屬性
每個(gè)網(wǎng)頁都有一個(gè)display屬性，確定該元素的類型，每一個(gè)元素都有默認(rèn)的display屬性值，
比如div元素，默認(rèn)display屬性值是“block”，
塊元素span-->“inline”?行內(nèi)元素二者之間可以相互轉(zhuǎn)換
display常見屬性值：
| 屬性值 | 作用 |
| none | 隱藏對(duì)象 |
| inline | 指定對(duì)象為內(nèi)聯(lián)元素 |
| block | 指定對(duì)象為塊元素 |
| inline-block | 指定對(duì)象為內(nèi)聯(lián)塊元素 |
| table-cell | 指定對(duì)象為表格單元格 |
| flex | 彈性盒子 |
注意：
- inline-block? 行內(nèi)塊元素
- 即在同一行顯示，又可以設(shè)置寬高，margin和padding可以設(shè)置四周
- （會(huì)識(shí)別代碼之間的空白，所以要注意代碼之間的）
- inline? ? ? ? 行內(nèi)元素
- 不能設(shè)置寬高和內(nèi)容
- table-cell? ? 一列一列的樣式
- none? ? ? ? 隱藏對(duì)象
區(qū)別：
- visibility: hidden;? ? 會(huì)將元素隱藏，但是物理空間實(shí)際存在
- opacity: 0;
- display: none;? ? 影藏元素，不保留物理空間
四、position定位
1、靜態(tài)定位static
????????對(duì)偏移量不起作用，一般應(yīng)用關(guān)于去除定位
2、relative? ? 相對(duì)定位（自戀型）
- 相對(duì)于自己來偏移位置（相對(duì)于原來左上角的基點(diǎn)來便偏移）
- 通過便偏移來移動(dòng)位置，但是原來所占的位置，繼續(xù)占有
- 相對(duì)于自己原位置定位，定位后原位置保留
- 配合left、right、top、bottom移動(dòng)
- 當(dāng)top、bottom、left、right同事存在，left和top的優(yōu)先級(jí)大于right和bottom，當(dāng)取正值，元素往右下移動(dòng)；當(dāng)取負(fù)值，元素往左上移動(dòng)
應(yīng)用場(chǎng)景：文章來源：http://www.zghlxwxcb.cn/news/detail-834751.html
- 自己小范圍移動(dòng)
- 配合絕對(duì)定位使用
3、absolute? ? 絕對(duì)定位
- 相對(duì)于整個(gè)瀏覽器來偏移
- 如果發(fā)生偏移，那么它不再占有空間
- 相對(duì)于已經(jīng)定位（static除外）的父元素定位，如果父元素沒有定位，逐級(jí)往上找，最后相對(duì)于body定位
- 定位后原位置不保留
- 元素絕對(duì)定位后轉(zhuǎn)換為塊級(jí)元素
應(yīng)用場(chǎng)景：
????????形成獨(dú)立的一層
4、fixed? ? 固定定位
- 相對(duì)于瀏覽器窗口定位
- 定位后原位置不保留
- 配合left等移動(dòng)
- 元素固定定位后會(huì)轉(zhuǎn)換成塊級(jí)元素
應(yīng)用場(chǎng)景：
- 固定在頁面某個(gè)位置
- 默認(rèn)是占用文檔流，不過也有一些對(duì)象不占文檔流（比如表單中隱藏域）
- 也可以用屬性來控制：position、float、display
四種情況將會(huì)使元素離開文檔流：文章來源地址http://www.zghlxwxcb.cn/news/detail-834751.html
- 浮動(dòng)float
- 元素不顯示display：none
- 固定定位fixed
- 絕對(duì)定位absolute
到了這里，關(guān)于【W(wǎng)eb前端筆記09】浮動(dòng)與定位的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
