前端筆記之CSS（下）浮動&BFC&定位&Hack

時間 2020-04-29

標籤前端筆記 css 浮動 bfc 定位 hack 欄目 CSS 简体版

原文原文鏈接

1、浮動

1.1 各個語言的主要知識點

HTML：標籤語義化(那麼怎麼樣佈局纔是合理的?沒有絕對的對和錯)css

CSS：html

　　樣式：瀏覽器

　　佈局：佈局

　　　　標準流(標準文檔流、普通文檔流)：盒子模型(width/height+padding+border+margin) 塊元素行內元素學習

　　　　浮動流：產生？影響？如何解決？測試

　　　　定位流：靜態定位(不定位) 相對定位絕對定位固定定位flex

JavaScript(JS)：優化

　　ECMAScript：語法網站

　　DOM：搜索引擎

　　BOM：

1.2 浮動產生的背景？

背景：浮動產生的初衷是爲了解決圖文排版。

早期咱們的網站中大量存在圖片和文字沒有那麼多絢麗的東西，好比輪播圖也是藉助flash實現的。

早期的佈局是經過table實現的，如今佈局div+css。

浮動一開始就是爲了解決圖文排版的：

如左側就是給圖片加一個樣式img{float:left}.

1.3 標準流

又稱標準文檔流普通文檔流

說白了就是一個「默認」css佈局狀態。文檔流指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分紅一行行，並在每行中從左至右的順序排放元素。

在標準文檔流中父元素的高度能夠由子元素撐開

標準文檔流：

塊元素：①獨自佔一行(參考目標：父元素)

1.4 浮動的演變過程

①我想讓兩個li排列到一行而且li都有寬度和高度（那麼咱們的處理方法把li設置爲行內塊元素）

②可是由圖得知設置完行內塊元素後會出現間隙(在圖中的紅色區域)

③通過分析得知紅色區域的間隙是由代碼中li標籤換行致使的因此咱們把li放到一行

④可是咱們知道代碼在一行不利於咱們開發和後期的維護

⑤浮動橫空出世

1.5 浮動屬性

left左浮動：那麼該元素會緊貼着父元素的左邊，若是左邊已經有浮動的元素那麼他會依次向後排列

right右浮動：那麼該元素會緊貼着父元素的右邊，若是右邊已經有浮動的元素那麼他會依次向後排列

.one{
        /*height: 100px;*/
        /*width: 100px;*/
        /*浮動屬性*/ float: left; background-color: green;
} .two{ float: right; background-color: blue;
}

1.6 浮動帶來的影響

對自身：不管行內元素仍是塊元素均可以設置寬高，已經破壞了該元素在標準文檔流裏面的屬性

對父元素：會形成父元素的高度塌陷(在標準文檔流裏面父元素高度由子元素撐開浮動完父元素高度就不能被子元素撐開了)

1.7 清除浮動

清除浮動就是：解決父元素高度塌陷的問題。

清除浮動這是專業術語，其實就是須要咱們解決浮動帶來的影響(父元素的高度塌陷)。

1.7.1 給父元素加高度

ul{
    /*清除浮動方案1*/ height: 200px; border: 5px solid #000;
}

1.7.2 clear:both;

由1.7.1得知使用這種方法清除浮動前提是：必須知道子元素的高度

用法：在浮動元素的緊後面添加一個空標籤給該標籤設置css樣式爲clear:both;

<ul>
    <li class="one">111</li>
    <li class="two">222</li>
    <!--行內樣式等價於你在css中寫div{clear:both;}-->
    <div style="clear: both;"></div>
</ul> 測試文本

1.7.3 利用僞元素

利用clear:both;清除浮動帶來的影響，是咱們以前的主流寫法。可是隨着我們科技的進步，公司愈來愈對SEO優化越發重視。搜索引擎爬取是會認爲這是一個廢標籤（搜索引擎會不開心她不開心就會致使你的頁面質量降低）

因此如今主流的清除浮動是利用僞類清除寫一個清除浮動的類而後把這個類加給浮動元素的父元素。

<style type="text/css">
    /*before after*/ .clearfix:after{ content: ""; clear: both ; display: block; } .clearfix{ *zoom: 1;/*兼容IE67*/ }
</style>

<body>
<ul class="clearfix">
    <li class="one">111</li>
    <li class="two">222</li>
</ul> 測試文本-利用僞類 </body>

1.7.4 overflow:hidden;

固然第三種解決方案已經很完美了。我們如今說的這種是利用的另外一種機制(BFC-塊級格式化上下文)實現的。

實現：給浮動元素的父元素設置如下css{overflow:hidden}.

ul{ overflow: hidden;/*BFC機制的觸發條件之一*/

 border: 5px solid #000;
}

2.1 BFC

2.1.1 概念

在講 BFC 以前，咱們先來了解一下常見的定位方案，定位方案是控制元素的佈局，有三種常見方案:

普通流 (normal flow)

在普通流中，元素按照其在 HTML 中的前後位置至上而下佈局，在這個過程當中，行內元素水平排列，直到當行被佔滿而後換行，塊級元素則會被渲染爲完整的一個新行，除非另外指定，不然全部元素默認都是普通流定位，也能夠說，普通流中元素的位置由該元素在 HTML 文檔中的位置決定。

浮動流 (float)

在浮動佈局中，元素首先按照普通流的位置出現，而後根據浮動的方向儘量的向左邊或右邊偏移，其效果與印刷排版中的文本環繞類似。

定位流(position)

在絕對/固定定位佈局中，元素會總體脫離普通流，所以絕對定位元素不會對其兄弟元素形成影響，而元素具體的位置由絕對定位的座標決定。

什麼是BFC呢？Formatting context(格式化上下文) 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。這個css佈局的一種機制。具備 BFC 特性的元素能夠看做是隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素，而且 BFC 具備普通容器所沒有的一些特性。

通俗一點來說，能夠把 BFC 理解爲一個封閉的大箱子，箱子內部的元素不管如何翻江倒海，都不會影響到外部。

2.1.1 知足條件

知足下列CSS聲明之一的元素便會生成BFC：

1、根元素或其它包含它的元素

2、float的值不爲none；

3、overflow的值不爲visible；

4、position的值不爲static；

5、display的值爲inline-block、table-cell、table-caption；

6、flex boxes (元素的display: flex或inline-flex)；

注：也有人認爲display: table能生成BFC，我認爲最主要緣由是table會默認生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC。

條件	值
根元素/根節點	html
float	left、right
overfloow	hidden
display	inline-block、table-cell、table-caption
position	fixed、absoult

2.1.3BFC 特性及應用

同一個 BFC 下外邊距會發生摺疊-後面詳細闡述
BFC 能夠包含浮動的元素-清除浮動　　
3.BFC 能夠阻止元素被浮動元素覆蓋-後續課程深刻

3、定位

定位的基本思想很簡單，它容許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另外一個元素甚至瀏覽器窗口自己的位置。顯然，這個功能很是強大，也很讓人吃驚。

定位屬性的值：

屬性	屬性值	含義
position	static	靜態定位(不定位\|默認值)
position	relative	相對定位
position	absoult	絕對定位
position	fixed	固定定位

不管是哪一種定位都具備5個屬性：

屬性	備註	單位
left	左	px,%
top	上	px,%
right	右	px,%
bottom	下	px,%
z-index	層級

若是有人同時寫了left和right，那麼以left爲準；同時寫了top和bottom那麼以top爲準。

3.1固定定位fixed

固定定位是定位屬性的一種，他的參照物是可視窗口(能夠看的見的窗口)。

圖中藍色框框住的地方就是我們俗稱的可視窗口

3.1.1應用場景

咱們常見的好比：右側固定導航、京東樓梯導航、返回頂部···這些都是利用的固定定位(IE6固定定位不兼容)。

3.1.2原理講解

固定定位會脫離標準流，固定定位的參考點，是瀏覽器，固定定位沒法以某個盒子做爲參考點。

做用：實現盒子固定在瀏覽器可視窗口內

經過設置偏移量進行控制移動的位置，定位偏移量屬性：

就是說不管頁面怎麼滾動他就是根據可視窗口定位的雷打不動。如圖：雖然滾動條滾動了可是div的位置依然不動，就是這麼神奇。網頁中右側固定導航欄、返回頂部，都是利用這個特性實現的。

div { width: 50px; height: 50px; background-color: red;
            /*固定定位-可視窗口*/ position: fixed; left: 50px; top: 50px;
        }

3.2相對定位relative

相對定位的元素，會在原來的位置「留坑」，無論這個盒子被移動到什麼地方，這個坑永遠存在，而且盒子的margin會影響別人，「形影分離」。

相對定位的參考點是自身。

注意事項：

①相對定位不會破壞標準文檔流，佔標準流的位置，而且不能改變盒子顯示模式

②那麼①的意思是說：相對定位會在原有位置留下一個」坑」(佔着茅坑不拉屎)

③相對定位的參考點：以自身爲參考物（起點），就是相對於原來本身所在的位置進行移動

④定位偏移屬性最好是一對，從上下位移屬性選其一，從左右位移屬性選其一。

應用場景：相對定位通常不使用，它常常會配合絕對定位使用。

3.3絕對定位absoult

絕對定位的參考點：有定位屬性(relative,absult,fixed)的祖先元素(包括父元素、父元素的父元素、父元素的父元素的父元素···),若是說找到最外層都沒有發現定位屬性,那麼它參考body(頁面)。

若是bottom定位，就是瀏覽器首屏的左下角或右下角。

3.4層級屬性z-index

3.4.1 基本原理

層級屬性只有定位元素才具有，他是用來提高層級的。

z-index他的取值是數值，數值越大層級越高。默認是0.

.mask { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0;

            /*數值越大層級越高*/
            /*z-index: 99;*/
        } a { z-index: -99;
        }

3.4.2z-index堆疊規則

在堆疊上下文（stacking context）中，子元素的堆疊順序仍是按照上述規則。重點是，子元素的z-index值只在父元素範圍內有效。子堆疊上下文被看作是父堆疊上下文中一個獨立的模塊，相鄰的堆疊上下文徹底不要緊。

總結幾句：

渲染的時候，先肯定小的stacking context中的順序，一個小的stacking context肯定了之後再將其放在父stacking context中堆疊。有種由內而外，由小及大的感受。

如圖紅色盒子z-index:99綠色盒子z-index:9,span1的z-index:-999,span2的z-index9999。可是span2仍是被span1壓着由於父元素已經絕對他們自身的層級了。

3.5 盒子居中

·方法一：

div { width: 300px; height: 200px; background-color: red; position: absolute; left: 50%; top: 50%;
            /* left: -150px; */ margin-left: -150px; margin-top: -100px;
        }

top:50%;指的是元素的上邊線是50%的位置

left:50;指的是元素的左邊線是50%的位置

因此要往回拉一半自身的寬度和高度。

·方法二：

div { width: 312px; height: 275px; background-color: red;

            /* 下面這種盒子居中的方案 很完美能夠不受盒子寬高的限制 可是很差理解 */ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;
            /* 五馬分屍 */
        }

4、Hack

Hack，別被名字嚇到了！ Hack就是針對不一樣的瀏覽器去寫不一樣的HTML、CSS樣式，從而讓各瀏覽器能達到一致的渲染效果。

Hack分爲兩大類： HTML hack 和 CSS hack

HTML HACK：

<!--[if lte IE 9]> <![endif]-->

CSS HACK又分爲兩類：值Hack 和選擇器Hack

值Hack：

 /* IE 6 */ .selector { _color: blue; } .selector { -color: blue; } /* IE 6/7 - any combination of these characters: ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */ .selector { !color: blue; } .selector { $color: blue; } .selector { &color: blue; } .selector { *color: blue; } /* IE 8/9 */ .selector { color: blue\0/; } /* IE 6/7/8/9/10 */ .selector { color: blue\9; }

選擇器Hack：

/* IE 6 and below */ * html .selector {} /* IE 7 and below */ .selector, {} /* Everything but IE 6 */ html > body .selector {} /* must go at the END of all rules */ /* Everything but IE 6/7 */ html > /**/ body .selector {} head ~ /* */ body .selector {}

IE6的問題

選擇器：不支持連寫，好比div.big.green，其餘咱們學習的7種選擇器，IE6支持良好，權重計算良好。

盒模型：若是不寫DTD，那麼IE6的盒模型就是內減的，而不是外擴的。不支持小於一個文字高度的盒子

浮動：後面標準流元素不鑽入 overflow:hidden;不支持，咱們要觸發hasLayout機制雙倍margin 3px bug