div+css 布局技巧總計

一、css 樣式

1.float

首先需要了解塊級元素（block element）。每個塊級元素都默認占用一行，在同一行只能添加一個塊元素（float 除外）。塊級元素一般可以嵌套塊級元素或者行內元素，如使用 div 布局。

float 一般用於 div 布局的情形下，浮動的 div 可以向左或者向右移動，直到它的外邊緣碰到其父級元素的框或者另外一個浮動的 div 邊框為止。個人理解為：float 將需要換行的塊級元素懸浮，使得其可以在同一行中顯示。

在 css 中可以通過float: left/right;進行設置。

2.clear

用於清除 float 效果。

3.border

• border-radius屬性可以設置邊框的圓角，單位為像素。在設置方形 div 圓角樣式時，如果將圓角像素設置為 div 邊長的像素時，顯示圖形即為圓形。
• border: solid #FFFFFF 1px;為設置邊框的樣式、顏色、寬度。
• border-style ,border-color ,border-width 設置邊框的樣式、顏色、寬度。

二、div+css 布局技巧

1.讓已知大小的 div 在頁面中水平垂直居中

.test{
    position:absolute;
    top:50%;left:50%;
    width:200px;
    height:200px;
    margin:-100px 0 0 -100px;
}

2.解決“高度自適應時使用浮動，div 的高度不能跟隨變大的問題”

當父級元素高度為auto時：

.father-block{
    width: 100%;
    height: auto;
}

如果在 divfather-block中有兩個浮動的 div：

.child-once{
    width: 30px;
    height:20px;
    float: left;
    background-color: black;
}
.child-twice{
    width: 30px;
    height:20px;
    float: right;
    background-color: red;
}

html 如下：

<div class="father-block">
    <div class="child-once"></div>
    <div class="child-twice"></div>
</div>

這時，頁面顯示效果為：

原因：在 div 設置 float 之后，相當於將 div 元素懸浮於父級元素之上，而不再是處於父級元素之中，當父級元素的height設置為auto時，因為在父級元素中已經沒有了 div，故而height為 0。

解決辦法：使用clear屬性清除浮動。css 代碼如下：

.clear{
    clear:both;
}

界面 html 代碼如下：

<div class="father-block">
    <div class="child-once"></div>
    <div class="child-twice"></div>
    <div class="clear"></div>
</div>

最終結果展示如下：

3.當分辨率發生變化時界面樣式錯亂

可以通過設置每個 div 的min-width屬性來解決。

缺點：界面會超出電腦屏幕，需要拉動滑動框進行瀏覽。