CSS小隨筆（三）浮動與定位

標籤：不同類   將不   浮動   實現   調整   合并   改變   也會   otto   

 先來說一下CSS中的浮動

一、浮動

1、標準流中的塊級盒子，寬度將自動伸展為100%，而浮動的塊級盒子，寬度不會自動伸展，而是由內容撐開

2、當一個盒子浮動，標準流中未浮動的其他盒子，將視浮動盒子不存在而佔據浮動盒子原來的位置。（浮動盒子，會蓋在這個盒子的上方）

但是，未浮動盒子中的文字內容，將會受到浮動盒子寬度的影響。（未浮動盒子中的內容，不會被浮動盒子蓋住）

3、由於第二條的原因。

　　　　可以給收影響的盒子，添加clear屬性，清除掉浮動盒子對自身的影響

　　　　clear可選值：left-清除左浮動影響

 　　　　right-清除右浮動影響

 　　　　 both-同時清除左右浮動影響，常用

　　4、父盒子沒有指定高度。

　　　　如果子盒子沒有浮動，則父盒子的高度可以被盒子撐開

 

　　　　如果，父盒子中的所有子盒子都浮動，則父盒子高度講變為0

　　　　　　[解決所有盒子浮動，父盒子高度塌陷的問題]

　　　　　　　　①給父盒子也添加浮動

　　　　　　　　②給父盒子添加overflow屬性；推薦使用！

 

　　　　　　　　③在父盒子最後，添加一個高度為0的空div。給這個div添加clear:both;屬性，清除掉浮動效果

　　　　　　　　④可以將③中的div用偽對象選取器::after實現

#div4::after{display:block;concent:"";height:0px;clear:botn;}

　　　　水平排放的盒子，水平間距數margin的累加

　　　　垂直排放的盒子，垂直間距是合并的去最大值

 

 

 二、定位

　　1、相對定位relative

　　　　①使用position: relative;設定元素為相對定位元素

　　　　②使用top、right、bottom、left調整元素的位置，當left跟right同時存在時left生效top、bottom同時存在時top生效

 

　　　　③定位機制：

　　　　　　a、相對定位是相對於自己原來的位置定位。當top等屬性不指定是，元素位置不會發生不改變

　　　　　　b、相對定位，不會釋放掉元素在原有文檔流中的位置。不會影響其他文檔流元素的位置

　　　　④關於元素Z軸重疊

　　　　　　a、定位元素，預設的Z軸高於普通流文件項目

 

　　　　　　b、同為定位元素，後來在居上

 

　　　　　　c、可以使用z-index手動調節定位元素的上下層z軸順序（不加px123什麼的表示的是圖片的順序）

　　　　　　d、z-index預設為0，而且只能作用於定位元素

 

　　2、[絕對位置]

　　　　①使用position: absolute;設定元素為絕對位置

　　　　②定位機制：

　　　　　　a、相對於死一個非static定位的祖先元素進行定位（即相對於使用了relative、absolute、fixed定位的祖先元素進行定位）

　　　　　　b、如果所有的祖先元素都未定位，則相對於瀏覽器左上方進行定位

　　　　　　c、使用absolute的元素，會從文檔流中完全刪除，原有空間會被釋放

 

　　3、[固定定位 fixed]

　　　　①使用position: fixed;設定固定定位；

　　　　②固定定位：是一種特殊的絕對位置！！只是祖先元素無法使用定位鎖住

　　　　③定位機制：永遠相對於瀏覽器的左上方進行定位，而且不隨捲軸的滾動而滾動

 

　　4、[z-index 屬性]

　　　　① 作用：根據z-index屬性設定的數值，決定元素在z軸方向上的層疊次序

　　　　② 使用要求：

　　　　　　a、z-index只能給定位元素調整層疊次序：

　　　　　　relative、absolute、fixed

　　　　　　b、元素的z-index屬性要考慮父容器z-index的約束

　　　　　　　　>>>如果父容器設定了z-index屬性，則子容器的所有元素，講不能脫離父容器層次的約束。（即，父容器設定了z-index，則子容器只能以父容器數值為準。再給子容器設置了z-index，只能調整子容器在服容器層次之內的層疊次序）

　　　　　　　　>>>如果父容器沒有設定z-index，或者設定為z-index：auto;則子容器調整z-index將不受父容器層次約束

　　　　③ z-index:auto;  &  z-index:o;  之間的異同

　　　　　　a、 z-index:auto;是預設值，與 z-index:o;處於同一平面

　　　　　　b、 z-index:o;會約束子項目必須與父容器在同意平面

　　　　　　z-index:auto;不會約束子項目的層次

 

三、浮動與定位的一些小區別

　　　float: left|right; 可以自動排文自動折行, 但需要clear來配合清除浮動;position: absolute|relative; 要配合top,left等定位。

　　　　position: absolute會導致元素脫離文檔流，被定位的元素等於在文檔中不佔據任何位置，在另一個層呈現，可以設定z-index。PS的圖層效果就是position: absolute。

　　　　float也會導致元素脫離文檔流，但還在文檔或容器中佔據位置，把文檔流和其它float元素向左或向右擠，並可能導致換行。圖片的文字環繞布局效果就是float。CSS允許任何元素浮動float，不論是映像，段落還是列表。無論先前元素是什麼狀態，浮動後都成為區塊層級元素。浮動元素的寬度預設為auto。

　　浮動有一系列控制它的規則。

　　　　1.浮動元素的外邊緣不會超過其父元素的內邊緣。

　　　　2.浮動元素不會互相重疊。

　　　　3.浮動元素不會上下浮動。

　　　　4.如果一個浮動元素在另一個浮動元素之後顯示，而且會超出容納塊，則它下降到低於先前任何浮動元素的位置。說簡單點就是沒有空間的話，就另起一行。

　　CSS 有三種基本的定位機制：普通流、浮動和絕對位置。

　　　　除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

　　　　塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

　　　　行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。

 

　　CSS position 屬性

　　　　通過使用 position 屬性，我們可以選擇 3 種不同類型的定位，這會影響元素框產生的方式。

　　position 屬性值的含義：

　　　　relative：元素框位移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。

　　　　absolute：元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。

　　　　fixed：元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。

　　　　　　提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。

 

 

　　position，我們通常用到的是絕對(absolute)和相對(relative)定位

　　通常，做快顯功能表的時候，會用到定位，父元素相對定位position:relative，其中的子項目絕對位置position:absolute，通過top，right，bottom，left的值來控制子項目的位置，要注意的是子項目的位置將相對於父元素，而不是整個頁面。

　　浮動與定位的區別

　　　　通過定位雖然也可以進行布局，但是它的特點決定了它不適合做頁面的布局，因為被定義的元素在普通文檔中佔有的任何空間都將被關閉，可以說，它是漂浮在整個頁面上面的，所以，它可以和頁面上其他的內容重疊顯示。

　　　　這個特點可以方便的讓我們做出其他特殊的效果，但是相對與浮動就布局來說，我們更多的還是用浮動。

CSS小隨筆（三）浮動與定位