浮動和定位

浮動元素有什么特征?對父容器年碘、其他浮動元素澈歉、普通元素、文字分別有什么影響屿衅?埃难、

float CSS屬性指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置,直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣涤久。允許文本和內(nèi)聯(lián)元素環(huán)繞它涡尘。該元素從網(wǎng)頁的正常流動中移除,盡管仍然保持部分的流動性(與絕對定位相反)响迂。

  • 對父容器:由于float脫離了普通流考抄,無法撐開父容器,會出現(xiàn)父容器高度塌陷問題蔗彤。
  • 對其他浮動元素:如果寬度足夠會水平排列; 不足會下移靠左/右移動;直到它的外邊緣碰到父容器邊框或者另一個浮動元素的框的邊緣川梅。
  • 普通元素:塊級元素會當浮動元素不存在,但文本和內(nèi)聯(lián)元素時會‘感知’浮動元素然遏,環(huán)繞浮動元素贫途。

清除浮動指什么?如何清除浮動待侵? 兩種以上方法丢早。

清除浮動是為解決因float導(dǎo)致的父容器高度坍塌、導(dǎo)致背景不能顯示秧倾、邊框不能撐開怨酝、margin padding設(shè)置值不能正確顯示、影響后續(xù)元素位置等等問題那先。

  1. clear: left; 要求該盒的top border邊位于源文檔中在此之前的元素形成的所有左浮動盒的bottom外邊下方
    clear: right; 要求該盒的top border邊位于源文檔中在此之前的元素形成的所有右浮動盒的bottom外邊下方
    clear屬性只對自身有效农猬,只能在自身元素中使用clear。
  2. 在父容器內(nèi)添加一個空的塊級元素來撐開父元素胃榕。(使用偽函數(shù)更為推薦)
  3. BFC(塊級格式化上下文)“清理”浮動盛险,對于嵌套元素瞄摊,子元素浮動會對父容器產(chǎn)生影響勋又,我們可以通過BFC這種方式,令父容器包含浮動子元素换帜。實現(xiàn)BFC有多種方式楔壤,(參考MDN參考W3)惯驼。但是使用這種方法也是有影響或者是局限性蹲嚣,例如使用display: inline-block递瑰,會縮短父容器長度。

有幾種定位方式隙畜?分別是如何實現(xiàn)定位的抖部?參考點是什么?使用場景是什么议惰?

  • 靜態(tài)定位position: static
    默認的布局方式慎颗。參考點是文檔流中的位置。

  • 相對定位position: relative;
    相對默認的布局位置進行定位言询,參考點為自己原先的位置俯萎。相對定位元素扔占有原先的位置。

  • 絕對定位positon: absolute;
    絕對定位元素脫離正常文檔流运杭,元素的位置相對于最近的已定位父元素夫啊,如果元素沒有已定位的父元素,那么它的位置相對于<html>辆憔。

  • 定位上下文 Positioning Context
    定位上下文就是值絕對定位元素相對哪個元素定位撇眯,默認的定位上下文是 <html>。
    ps:元素設(shè)置絕對定位后躁愿,行內(nèi)元素可以有塊級元素的特性叛本,可以添加寬高。

  • 固定定位position: fixed;
    相對瀏覽器窗口進行定位彤钟。因此當滾動產(chǎn)生時来候,固定定位元素依然處于窗口的某個固定位置。生成絕對定位元素逸雹,相對于viewport進行定位营搅。

  • 粘性定位position: sticky
    是相對定位和固定定位的結(jié)合。默認情況下表現(xiàn)為相對定位梆砸,當瀏覽器窗口頂端與元素的距離等于 top 屬性的值時转质,轉(zhuǎn)變?yōu)楣潭ǘㄎ弧?br> ps:由于兼容性,固定導(dǎo)航條一般用js來實現(xiàn)帖世。

z-index 有什么作用休蟹? 如何使用?

z-index 屬性指定了一個元素及其子元素的 z-order日矫。 當元素之間重疊的時候赂弓,z-order 決定哪一個元素覆蓋在其余元素的上方顯示。 通常來說 z-index 較大的元素會覆蓋較小的一個哪轿。
對于一個已經(jīng)定位的元素(即position屬性值是非static的元素)盈魁,z-index屬性指定:

  • 元素在當前堆疊上下文中的堆疊層級。
  • 元素是否創(chuàng)建一個新的本地堆疊上下文窃诉。
    需要注意的是一個元素值大杨耙,它的所有子元素都會在其它元素上方赤套。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末证舟,一起剝皮案震驚了整個濱河市晦嵌,隨后出現(xiàn)的幾起案子佳镜,更是在濱河造成了極大的恐慌哮翘,老刑警劉巖残制,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涩哟,死亡現(xiàn)場離奇詭異救鲤,居然都是意外死亡忿檩,警方通過查閱死者的電腦和手機堪遂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進店門介蛉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人溶褪,你說我怎么就攤上這事币旧。” “怎么了猿妈?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵吹菱,是天一觀的道長。 經(jīng)常有香客問我彭则,道長鳍刷,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任俯抖,我火速辦了婚禮输瓜,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘芬萍。我一直安慰自己尤揣,他們只是感情好,可當我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布柬祠。 她就那樣靜靜地躺著北戏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪漫蛔。 梳的紋絲不亂的頭發(fā)上嗜愈,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天,我揣著相機與錄音莽龟,去河邊找鬼蠕嫁。 笑死,一個胖子當著我的面吹牛轧房,可吹牛的內(nèi)容都是我干的拌阴。 我是一名探鬼主播绍绘,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼奶镶,長吁一口氣:“原來是場噩夢啊……” “哼迟赃!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起厂镇,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤纤壁,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后捺信,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酌媒,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年迄靠,在試婚紗的時候發(fā)現(xiàn)自己被綠了秒咨。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡掌挚,死狀恐怖雨席,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情吠式,我是刑警寧澤陡厘,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站特占,受9級特大地震影響糙置,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜是目,卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一谤饭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧懊纳,春花似錦网持、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至身弊,卻和暖如春辟汰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背阱佛。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工帖汞, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人凑术。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓翩蘸,卻偏偏與公主長得像,于是被迫代替她去往敵國和親淮逊。 傳聞我的和親對象是個殘疾皇子催首,可洞房花燭夜當晚...
    茶點故事閱讀 44,689評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案扶踊? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,751評論 1 92
  • 浮動元素的特征及影響 特征: 浮動模型也是一種可視化格式模型,浮動的框可以左右移動(根據(jù)float屬性值而定)郎任,直...
    Joey的企鵝閱讀 890評論 0 0
  • 浮動元素特征 對父容器秧耗、其他浮動元素、普通元素舶治、文字的影響 浮動會使應(yīng)用此屬性的元素脫離文檔流。按指定的位置來移...
    ezrealor閱讀 386評論 0 0
  • 浮動元素有什么特征霉猛?對父容器尺锚、其他浮動元素、普通元素惜浅、文字分別有什么影響?浮動的元素會脫離文檔流缩麸,向左或者向右移動...
    饑人谷_wanpp閱讀 672評論 0 49
  • 1. 浮動元素有什么特征?對父容器赡矢、其他浮動元素杭朱、普通元素、文字分別有什么影響? 浮動元素:元素脫離正常的文檔流吹散,...
    lingfighting閱讀 798評論 1 4