任務10-浮動與定位

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

浮動的定義:使元素脫離文檔流,按照指定方向發生移動,遇到父級邊界或者相鄰的浮動元素停了下來。浮動樣式可以應用在塊元素及行內元素上,
1、應用浮動后,元素在一排顯示,且相鄰之間沒有空隙。
2、應用在行內元素上時可以讓其像display:inline-block一樣支持寬高。
3、默認內容撐開寬度
4、脫離文檔流,父元素無法感知浮動元素的容量,如果父元素未設置高度值,父元素高度將無法只由浮動元素撐開。
5、浮動會提升層級半層,普通元素會被遮檔,如文檔流中文字圖片內容與浮動元素所占用區域重合,文字內容會被擠開。

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

因為浮動元素脫離文檔流,父元素無法感知浮動元素的容量,如果父元素未設置高度值,父元素高度將無法只由浮動元素撐開。
清除浮動的方法有:
1、空標簽清浮動:在父元素的子元素的最后添加一個沒有高度的空的塊標簽,并且設置屬性 clear:both;
2、<br>標簽清浮動:在父元素的子元素的最后添加一個 <br>標簽,并且設置屬性 clear:both;
3、after偽類 清浮動方法。

父元素:after{content:'';display:block;clear:both;}
父元素{zoom:1;}

after偽類: 元素內部末尾添加內容;
:after{content"添加的內容";} IE6,7下不兼容
zoom :1 用來觸發 IE下 haslayout,使元素根據自身內容計算寬高。

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

static 默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。

**relative **生成相對定位的元素,相對于其正常位置進行定位。還在文檔流中,原來所占用的位不會被其它元素所占有。
如,"left:20" 會向元素的 LEFT 位置添加 20 像素。

absolute 生成絕對定位的元素,相對于 static 定位以外的第一個祖先元素進行定位。如果沒有這樣的祖先元素,則參照初始塊即瀏覽器視口。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

**fixed **生成絕對定位的元素,相對于瀏覽器窗口進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

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

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
Z-index 僅能在定位元素上奏效,元素可擁有負的 z-index 屬性值。
用例:z-index:2;數值越高,越優先顯示在上面。

5、position:relative和負margin都可以使元素位置發生偏移?二者有什么區別

position:relative 相對自身原來所占的位置,margin則相父元素設置外邊距。

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

BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。
如何形成BFC :
浮動(除none),絕對定位, display:inline-block/table-cells/table-captions, 和overflow的值不為visible, 時可以創建一個新的格式化上下文。BFC可以清除浮動(給浮動元素的父級加絕對定位或浮動樣式都可以達到清除浮動的作用),和阻止margin合并。

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

外邊距合并指的是,當兩個垂直外邊距相遇時,即當一個元素出現在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發生合并。它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。父子外邊距合并的條件是父元素沒有邊框和padding隔開。
形成BFC 可以阻止外邊柜合并,如上一題的浮動,絕對定位,inline-block,overflow不為none等都可以阻止。

Paste_Image.png

代碼

1、實現如下alert效果,效果范例

http://js.jirengu.com/qefuquzumu/2/

2、實現如下表單效果, 效果范例

http://js.jirengu.com/limaziwili/5/

3、實現如下模態框效果, 效果范例

http://js.jirengu.com/rixufadute/2/

4、實現如下導航欄效果,效果范例

http://js.jirengu.com/dabokijexu/3/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答## 1 . 浮動的特征,影響##### 浮動模型也是一種可視化格式模型,浮動的框可以左右移動(根據float...
    mhy_web閱讀 387評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 主要內容: 浮動的介紹、清除浮動、各種定位、BFC以及外邊距合并的介紹。 浮動 什么是浮動元素 浮動元素是floa...
    苦瓜_6閱讀 591評論 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,696評論 1 45
  • 自我總結: 浮動是實現布局的一種常見方式 浮動脫離普通文檔流,即頁面渲染時,盒模型按標準會將父元素所設置的屬性將頁...
    饑人谷_遠方閱讀 430評論 0 0