任務10

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

image.png

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

清除浮動指的是清除浮動給父元素和鄰近元素的副作用
方法:

  • 給父元素手動添加高度
  • 通過clear屬性來清除浮動
  • 給父元素添加overflow(scroll,auto,hidden)樣式(overflow 除了visible 以外的值)
  • 給父元素添加浮動樣式
  • 給父元素添加display (table-cell,table-caption,inline-block, flex, inline-flex)樣式
  • 給父元素添加position值為(absolute,fixed)樣式

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

共有5種,如下圖所示

image.png
image.png
image.png
image.png

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

z-index 屬性設置元素的堆疊順序。元素中擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。(這里要注意,要以相同的祖先元素定位時,z-index越大,其位置越在上方)
并不是z-index越大,其就在最上面,如下圖所示

image.png
image.png

結果是:

image.png

原因:由于div1,div2,div3,div4都是position:absolute;故div1和div4是以body為祖先元素定位,div4的z-index大于div1,而div2和div3是以div1為祖先元素進行定位,所有不論div2和div3的z-index為多大,都在div4的下面

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

position:relative;是使用相對定位來使元素發(fā)生偏移,用right,left,top,bottom來進行定位,相對于元素的常規(guī)流位置。并且相對定位的元素不會脫離常規(guī)流(即是原來的位置空下來,也不會被其他元素占據(jù))
負 margin 使元素發(fā)生偏移時,元素原來占據(jù)的空間會隨著負 margin 數(shù)值的增大而減少,其他元素的位置也會發(fā)生相應的變化

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

浮動元素和絕對定位元素,非塊級盒子的塊級容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不為“visiable”的塊級盒子,都會為他們的內容創(chuàng)建新的塊級格式化上下文

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

BFC特性:

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

BFC可以用來解決以下問題:

  • margin疊加問題
  • 用于布局
  • 清除浮動

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

當元素屬于同一個BFC時,會出現(xiàn)外邊距合并
外邊距合并規(guī)則:

  • 當兩個margin為正數(shù)時,取大的
  • 當兩個margin為負數(shù)時,取絕對值大的那個,然后從0開始負向位移
  • 當有正有負時,先取出負 margin 中絕對值中最大的,然后,和正 margin 值中最大的 margin 相加。
  • 所有毗鄰的margin要一起參與運算,不能分步進行。

不讓相鄰元素外邊距合并方法:
1.只設置一個方向上的margin,例如都只設置margin-top
2.將其中一個元素設置為BFC來取消合并
不讓父元素外邊距合并方法:
1.可以將父元素設置 BFC
2.可以在子元素的 margin 和 父元素的 margin 之間增加 padding 或 border 來隔開它們
父子外邊距合并范例

代碼練習

效果1

效果2

效果3

效果4

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

相關閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,155評論 1 92
  • 浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響?## 特征:浮動模型也是一種可視化格式模...
    饑人谷_zhangfan閱讀 309評論 0 0
  • 1、浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 2、清除浮動指什么? 如何清除浮動...
  • 1.浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 設置浮動,可以讓元素脫離普通流,使...
    upup_dayday閱讀 362評論 0 0
  • 1. 浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 特征:浮動元素不在普通的文檔流中...
    在乎者也閱讀 1,303評論 0 1

友情鏈接更多精彩內容