在網頁設計中，CSS組件起著非常重要的作用，可以快速有效地實現網頁布局，提高開發效率。下面介紹幾種經典的CSS組件。

.clearfix::after {
content: "";
display: table;
clear: both;
}

clearfix清除浮動，當一個元素浮動之后，父元素高度失效，造成布局混亂，此時可以通過添加clearfix類來解決問題。

.flexbox {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: center;
justify-content: center;
}

flexbox彈性盒子布局，可以快速實現水平或垂直居中、均勻分布等布局。同時兼容多種瀏覽器。

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 999;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

modal彈窗組件，可以在網頁中實現彈框提示、表單等功能。薦使用position:fixed來控制彈窗位置及遮罩效果。

.breadcrumb {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.breadcrumb li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.breadcrumb li a {
color: #00bfff;
text-decoration: none;
}
.breadcrumb li:not(:last-child)::after {
content: "/";
margin: 0 8px;
color: #999;
}

breadcrumb面包屑導航組件，是網頁中比較常見的導航組件，可以快速跳轉頁面。建議使用flexbox布局，添加溢出省略號效果及斜杠分隔符。

以上是幾種常見的CSS組件，可以快速提高開發效率，希望對大家有所幫助。