一逗爹、文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
- 文檔流概念：文檔流即是普通流嚎于，是文檔中可顯示對象在排列時所占用的位置掘而，行內(nèi)元素從左到右挟冠，塊級元素從上到下；
- 脫離文檔流的兩種方式：
- 元素浮動：float：left|right袍睡，left為元素左浮知染，right為元素右浮斑胜；
- 生成絕對定位元素：position：absolute|fixed控淡；
二、有幾種定位方式止潘，分別是如何實現(xiàn)定位的掺炭，使用場景如何？
-
四種定位方式覆山，如下表格：
三竹伸、absolute, relative, fixed 偏移的參考點分別是什么
- 見題二
四、z-index 有什么作用? 如何使用?
- 作用：z-index用來設(shè)置重疊元素的堆疊順序簇宽；
- 使用方法：其默認(rèn)值為0勋篓，也可以為負(fù)值，z-index數(shù)值從大→小分別對應(yīng)元素放置從頂層→底層魏割，使用時按自己的要求設(shè)定對應(yīng)大小的值譬嚣；
五、position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
-
position:relative: 相對定位钞它，實際占據(jù)空間未變化拜银，即元素本身在正常文檔流中的位置會被記憶，不會發(fā)生變化遭垛； -
負(fù)margin：元素偏移尼桶，元素偏移后其在正常文檔流中的位置發(fā)生改變，其后的普通流元素位置也會跟著改變锯仪；
六泵督、如何讓一個固定寬高的元素在頁面上垂直水平居中?
-
為元素添加屬性，即可實現(xiàn)自適應(yīng)垂直水平居中：
position: absolute;
right: 50%;
bottom: 50%;
margin-right: -value px;/value為元素固定寬的50%/
margin-bottom: -value px;/value為元素固定高的50%/ -
實例展示如下圖：
q-6
七庶喜、浮動元素有什么特征小腊？對其他浮動元素、普通元素久窟、文字分別有什么影響?
- 浮動元素特征：和絕對定位定位一樣浮動元素也會脫離文檔流秩冈，不占據(jù)空間，只存在節(jié)點斥扛；
-
對其他浮動元素入问、普通元素、文字的影響：
- 浮動元素與浮動元素之間有感知，浮動按文檔流的渲染順序依次排列芬失，以外邊距為界限卷仑；
- 浮動元素與普通元素之間關(guān)聯(lián)，背景和邊框都可以重疊麸折，但是注意重疊時普通元素內(nèi)部文本會被擠出包圍浮動元素顯示；
- 浮動元素前后的文字會以浮動元素的外邊距為邊界包圍浮動元素粘昨；
八垢啼、清除浮動指什么? 如何清除浮動?
- 清除浮動定義：清除浮動元素脫離文檔流后所造成的一系列影響，即讓浮動元素在視覺上看起來是被父元素包圍的张肾；
-
清除浮動的方法芭析，如下表格：
九、代碼
一. 寫出如下兩欄布局, 其中中間區(qū)塊寬度900px, 居中,左側(cè)邊欄寬度200px, 右側(cè)邊欄寬度700px:
- 做完可參考范例
- ps: 圖片左浮動吞瞪，導(dǎo)航欄整體右浮動馁启，導(dǎo)航欄里面的li元素左浮動
- ps: aside左浮動，main左浮動
-
凡是有浮動的地方芍秆，其直接父元素必須清除浮動
- 答：代碼10-1
二. 不使用背景圖片實現(xiàn)如下效果:
- 答：代碼10-2
聲明：本博客版權(quán)歸蘭文聰和饑人谷所有惯疙，轉(zhuǎn)載需說明來源！
