入門任務(wù)10

1、浮動(dòng)元素有什么特征潭辈?對父容器鸯屿、其他浮動(dòng)元素澈吨、普通元素、文字分別有什么影響?

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

3谅辣、有幾種定位方式,分別是如何實(shí)現(xiàn)定位的婶恼,參考點(diǎn)是什么桑阶,使用場景是什么?

4勾邦、z-index 有什么作用? 如何使用?

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

6、BFC 是什么检痰?如何生成 BFC包归?BFC 有什么作用?舉例說明

7铅歼、在什么場景下會(huì)出現(xiàn)外邊距合并公壤?如何合并?如何不讓相鄰元素外邊距合并椎椰?給個(gè)父子外邊距合并的范例

8厦幅、代碼

答案

1、

浮動(dòng)模型也是一種可視化格式模型慨飘,浮動(dòng)的框可以左右移動(dòng)(根據(jù)float屬性值而定)确憨,直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。浮動(dòng)元素不在文檔的普通流中瓤的,文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣.
對父容器的影響:如果父容器的子元素都是浮動(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)元素遮罩顿仇。
對文字的影響:文字會(huì)感知到浮動(dòng)元素的存在,會(huì)留出空間,形成環(huán)繞效果夺欲。

2跪帝、

清除浮動(dòng)是指結(jié)合clear屬性讓父元素在視覺上包圍浮動(dòng)元素。清除浮動(dòng)的方法:
(1) 在父元素的子元素最后添加一個(gè)空div些阅,并對其設(shè)置樣式:clear:both;
由于在子元素最后添加了空div,并清除了浮動(dòng)斑唬,因此父容器被撐開市埋。

<div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
      <div style="clear:both;"></div>
  </div>/

(2)利用BFC來清除浮動(dòng)。
因?yàn)锽FC可以包含浮動(dòng)恕刘,因此可以讓父元素生成一個(gè)新的BFC從而包圍浮動(dòng)的子元素缤谎。
可以對父元素設(shè)定以下樣式之一生成新BFC。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;

<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
    <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
    </div>
</div>

(3)結(jié)合CSS特性的通用清除浮動(dòng)方案褐着,其本質(zhì)還是第1種方法坷澡。

/*方法1*/
  .clearfix{
      *zoom:1;
  }
  .clearfix:after{
      content:"";
      display:block;
      clear:left;
  }

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

3、

有幾種定位方式含蓉,分別是如何實(shí)現(xiàn)定位的频敛,參考點(diǎn)是什么,使用場景是什么馅扣?
(1)inherit
規(guī)定應(yīng)該從父元素繼承 position 屬性的值
(2)static
默認(rèn)值,沒有定位斟赚,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)
(3)relative
生成相對定位的元素,相對于元素本身正常位置進(jìn)行定位,因此差油,left:20px 會(huì)向元素的 left 位置添加20px
(4)absolute
生成絕對定位的元素拗军,相對于static定位以外的第一個(gè)祖先元素(offset parent)進(jìn)行定位,元素的位置通過 left, top,right 以及 bottom 屬性進(jìn)行規(guī)定
(5)fixed
生成絕對定位的元素,相對于瀏覽器窗口進(jìn)行定位蓄喇。元素的位置通過 left, top, right
以及 bottom 屬性進(jìn)行規(guī)定
(6)sticky
CSS3新屬性发侵,表現(xiàn)類似position:relative和position:fixed的合體,在目標(biāo)區(qū)域在屏幕中可見時(shí)妆偏,它的行為就像position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)刃鳄,它的表現(xiàn)就像position:fixed,它會(huì)固定在目標(biāo)位置

CSS有三種基本的定位機(jī)制:普通流楼眷,相對定位和絕對定位
普通流是默認(rèn)定位方式铲汪,在普通流中元素框的位置由元素在html中的位置決定,元素position屬性為static或繼承來的static時(shí)就會(huì)按照普通流定位罐柳,這也是我們最常見的方式
相對定位比較簡單掌腰,對應(yīng)position屬性的relative值,如果對一個(gè)元素進(jìn)行相對定位张吉,它將出現(xiàn)在他所在的位置上齿梁,然后可以通過設(shè)置垂直或水平位置,讓這個(gè)元素相對于它自己移動(dòng),在使用相對定位時(shí)勺择,無論元素是否移動(dòng)创南,元素在文檔流中占據(jù)原來空間,只是表現(xiàn)出來的位置會(huì)改變

絕對定位與固定定位相對定位可以看作特殊的普通流定位省核,元素位置是相對于它在普通流中位置發(fā)生變化稿辙,而絕對定位使元素的位置與文檔流無關(guān),也不占據(jù)文檔流空間气忠,普通流中的元素布局就像絕對定位元素不存在一樣

絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的给郊。如果元素沒有已定位的祖先元素膀息,那么他的位置就相對于初始包含塊html來定位

因?yàn)榻^對定位與文檔流無關(guān)览闰,所以絕對定位的元素可以覆蓋頁面上的其他元素麻顶,可以通過z-index
fixed固定定位是屬于絕對定位中的一種。一般使用場景淘钟,例如:導(dǎo)航欄宦赠,右側(cè)工具欄,底部回到頂部按鈕等米母。它的定位是相對于瀏覽器的視窗口(viewport)來定的勾扭,而其他的絕對定位則是相遇于文檔(html)定位的。

4爱咬、

z-index 屬性指定一個(gè)元素的堆疊順序尺借。因?yàn)榻^對定位的元素脫離了普通流,所以絕對定位的元素可以覆蓋頁面上的其它元素精拟。這時(shí)可以通過給元素設(shè)置z-index屬性來控制疊放順序燎斩,擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
z-index有三個(gè)屬性
auto 默認(rèn)蜂绎。堆疊順序與父元素相等栅表。
number設(shè)置元素的堆疊順序。
inherit規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值师枣。

5怪瓶、

position:relative;只相對自己原本位置發(fā)生偏移,不影響其它普通流中元素的位置践美。
margin:除了讓元素自身發(fā)生偏移還影響其它普通流中的元素洗贰。

6、

BFC(Block formatting context)直譯為"塊級格式化上下文"陨倡。它是一個(gè)獨(dú)立的渲染區(qū)域敛滋,只有Block-level box參與, 它規(guī)定了內(nèi)部的Block-level Box如何布局兴革,并且與這個(gè)區(qū)域外部毫不相干绎晃。

BFC布局規(guī)則:
內(nèi)部的Box會(huì)在垂直方向蜜唾,一個(gè)接一個(gè)地放置;
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊 每個(gè)元素的margin box的左邊庶艾, 與包含塊border box的左邊相接觸(對于從左往右的格式化袁余,否則相反)。即使存在浮動(dòng)也是如此;
BFC的區(qū)域不會(huì)與float box重疊;
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器咱揍,容器里面的子元素不會(huì)影響到外面的元素颖榜。反之也如此;
計(jì)算BFC的高度時(shí),浮動(dòng)元素也參與計(jì)算;

哪些元素會(huì)生成BFC?:
根元素;
float: left|right;
overflow: hidden|auto|scroll;
display: table-cell|table-caption|inline-block;
position: absolute|fixed;
BFC的作用有:
(1) 解決margin重疊問題述召。所謂margin重疊是指處于同一個(gè)BFC的相鄰元素朱转、嵌套元素,只要它們之間沒有阻擋(如:邊框积暖、非空內(nèi)容、padding等)就會(huì)發(fā)生margin重疊怪与。這是只要讓其中一個(gè)元素生成新的BFC就能解決margin重疊問題夺刑。
(2) 清除浮動(dòng)。因?yàn)锽FC可以包含浮動(dòng)分别,所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動(dòng)的子元素遍愿,因而清除了浮動(dòng)。

7耘斩、

外邊距合并指的是沼填,當(dāng)兩個(gè)垂直外邊距相遇時(shí),即當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)括授,第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并坞笙。它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者荚虚。
父子外邊距合并的條件是父元素沒有邊框和padding隔開薛夜。形成BFC 可以阻止外邊柜合并,如上一題的給元素添加浮動(dòng)版述,絕對定位梯澜,inline-block,父子元素情況下,給父元素添加overflow不為none也可以阻止渴析。

#d1 {
  width:100px;
  height:100px;
  margin-bottom:20px;
}
#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
}

<div id="d1">
</div>

<div id="d2">
</div>

這時(shí)兩個(gè)div在垂直距離上的外邊距進(jìn)行了合并晚伙,合并后的值是20px。
如果不想這樣俭茧,就在上一個(gè)元素里加一個(gè):
display:inline-block;
阻止外邊距合并

為了阻止父子元素合并咆疗,父元素生成一個(gè)新的BFC, overflow, display...
給父元素加上一個(gè)邊框或者padding等..

8、

代碼1實(shí)現(xiàn)alert效果
代碼2實(shí)現(xiàn)表單效果
代碼3實(shí)現(xiàn)模態(tài)框效果
代碼4實(shí)現(xiàn)導(dǎo)航欄效果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末恢恼,一起剝皮案震驚了整個(gè)濱河市民傻,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖漓踢,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件牵署,死亡現(xiàn)場離奇詭異,居然都是意外死亡喧半,警方通過查閱死者的電腦和手機(jī)奴迅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挺据,“玉大人取具,你說我怎么就攤上這事”饽停” “怎么了暇检?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長婉称。 經(jīng)常有香客問我块仆,道長,這世上最難降的妖魔是什么王暗? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任悔据,我火速辦了婚禮,結(jié)果婚禮上俗壹,老公的妹妹穿的比我還像新娘科汗。我一直安慰自己,他們只是感情好绷雏,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布头滔。 她就那樣靜靜地躺著,像睡著了一般之众。 火紅的嫁衣襯著肌膚如雪拙毫。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天棺禾,我揣著相機(jī)與錄音缀蹄,去河邊找鬼。 笑死膘婶,一個(gè)胖子當(dāng)著我的面吹牛缺前,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播悬襟,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼衅码,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了脊岳?” 一聲冷哼從身側(cè)響起逝段,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤垛玻,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后奶躯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體帚桩,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年嘹黔,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了账嚎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,503評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡儡蔓,死狀恐怖郭蕉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情喂江,我是刑警寧澤召锈,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站获询,受9級特大地震影響烟勋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜筐付,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望阻肿。 院中可真熱鬧瓦戚,春花似錦、人聲如沸丛塌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赴邻。三九已至印衔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間姥敛,已是汗流浹背奸焙。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留彤敛,地道東北人与帆。 一個(gè)月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像墨榄,于是被迫代替她去往敵國和親玄糟。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評論 2 359

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案袄秩? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,759評論 1 92
  • 浮動(dòng)元素有什么特征阵翎?對父容器逢并、其他浮動(dòng)元素、普通元素郭卫、文字分別有什么影響?## 特征:浮動(dòng)模型也是一種可視化格式模...
    饑人谷_zhangfan閱讀 284評論 0 0
  • 浮動(dòng)元素有什么特征?對父容器谓形、其他浮動(dòng)元素灶伊、普通元素、文字分別有什么影響? 浮動(dòng)元素可以向左或者向右移動(dòng)寒跳,直到它的...
    Tuuu閱讀 186評論 0 0
  • 1.浮動(dòng)元素有什么特征聘萨?對父容器、其他浮動(dòng)元素童太、普通元素米辐、文字分別有什么影響? 浮動(dòng)模型也是一種可視化格式模型,浮...
    饑人谷_瀟湘情緒雨閱讀 436評論 0 0
  • 浮動(dòng)元素有什么特征书释?對父容器翘贮、其他浮動(dòng)元素、普通元素爆惧、文字分別有什么影響?一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置狸页,允許...
    _小黑閱讀 232評論 0 0