當你設定了元素的寬度，實際展現的元素卻能夠超出你的設定：因為元素的邊框和內邊距會撐開元素。
.div
上面的元素所展示出來的效果，寬度會不止500px。這可能不是我們想要的。通常或許我們會去計算寬度來實現想要的效果。但是如果計算的地方太多的話，事件很煩人的事。
此時我們可以通過設定box-sizing：border-box來實現。
.div
此時，該div所展示出來的寬度就是500px，外邊距和內邊距將會在這個寬度內進行繪製。實際上，就是縮小了內容的寬度，此時的內容寬度是設定的值減去邊距。
box-sizing:content-box;就是未設定box-sizing屬性時的預設效果。
*
這樣可以確保所有的元素都會用這種更直觀的方式排版。
CSS學習筆記 布局之定位
定位 定位是一種更加高階的布局方式，可以將元素擺放到任意位置。使用position屬性來設定定位。position 作用static 預設值，靜態元素 不算開啟定位 relative 開啟相對定位 absolute 開啟絕對定位 fixed 開啟固定定位 sticky 開啟粘滯定位 有相容性問題 偏...
CSS布局學習筆記之position
css知識點 之 position布局 其中有不少東西，來自原帖，我會在下面給出鏈結。使用position布局方式，可以分成三種，相對定位 也即position relative 絕對定位 postion absolute fixed 粘性定位 position sticky 等等。通常我們還會見到...
css布局學習筆記
對於大多數元素它們的預設值通常是 block 或 inline 乙個 block 元素通常被叫做塊級元素。乙個 inline 元素通常被叫做行內元素。當瀏覽器視窗比元素的寬度還要窄時，瀏覽器會顯示乙個水平滾動條來容納頁面。在這種情況下使用 max width 替代 width 可以使瀏覽器更好地處理...