暑假第四周·1

標籤：style   width   問題   re   c   演算法   

　　昨天寫了一張手機端頁面，手機端的頁面要注意的最重要的一點就是頁面要隨著手機介面大小的改變而改變，手機的螢幕很小，即使是很小的左右留白也給人一種浪費和不協調的感覺。

　　因此，大量的標籤需要"width:100%"，但是元素width的演算法預設為“width”=width+padding+margin。它所產生的問題是設定width:100%，加上padding、margin使手機端的頁面需要橫向滑動才能看到，我有幸體驗過，說實話感覺非常不好。

　　這裡我介紹css3中的一個元素

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　box-sizing: content-box|border-box|inherit;

值	描述
content-box	這是由 CSS2.1 規定的寬度高度行為。 寬度和高度分別應用到元素的內容框。 在寬度和高度之外繪製元素的內邊距和邊框。
border-box	為元素設定的寬度和高度決定了元素的邊框盒。 就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。 通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit	規定應從父元素繼承 box-sizing 屬性的值。

　　box-sizing:border-box;屬性將width=“width”+padding+margin。所以之後設定了width：100%之後，我們就可以盡情的設定padding、margin啦~