css中盒子寬高的auto


   CSS盒模型中,auto屬性只適用於外margin和width,height,border和padding不適用。下面就來說說它的情況。這里所說的都是標准流盒子。

  1.橫向來說

    (1)若設置width,magrin-left,margin-right中某個值為auto,剩下兩個為指定值,則設為auto的屬性會確定所需的長度,從而使元素的寬度等於父元素的width。例如,盒的橫向長度必須等於400px,沒有設置padding和border,margin-right和width設置為100px,左外邊距設置為auto,那么左外邊距的寬度將是200像素。

    (2)若沒有設置為auto的,以上例來說,左右外邊距和width都設置為某個像素(格式化屬性過分受限),此時總會把margin-right強制為auto;

    (3)不止一個auto時。若這三個屬性左右外邊距和width,中有兩個設置為auto;

      若margin-right和margin-left設置為auto,則二者設置為相等的長度,因此元素在父元素中居中(這是將元素居中的一個方法,而text-align只應用於塊級元素的內聯內容,將它設置為center並不能將這個元素居中

      若將某個外邊距和width設置為auto,另一個外邊距設置為指定像素,則設置為auto的外邊距會減為0,width會設置為所需值;

      若三個都設置為auto,這種結果與默認結果相同,即外邊距為0,寬度默認為auto;

  2. auto高度

    若正常流中的塊元素的margin-top或margin-bottom設置為auto,它都會計算為0。

    若塊級正常流元素設置為height:auto;

    (1)對於內聯內容(包括文本),顯示時其高度將恰好足以包含內聯內容的行高。會在元素段落上設置一個邊框,並認為沒有padding,這樣下邊框剛好在文本最后一行的下面,上邊框搞好在文本第一行上面;

    (2)若只有塊級子元素,則其默認高度將從最高塊級子元素的外邊框邊界到最低子元素的外邊框邊界之間距離。因此子元素的margin會“超出”包含子元素的元素;不過,若塊級該元素(即父元素)有內邊距或者邊框,則其auto高度是從最高子元素的上外邊界到最低子元素的下外邊距邊界之間距離;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM