浮動定位BFC邊距合并

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

浮動元素脫離正常的文檔流,被安放到它所在容器的的左端或者右端,并且文檔流中的普通元素察覺不到浮動元素。其他的文本和行內元素可以覺察到。

  • 對父容器:如果父容器中的元素都是浮動元素,父容器沒有設置 height 值的時候,會造成父容器高度塌陷。
  • 其他浮動元素:同一父容器內的浮動元素按照設定的方向并排排列,當父元素的寬度不夠時,后面的元素會向下移動,直到有足夠的空間;如果浮動元素的高度不同,那么有可能擋住移動的路徑。
  • 普通元素:無法辨別普通元素,有可能導致覆蓋其它普通元素。
  • 文本:文本能夠識別浮動元素,會圍繞浮動元素。

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

清除浮動是要清除浮動元素造成的父容器塌陷等問題。
如何清除浮動:

  1. 在要清除的浮動元素下添加一個空div。將空的div的style設成clear:both; 或者用CSS建一個空div,這樣可以保證html的語義性。

.clearfix{
*zoom:1; //ie 6 和 7 用這個清除浮動。

}
.clearfix:after{
content:"";
display:block; // 或者 display: table;
clear:left;
}
```

  1. 用BFC的性質清除浮動。
    BFC其中一個性質是BFC可以包含浮動。我們就利用這個性質來清除浮動。將包含浮動元素的父元素形成新的BFC,就可以達到清楚浮動的效果。
    比如將父元素設為: overflow: hidden 或者 display: inline-block 等形成新的BFC的方法。
    但是利用BFC清除浮動有它的局限性。比如使用float的時候會使父容器長度縮短,overflow屬性會影響滾動條和絕對定位的元素,position會改變元素的定位方式,所以要結合當時的條件合理選擇清除浮動的方法。

有幾種定位方式,分別是如何實現定位的,參考點是什么,使用場景是什么?

常見的定位方式有:

  1. position: static; 或者不設置position值。這是定位的默認值。元素出現在正常的文檔流中。(top, bottom,left,right,z-index幾個屬性設置都不會發(fā)生作用。)
  2. position: relative; 相對于元素本身在文檔流中的正常位置進行定位。用于進行自身的位置的局部調整或者用于子元素需要絕對定位的時候的參考點。
  3. position: absolute; 生成絕對定位的元素,該元素脫離文檔流。相對于static定位以外的第一個祖先元素(offset parent)的內邊框進行定位(top 和 left 的值為0時,絕對定位在內邊框。top 和 left 值不設或者為 auto,絕對定位元素在原本文檔流該在的位置)。如果找不到非默認定位的祖先。就以html的根節(jié)點(<html>)當作參考點進行偏移。http://js.jirengu.com/vapedijaxe/1/edit
  4. position: fixed; 特殊的絕對定位。相對于瀏覽器的窗口進行定位。元素不會隨著頁面滾動而發(fā)生滾動,因為是相對于窗口進行定位,窗口是不會動的。
  5. position: sticky; CSS3的新屬性。當頁面滾動時會隨著頁面發(fā)生滾動。但是當觸到屏幕的頂部,元素會固定下來。當滾動下來,元素又會跟著下來。類似 position: relative;position: fixed;的合體。兼容性很差,一般不用CSS來做這種效果。

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

z-index 屬性指定一個元素的堆疊順序,用于絕對定位的元素中。因為絕對定位的元素脫離了文檔流,所以絕對定位的元素可以覆蓋頁面上的其它元素。這時可以通過給元素設置z-index屬性來控制疊放順序,擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
用 z-index: number; 進行設定。number的值越大,位于越靠上。

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

position:relative;只相對自己原本位置發(fā)生偏移,不影響其它文檔流中其他元素的位置。margin:除了讓元素自身發(fā)生偏移還影響其它文檔流中的元素。
http://js.jirengu.com/zemikeseci/1/edit?html,css,output

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

  • BFC是 Block formatting contexts (塊格式化上下文) 的縮寫。
  • 浮動,絕對定位,不是塊級元素的塊容器(比如 inline-blocks,table-cells 和 table-captions),'overfolw'屬性不是'visible'的塊級元素會形成一個新的BFC。
  • BFC會阻止垂直外邊距(margin-top、margin-bottom)折疊,所以可以用來解決外邊距合并的問題。對于嵌套元素的外邊距合并,只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊。
  • BFC包含浮動。我們利用這個性質來清除浮動。將包含浮動元素的父元素形成新的BFC,就可以達到清楚浮動的效果。比如將父元素設為: overflow: hidden 或者 display: inline-block 等形成新的BFC的方法。

在什么場景下會出現外邊距合并?如何合并?如何不讓相鄰元素外邊距合并?給個父子外邊距合并的范例

當兩個相鄰元素處于同一個BFC中會發(fā)生垂直外邊距合并。

  • 兩個相鄰的外邊距都是正數時,折疊結果是它們兩個之間較大的值。
  • 兩個相鄰的外邊距都是負數時,折疊結果是兩個絕對值的較大值。
  • 兩個外邊距是一正一負時,折 疊結果是兩者的相加的和。

避免外邊距合并的方法有:

  1. 父元素加上 padding 或 border
  2. 將父元素變成一個新的BFC。例如:給父元素設置 overflow: hidden;float: left;

http://js.jirengu.com/gugelizado/1/edit

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • relative:生成相對定位的元素,通過top,bottom,left,right的位置相對于其正常位置進行定位...
    zx9426閱讀 1,077評論 0 2
  • 1. 浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 浮動元素的特征:CSS設計flo...
    饑人谷_邵征鵬閱讀 651評論 0 0
  • 1.浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 特征:浮動元素脫離普通文檔流,普通...
    山門龍龍閱讀 382評論 0 2
  • 1.浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 任何定義為float的元素,都可以...
    QQQQQCY閱讀 309評論 0 0
  • 浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 特征: 脫離正常文檔流,沿其容器的左側...
    _Dot912閱讀 811評論 0 3

友情鏈接更多精彩內容