div+css 佈局技巧總計

1、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 設置邊框的樣式、顏色、寬度。

2、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屬性來解決。

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