今天分享一天一個CSS的技巧。這些小技巧可以幫助我們更好地編寫CSS代碼，同時提高前端開發效率。 第一天的技巧是關于盒模型的。在CSS中，我們使用盒模型來為HTML元素分配空間和邊距。但是，默認的盒模型給我們帶來的一些不便，所以我們可以使用box-sizing屬性來改變它的表現方式。 通常情況下，盒模型會將width和height屬性計算到元素的content中，而border和padding會向外擴張。如果我們使用box-sizing: border-box，那么border和padding會計算到元素的width和height中，這樣就可以更好地控制盒模型了。 示例代碼如下： pre{ background-color: #f8f8f8; font-size: 16px; padding: 10px; } p{ color: #333; } p{ width: 300px; height: 100px; border: 1px solid #ccc; padding: 20px; box-sizing: border-box; } 在上面的代碼中，我們為p元素設置了寬度和高度，同時添加了1像素的邊框和20像素的內邊距。通過設置box-sizing: border-box，我們可以讓border和padding計算到寬度和高度中，這樣p元素總寬度就是342像素（寬度為300像素 + 左右邊框各1像素 + 左右內邊距各20像素）。 以上就是今天的CSS小技巧，希望能夠對大家有所幫助，明天再見！