無標(biāo)題文章

浮動元素有什么特征?對父容器贝咙、其他浮動元素扎酷、普通元素、文字分別有什么影響?

浮動元素的特征:1. 不占據(jù)普通文檔流的空間酪捡。2. 浮動元素的左(右)外邊界不能超過其包含塊的左(右)內(nèi)邊界。3. 浮動元素的左(右)外邊界必須是源文檔中之前出現(xiàn)的左浮動(右浮動)的元素的右(左)邊界纳账,除非后出現(xiàn)浮動元素的頂端在先出現(xiàn)浮動元素的底端下面逛薇。4. 左浮動元素的右外邊界不會在其右邊浮動元素的左外邊界的右邊。一個右浮動元素的左外邊界不會在其左邊任何左浮動元素的右外邊界的左邊疏虫。5. 一個浮動元素的頂端不能比其父元素的內(nèi)頂端更高永罚。6. 浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高。7. 如果文檔中一個浮動元素之前出現(xiàn)另一個元素卧秘,浮動元素的頂端不能比包含該元素所生成的框的任何行框的頂端更高呢袱。8. 如果浮動元素出現(xiàn)在另一個浮動元素的旁邊,而因此可能導(dǎo)致超出包含塊的話斯议,這個浮動元素會向下浮動到之前浮動元素下面的某一點(diǎn)产捞。9. 浮動元素必須盡可能高地放置。10. 左浮動元素必須向左盡可能遠(yuǎn)哼御,右浮動元素必須向右盡可能遠(yuǎn)坯临。11. inline元素設(shè)置浮動焊唬,改變inline的display使得它像個block-level。12. 在重疊上看靠,浮動元素會遮蓋block-level元素的背景赶促,不會遮蓋inline元素。
內(nèi)邊界:指盒模型中的content邊界挟炬。外邊界:指盒模型中的margin邊界鸥滨。

影響:
非BFC的正常文檔流父元素會"感受"不到浮動元素的存在,從而產(chǎn)生"高度塌陷"谤祖。
其他浮動元素會"察覺"到浮動元素的存在按照從左到右的"正常文檔流"排列婿滓。
普通元素(非inline-level)會無視浮動元素的存在,從而占據(jù)浮動元素的"原來的位置"。
文字(也既inline-level)級的元素會環(huán)繞浮動元素粥喜,表現(xiàn)的像是察覺到浮動元素一樣凸主。

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

清除浮動指元素的側(cè)邊不允許出現(xiàn)浮動元素,從而使得浮動元素的不占據(jù)普通文檔流空間的使得父元素的高度塌陷問題得到解決额湘,主要通過clear屬性實(shí)現(xiàn)卿吐。
clear:指定一個元素是否可以在它之前的浮動元素旁邊,或者必須向下移動(清除浮動) 在它的下面锋华。clear 屬性適用于浮動和非浮動元素嗡官。
當(dāng)應(yīng)用于非浮動塊時,它將非浮動塊的邊框邊界移動到所有相關(guān)浮動元素外邊界的下方毯焕。這個行為作用時會導(dǎo)致margin collapsing不起作用衍腥。
當(dāng)應(yīng)用于浮動元素時,它將元素的外邊界移動到所有相關(guān)的浮動元素外邊界的下方芥丧。這會影響后面浮動元素的布局紧阔,后面的浮動元素的位置無法高于它之前的元素坊罢。
方法:1. 設(shè)置浮動包含塊的父元素height值续担。2. 使得含塊的父元素變成BFC。3. 通過添加:after偽元素活孩,然后在偽元素上設(shè)置clear屬性來實(shí)現(xiàn)物遇。

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

inherit從父元素繼承position屬性的值一般不用

static默認(rèn)值,沒有定位起趾,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)

relative生成相對定位的元素诗舰,相對于元素本身正常位置進(jìn)行定位屬性值:left, top,right ,bottom應(yīng)用于對其自身進(jìn)行細(xì)微調(diào)整
absolute生成絕對定位的元素,相對于static定位以外的第一個祖先元素(offset parent)進(jìn)行定位屬性值:left, top,right ,bottom
fixed生成絕對定位的元素训裆,相對于瀏覽器窗口進(jìn)行定位眶根。屬性值:left, top,right ,bottom需要一直停留在窗口的元素蜀铲,例如
sticky兼容性較差,一般用JS實(shí)現(xiàn)新的css3屬性属百,它的表現(xiàn)類似position:relative和position:fixed的合體记劝,目標(biāo)區(qū)域在屏幕中可見時,它的行為就像position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時族扰,它的表現(xiàn)就像position:fixed厌丑,它會固定在目標(biāo)位置。

注意:如果同時定義了left和right值渔呵,且width和height有值怒竿,那么left生效,right無效扩氢,同樣愧口,同時定義了top和bottom,top生效类茂。

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

z-index規(guī)定了元素在Z軸(距離用戶遠(yuǎn)近)上的順序耍属,值越大則越靠近用戶,表現(xiàn)就是元素在最上面巩检。
z-index僅在設(shè)置了position非static屬性的元素生效厚骗,且z-index的值只能在兄弟元素之間比較。
Z-index默認(rèn)值為auto,則不建立層疊上下文兢哭。設(shè)置為0則會建立層疊上下文领舰。
深入理解CSS中的層疊上下文和層疊順序27;
positio1n:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative相對自己原本的位置偏移,不影響其它普通流中元素的位置迟螺。
margin:除了讓元素自身發(fā)生偏移還影響其它普通流中的元素冲秽。

BFC 是什么?如何生成 BFC矩父?BFC 有什么作用锉桑?舉例說明

BFC:塊格式化上下文(block formatting context) 是Web頁面的可視CSS渲染的一部分。它是塊盒子的布局發(fā)生及浮動體彼此交互的區(qū)域窍株。首先BFC是一個名詞民轴,是一個獨(dú)立的布局環(huán)境,我們可以理解為一個箱子(實(shí)際上是看不見摸不著的)球订,箱子里面物品的擺放是不受外界的影響的后裸。
形成條件:
根元素或其它包含它的元素
浮動 (元素的 float 不是 none)
絕對定位的元素 (元素具有 position 為 absolute 或 fixed)
內(nèi)聯(lián)塊 inline-blocks (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell,HTML表格單元格默認(rèn)屬性)
表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
塊元素具有overflow 冒滩,且值不是 visible
display: flow-root

注意:浮動不會影響其它塊格式化上下文中元素的布局微驶,并且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。
應(yīng)用:
自適應(yīng)的兩欄布局开睡。
清除元素內(nèi)部浮動因苹。
嵌套元素margin邊距合并問題的解決较店。

在什么場景下會出現(xiàn)外邊距合并?如何合并容燕?如何不讓相鄰元素外邊距合并梁呈?

外邊距合并出現(xiàn)的三個場景。
同一個BFC蘸秘,且同處于普通流中的垂直相鄰元素外邊距合并官卡。
父子元素的外邊距合并。
空元素的外邊距合并醋虏。

合并規(guī)則:
兩個margin都是正值的時候寻咒,取兩者的最大值;
當(dāng) margin 都是負(fù)值的時候颈嚼,取的是其中絕對值較大的毛秘,然后,從0位置阻课,負(fù)向位移叫挟;
當(dāng)有正有負(fù)的時候,先取出負(fù) margin 中絕對值中最大的限煞,然后抹恳,和正 margin 值中最大的 margin 相加。
所有毗鄰的margin要一起參與運(yùn)算署驻,不能分步進(jìn)行奋献。

不讓相鄰元素外邊距合并的方法:
被非空內(nèi)容、padding旺上、border 或 clear 分隔開瓶蚂。
不在一個普通流中或一個BFC中。
margin在垂直方向上不毗鄰宣吱。

總結(jié):

這些margin都處于普通流中窃这,并在同一個BFC中;
這些margin沒有被非空內(nèi)容凌节、padding钦听、border 或 clear 分隔開;
這些margin在垂直方向上是毗鄰的倍奢,包括以下幾種情況:- 一個box的top margin與第一個子box的top margin- 一個box的bottom margin與最后一個子box的bottom margin,但須在該box的height 為auto的情況下- 一個box的bottom margin與緊接著的下一個box的top margin- 一個box的top margin與其自身的bottom margin垒棋,但須滿足沒創(chuàng)建BFC卒煞、零min-height、零或者“auto”的height叼架、沒有普通流的子元素畔裕。
例外的情況根元素的外邊距不會參與折疊
不設(shè)置任何屬性的空span和空div不影響任何布局衣撬,可以無視之。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末扮饶,一起剝皮案震驚了整個濱河市具练,隨后出現(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ī)與錄音,去河邊找鬼丸相。 笑死搔确,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播膳算,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼座硕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了涕蜂?” 一聲冷哼從身側(cè)響起华匾,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎机隙,沒想到半個月后蜘拉,有當(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
  • 正文 我和宋清朗相戀三年诸尽,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片印颤。...
    茶點(diǎn)故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡您机,死狀恐怖,靈堂內(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. 我叫王不留菌瘪,地道東北人腮敌。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓阱当,卻偏偏與公主長得像俏扩,于是被迫代替她去往敵國和親糜工。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評論 2 355

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案录淡? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評論 1 92
  • relative:生成相對定位的元素捌木,通過top,bottom,left,right的位置相對于其正常位置進(jìn)行定位...
    zx9426閱讀 943評論 0 2
  • 1.在什么場景下會出現(xiàn)外邊距合并彬檀?如何合并帆啃?如何不讓相鄰元素外邊距合并?給個父子外邊距合并的范例 概念:在CSS當(dāng)...
    饑人谷_任磊閱讀 650評論 0 3
  • 一窍帝,浮動元素有什么特征努潘?對父容器、其他浮動元素坤学、普通元素疯坤、文字分別有什么影響? 浮動模型是一種可視化格式模型,浮動...
    DeeJay_Y閱讀 874評論 0 4
  • 人深浮,真的要學(xué)著承擔(dān)压怠。當(dāng)自己一天天的成長,我們所扮演的角色也愈來愈多飞苇。其中也難免會有些自己不擅長菌瘫、不喜歡,甚至不習(xí)慣...
    909354b7e446閱讀 146評論 0 0