引言
資訊時代，網際網路是一個重要的資訊傳播載體。網頁成為人們查找資源，擷取資訊，釋出資訊，學習交流的重要平台。現今世界，也是一個各項技術都飛速發展的時代。網頁的設計制作依傍于網際網路而生，并且風格設計在不斷更新。是以，對網頁的設計要求也不斷提高，尤其是在創新的社會背景下網頁設計的新理念和新方法，不斷推陳出新。CSS對網頁的布局是網頁體系中的重中之重，本文基于此背景，闡述CSS+DIV技術在網頁布局方面的應用。
1 CSS盒子模型
CSS盒子模型是網頁布局的核心，所有的HTML元素都可以看作是盒子，CSS盒子模型本質上是一個盒子封裝周圍的HTML元素。盒子模型主要有四種屬性：邊距（margin）、邊界（border）、邊框距（padding）和内容（content）。
1.1水準垂直居中
水準垂直居中顧名思義就是将行内元素在水準和垂直兩個方向居中對齊。利用flex來居中布局是非常好的一種方式，幾行代碼就能優雅的實作元素水準垂直完美居中。使用flex來居中首先我們要了解什麼是flex布局，flex布局通常被稱為flexible box（彈性布局），是一種一維的布局模型。它給flex的子元素提供強大的空間分布和對齊能力。而采用flex布局的元素叫做容器，在flex布局中的子元素被稱為項目（即父級元素采用flex布局，則父級元素為容器，全部子元素自動成為項目）；在容器中預設有水準的主軸和垂直的交叉軸，項目在容器中預設沿主軸排列。Flex常用屬性有六個：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。
如果想實作水準垂直居中的效果，CSS代碼設定如下：
.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.content {
background-color: #F0000;
width: 100px;
height: 100px;
} CSS代碼設定父元素背景顔色為橙色，寬度和高度為300px；設定子元素背景顔色為紅色，
align-items屬性定義了項目在交叉軸上是如何對其的，既使子元素垂直居中；justify-content屬性使子元素水準居中。需要注意的是一定要給父元素添加display：flex；這是開啟flex布局的鑰匙。
1.2等分布局
等分布局就是将一行分為多列，每一列的寬度是相同的。使用float + padding + background-clip布局的方式。padding 簡寫屬性在一個聲明中設定所有填充屬性，該屬性可以有1到4個值；background-clip屬性指定背景繪制區域。即用padding來實作子元素之間的間距，使用background-clip使子元素padding部分不顯示背景。
如果想實作等分布局的效果，CSS代碼設定如下：
.parentWrap {
border: 2px solid black;
overflow: hidden;
}
.parent {
background-color: lightgrey;
margin-right: -10px;
overflow: hidden;
}
.child {
float: left;
height: 300px;
width: 25%;
padding-right: 10px;
box-sizing: border-box;
background-clip: content-box;
} 子元素中float為設定浮動類型，left為向左浮動；height設定高度；本行分為四列，是以寬度為25%，padding-right是設定一個元素的右填充在此填充了10px，即每個子元素之間的空隙。
1.3聖杯布局
聖杯布局是header和footer各占領螢幕所有寬度，高度固定；中間的container是一個三欄布局；三欄布局兩側寬度是固定不變的中間部分自動填充整個區域；中間的部分是三欄中高度最高的部分。實作聖杯布局效果也可以采用flex布局，就是一個大盒子包含三個子盒子，左右兩個盒子固定寬高，中間盒子設定flex：1（占據大盒子剩餘空間）。
如果想實作聖杯布局的效果，CSS代碼設定如下：
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#header, #footer {
background: rgba(29, 27, 27, 0.726);
text-align: center;
height: 60px;
line-height: 60px;
}
#container {
display: flex;
}
#container .column {
text-align: center;
height: 300px;
line-height: 300px;
}
#center {
flex: 1;
background: rgb(206, 201, 201);
}
#left {
width: 200px;
background: rgba(95, 179, 235, 0.972);
}
#right {
width: 200px;
background: rgb(231, 105, 2);
} Header和footer部分高度設定為60px，文本元素設定為排列居中高度為60px；中間部分center設定屬性為flex:1該部分空間大小可以改變，left和right部分寬度設定為200px。
結語
DIV+CSS布局是網頁開發的重要部分，它将整個網頁分割成多個塊使整體變得整齊有序，“DIV+CSS”盒子模型代碼實作也相對簡單，邏輯清楚，非常适合平時使用。本文隻是簡單列舉了單列布局、雙列布局和三列布局布局設計。如果想要搭建一個好看完整的網頁還需要很多的技術支援，這就需要不斷地學習探索。