CSS浮動與定位

浮動元素有什么特征?對父容器桩卵、其他浮動元素验靡、普通元素、文字分別有什么影響?

浮動元素脫離了普通文檔流雏节,文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣胜嗓。浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止钩乍。

  • 對父容器的影響:如果父容器的子元素都是浮動元素辞州,那么父容器會失去高度。
  • 對其他浮動元素的影響:如果包含塊兒太窄無法容納水平排列的幾個浮動元素,那么其它浮動塊兒向下移動,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被卡住寥粹。
  • 對普通元素的影響:因為浮動元素脫離了文檔的普通流变过,文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣。
  • 對文字的影響:文字會感應到浮動元素的存在涝涤,并產(chǎn)生文字環(huán)繞浮動元素的效果媚狰。

清除浮動指什么? 如何清除浮動? 兩種以上方法

清楚浮動指解決浮動元素父容器高度塌陷問題。

  1. 在父容器最后添加一個空div阔拳,并清理這個div崭孤。clear:both;
  2. 使父容器生成一個BFC,因為BFC可以包含浮動辨宠。
    規(guī)定滿足下列CSS聲明之一的元素便會生成BFC遗锣。
  • 根元素
  • float的值不為none
  • overflow的值不為visible
  • display的值為inline-block、table-cell嗤形、table-caption
  • position的值為absolute或fixed
  1. 通用的清除浮動方法精偿。
 /*方法1*/
 .clearfix{
      *zoom:1;
  }
  .clearfix:after{ 
      content:"";
      display:block;
      clear:left;
  }

 /*方法2*/
  .clearfix{
    *zoom:1;
  }
  .clearfix:after{
    content:"";
      display:table;
      clear:both;
  }?

有幾種定位方式,分別是如何實現(xiàn)定位的赋兵,參考點是什么还最,使用場景是什么?

|定位方式|實現(xiàn)方式|參考點|使用場景|
| :--------- :|-----------|----------|------------|
|static|默認值,沒有定位毡惜,元素出現(xiàn)在正常的流中。|無||
|relative|相對定位斯撮,元素框偏移某個距離经伙。元素仍保持其未定位前的形狀,它原本所占的空間仍保留勿锅。|元素本身位置|元素的偏移|
|absolute|絕對定位帕膜,元素框從文檔流中刪除,元素定位后生成一個塊級框溢十,而不論原來它在正常流中生成何種類型的框垮刹。|距離最近的非static元素,否則為body|元素垂直水平居中|
|fixed|固定定位张弛,生成絕對定位元素荒典,但不隨著滾動條的移動而改變位置。|瀏覽器窗口|登錄框覆蓋層|


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

z-index 屬性設置元素的堆疊順序吞鸭。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面寺董。如果為正數(shù),則離用戶更近刻剥,為負數(shù)則表示離用戶更遠遮咖。Z-index 僅能在定位元素上奏效。


position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別

相對定位與負margin都可以是元素位置發(fā)生偏移造虏。
區(qū)別:使用負margin的元素在文檔流中的位置會變動御吞,而相對定位不會,只是顯示的位置發(fā)生變化漓藕。


BFC 是什么陶珠?如何生成 BFC?BFC 有什么作用撵术?舉例說明

BFC的全稱是 Block Format Content背率,塊級格式化上下文。
規(guī)定滿足下列CSS聲明之一的元素便會生成BFC。

  • 根元素
  • float的值不為none
  • overflow的值不為visible
  • display的值為inline-block寝姿、table-cell交排、table-caption
  • position的值為absolute或fixed

BFC 作用

  • BFC會阻止垂直外邊距(margin-top、margin-bottom)折疊
    按照BFC的定義饵筑,只有同屬于一個BFC時埃篓,兩個元素才有可能發(fā)生垂直Margin的重疊,這個包括相鄰元素根资,嵌套元素架专,只要他們之間沒有阻擋(例如邊框,非空內(nèi)容玄帕,padding等)就會發(fā)生margin重疊部脚。
    因此要解決margin重疊問題,只要讓它們不在同一個BFC就行了裤纹,但是對于兩個相鄰元素來說委刘,意義不大,沒有必要給它們加個外殼鹰椒,但是對于嵌套元素來說就很有必要了锡移,只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊
  • BFC不會重疊浮動元素
  • BFC可以包含浮動漆际。

在什么場景下會出現(xiàn)外邊距合并淆珊?如何合并?如何不讓相鄰元素外邊距合并奸汇?給個父子外邊距合并的范例

外邊距合并指的是施符,當兩個垂直外邊距相遇時,它們將形成一個外邊距擂找。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者操刀。

  • 相鄰元素外邊距合并。第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并婴洼。


  • 父子外邊距合并骨坑。假設沒有內(nèi)邊距或邊框把外邊距分隔開,那么它們的上和/或下外邊距也會發(fā)生合并柬采。


  • 空元素外邊距合并欢唾。假設有一個空元素,它有外邊距粉捻,但是沒有邊框或填充礁遣。在這種情況下,上外邊距與下外邊距就碰到了一起肩刃,它們會發(fā)生合并祟霍。



    如果這個外邊距遇到另一個元素的外邊距杏头,它還會發(fā)生合并:



代碼1
代碼2
代碼3
代碼4

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市沸呐,隨后出現(xiàn)的幾起案子醇王,更是在濱河造成了極大的恐慌,老刑警劉巖崭添,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件寓娩,死亡現(xiàn)場離奇詭異,居然都是意外死亡呼渣,警方通過查閱死者的電腦和手機棘伴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來屁置,“玉大人焊夸,你說我怎么就攤上這事±督牵” “怎么了淳地?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長帅容。 經(jīng)常有香客問我,道長伍伤,這世上最難降的妖魔是什么并徘? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮扰魂,結果婚禮上麦乞,老公的妹妹穿的比我還像新娘。我一直安慰自己劝评,他們只是感情好姐直,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蒋畜,像睡著了一般声畏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上姻成,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天插龄,我揣著相機與錄音,去河邊找鬼科展。 笑死均牢,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的才睹。 我是一名探鬼主播徘跪,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼甘邀,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了垮庐?” 一聲冷哼從身側響起松邪,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎突硝,沒想到半個月后测摔,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡解恰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年锋八,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片护盈。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡挟纱,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出腐宋,到底是詐尸還是另有隱情紊服,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布胸竞,位于F島的核電站欺嗤,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏卫枝。R本人自食惡果不足惜煎饼,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望校赤。 院中可真熱鬧吆玖,春花似錦、人聲如沸马篮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽浑测。三九已至翅阵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間迁央,已是汗流浹背怎顾。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留漱贱,地道東北人槐雾。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像幅狮,于是被迫代替她去往敵國和親募强。 傳聞我的和親對象是個殘疾皇子株灸,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,748評論 1 92
  • 1.浮動元素有什么特征擎值?對父容器慌烧、其他浮動元素、普通元素鸠儿、文字分別有什么影響? 答:浮動模型也是一種可視化格式模型...
    饑人谷_牛牛閱讀 389評論 0 0
  • 1.浮動元素有什么特征屹蚊?對父容器、其他浮動元素进每、普通元素汹粤、文字分別有什么影響? 浮動模型也是一種可視化格式模型,浮...
    謹言_慎行閱讀 414評論 0 3
  • 問答 1. 浮動元素有什么特征田晚?對父容器嘱兼、其他浮動元素、普通元素贤徒、文字分別有什么影響? 浮動元素有什么特征floa...
    cheneyzhangch閱讀 310評論 0 0
  • 浮動元素有什么特征芹壕?對父容器、其他浮動元素接奈、普通元素踢涌、文字分別有什么影響? 4.對普通元素:普通元素將不能感知到浮...
    l_meng閱讀 307評論 0 0