CSS Runoob 是一家專注于前端技術(shù)學(xué)習(xí)的網(wǎng)站。在這個(gè)網(wǎng)站上，可以學(xué)習(xí)到各種css相關(guān)的知識。以下是在CSS Runoob上學(xué)習(xí)的一些經(jīng)驗(yàn)與總結(jié)。

//樣式重置
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

重置樣式是每個(gè)前端工程師必須掌握的技能之一，它可以幫助我們消除樣式的不確定性。以上代碼是一種經(jīng)典的樣式重置方法。它將所有元素的margin和padding設(shè)置為0，同時(shí)使用box-sizing：border-box將元素的寬度和高度定義為元素的邊框盒子（包括邊框和填充）的大小，而不是內(nèi)容盒子。

//字體圖標(biāo)
@font-face {
font-family: 'myfont';
src: url('myfont.ttf') format('truetype');
}
.icon{
font-family: 'myfont';
}

使用字體圖標(biāo)是現(xiàn)代Web開發(fā)中非常流行的技術(shù)之一。您可以使用@font-face完全控制自己的字體文件。以上代碼定義一個(gè)自定義字體，并在帶有類“icon”的元素中使用它。

//響應(yīng)式網(wǎng)站設(shè)計(jì)
@media screen and (max-width: 768px) {
.container{
width: 100%;
padding: 0 10px;
}
}

響應(yīng)式網(wǎng)站設(shè)計(jì)是現(xiàn)代Web開發(fā)中不可或缺的技能之一，它可以幫助您的站點(diǎn)針對不同的設(shè)備和瀏覽器大小自動(dòng)調(diào)整。在以上代碼中，我們使用CSS媒體查詢來判斷屏幕的寬度是否小于768px。如果是，我們會(huì)將容器100％寬度，并設(shè)置一些填充來優(yōu)化用戶體驗(yàn)。