CSS常見樣式3

1. 浮動元素有什么特征坑鱼?對父容器、其他浮動元素絮缅、普通元素姑躲、文字分別有什么影響?

  • 浮動元素不在文檔的普通流中,它可以根據(jù)float屬性值而左右移動盟蚣,直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣才停止移動黍析。
  • 對父容器:如果父容器內的元素均設置了浮動且沒有設置父容器的高度,那么他們脫離普通流無法撐起父容器的高度屎开,導致父元素的塌陷阐枣。
  • 對其它浮動元素:同一父容器內的浮動元素按照設定的方向并排排列,當父元素的寬度不夠時奄抽,后面的元素會向下移動蔼两,直到有足夠的空間;如果浮動元素的高度不同逞度,那么有可能擋住移動的路徑额划。
  • 對普通元素:無法辨別普通元素,有可能導致覆蓋其它普通元素档泽,占據(jù)其位置俊戳。
  • 對文字:文字能夠識別浮動元素,會圍繞浮動元素馆匿。

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

因為沒有預先設置div高度抑胎,所以div高度由其包含的子元素高度決定。而浮動脫離文檔流渐北,所以子元素并不會被計算高度阿逃。此時的div中,相當于div中子元素高度為0,所以發(fā)生了父元素高度塌陷現(xiàn)象恃锉,而清除浮動就是指消除浮動元素對其父元素因浮動元素造成的高度塌陷的問題.

清理浮動一般有三種思路:

  • 設置clear:both能清除浮動搀菩,并撐開父元素。(clear 屬性規(guī)定元素的哪一側不允許其他浮動元素破托。)
  • 使父容器形成BFC肪跋。
  • 父級div定義 偽類:after 和 zoom,原理類似上一種炼团。

3. 有幾種定位方式,分別是如何實現(xiàn)定位的疏尿,參考點是什么瘟芝,使用場景是什么?

4 種不同類型的定位褥琐,這會影響元素框生成的方式锌俱。

  • static
    元素框正常生成。塊級元素生成一個矩形框敌呈,作為文檔流的一部分贸宏,行內元素則會創(chuàng)建一個或多個行框,置于其父元素中磕洪。
  • relative
    元素框偏移某個距離吭练。元素仍保持其未定位前的形狀,它原本所占的空間仍保留析显。
    參考點:自身在文檔流中的位置鲫咽。
    使用場景:一般作為絕對定位的元素參考點,或者頁面圖片的小偏移谷异。
  • absolute
    元素框從文檔流完全刪除分尸,并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊歹嘹。元素原先在正常文檔流中所占的空間會關閉箩绍,就好像元素原來不存在一樣。元素定位后生成一個塊級框尺上,而不論原來它在正常流中生成何種類型的框材蛛。
    參考點:距離最近的非static祖先元素位置。如果元素沒有已定位的祖先元素怎抛,那么他的位置就相對于初始包含塊html來定位仰税。
    使用場景:元素的水平垂直居中。
  • fixed
    元素框的表現(xiàn)類似于將 position 設置為 absolute抽诉,不過其包含塊是視窗本身陨簇。
    參考點:參考瀏覽器窗口(視窗)的位置。使用場景:相對于瀏覽器窗口位置始終不變的顯示窗口,比如:固定邊欄和底欄

提示:相對定位實際上被看作普通流定位模型的一部分河绽,因為元素的位置相對于它在普通流中的位置己单。

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

z-index 屬性指定一個元素的堆疊順序。
擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面耙饰。
z-index有三個屬性:

  • auto 默認纹笼。堆疊順序與父元素相等。
  • number設置元素的堆疊順序苟跪。
  • inherit規(guī)定應該從父元素繼承 z-index 屬性的值廷痘。

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

position:relative笋额,元素顯示位置發(fā)生變化,但是元素在文檔流中的位置不變篷扩,不影響后面元素在文檔流中的布局兄猩。
負margin,元素的顯示位置和在文檔流中的位置均發(fā)生變化鉴未,會影響后面元素在文檔流中的位置枢冤。

6. BFC 是什么?如何生成 BFC铜秆?BFC 有什么作用淹真?舉例說明。

塊格式化上下文(block formatting context) 是頁面 CSS 視覺渲染(visual CSS rendering)這個過程中的一個概念连茧。它是決定塊盒子的布局及浮動元素相互影響的一個因素趟咆。具有對內部元素的包裹性及對外部元素的獨立性。

BFC有以下特性:

  • 內部的Box會在垂直方向梅屉,從頂部開始一個接一個地放置值纱。
  • Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生疊加坯汤。
  • 每個元素的margin box的左邊虐唠, 與包含塊border box的左邊相接觸(對于從左往右的格式化,否則相反)惰聂。即使存在浮動也是如此疆偿。
  • BFC的區(qū)域不會與float box疊加。
  • BFC就是頁面上的一個隔離的獨立容器搓幌,容器里面的子元素不會影響到外面的元素杆故,反之亦然。
  • 計算BFC的高度時溉愁,浮動元素也參與計算处铛。

以下方式可以生成BFC:

  • float 除了none以外的值
  • overflow 除了visible 以外的值(hidden,auto,scroll )
  • display (table-cell撤蟆,table-caption奕塑,inline-block, flex, inline-flex)
  • position值為(absolute,fixed)
  • fieldset元素

由第二條特性家肯,我們可以在解決margin疊加問題時用到BFC龄砰。

margin疊加

三P每個p之間的距離為50px,發(fā)生了外邊距疊加讨衣。 要解決這個疊加問題即讓每個P之間是100px换棚,我們可以新建一個BFC,怎么建呢反镇?可以給p元素添加一個父元素固蚤,讓它觸發(fā)BFC。如下:

解決margin疊加

由第六條特性愿险,BFC可用于用于清除浮動颇蜡。

高度塌陷

我們發(fā)現(xiàn)由于里面兩個子元素浮動的關系价说,兩個box已經脫離了父元素的包含塊辆亏,父元素高度已經塌陷,我們需要讓父元素包含兩個box子元素鳖目,這樣計算高度時扮叨,兩個浮動子元素就會參與,所以我們要閉合浮動领迈,觸發(fā)父元素的BFC彻磁。

塌陷解決

7. 在什么場景下會出現(xiàn)外邊距合并?如何合并狸捅?如何不讓相鄰元素外邊距合并衷蜓?給個父子外邊距合并的范例。

外邊距合并指的是尘喝,兩個在普通文檔流中的“相鄰”元素外邊距相遇的時候發(fā)生合并的情況磁浇。這個所謂的“相鄰”可以是父子關系相鄰,兄弟關系相鄰朽褪,甚至如果一個元素內部沒有東西置吓,自身的上下邊距相遇時都會發(fā)生外邊距合并。

當兩個外邊距都是正數(shù)時缔赠,取兩者之中的較大者衍锚;當兩個外邊距都是負數(shù)時,取兩者之間絕對值較大者嗤堰;當兩個外邊距一正一負時戴质,取的是兩者的和。

如果不想讓相鄰元素外邊距合并,可以:

  1. 浮動元素置森、inline-block 元素斗埂、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊(注意這里指的是上下相鄰的元素)
  2. 創(chuàng)建了塊級格式化上下文的元素,不和它的子元素發(fā)生 margin 折疊(注意這里指的是創(chuàng)建了BFC的元素和它的子元素不會發(fā)生折疊)BFC的因素是float(除了none)凫海、overflow(除了visible)呛凶、display(table-cell/table-caption/inline-block)、position(除了static/relative)
父子外邊距合并

代碼

  1. 實現(xiàn)如下代碼效果
  2. 實現(xiàn)如下表單效果
  3. 實現(xiàn)如下模態(tài)框效果
  4. 實現(xiàn)如下導航欄效果
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末行贪,一起剝皮案震驚了整個濱河市漾稀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌建瘫,老刑警劉巖崭捍,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異啰脚,居然都是意外死亡殷蛇,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進店門橄浓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來粒梦,“玉大人,你說我怎么就攤上這事荸实≡让牵” “怎么了?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵准给,是天一觀的道長泄朴。 經常有香客問我,道長露氮,這世上最難降的妖魔是什么祖灰? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮畔规,結果婚禮上局扶,老公的妹妹穿的比我還像新娘。我一直安慰自己油讯,他們只是感情好详民,可當我...
    茶點故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著陌兑,像睡著了一般沈跨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上兔综,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天饿凛,我揣著相機與錄音狞玛,去河邊找鬼。 笑死涧窒,一個胖子當著我的面吹牛心肪,可吹牛的內容都是我干的。 我是一名探鬼主播纠吴,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼硬鞍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了戴已?” 一聲冷哼從身側響起固该,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎糖儡,沒想到半個月后伐坏,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡握联,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年桦沉,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片金闽。...
    茶點故事閱讀 40,973評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡纯露,死狀恐怖,靈堂內的尸體忽然破棺而出呐矾,到底是詐尸還是另有隱情苔埋,我是刑警寧澤懦砂,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布蜒犯,位于F島的核電站,受9級特大地震影響荞膘,放射性物質發(fā)生泄漏罚随。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一羽资、第九天 我趴在偏房一處隱蔽的房頂上張望淘菩。 院中可真熱鬧,春花似錦屠升、人聲如沸潮改。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽汇在。三九已至,卻和暖如春脏答,著一層夾襖步出監(jiān)牢的瞬間糕殉,已是汗流浹背亩鬼。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留阿蝶,地道東北人雳锋。 一個月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像羡洁,于是被迫代替她去往敵國和親玷过。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案筑煮? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,762評論 1 92
  • 一冶匹,浮動元素有什么特征?對父容器咆瘟、其他浮動元素嚼隘、普通元素、文字分別有什么影響? 浮動模型是一種可視化格式模型袒餐,浮動...
    DeeJay_Y閱讀 882評論 0 4
  • 1.浮動元素有什么特征?對父容器焰宣、其他浮動元素霉囚、普通元素、文字分別有什么影響? 何謂浮動元素匕积?有什么特征盈罐?所謂浮動...
    草鞋弟閱讀 818評論 0 1
  • relative:生成相對定位的元素,通過top,bottom,left,right的位置相對于其正常位置進行定位...
    zx9426閱讀 947評論 0 2
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表闪唆,主要用...
    寥寥十一閱讀 1,839評論 0 6