定位與浮動的那些小事

1.浮動元素有什么特征?對父容器、其他浮動元素氨肌、普通元素、文字分別有什么影響?

特征:浮動模型也是一種可視化格式模型酌畜,浮動的框可以左右移動(根據(jù)float屬性值確定)怎囚,知道浮動框碰到包含框或者另一浮動元素的框的邊緣。浮動元素不在文檔的普通流中桥胞,因此文檔普通流的塊級元素感知不到浮動的存在恳守。
對父容器的影響:如果父容器的子元素都是浮動元素,那么父容器會造成高度塌陷贩虾,在浮動元素之外催烘。視覺上,父容器沒有包含住浮動的子元素缎罢。
其他浮動元素:如果包含塊太窄無法容納水平排列的全部浮動元素伊群,那么其它浮動元素會向下移動,直到有足夠的空間策精,而如果浮動元素的高度不同舰始,那么向下移動的時(shí)候可能會被卡住。
普通元素:浮動元素之前的普通元素不受影響咽袜。浮動元素之后的普通元素因感知不到浮動元素的存在會被浮動元素覆蓋丸卷。
文字:文字所在行框內(nèi)會受浮動元素的排擠,文字環(huán)繞浮動元素排列酬蹋。

2. 清除浮動指什么? 如何清除浮動?

清除浮動:消除浮動元素對其父元素因浮動元素造成的高度塌陷的問題
清除浮動方法:
1.在父元素的子元素最后添加一個(gè)空div及老,并對其設(shè)置樣式:clear:both;
由于在子元素最后添加了空div抽莱,并清除了浮動范抓,因此父容器被撐開,實(shí)現(xiàn)了在視覺上包圍浮動元素的效果食铐。

image.png

2.使父元素形成 BFC包含浮動匕垫!
float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed
根據(jù)實(shí)際情況來形成BFC!

image.png

3.通用法
對父元素設(shè)置css來清除浮動虐呻,通用方法象泵,無副作用

.clearfix {
*zoom:1;
}
.clearfix {
content: "";
display: block;
clear: both;
}

3.有幾種定位方式寞秃,分別是如何實(shí)現(xiàn)定位的,參考點(diǎn)是什么偶惠,使用場景是什么春寿?

  • inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值
  • static 默認(rèn)值,沒有定位忽孽,元素出現(xiàn)在正常的文檔流中绑改。
  • relative 相對定位,相對元素本身正常位置進(jìn)行定位兄一。left:20px 會向元素的 left 位置添加20px厘线。使用場景:部分居中布局
  • absulute 絕對定位,相對于static以外的第一個(gè)祖先元素進(jìn)行定位出革。使用場景:二級菜單
  • fixed 固定定位造壮,相對于瀏覽器窗口進(jìn)行定位。使用場景:頁面廣告
  • sticky css3新屬性骂束,表現(xiàn)類似position:relative和position:fixed的合體耳璧,在目標(biāo)區(qū)域在屏幕中可見時(shí),它的行為就像position:relative;而當(dāng)頁面滾動超出目標(biāo)區(qū)域時(shí)展箱,它的表現(xiàn)就像position:fixed楞抡,會固定在目標(biāo)位置。使用場景:搜索列表頁的側(cè)邊菜單

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

z-index作用:z-index屬性設(shè)置了元素的堆疊順序析藕,擁有更高堆疊順序的元素會處于堆疊順序較低的元素前面召廷。

  • z-index屬性設(shè)置了一個(gè)定位元素沿Z軸(垂直屏幕的一條軸線)的位置,如果軸線的只為正账胧,則離用戶更近竞慢,如果軸距為負(fù),離用戶更遠(yuǎn)治泥。
  • z-index可以影響層疊水平筹煮,但只限于position(非static)定位元素以及flex盒子的子元素生效。
  • z-index值為auto時(shí)居夹,不建立層疊上下文败潦,設(shè)置了數(shù)值(即使是0)就會創(chuàng)建層疊上下文了。

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

position:relative元素相對自身偏移准脂,不會影響同一級的其他元素劫扒。
而margin則會影響到其他元素的布局

6.BFC 是什么?如何生成 BFC狸膏?BFC 有什么作用沟饥?

BFC(Block formatting contexts):翻譯過來就是塊級格式化上下文,指的是一種上下文環(huán)境,具有對內(nèi)部元素的包裹性及對外部元素的獨(dú)立性贤旷」懔希可以用來清除浮動。

特性:

  • BFC會阻止垂直外邊距
  • BFC不會重疊浮動元素
  • BFC可以包含浮動

如何形成BFC:

float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed
可以利用BFC可以包含浮動的特性來“清除”浮動幼驶,第二個(gè)(清除浮動)問題里有舉例子艾杏!

7.在什么場景下會出現(xiàn)外邊距合并?如何合并盅藻?如何不讓相鄰元素外邊距合并糜颠?

外邊距合并指的是,當(dāng)兩個(gè)垂直外邊距相遇時(shí)萧求,它們將形成一個(gè)外邊距其兴。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

外邊距合并的三種情況:
1.相鄰的兄弟姐妹元素
2.塊級父元素與其第一個(gè)/最后一個(gè)子元素(若塊級父元素的 margin-bottom 與它的最后一個(gè)子元素的margin-bottom 之間沒有父元素的 border夸政、padding元旬、inline- content、height守问、min-height匀归、 max-height 分隔時(shí),就會發(fā)生下外邊距合并現(xiàn)象耗帕。)
3.空塊元素

合并方式:

  • 兩個(gè)margin為正時(shí)穆端,取兩者較大值
  • 兩個(gè)都為負(fù)時(shí)候,取絕對值的較大值仿便,負(fù)方向移動
  • 當(dāng)有負(fù)邊距存在時(shí)体啰,合并后的外邊距將是最大正邊距加上最小負(fù)邊距(即負(fù)邊距中絕對值最大的一個(gè))。

消除邊距合并方式
方式一:形成BFC
overflow的值為auto或者h(yuǎn)idden時(shí)這個(gè)必須外面還要包裹一層父元素嗽仪。

image.png

方式二:浮動元素荒勇、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊(注意這里指的是上下相鄰的元素)

【個(gè)人總結(jié)闻坚,如有錯(cuò)漏沽翔,歡迎指出】
:>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市窿凤,隨后出現(xiàn)的幾起案子仅偎,更是在濱河造成了極大的恐慌,老刑警劉巖雳殊,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件橘沥,死亡現(xiàn)場離奇詭異,居然都是意外死亡相种,警方通過查閱死者的電腦和手機(jī)威恼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來寝并,“玉大人箫措,你說我怎么就攤上這事〕牧剩” “怎么了斤蔓?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長镀岛。 經(jīng)常有香客問我弦牡,道長,這世上最難降的妖魔是什么漂羊? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任驾锰,我火速辦了婚禮,結(jié)果婚禮上走越,老公的妹妹穿的比我還像新娘椭豫。我一直安慰自己,他們只是感情好旨指,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布赏酥。 她就那樣靜靜地躺著,像睡著了一般谆构。 火紅的嫁衣襯著肌膚如雪裸扶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天搬素,我揣著相機(jī)與錄音呵晨,去河邊找鬼。 笑死熬尺,一個(gè)胖子當(dāng)著我的面吹牛何荚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播猪杭,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼餐塘,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了皂吮?” 一聲冷哼從身側(cè)響起戒傻,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蜂筹,沒想到半個(gè)月后需纳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡艺挪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年不翩,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,991評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡口蝠,死狀恐怖器钟,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情妙蔗,我是刑警寧澤傲霸,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站眉反,受9級特大地震影響昙啄,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜寸五,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一梳凛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧梳杏,春花似錦伶跷、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至烁试,卻和暖如春雇初,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背减响。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工靖诗, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人支示。 一個(gè)月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓刊橘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親颂鸿。 傳聞我的和親對象是個(gè)殘疾皇子促绵,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評論 2 355

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