任務(wù)10-浮動(dòng)定位BFC邊距合并

1.浮動(dòng)元素有什么特征?對(duì)父容器莺债、其他浮動(dòng)元素滋觉、普通元素、文字分別有什么影響?

  • 特征
    1.浮動(dòng)元素脫離文檔流齐邦,按照其外邊距指定的位置相對(duì)于它的上一個(gè)塊級(jí)元素(或父元素)顯示
    2.浮動(dòng)元素后面的塊級(jí)元素的內(nèi)容會(huì)向此浮動(dòng)元素的外邊距靠齊椎侠,但是邊框和背景卻忽略浮動(dòng)元素而向上一個(gè)任意非浮動(dòng)元素靠齊
    3.浮動(dòng)元素外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣會(huì)停下
    4.普通流中的文字將會(huì)圍繞浮動(dòng)元素

  • 影響
    對(duì)父容器的影響:如果父容器的子元素都是浮動(dòng)元素,那么父容器會(huì)失去高度措拇,在浮動(dòng)元素之外我纪。視覺上,父容器沒有包含住浮動(dòng)的子元素丐吓。
    其它浮動(dòng)元素的影響:如果包含塊太窄無法容納水平排列的全部浮動(dòng)元素浅悉,那么其它浮動(dòng)元素會(huì)向下移動(dòng),直到有足夠的空間券犁,而如果浮動(dòng)元素的高度不同术健,那么向下移動(dòng)的時(shí)候可能會(huì)被卡住。
    普通元素的影響:普通元素會(huì)視浮動(dòng)元素不見粘衬,占據(jù)浮動(dòng)元素原有的位置荞估,但會(huì)被浮動(dòng)元素遮罩。
    對(duì)文字的影響:文字會(huì)感知到浮動(dòng)元素的存在稚新,會(huì)留出空間勘伺,形成環(huán)繞效果。

2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法

讓普通元素和文字不受浮動(dòng)元素的影響褂删,父容器感受到浮動(dòng)元素的存在

1.overflow:auto\hidden

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

3.有幾種定位方式飞醉,分別是如何實(shí)現(xiàn)定位的,參考點(diǎn)是什么屯阀,使用場(chǎng)景是什么缅帘?

定位方式 參考點(diǎn) 使用場(chǎng)景
inherit 從父元素繼承position屬性的值 一般不用
static 默認(rèn)值,沒有定位 默認(rèn)值
relative 相對(duì)于元素本身正常位置進(jìn)行定位 不影響原文檔流的情況下蹲盘,做細(xì)微調(diào)整股毫。子元素需要以自身為參考來做絕對(duì)定位
absolute 生成絕對(duì)定位元素, 相對(duì)于static定位以外的第一個(gè)祖先元素 不需要占用原文檔流的位置
fixed 絕對(duì)定位召衔,相對(duì)于瀏覽器窗口 需要在視口中一直保留這個(gè)元素
sticky relative和fixed定位結(jié)合體 目標(biāo)區(qū)域在屏幕表現(xiàn)為relative定位铃诬,當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)變?yōu)閒ixed定位

注意:只有定位元素position:srelative、absolute苍凛、fixed才可以設(shè)置top趣席、left、bottom醇蝴、right的值

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

控制疊放順序宣肚,z-index越高,元素的位置越靠上悠栓,只作用在有定位屬性為relative霉涨、absolute按价、fixed中的元素上。
z-index僅在設(shè)置了position非static屬性的元素生效笙瑟,且z-index的值只能在兄弟元素之間比較楼镐。

Z-index默認(rèn)值為auto,則不建立層疊上下文。設(shè)置為0則會(huì)建立層疊上下文往枷。
例子:


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

position:relative 不會(huì)影響其他元素位置框产,還占用原來的位置,可以單獨(dú)挪動(dòng)错洁。
負(fù)margin會(huì)影響到其他元素的位置秉宿。文檔流的位置發(fā)生偏移。

  • 正常:


  • 加了-margin:box1遮住了box屯碴,還帶著box2一起挪動(dòng)


  • 加了position:relative:box和box2認(rèn)為box1還沒挪動(dòng)描睦,box1自己可以改位置


6.BFC 是什么?如何生成 BFC导而?BFC 有什么作用酌摇?舉例說明

  • BFC

block formatting contexts,塊級(jí)格式化上下文嗡载,容器里面的子元素不會(huì)影響到外面的元素。

  • 生成 BFC的元素:

1.根元素
2.float屬性不為none
3.position為absolute或fixed
4.display為inline-block仍稀、flex洼滚、inline-flex
5.overflow不為visible

  • 特性:

1.內(nèi)部的box會(huì)在垂直方向,一個(gè)接一個(gè)的放置技潘。
2.box垂直方向的距離由margin決定遥巴,屬于同BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊,如果是父子關(guān)系的box,子b元素的margin-left邊緣不會(huì)超過父元素的邊緣
3.BFC的區(qū)域不會(huì)與float box重疊
4.BFC是頁面上的一個(gè)隔離的獨(dú)立容器享幽,容器里面的子元素不會(huì)影響到外面铲掐,反之如此
5.計(jì)算BFC高度時(shí),浮動(dòng)元素也參與計(jì)算

  • 作用:

解釋margin邊距合并問題
發(fā)現(xiàn)浮動(dòng)元素contain float
不影響普通元素

  • 例子:
    當(dāng)box元素是浮動(dòng)的時(shí)候值桩,只有main里的文字發(fā)現(xiàn)了浮動(dòng)元素

    給box加float:left;marin加overflow:auto;main發(fā)現(xiàn)浮動(dòng)摆霉,不與浮動(dòng)重疊。

7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并奔坟?如何合并携栋?如何不讓相鄰元素外邊距合并?給個(gè)父子外邊距合并的范例

垂直外邊距合并:兩個(gè)塊級(jí)元素垂直排列同時(shí)設(shè)置margin咳秉,相交部分margin合并婉支;合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。當(dāng)兩個(gè)外邊距都為負(fù)數(shù)時(shí)澜建,取其絕對(duì)值的較大者向挖,當(dāng)兩個(gè)外邊距為一正一負(fù)時(shí)蝌以,取兩者的和。
父子外邊距合并:
1 同一body的父子元素何之,給父元素中的子元素加margin跟畅,最后卻是整體的margin改變,而非父元素不動(dòng)子元素改變的效果
2 同一body的父子元素帝美,父元素沒有border碍彭、padding,子元素某些部分和父元素重疊

  • 合并規(guī)則:

兩個(gè)margin都是正值的時(shí)候悼潭,取兩者的最大值庇忌;
當(dāng) margin 都是負(fù)值的時(shí)候,取的是其中絕對(duì)值較大的舰褪,然后皆疹,從0位置,負(fù)向位移占拍;
當(dāng)有正有負(fù)的時(shí)候略就,先取出負(fù) margin 中絕對(duì)值中最大的,然后晃酒,和正 margin 值中最大的 margin 相加表牢。
所有毗鄰的margin要一起參與運(yùn)算,不能分步進(jìn)行贝次。

  • 解決方法:
    1 給父元素加border或padding崔兴,或者加 overflow:auto/hidden(比較穩(wěn)定),或利用clear蛔翅。
    2 不在一個(gè)普通流中或一個(gè)BFC中敲茄。
    3 margin在垂直方向上不毗鄰。
  • 例子

子元素加margin-top父元素也跟著動(dòng)

父元素加了overflow后山析,子元素margin-top數(shù)值生效


父元素加border:


父元素加padding:


父元素加clear:


注:clear有兩種方法適用于i8以上瀏覽器堰燎,只需根據(jù)需要更換.clearfix部分(父元素)的代碼即可。border的顏色可以設(shè)置為transparent(透明)笋轨。

經(jīng)過以上實(shí)驗(yàn)發(fā)現(xiàn):

  • 父元素加了border和padding,子元素margin秆剪、大小改變的數(shù)值超出父元素大小,不會(huì)撐大父元素爵政;
  • 父元素加overflow:hidden,子元素margin鸟款、大小改變的數(shù)值超出父元素大小,有一部分子元素會(huì)被隱藏茂卦;父元素加overflow:auto何什,子元素大于父元素的話,父元素下面或者右側(cè)會(huì)有一個(gè)滾動(dòng)條等龙。
  • 父元素加clear处渣,子元素margin伶贰、大小改變的數(shù)值超出父元素大小,父元素會(huì)被子元素?fù)未蟆?/li>

代碼題:

1.http://js.jirengu.com/pitecizaju/1/edit
2.http://js.jirengu.com/tikuyosiki/2/edit?html,css,output
3.http://js.jirengu.com/kifitulepa/2/edit
4.http://js.jirengu.com/kavifahiju/2/edit?html,css,output

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末罐栈,一起剝皮案震驚了整個(gè)濱河市黍衙,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌荠诬,老刑警劉巖琅翻,帶你破解...
    沈念sama閱讀 216,843評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異柑贞,居然都是意外死亡方椎,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門钧嘶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來棠众,“玉大人,你說我怎么就攤上這事有决≌⒛茫” “怎么了?”我有些...
    開封第一講書人閱讀 163,187評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵书幕,是天一觀的道長新荤。 經(jīng)常有香客問我,道長台汇,這世上最難降的妖魔是什么迟隅? 我笑而不...
    開封第一講書人閱讀 58,264評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮励七,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘奔缠。我一直安慰自己掠抬,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評(píng)論 6 390
  • 文/花漫 我一把揭開白布校哎。 她就那樣靜靜地躺著两波,像睡著了一般。 火紅的嫁衣襯著肌膚如雪闷哆。 梳的紋絲不亂的頭發(fā)上腰奋,一...
    開封第一講書人閱讀 51,231評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音抱怔,去河邊找鬼劣坊。 笑死,一個(gè)胖子當(dāng)著我的面吹牛屈留,可吹牛的內(nèi)容都是我干的局冰。 我是一名探鬼主播测蘑,決...
    沈念sama閱讀 40,116評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼康二!你這毒婦竟也來了碳胳?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,945評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤沫勿,失蹤者是張志新(化名)和其女友劉穎挨约,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體产雹,經(jīng)...
    沈念sama閱讀 45,367評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡诫惭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了洽故。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贝攒。...
    茶點(diǎn)故事閱讀 39,754評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖时甚,靈堂內(nèi)的尸體忽然破棺而出隘弊,到底是詐尸還是另有隱情,我是刑警寧澤荒适,帶...
    沈念sama閱讀 35,458評(píng)論 5 344
  • 正文 年R本政府宣布梨熙,位于F島的核電站,受9級(jí)特大地震影響刀诬,放射性物質(zhì)發(fā)生泄漏咽扇。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評(píng)論 3 327
  • 文/蒙蒙 一陕壹、第九天 我趴在偏房一處隱蔽的房頂上張望质欲。 院中可真熱鬧,春花似錦糠馆、人聲如沸嘶伟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽九昧。三九已至,卻和暖如春毕匀,著一層夾襖步出監(jiān)牢的瞬間铸鹰,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評(píng)論 1 269
  • 我被黑心中介騙來泰國打工皂岔, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蹋笼,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,797評(píng)論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像姓建,于是被迫代替她去往敵國和親诞仓。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評(píng)論 2 354

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

  • 問答 問題1. 浮動(dòng)元素有什么特征速兔?對(duì)父容器墅拭、其他浮動(dòng)元素、普通元素涣狗、文字分別有什么影響? 浮動(dòng)元素可以依據(jù) fl...
    Soarse閱讀 241評(píng)論 0 0
  • 問答 1.浮動(dòng)元素有什么特征谍婉?對(duì)父容器、其他浮動(dòng)元素镀钓、普通元素穗熬、文字分別有什么影響? 浮動(dòng)元素的特征:文字環(huán)繞浮動(dòng)...
    liushaung閱讀 379評(píng)論 0 3
  • 浮動(dòng)元素有什么特征?對(duì)父容器丁溅、其他浮動(dòng)元素唤蔗、普通元素、文字分別有什么影響?一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置窟赏,允許...
    _小黑閱讀 231評(píng)論 0 0
  • 一妓柜,浮動(dòng)元素有什么特征?對(duì)父容器涯穷、其他浮動(dòng)元素棍掐、普通元素、文字分別有什么影響? 浮動(dòng)模型是一種可視化格式模型拷况,浮動(dòng)...
    DeeJay_Y閱讀 868評(píng)論 0 4
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案作煌? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評(píng)論 1 92