浮動和定位

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

float CSS屬性指定一個元素應沿其容器的左側或右側放置,文本和內聯(lián)元素將圍繞它。
然后,該元素從網(wǎng)頁的正常流動中獲取,盡管仍然保持一部分流動,與絕對定位相反。

  • 影響
  1. 對于父容器而言,如果沒有設置其高度,而子元素設置float,會造成‘塌陷’的效果??捎肂FC原理或者清除浮動解決.
  2. 對于其他浮動元素而言: 如果寬度足夠會水平排列; 不足會下移靠左/右移動;當?shù)谝粋€浮動元素的高度大于第3個浮動元素的高度并且整體寬度不足以水平放下多個浮動元素,會造成‘卡住’的效果。
  3. 普通元素:
  • 當為塊級元素時會當浮動元素不存在
  • 當為內聯(lián)元素時會‘感知’浮動元素,環(huán)繞浮動元素。

清除浮動是指什么?如何清除浮動?

清除浮動是指結合clear屬性讓父元素在視覺上包圍浮動元素。清除浮動的方法:

  1. 在父元素的子元素最后添加一個空div,并對其設置樣式:clear:both;由于在子元素最后添加了空div,并清除了浮動,因此父容器被撐開,實現(xiàn)了在視覺上包圍浮動元素的效果。
  2. 利用BFC來清除浮動。因為BFC可以包含浮動,因此可以讓父元素生成一個新的BFC從而包圍浮動的子元素。
    可以對父元素設定以下樣式之一生成新BFC。
    float: left / right;
    overflow: hidden / auto / scroll;
    display: table-cell / table-caption / inline-block;
    position: absolute / fixed;

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

position: relative 根據(jù)自身定位
absolute 根據(jù)已定位的父級來絕對定位,都沒有根據(jù)HTML來進行定位.
fixed 根據(jù)瀏覽器窗口來進行定位
static 默認樣式
sticky 可以看成是relative和fixed的集合體.當在頁面可視范圍內以relative,當頁面滾動超出目標區(qū)域時,以fix定位.
一般 absolute 配合 relative使用.當父容器的寬高可變時,使用絕對水平垂直居中。
sticky 是css3的新屬性,兼容性不太好。

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

層疊上下文 .配合定位使用 z-index大的在上,小的在下。
這里說一下我的理解:

  1. BFC和層疊上下文沒關系
    BFC的目的是讓自己塊中的元素(包括float)不會影響其他元素,在二維平面內。(這個說法并不準確,準確的來說是讓該元素內部的元素對外部元素所產生的影響轉變成該元素對外部元素產生影響)。
    而層疊上下文,是指覆蓋邏輯(z-order)

特性:

層疊上下文的層疊水平要比普通元素高;
層疊上下文可以阻斷元素的混合模式(見此文第二部分說明);
層疊上下文可以嵌套,內部層疊上下文及其所有子元素均受制于外部的層疊上下文。
每個層疊上下文和兄弟元素獨立,也就是當進行層疊變化或渲染的時候,只需要考慮后代元素。
每個層疊上下文是自成體系的,當元素發(fā)生層疊的時候,整個元素被認為是在父層疊上下文的層疊順序中。

原則

誰大誰上:當具有明顯的層疊水平標示的時候,如識別的z-indx值,在同一個層疊上下文領域,層疊水平值大的那一個覆蓋小的那一個。
后來居上:當元素的層疊水平一致、層疊順序相同的時候,在DOM流中處于后面的元素會覆蓋前面的元素。

(以上來自張鑫旭大神的博客,這里摘抄一下)
這里要注意,雖然z-index只能對定位元素應用,但是z-index也會使該定位元素對其他元素產生影響(其他元素默認值應該為z-index=0)。該元素的子元素和其他上下文元素中的子元素覆蓋關系取決于這兩個元素之間的關系(原因還是在張鑫旭大神的博客中。地址)

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

根據(jù)元素還在普通文檔角度看。設置positon: relative 還在原來的文檔流,-margin則相反(-margin有可能會被其它元素所覆蓋,不清楚為什么如果那位大神知道請教我)。
示例


image.png

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

塊級格式化上下文(block formart context) css2.1新增的一個概念。它是頁面中的一個渲染區(qū)域,有自己的一套渲染規(guī)則。里面的子元素根據(jù)這個規(guī)則進行定位. (可以理解為一個與外界格局的包含塊,里面不管浮動 定位 什么的 即使在怎么'翻江倒海'都不會其臨邊的元素.該怎么就怎么顯示)body 根元素浮動元素定位元素 position: absolute/fixedpositon: relative/sticky/static不會觸發(fā)BFC

display: inline-block /table-cell/flexoverflow: auto/hidden/srcoll 除了visible一般如果父容器不設置高度,里面的子元素采用某種方式脫離文檔流,會造成高度塌陷。BFC可以解決父容器沒有高度的問題。比如實現(xiàn)一個兩欄布局: [父元素可以實現(xiàn)高度自適。,可以實現(xiàn)一個簡單的二欄布局。

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

普通文檔流,同一個塊級上下文中 的垂直方向上。為什么會產生這種效果,完全是歷史遺留問題,主要是為了解決文字排版的需求。比如相鄰的塊級分別設置margin為50px 和 100px. 會選擇大的margin作為參考值


比如 元素內嵌套多個div,最終參考的是marign最大的那個值.
qq 20170503232222
相鄰的兩個元素一個正maing一個是負margin,最終取計算后的值??梢圆辉谕粋€塊級上下文中。

  • 如何阻止合并
    形成BFC 可以阻止外bian'ju合并,對于垂直相鄰的元素可以設置浮動或設置其中一個元素為display:inline-block;對于父子元素外邊距,可為父元素設置padding或border。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,115評論 1 92
  • 浮動元素的特征及影響 特征: 浮動模型也是一種可視化格式模型,浮動的框可以左右移動(根據(jù)float屬性值而定),直...
    Joey的企鵝閱讀 979評論 0 0
  • 浮動元素特征 對父容器、其他浮動元素、普通元素、文字的影響 浮動會使應用此屬性的元素脫離文檔流。按指定的位置來移...
    ezrealor閱讀 477評論 0 0
  • 浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響?浮動的元素會脫離文檔流,向左或者向右移動...
    饑人谷_wanpp閱讀 775評論 0 49
  • 一個外地人,來北京讀書,之后工作,之后結婚買房,之后生子 ,之后……這里是她的心情筆記,她的觀影記錄,她的生活,她...
    王兮閱讀 195評論 0 0

友情鏈接更多精彩內容