CSS圖譜是前端開發中不可或缺的一部分，它可以讓我們更加高效地編寫和管理樣式代碼。下面將介紹一些常見的CSS圖譜及其用法。 1. Normalize.css Normalize.css 是一個為現代瀏覽器重置樣式的CSS庫。它可以讓不同瀏覽器在樣式上表現一致，并且在保證不丟失基礎樣式的情況下，修復了一些瀏覽器樣式上的缺陷。 使用Normalize.css時，需要在html文件中引入庫文件，并在樣式文件中引入。 `````` 2. resets.css resets.css 和 Normalize.css 類似，也是一個重置瀏覽器樣式的CSS庫，但與Normalize.css不同的是，它直接將所有HTML元素的樣式設置為0，這樣可以更高效地控制樣式。 使用resets.css時，需要在html文件中引入庫文件，并在樣式文件中引入。 `````` 3. box-sizing box-sizing 是一個CSS屬性，用于設置元素的盒模型。它可以設置元素的padding和border是否計入元素的尺寸，有兩種取值：border-box 和 content-box。 當設置為border-box時，元素的尺寸會包括padding和border，而當設置為content-box時，元素的尺寸不包括padding和border。 ``` * { box-sizing: border-box; } ``` 4. Flexbox Flexbox 是一個CSS布局模式，可以用于更簡單地對容器及其子元素進行布局。它可以在不使用浮動或定位的情況下，讓元素沿著主軸或交叉軸排列，并具有優秀的響應式特性。 ``` .container { display: flex; justify-content: center; align-items: center; } ``` 5. Grid Grid 是一個CSS布局模式，可以用于更復雜的網格布局。它可以創建具有多個行和列的布局，以及控制每個元素的定位和大小。 ``` .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 20px; } ``` 以上介紹了一些常見的CSS圖譜及其用法，可以讓我們更加高效地編寫和管理樣式代碼。同時，在實際應用中，還有很多其他的CSS圖譜可以使用，可以根據項目需要進行選擇和應用。