文檔流的概念,如何讓元素脫離文檔流
- 文檔流指的是瀏覽器按照html的內容按順序解析并呈現,遇到行內元素就往行內放,遇到塊級元素就空一行放置,依次排列;
- 定位中的fixed、定位中的absolute、浮動都可以讓元素脫離文檔流。
定位方式簡介
- 有
static
、fixed
、absolute
、relative
這四種定位方式; -
static
是靜止,不進行定位,元素還是處于正常的文檔流中,忽略上下左右的偏移和z-index聲明,是默認值。 -
fixed
是把元素固定住,是相對于瀏覽器來定位的,會脫離文檔流,可以使用left、right、top、bottom來改變固定的位置;一般用于廣告、一些固定提示欄等你想要固定持續顯示的內容。 -
absolute
是相對于上一個使用定位(static除外)的祖先元素進行定位的,如果沒有使用定位的祖先元素,就相對于html文檔頁面進行定位,會脫離文檔流,同樣使用left、right、top、bottom來設定偏移的位置;一般用于使用相對位置的場景,在父元素上加個relative,在給子元素設定absolute進行相對偏移。 -
relative
是相對于元素自身在文檔流中的位置進行偏移的,注意它并不會脫離文檔流,使用left、right、top、bottom來設定相對偏移的位置,一般用于微調整元素自身位置。
absolute, relative, fixed 偏移的參考點
-
absolute
,relative
,fixed
偏移的參考點分別是上一個使用除static以外定位的祖先元素(若沒有找到,則相對于html元素即文檔)、元素自身原本在文檔流中的位置、瀏覽器窗口。
z-index 的使用
- 可以設定元素的堆疊順序(可以理解為Z軸高度,越高離我們視野就越近,高度比它小的就被蓋住了),值越大,堆疊優先級越高;使用時將你所要展示出來的元素的z-index值設得比其他遮擋它的元素的值大就可以。
position:relative和負margin使元素位置發生偏移的區別
-
position:relative
是單單把作用到的元素進行一個位置偏移,而其他的元素不會因此發生位置的改變;而負margin
是調整外邊距,這樣會影響到它周圍元素布局和位置。
讓一個固定寬高的元素在頁面上垂直水平居中
- 用
position: absolute
設置這個元素相對于頁面的top和left為50%,此時該元素的左上角這個點就垂直水平居中了,之后再用-margin讓其往左、往上分別移動其寬高的一半,達到垂直水平居中的目的。
浮動元素的特征及對其他元素的影響
- 浮動元素會脫離文檔流,不占據空間;
- 其他浮動元素跟它處于同一層,會緊挨著它的邊框放置,如果有其他元素有清除浮動,則會另起一行放置;
- 普通元素因它脫離文檔流,所以會認為它不存在,會頂上它的位置,所以普通元素的一部分會被擋??;
- 文字遇到浮動元素邊框會避開另起一行有環繞效果。
清除浮動
- 清除浮動指的是用clear屬性來設置是否允許它自身周圍存在浮動元素,這樣可以讓浮動元素因被排斥或排斥其他浮動元素而再往下占據一行,從而消除對其他元素的影響;可以設置clear:left、right、both來選擇不允許哪一邊存在浮動元素。