CSS庫(kù)是一種為Web設(shè)計(jì)和開(kāi)發(fā)提供復(fù)用代碼和樣式的實(shí)用工具。使用CSS庫(kù)有助于提高生產(chǎn)效率和降低開(kāi)發(fā)成本。本文將介紹如何初始化CSS庫(kù)。

/*通用重置樣式*/
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul,                 figure {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
ul[class], ol[class] {
list-style: none;
}
a {
text-decoration: none;
}
img {
display: block;
max-width: 100%;
height: auto;
}

以上是通用重置樣式，保證網(wǎng)站在各種瀏覽器中渲染出一致的效果。

/*常見(jiàn)基礎(chǔ)樣式*/
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
input, textarea, button, select {
font-size: 1.6rem;
font-family: inherit;
line-height: inherit;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
}

以上是常見(jiàn)基礎(chǔ)樣式，包括了網(wǎng)站默認(rèn)字體大小、字體、背景顏色、輸入框等。

/*網(wǎng)站布局樣式*/
.container {
max-width: 120rem;
margin: 0 auto;
padding: 0 2rem;
}
.row {
display: flex;
flex-wrap: wrap;
margin: -1rem;
}
.col {
width: 100%;
padding: 1rem;
}
@media (min-width: 48rem) {
.col {
width: 50%;
}
}
@media (min-width: 62rem) {
.col {
width: 33.33%;
}
}

以上是針對(duì)網(wǎng)站布局的樣式，其實(shí)際上是一個(gè)基于柵格的布局，支持響應(yīng)式布局。

如此初始化，就可以便捷地使用CSS庫(kù)了。