在現代前端開發(fā)中，CSS是不可或缺的一部分，它可以幫助我們精確地控制頁面的呈現效果。但是，有時候我們只需要簡單地對頁面進行排版和樣式設置，這時候使用過多復雜的CSS代碼反而會影響開發(fā)效率和代碼質量。本文將介紹20個極簡的CSS代碼段，幫助我們快速實現常見的布局和樣式，提高代碼效率。

1. 設置頁面字體和背景顏色
body{
font-family: Arial, sans-serif;
background-color: #F8F8F8;
}
2. 清除列表點樣式
ul{
list-style: none;
padding-left: 0;
}
3. 設置行內文字顏色
a{
color: #008080;
}
4. 隱藏元素
.hidden{
display: none;
}
5. 設置盒子內部和外部邊距
.box{
margin: 20px;
padding: 10px;
}
6. 設置圖片大小
img{
width: 100%;
height: auto;
}
7. 設置盒子邊框
.box{
border: 1px solid #CCCCCC;
}
8. 設置文字居中
.center{
text-align: center;
}
9. 設置圖片居中
img{
display: block;
margin: 0 auto;
}
10. 隱藏滾動條
body{
overflow: hidden;
}
11. 使元素絕對定位
.absolute{
position: absolute;
}
12. 設置懸浮樣式
a:hover{
text-decoration: underline;
}
13. 設置字體大小
h1{
font-size: 36px;
}
14. 設置文字粗細
.bold{
font-weight: bold;
}
15. 設置字體樣式
.italic{
font-style: italic;
}
16. 設置文字對齊方式
.text-right{
text-align: right;
}
17. 設置單元格邊框
td{
border: 1px solid #CCCCCC;
}
18. 設置背景圖片
body{
background-image: url('image.jpg');
background-size: cover;
}
19. 設置文本框樣式
input[type="text"]{
border: 1px solid #CCCCCC;
padding: 5px;
}
20. 設置容器寬度和高度
.container{
width: 960px;
height: 600px;
}