CSS中的auto

普通流:
水平
1、正常流中塊級元素框的水平部分總和等於父元素的width。
父元素的width=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
2、這七個屬性中,只有三個屬性可以設置爲auto:width,margin-left,margin-right,其餘屬性必須設置爲特定的值,或者爲默認寬度0,width的默認寬度爲auto(儘可能的寬)
3、margin沒設置默認爲0,width沒設置默認爲auto
4、(1)當width沒有設置或設置爲auto:則若margin值爲auto,則重置margin值爲0,讓width儘可能地大
(2)當width設置了一個確定的值:若兩個margin值都爲auto,則讓兩個margin值相等,並讓元素居中
5、在這7個屬性中,只有兩個屬性可以設置爲負值:margin-left和margin-right。
6、在7個元素都設置了的時候,就叫做元素水平屬性過分受限,此時會重置margin-right
7、根據第1和4、5條規則,在所有的屬性的值之和大於父元素的時候,就會重置右外邊距,使之爲負值。
8、所有塊級元素的規則,同樣使用與替換元素,只有一個例外,如果width爲auto,元素的寬度則爲內容的固有寬度。而塊級元素width爲auto時,width會盡可能的寬。
9、如果width、內邊距和外邊距設置爲百分數值,會應用同樣的基本規則。值的聲明是長度還是百分數並不重要。
10、width、內邊距和外邊距的百分數值都表示爲其父元素的寬度百分數邊框沒有百分數值。

垂直(只寫出與水平不同的點)
2(1)在元素中內邊距或者是邊框:height=auto時就是從其最高子元素的外邊邊界到最低子元素的外邊邊界之間的距離,CSS中的auto - jocelyn - 寧靜
 
(2)在元素中沒有內邊距或者邊框:其height=auto時就是從其最高子元素的最高塊級子元素外邊邊界到其最低塊級子元素外邊邊界的距離。CSS中的auto - jocelyn - 寧靜
 
4、如果margin設置爲auto,它會自動計算爲0,又因爲值爲0,並沒有把正常流元素在其包含塊居中
9、如果該塊元素<p>沒有聲明margin的值,雖然沒有設置默認爲0,但是這樣margin屬性的就沒有特殊性,很有可能會應用瀏覽器的樣式表中的規則,在塊元素的上下方添加一行margin值,該行爲該塊元素的line-height值。只要有顯示聲明margin值,如auto(重置爲0),就會覆蓋用戶代理的規則,從而margin爲0。
10垂直上的內邊距和外邊距的百分數值也是表示爲其父元素的寬度而不是高度邊框同樣沒有百分數值
(1)塊元素的父元素的height被聲明爲一個具體的值:height屬性的百分數值就表示爲父元素高度的百分數
(2)父元素的height沒有被聲明,或者聲明爲一個auto:那麼瀏覽器就會忽略該塊元素height屬性的百分數值

絕對定位absolute:
水平
1、元素框從文檔流中完全刪除,並相對其包含塊定位(包含塊設置爲最近的position值不是static的祖先元素)。元素原先在正常文檔流中所佔的空間會關閉,就好像該元素原來不存在一樣。
2、元素定位後生成一個塊級框,而不論原來它在正常流中生成何種類型的框。
3、包含塊的width=left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
(包含塊的定義要看 《浮動和定位》篇,分塊級祖先和行內祖先)
4、這九個屬性中,有五個可以設置爲auto:left+margin-left+width+margin-right+right
(1)width設置爲auto時,該內容區的寬度恰好包含其內容,而沒有多餘空間
(2)左向右讀的語言中,如果left的值爲auto,要把auto替換爲它未被定位前的位置。在從右向左的的語言中,則把right的auto值設置爲靜態位置。此時非靜態位置屬性(從左向右讀語言是right,反之爲left)若爲auto,則要被適當設置,以保證餘下距離。
(3)若left或者right爲auto(不設置就默認爲auto),則將margin的auto值(margin不設置默認爲0)替換爲0。
(4)其他三個值不爲auto兩個margin都爲auto時,父元素的width已經被定義,則有兩個margin相等,使元素居中的功能。
(5)在此之後,如果只剩下一個auto值,則將其修改使等式滿足。
(6)當元素過分受限,都不爲auto時,父元素的width已經被定義,會重置right的值。

垂直(只寫出與水平不同的點)
(2)只有top的值爲auto,纔會替換爲靜態位置,bottom不會。
!!!!!!!!1!!與普通流不同,絕對定位元素的垂直軸和水平軸非常類似,也可以通過auto值設置元素垂直居中。只要顯示知道父元素的height值。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章