基本的布局問題

1、div絕對居中

就是固定大小的div在浏覽器中垂直、水準都居中，适合用到浮動彈出框、頁面居中的登陸框等你想得到的地方。以前我也曾使用window.onload和window.onresize來控制高度自适應，寬度好說，相容IE和其他主流浏覽器的，直接文本居中，内部“margin:0

auto;”。

下面是現在的純css解決方法。

以寬高為400px*300px的div居中為例，body内隻有div，是以簡寫css如下：

div { width:400px; height:300px; position:absolute; left:50%; top:50%;

margin-left:-200px; margin-top:-150px; background:#f90;}

完整html源碼如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html

xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta

http-equiv=”Content-Type” content=”text/html; charset=utf-8″

<style>

div { width:400px;

height:300px; position:absolute; left:50%; top:50%; margin-left:-200px;

margin-top:-150px;

background:#f90;}

</style>

</head>

<body>

</body>

</html>

這樣就完美實作了絕對居中，另外，如果設計中最外邊框添加了border，div設定了padding等，一定要注意margin值要排除border寬或者padding值。

2、寬高自适應

很多情況下，我們希望頁面的寬高可以自适應，寬度自适應很簡單，當然，這裡所說的自适應不是自适應内容，而是自适應浏覽器，在同一行級隻有一個層的情況下，寬度自适應直接使用width:100%;就可以了，但是高度自适應就有些不遂人意了，很多時候設定height:100%;完全不起效，其實，這時完全是因為div所在位置的上級元素沒有指定高度。

同樣以一個div為例，css如下：

html,body { height:100%; width:100%; margin:0; padding:0;}

div {

height:100%; width:100%; background:#f90;}

<!DOCTYPE html

PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

html,body {

height:100%; width:100%; margin:0; padding:0;}

div { height:100%; width:100%;

為什麼設定body的height為100%的同時還要設定html呢？其實是為了解決firefox的相容性，firefox預設body占用的不是100%；，這裡有一個設計思想就是，如果某個層要用到100%或者其他值的百分比，上一級必須指定高度，當然，這同樣應用到div下的div。

3、多欄寬度自适應

前面第二部分已經将過完全的自适應寬高，但其中的寬度自适應隻是在一個div獨占一行的情況下，如果出現多個div，如常見的主題部分左右、左中右布局的網站頁面，兩邊固定寬，中間自适應，改怎麼寫呢？其實隻要在中間部分的div下再套一層div即可，示例css如下：

html,body { height:100px; width:100%; margin:0; padding:0;}

.left {

height:100px; width:100px; background:#CC3; float:left;}

.middle { margin:0

50px 0 100px;}

.middle .content { height:100px; width:100%; background:#F60;

float:left;}

.right { height:100px; width:50px; background:#09F;

height:100px; width:100%; margin:0; padding:0;}

.left { height:100px;

width:100px; background:#CC3; float:left;}

.middle { margin:0 50px 0

100px;}

<div

class=”left”></div>

class=”content”></div>

</div>

class=”right”></div>

4、高度占滿全屏

解決方案：在CSS樣式中定義

body{height:100%;}

此定義是為了讓本身body就具有height為100%

即：要定義一個DIV的高100%縱向滿屏，那麼請先将其上級的DIV的高定義為100%，上級有多少個DIV，都要定義它們的高為100%。

這樣才能達到包含在裡面的DIV的高為浏覽器高100%的縱向滿屏效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>CSS 100% Height</title>

html {

min-height:

100%;

_height:100%;

}

body {

margin:

padding: 0;

#content {

background: #EEE;

margin: auto;

width: 960px;

5、清除浮動

為什麼浮動這麼難？

因為浮動會使目前标簽産生向上浮的效果，同時會影響到前後标簽、父級标簽的位置及 width height

屬性。

而且同樣的代碼，在各種浏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。

解決浮動引起的問題有多種方法，但有些方法在浏覽器相容性方面還有問題。

我根據自己的經驗總結8種清除浮動的方法（測試已認證 ie

chrome firefox opera，後面三種方法隻做了解就可以了）：

1，父級div定義 height

<style

type="text/css">

.div1{background:#000080;border:1px solid

red;/*解決代碼*/height:200px;}

.div2{background:#800080;border:1px solid

red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background:#DDD}

.right{float:right;width:30%;height:80px;background:#DDD}

class="left">Left</div>

class="right">Right</div>

class="div2">

div2

原理：父級div手動定義height，就解決了父級div無法自動擷取到高度的問題。

優點：簡單，代碼少，容易掌握

缺點：隻适合高度固定的布局，要給出精确的高度，如果高度和父級div不一樣時，會産生問題

建議：不推薦使用，隻建議高度固定的布局時使用

評分：★★☆☆☆

2，結尾處加空div标簽 clear:both

red}

/*清除浮動代碼*/

.clearfloat{clear:both}

class="div1">

<div class="right">Right</div>

class="clearfloat"></div>

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動擷取到高度

優點：簡單，代碼少，浏覽器支援好，不容易出現怪問題

缺點：不少初學者不了解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不爽

建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法

評分：★★★☆☆

3，父級div定義僞類:after 和 zoom

red;}

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

或者

.clear:after{content:‘\0020‘;display:block;height:0;clear:both}

.clear{*zoom:1}

原理：IE8以上和非IE浏覽器才支援:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

優點：浏覽器支援好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

缺點：代碼多，不少初學者不了解原理，要兩句代碼結合使用，才能讓主流浏覽器都支援。

建議：推薦使用，建議定義公共類，以減少CSS代碼。

評分：★★★★☆

4，父級div定義 overflow:hidden

red;/*解決代碼*/width:98%;overflow:hidden}

.div2{background:#800080;border:1px

solid red;height:100px;margin-top:10px;width:98%}

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，浏覽器會自動檢查浮動區域的高度

優點：簡單，代碼少，浏覽器支援好

缺點：不能和position配合使用，因為超出的尺寸的會被隐藏。

建議：隻推薦沒有使用position或對overflow:hidden了解比較深的朋友使用。

5，父級div定義 overflow:auto

red;/*解決代碼*/width:98%;overflow:auto}

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，浏覽器會自動檢查浮動區域的高度

缺點：内部寬高超過父級div時，會出現滾動條。

建議：不推薦使用，如果你需要出現滾動條或者確定你的代碼不會出現滾動條就使用吧。

6，父級div 也一起浮動

red;/*解決代碼*/width:98%;margin-bottom:10px;float:left}

solid red;height:100px;width:98%;/*解決代碼*/clear:both}

原理：所有代碼一起浮動，就變成了一個整體

優點：沒有優點

缺點：會産生新的浮動問題。

建議：不推薦使用，隻作了解。

評分：★☆☆☆☆

7，父級div定義 display:table

red;/*解決代碼*/width:98%;display:table;margin-bottom:10px;}

solid red;height:100px;width:98%;}

原理：将div屬性變成表格

缺點：會産生新的未知問題。

8，結尾處加 br标簽 clear:both

red;margin-bottom:10px;zoom:1}

red;height:100px}

<br class="clearfloat"

原理：父級div定義zoom:1來解決IE浮動問題，結尾處加 br标簽

clear:both

基本的布局問題

繼續閱讀

在DOS下運作不了ipconfig指令

Python 搭建一個簡易QQ機器人

淺談使用Fiddler工具進行弱網測試

tabpanel 使用問題

c寫檔案

對于0-1分數規劃的Dinkelbach算法的分析

不用iconv函數實作UTF-8編碼轉換GB2312的PHP函數

浮點數計算精度控制

C#多線程——前台線程和背景線程

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

IE8 CSS設定DIV居中，添加“margin:0 auto”

Small tricks

C++ 第十五周報告1--《冒泡法排序》

[轉]九大排序算法——C語言實作及詳解

配置網頁内容的通路3案例3：配置網頁内容通路

QR碼編碼原理三（日本漢字和中文編碼）