国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

重新開始學前端之浮動

piapia / 1898人閱讀

摘要：寒假來了打算重新學習總結前端的知識要點以及前端領域出現的新東西，因此有了這個系列。在正常布局下中位于該浮動元素之下的內容此時會圍繞著浮動元素。在父元素上設置屬性，如果此屬性設置為或者則可以達到清除浮動的效果。但要注意并不是專門用于清除浮動。

寒假來了, 打算重新學習總結前端的知識要點以及前端領域出現的新東西，因此有了這個系列。更多內容可以去我的github: https://github.com/SGAMERyu
1. 浮動
1.1 什么是浮動

Float是一個CSS定位屬性, 要了解他的目的和起源, 我們可以看看印刷設計, 在打印布局中, 可以將圖像設置到頁面中, 使得文本根據需要環繞他們。

;

而在頁面中浮動是這樣工作的: 浮動元素會脫離正常的文檔布局流,并吸附在其父容器的左邊/右邊(float: left/right)。在正常布局下中位于該浮動元素之下的內容,此時會圍繞著浮動元素。填滿左側或右側的空間。

浮動元素仍然是網頁流的一部分,這與使用絕對定位的頁面不同, 絕對定位的頁面元素將從網頁的布局流中移除。

1.2 浮動使用場景

除了圖像環繞文字之外,浮動可用于創建整個網頁布局

在較小的布局中,浮動對布局也很有幫助, 如果我們使用float應用到我們的圖像上,那么當圖像改變大小時, 框中的文本將回流適應

同樣的布局也可以通過容器上的相對定位和絕對定位來完成,這樣做的話, 文本將不會受到化身的影響,并且不能在大小改變時重新排版

1.3 清除浮動

Float的相對屬性是Clear, 一個擁有clear屬性的元素, 并不向像浮動元素的方向移動,而是會在浮動元素的下方

在上面的例子中, slidebar像右浮動,比Main Content內容區域短,然后footer被移動到浮動所需的可用空間。要解決這個問題,我們可以給footer元素設置清除浮動時

#footer {
  clear: both;
}

clear也有四個有效值, both是最常用的,清楚來自任意方向的浮動, left和right可以用來分別從一個方向清除浮動。

1.4 浮動問題

如果父元素只包含浮動的元素,那么他的高度就會塌陷。如果父元素不包含任何視覺明顯的背景,并不會有什么問題。但是更難的是這種情況


 float before
 




float after

這樣輸寫代碼會造成這樣的情況

這樣使用浮動會在文本流中出現不自然的間隔中斷。而且沒有實際的方法來修復他

1.5 清除浮動的技巧

空div法: 在父元素中添加一個div,也可以是
元素獲取其他元素。

overflow: 在父元素上設置overflow屬性，如果此屬性設置為auto或者hidden則可以達到清除浮動的效果。但要注意overflow并不是專門用于清除浮動。

偽元素法: 使用偽元素來清除浮動，也是目前常用的方法

.clearfix{
  zoom: 1;
  display: block;
}
.clearfix:after{
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
閱讀原文: https://css-tricks.com/all-ab...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112975.html

相關文章

  • 重新開始學前端之浮動

    摘要：寒假來了打算重新學習總結前端的知識要點以及前端領域出現的新東西，因此有了這個系列。在正常布局下中位于該浮動元素之下的內容此時會圍繞著浮動元素。在父元素上設置屬性，如果此屬性設置為或者則可以達到清除浮動的效果。但要注意并不是專門用于清除浮動。 寒假來了, 打算重新學習總結前端的知識要點以及前端領域出現的新東西，因此有了這個系列。更多內容可以去我的github: https://githu...

    ZoomQuiet 評論0 收藏0

  • 26自學轉行前端（寫給和1年前一樣迷茫的我的你）

    摘要：轉行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發的前后端。 轉行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發的前后端。1、前端崗位需...

    番茄西紅柿 評論0 收藏2637

  • 26自學轉行前端（寫給和1年前一樣迷茫的我的你）

    摘要：轉行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發的前后端。 轉行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發的前后端。1、前端崗位需...

    番茄西紅柿 評論0 收藏2577

  • 26自學轉行前端（寫給和1年前一樣迷茫的我的你）

    摘要：轉行前端有哪些疑慮在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面這里前后端指的是開發的前后端。 轉行前端有哪些疑慮？ 在人生的抉擇處，尋求一些別人的經驗和總結，無可厚非，但是決定了就一定要堅定的走下去，謹慎是為了更好的堅持，而不是放棄的理由。寫在前面：這里前后端指的是web開發的前后端。1、前端崗位需...

    番茄西紅柿 評論0 收藏0

發表評論

0條評論

piapia

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<