CSS中布局和定位是頁(yè)面設(shè)計(jì)中非常重要的一部分，它允許我們使用樣式控制頁(yè)面元素的位置和大小，以創(chuàng)建美觀的頁(yè)面布局。接下來(lái)，我們將討論CSS中幾種常見(jiàn)的布局和定位方式。

/* 一、常見(jiàn)的布局方式 */
/* 1. 流動(dòng)布局 */
/* 也稱為文檔流布局，是默認(rèn)的網(wǎng)頁(yè)布局方式，元素按照html文檔流的順序自上而下排列 */
/* 常見(jiàn)的元素: div, span, p, h1, h2, h3, etc. */
div {
width: 100%;
}
/* 2. 浮動(dòng)布局 */
/* 元素可以浮動(dòng)到其他元素的左側(cè)或右側(cè)，可以實(shí)現(xiàn)多列布局 */
/* 常見(jiàn)的元素: img, div, nav, aside, etc. */
img {
float: left;
}
nav {
float: right;
}
/* 3. 彈性盒子布局 */
/* 可以實(shí)現(xiàn)自適應(yīng)布局，元素間的空間可根據(jù)不同的設(shè)備和尺寸自動(dòng)分配 */
/* 常見(jiàn)的元素: div, section, article, aside, header, footer, etc. */
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 二、常見(jiàn)的定位方式 */
/* 1. 相對(duì)定位 */
/* 相對(duì)于元素在文檔流中的原始位置進(jìn)行定位，不會(huì)影響其他元素的布局 */
/* 常見(jiàn)的元素: div, img, p, a, etc. */
div {
position: relative;
left: 10px;
top: 10px;
}
/* 2. 絕對(duì)定位 */
/* 相對(duì)于最近的具有定位（非static）屬性的父元素進(jìn)行定位，如果沒(méi)有則相對(duì)于文檔進(jìn)行定位 */
/* 會(huì)脫離文檔流并覆蓋其他元素，通常與z-index一起使用 */
/* 常見(jiàn)的元素: div, img, p, a, etc. */
div {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 10;
}
/* 3. 固定定位 */
/* 固定在瀏覽器窗口的某個(gè)位置，不會(huì)隨滾動(dòng)條的移動(dòng)而發(fā)生變化 */
/* 常見(jiàn)的元素: nav, menu, toolbar, etc. */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
}

通過(guò)使用不同的布局和定位方式，我們可以創(chuàng)建出各種不同樣式的頁(yè)面布局，讓頁(yè)面更加美觀和有吸引力。通過(guò)靈活運(yùn)用這些方式，我們可以實(shí)現(xiàn)自己所想要達(dá)到的任何布局效果。