浮動和定位

浮動元素有什么特征携兵?對父容器、其他浮動元素徐紧、普通元素、文字分別有什么影響?

float CSS屬性指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置并级,文本和內(nèi)聯(lián)元素將圍繞它。
然后嘲碧,該元素從網(wǎng)頁的正常流動中獲取,盡管仍然保持一部分流動愈涩,與絕對定位相反加矛。

  • 影響
  1. 對于父容器而言,如果沒有設(shè)置其高度煤篙,而子元素設(shè)置float,會造成‘塌陷’的效果舰蟆。可用BFC原理或者清除浮動解決.
  2. 對于其他浮動元素而言: 如果寬度足夠會水平排列; 不足會下移靠左/右移動;當(dāng)?shù)谝粋€浮動元素的高度大于第3個浮動元素的高度并且整體寬度不足以水平放下多個浮動元素,會造成‘卡住’的效果身害。
  3. 普通元素:
  • 當(dāng)為塊級元素時會當(dāng)浮動元素不存在
  • 當(dāng)為內(nèi)聯(lián)元素時會‘感知’浮動元素,環(huán)繞浮動元素塌鸯。

清除浮動是指什么?如何清除浮動丙猬?

清除浮動是指結(jié)合clear屬性讓父元素在視覺上包圍浮動元素。清除浮動的方法:

  1. 在父元素的子元素最后添加一個空div茧球,并對其設(shè)置樣式:clear:both;由于在子元素最后添加了空div,并清除了浮動抢埋,因此父容器被撐開,實(shí)現(xiàn)了在視覺上包圍浮動元素的效果揪垄。
  2. 利用BFC來清除浮動。因?yàn)锽FC可以包含浮動饥努,因此可以讓父元素生成一個新的BFC從而包圍浮動的子元素。
    可以對父元素設(shè)定以下樣式之一生成新BFC酷愧。
    float: left / right;
    overflow: hidden / auto / scroll;
    display: table-cell / table-caption / inline-block;
    position: absolute / fixed;

有幾種定位方式,分別是如何實(shí)現(xiàn)定位的溶浴,參考點(diǎn)是什么,使用場景是什么戳葵?

position: relative 根據(jù)自身定位
absolute 根據(jù)已定位的父級來絕對定位,都沒有根據(jù)HTML來進(jìn)行定位.
fixed 根據(jù)瀏覽器窗口來進(jìn)行定位
static 默認(rèn)樣式
sticky 可以看成是relative和fixed的集合體.當(dāng)在頁面可視范圍內(nèi)以relative,當(dāng)頁面滾動超出目標(biāo)區(qū)域時,以fix定位.
一般 absolute 配合 relative使用.當(dāng)父容器的寬高可變時生蚁,使用絕對水平垂直居中。
sticky 是css3的新屬性邦投,兼容性不太好。

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

層疊上下文 .配合定位使用 z-index大的在上,小的在下志衣。
這里說一下我的理解:

  1. BFC和層疊上下文沒關(guān)系
    BFC的目的是讓自己塊中的元素(包括float)不會影響其他元素,在二維平面內(nèi)念脯。(這個說法并不準(zhǔn)確,準(zhǔn)確的來說是讓該元素內(nèi)部的元素對外部元素所產(chǎn)生的影響轉(zhuǎn)變成該元素對外部元素產(chǎn)生影響)绿店。
    而層疊上下文,是指覆蓋邏輯(z-order)

特性:

層疊上下文的層疊水平要比普通元素高假勿;
層疊上下文可以阻斷元素的混合模式(見此文第二部分說明);
層疊上下文可以嵌套转培,內(nèi)部層疊上下文及其所有子元素均受制于外部的層疊上下文恶导。
每個層疊上下文和兄弟元素獨(dú)立惨寿,也就是當(dāng)進(jìn)行層疊變化或渲染的時候,只需要考慮后代元素羽戒。
每個層疊上下文是自成體系的虎韵,當(dāng)元素發(fā)生層疊的時候,整個元素被認(rèn)為是在父層疊上下文的層疊順序中包蓝。

原則

誰大誰上:當(dāng)具有明顯的層疊水平標(biāo)示的時候,如識別的z-indx值测萎,在同一個層疊上下文領(lǐng)域,層疊水平值大的那一個覆蓋小的那一個硅瞧。
后來居上:當(dāng)元素的層疊水平一致、層疊順序相同的時候,在DOM流中處于后面的元素會覆蓋前面的元素或辖。

(以上來自張鑫旭大神的博客,這里摘抄一下)
這里要注意颂暇,雖然z-index只能對定位元素應(yīng)用缺谴,但是z-index也會使該定位元素對其他元素產(chǎn)生影響(其他元素默認(rèn)值應(yīng)該為z-index=0)耳鸯。該元素的子元素和其他上下文元素中的子元素覆蓋關(guān)系取決于這兩個元素之間的關(guān)系(原因還是在張鑫旭大神的博客中。地址)

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

根據(jù)元素還在普通文檔角度看县爬。設(shè)置positon: relative 還在原來的文檔流,-margin則相反(-margin有可能會被其它元素所覆蓋捌省,不清楚為什么如果那位大神知道請教我)。
示例


image.png

BFC 是什么纲缓?如何生成 BFC?BFC 有什么作用祝高?舉例說明

塊級格式化上下文(block formart context) css2.1新增的一個概念。它是頁面中的一個渲染區(qū)域工闺,有自己的一套渲染規(guī)則。里面的子元素根據(jù)這個規(guī)則進(jìn)行定位. (可以理解為一個與外界格局的包含塊陆蟆,里面不管浮動 定位 什么的 即使在怎么'翻江倒海'都不會其臨邊的元素.該怎么就怎么顯示)body 根元素浮動元素定位元素 position: absolute/fixedpositon: relative/sticky/static不會觸發(fā)BFC

display: inline-block /table-cell/flexoverflow: auto/hidden/srcoll 除了visible一般如果父容器不設(shè)置高度,里面的子元素采用某種方式脫離文檔流叠殷,會造成高度塌陷。BFC可以解決父容器沒有高度的問題林束。比如實(shí)現(xiàn)一個兩欄布局: [父元素可以實(shí)現(xiàn)高度自適像棘。,可以實(shí)現(xiàn)一個簡單的二欄布局壶冒。

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

普通文檔流,同一個塊級上下文中 的垂直方向上凉逛。為什么會產(chǎn)生這種效果,完全是歷史遺留問題,主要是為了解決文字排版的需求状飞。比如相鄰的塊級分別設(shè)置margin為50px 和 100px. 會選擇大的margin作為參考值


比如 元素內(nèi)嵌套多個div,最終參考的是marign最大的那個值.
qq 20170503232222
相鄰的兩個元素一個正maing一個是負(fù)margin诬辈,最終取計算后的值〖黾可以不在同一個塊級上下文中。

  • 如何阻止合并
    形成BFC 可以阻止外bian'ju合并样屠,對于垂直相鄰的元素可以設(shè)置浮動或設(shè)置其中一個元素為display:inline-block;對于父子元素外邊距,可為父元素設(shè)置padding或border痪欲。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市业踢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌知举,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件逛钻,死亡現(xiàn)場離奇詭異,居然都是意外死亡锰提,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門欲账,熙熙樓的掌柜王于貴愁眉苦臉地迎上來芭概,“玉大人赛不,你說我怎么就攤上這事罢洲∥睦瑁” “怎么了殿较?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長淋纲。 經(jīng)常有香客問我劳闹,道長洽瞬,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任菩颖,我火速辦了婚禮,結(jié)果婚禮上晦闰,老公的妹妹穿的比我還像新娘。我一直安慰自己鳍怨,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布窿冯。 她就那樣靜靜地躺著,像睡著了一般确徙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鄙皇,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機(jī)與錄音伴逸,去河邊找鬼。 笑死错蝴,一個胖子當(dāng)著我的面吹牛洲愤,可吹牛的內(nèi)容都是我干的顷锰。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼官紫,長吁一口氣:“原來是場噩夢啊……” “哼州藕!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起床玻,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎锈死,沒想到半個月后穆壕,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體馅精,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡粱檀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了茄蚯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡渗常,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出皱碘,到底是詐尸還是另有隱情询一,我是刑警寧澤健蕊,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站缩功,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏都办。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一势木、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧歌懒,春花似錦、人聲如沸歼培。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至噪窘,卻和暖如春笋庄,著一層夾襖步出監(jiān)牢的瞬間倔监,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工浩习, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留静暂,地道東北人谱秽。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像郊供,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子近哟,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評論 2 353

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評論 1 92
  • 浮動元素的特征及影響 特征: 浮動模型也是一種可視化格式模型疯淫,浮動的框可以左右移動(根據(jù)float屬性值而定),直...
    Joey的企鵝閱讀 889評論 0 0
  • 浮動元素特征 對父容器峡竣、其他浮動元素、普通元素量九、文字的影響 浮動會使應(yīng)用此屬性的元素脫離文檔流。按指定的位置來移...
    ezrealor閱讀 386評論 0 0
  • 浮動元素有什么特征类浪?對父容器、其他浮動元素肌似、普通元素、文字分別有什么影響?浮動的元素會脫離文檔流川队,向左或者向右移動...
    饑人谷_wanpp閱讀 671評論 0 49
  • 一個外地人睬澡,來北京讀書,之后工作煞聪,之后結(jié)婚買房,之后生子 逝慧,之后……這里是她的心情筆記,她的觀影記錄笛臣,她的生活云稚,她...
    王兮閱讀 160評論 0 0