CSS3中,我們可以使用div寬度為100%實現全屏布局,這對于響應式設計非常有用。
div{ width: 100%; }
上述代碼可以讓div元素寬度充滿整個屏幕。
但是需要注意的是,如果還有邊框或者內邊距的話,會導致元素寬度超過屏幕寬度,從而出現滾動條。
為了解決這個問題,我們可以使用box-sizing屬性:
div{ width: 100%; box-sizing: border-box; }
box-sizing屬性的取值有兩個:content-box和border-box。其中,content-box是默認的取值,它會讓元素的寬度包括內容和內邊距,但不包括邊框和外邊距;而border-box取值則會讓元素的寬度包括內容、內邊距和邊框,但不包括外邊距。
使用border-box取值后,元素的寬度就會自動減去邊框和內邊距的寬度,從而始終保持100%寬度。
總之,使用div寬度為100%可以實現響應式布局,同時使用box-sizing屬性可以避免出現滾動條。