CSS 頁面布局是指通過一組規則及屬性設置，實現頁面元素的位置、大小、間距等布局效果。下面本文將介紹常見的幾種CSS頁面布局方法。 一、盒模型布局 盒模型布局是指將頁面元素看作一個個方框，通過設置元素的width、height、padding、border、margin等屬性來控制元素的布局效果。代碼示例如下：

p{
width:200px;
height:100px;
padding:20px;
border:1px solid #000;
margin:10px;
}

以上代碼表示，在樣式為p的元素中，設置寬度為200像素、高度為100像素、內邊距為20像素、邊框寬度為1像素、邊距為10像素。 二、流式布局 流式布局是指頁面元素的大小隨著瀏覽器窗口的大小變化而自動適應的布局模式。代碼示例如下：

body{
width:100%;
}
img{
max-width:100%;
height:auto;
}

以上代碼表示，設置body元素的寬度為100%，并通過max-width屬性來限制img元素的最大寬度為100%。 三、彈性布局 彈性布局是指頁面元素的大小、位置能夠自動適應父容器的大小變化而自動調整的布局模式。代碼示例如下：

.container{
display:flex;
justify-content:center;
align-items:center;
}
.item{
flex:1;
width:100px;
height:50px;
}

以上代碼表示，在.container元素中使用flex布局，通過justify-content和align-items屬性來設置子元素的對齊方式，同時在.item元素中通過flex屬性來設置子元素的比例。 以上是三種常見的CSS頁面布局方法，它們各有特點，可用于不同的應用場景。在實際開發過程中，可以根據需要選擇合適的布局方法，來實現更優秀的頁面效果。