CSS是網(wǎng)頁(yè)設(shè)計(jì)中必不可少的一部分，它可以控制網(wǎng)頁(yè)的樣式與布局。其中最常用的就是排圖代碼，下面我們來(lái)介紹一些常見的排圖代碼。 首先，我們需要先在HTML中引入圖片，然后使用CSS控制圖片的位置和大小。比如下面這段代碼可以讓圖片居中顯示并設(shè)置寬為50%：

img {
display: block;
margin: 0 auto;
width: 50%;
}

使用display: block;可以使圖片變成塊級(jí)元素，從而可以控制它的寬度和高度。使用margin: 0 auto;可以讓圖片水平居中。使用width: 50%;可以設(shè)置寬度為頁(yè)面寬度的50%。 如果我們想讓圖片先顯示文字在下方，可以使用下面這段代碼：

.container {
position: relative;
width: 50%;
}
img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

首先，我們需要給容器設(shè)置position: relative;，這樣圖片的定位位置關(guān)系就是相對(duì)于容器定位。然后，我們需要給圖片設(shè)置position: absolute;，這樣才能控制圖片的定位。使用bottom: 0;和left: 0;可以讓圖片定位到容器底部和左側(cè)，并使用width: 100%;可以讓圖片寬度自適應(yīng)容器寬度。 如果我們想讓圖片覆蓋整個(gè)容器，可以使用下面這段代碼：

.container {
position: relative;
width: 50%;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

與前面相同，我們需要給容器設(shè)置position: relative;，然后將圖片定位到容器頂部和左側(cè)。然后我們?cè)O(shè)置width: 100%;和height: 100%;讓圖片寬高都為100%。使用object-fit: cover;可以保持圖片比例并覆蓋容器。 以上是常見的排圖代碼，使用它們可以很方便地控制圖片的位置和大小。