CSS塊元素和行內元素是網頁排版中經常使用的兩種基本元素。塊元素會占據一整行，水平方向上會自動填充父容器的寬度，而行內元素則不會獨占一整行，而是在行內水平排列。

/* 塊元素樣式 */
div {
display: block; /* 設置為塊元素 */
width: 100%; /* 填充父容器寬度 */
background-color: #f3f3f3;
text-align: center; /* 文字居中 */
}
/* 行內元素樣式 */
span {
display: inline; /* 設置為行內元素 */
font-weight: bold;
color: red;
}

常見的塊元素包括<div>、<p>、<ul>和<table>等，它們的共同特點是在水平方向上占據一整行。

而常見的行內元素則包括<span>、<a>、<strong>、<em>等，它們的共同特點是在水平方向上只占據必要的寬度。

當需要設置元素的寬度、高度、內外邊距等屬性時，應當注意當前元素的類型是塊元素還是行內元素。例如，只有塊元素才能設置寬高屬性，而行內元素則只能通過設置line-height來間接控制它的高度。

總之，了解塊元素和行內元素的特點，可以更好地掌握網頁排版和樣式布局，提高頁面的視覺效果和用戶體驗。