DIV布局快速入門徹底弄懂CSS盒子模式

http://www.sina.com.cn 2007年03月19日 08:54 天極yesky

　　作者：唐國輝出處：天極yesky

　　如果你想嘗試一下不用表格來排版網頁，而是用CSS來排版你的網頁，也就是常聽的用DIV來編排你的網頁結構，又或者說你想學習網頁標準設計，再或者說你的上司要你改變傳統的表格排版方式，提高企業競爭力，那麼你一定要接触到的一個知識點就是CSS的盒子模式，這就是DIV排版的核心所在，傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容，改用CSS排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。因為用這種方式排版的網頁代碼簡潔，更新方便，能兼容更多的瀏覽器，比如PDA設備也能正常瀏覽，所以放棄自己之前鐘愛的表格排版也是值得的，更重要的是CSS排版網頁的優勢遠遠不只這些，本人在這里就不多說，自己可以去搜尋相關資訊。

　理解CSS盒子模型

　　什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。

DIV布局快速入門徹底弄懂CSS盒子模式
CSS盒子模式

　　CSS盒子模式這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損坏而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐坏的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損坏的。填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最后從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。

DIV布局快速入門徹底弄懂CSS盒子模式
由“盒子”堆出來的網頁版面

　　現在對CSS盒子模式理解多少了，如果還不夠透徹，繼續往下看，我會在后面舉例，並延用盒子的概念來解釋它。

　　轉變我們的思路

　　傳統的前台網頁設計是這樣進行的：根據要求，先考慮好主色調，要用什麼類型的圖片，用什麼字體、顏色等等，然后再用Photoshop這類軟體自由的畫出來，最后再切成小圖，再不自由的通過設計HTML生成頁面，改用CSS排版后，我們要轉變這個思想，此時我們主要考慮的是頁面內容的語義和結構，因為一個強CSS控制的網頁，等做好網頁后，你還可以輕松的調你想要的網頁風格，況且CSS排版的另外一個目的是讓代碼易讀，區塊分明，強化代碼重用，所以結構很重要。如果你想說我的網頁設計的很復雜，到后來能不能實現那樣的效果？我要告訴你的是，如果用CSS實現不了的效果，一般用表格也是很難實現的，因為CSS的控制能力實在是太強大了，順便說一點的是用CSS排版有一個很實用的好處是，如果你是接單做網站的，如果你用了CSS排版網頁，做到后來客戶有什麼不滿意，特別是色調的話，那麼改起來就相當容易，甚至你還可以定制幾種風格的CSS文件供客戶選擇，又或者寫一個程序實現動態調用，讓網站具有動態改變風格的功能。

　　實現結構與表現分離

　　在真正開始布局實踐之前，再來認識一件事——結構和表現相分離，這也用CSS布局的特色所在，結構與表現分離后，代碼才簡潔，更新才方便，這不正是我們學習CSS的目的所在嗎？舉個例來說P是結構化標簽，有P標簽的地方表示這是一個段落區塊，margin是表現屬性，我要讓一個段落右縮進2字高，有些人會想到加空格，然后不斷地加空格，但現在可以給P標簽指定一個CSS樣式：P {text-indent: 2em;}，這樣結果body內容部分就如下，這沒有外加任何表現控制的標簽：

　　加進天涯社區有一段時間了，但一直沒有時間寫點東西，今天寫了一篇有關CSS布局的文章，並力求通過一種通俗的語言來說明知識點，還配以實例和圖片，相信對初學CSS布局的人會帶來一定的幫助。

　　如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：

　　这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。

　　再直接列一段代码加深理解结构和表现相分离：
　　用CSS排版

以下是引用片段：
<style type="text/css">

</style> <div id="photoList">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>

　　不用CSS排版

以下是引用片段：
<img src="01.jpg" width="100" height="80" align="middle" />
<img src="02.jpg" width="100" height="80" align="middle" />
<img src="03.jpg" width="100" height="80" align="middle" />
<img src="04.jpg" width="100" height="80" align="middle" />
<img src="05。jpg" width="100" height="80" align="middle" />

　　第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。演示地址：http://www.hsptc.com/css1.html用CSS排版减小网页文件体积

DIV布局快速入门彻底弄懂CSS盒子模式(2)
列表结构

　　像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：

以下是引用片段：
<style type="text/css">

</style>
<div class="mainBox">
<h5>前言</h5>
<p>正文内容</p>
</div>
<div class="mainBox">
<h5>CSS盒子模式</h5>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h5>转变思想</h5>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h5>熟悉步骤</h5>
<p>正文内容 </p>
</div>

　　熟悉工作流程

　　在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“<div>文字块一</div><div>文字块二</div><div>文字块三</div>”，而用“<p>文字块一</p><p>文字块二</p><p>文字块三</p>”更合适。

　　用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：

DIV布局快速入门彻底弄懂CSS盒子模式(3)
网页样式

　　
　　演示地址：http://www.hsptc.com/css2.htmlCSS排版结果图

用div来定义语义结构

DIV布局快速入门彻底弄懂CSS盒子模式(3)
用div来定义语义结构

　　现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下：

以下是引用片段：
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>

　　上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:

以下是引用片段：
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

　　最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：

以下是引用片段：
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}

　　页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：

以下是引用片段：
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}

　　导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：

以下是引用片段：
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}

　　内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：

以下是引用片段：
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h5 {
font-size: 16px;
margin: 10px;

　　版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：

以下是引用片段：
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}

　　最后回到样式开头大家会看到这样的样式代码：

以下是引用片段：
* {
margin: 0px;
padding: 0px;
}

　　这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：

以下是引用片段：
<style type="text/css">

</style>

　　结构代码是这样的：

以下是引用片段：
<body>
<div id="header"></div>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
<div id="content">
<h5>前言</h5>
<p>第一段内容</p>
<h5>理解CSS盒子模式</h5>
<p>第二段内容</p>
</div>
<div id="footer">
<p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang Guohui. All Rights Reserved</p>
</div>
</body>

　　好了，此文到此结束，更多内容，如：CSS中的盒子宽度计算，浏览器兼容问题，XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以，看过之后记得跟帖，你的鼓励是我不断出新文章的动力^-^

(繼續閱讀...)

sleepingwolf 發表在痞客邦留言(2) 人氣(9,342)

個人分類：CSS

▲top

7月 01 週二 200809:55
轉:CSS~文字排版相關CSS語法

●文字排版相關CSS語法

語法參數

顯示

標楷體10px

(繼續閱讀...)

sleepingwolf 發表在痞客邦留言(0) 人氣(2,846)

個人分類：CSS

▲top

7月 01 週二 200809:28
轉：網頁製作語法詳解

(繼續閱讀...)

sleepingwolf 發表在痞客邦留言(0) 人氣(1,988)

個人分類：CSS

▲top

7月 01 週二 200809:14
轉:CSS 參數應用

Feb 16 Sat 2008 15:07
〞CSS 參數應用
本文引用自 neomi - 筆記║Css 參數應用

應用說明：
複製程式碼到網頁裡的</HEAD>之前即可！ ◆基本語法屬性一覽：
<STYLE type="text/css">

</STYLE>

--------------------------------------------------------------------------------

◎ 附註：
1. 被『 /* 』及『 */ 』所包圍的文字為說明文字，無礙於樣式的運作。
2. 每個標籤的樣式需要包在一對大括號『 { } 』中。
3. 同一個標籤內的樣式請用分號『 ; 』隔開。
4. 集體聲明：同時聲明某個或數個標籤(以逗號『 , 』分隔)的樣式規則。
例如：BODY, TD {FONT: 9pt "Arial"; COLOR: #1f3f3f}
5. 分項聲明：將許多的樣式規則分組再分別聲明。
例如：TD {FONT-SIZE: 9pt; COLOR: #1f3f3f}
　　　TD {FONT-FAMILY: Arial; LETTER-SPACING: 1px}
6. 外部連結：
<LINK rel=stylesheet type="text/css" href="../style.css">
../ 表示 style.css 的路徑。
7. 外部匯入：
<STYLE>
@import url("../style.css");
</STYLE>
8. 度量單位： px 表示 pixels 像素，是電腦影像中的最小組成單位。
pt 表示 points 點數(1 point=1/72 英吋)。
pc 表示 picas 倍卡(1 pica=12 點)。
em 表示字型的主體大小(全方)。
en 表示 1/2 em(半方)。
ex 表示 x-height 指小寫 "x" 字母的高度。
in 表示 inches 英吋。
cm 表示 centimeters 公分。
mm 表示 millimeter 公釐。
% 表示 percentage 百分比(自動劃分)。

9. DIV與SPAN的比較：
DIV和SPAN這兩個元素在應用的屬性與事件處理上很類似，使用時都必須加上結尾標籤。因為彼此是相互獨立的，
也因此都可以配合挑選者特性來編寫。不同之處在於：DIV元素定義為區塊(block)，在<DIV>...</DIV>之間是一個
很完整的段落區塊。而SPAN元素則是定義為同軸(in-line)，所以<SPAN>...</SPAN>是應用於小範圍內的設定。

◆CLASS、ID 屬性應用：
定義 CLASS 以 . 為開頭。例如：.名稱 {屬性名稱: 屬性設定值}
定義 ID 以 # 為開頭。例如：#名稱 {屬性名稱: 屬性設定值}

範例如下：
<STYLE type="text/css">
.A {COLOR: #ff0000}
#B {COLOR: #3366ff}
</STYLE>

<SPAN class="A">CLASS 屬性應用</SPAN>
<SPAN id="B">ID 屬性應用</SPAN>

◆超連結樣式控制語法：
<STYLE type="text/css">
A:link {COLOR: #666666; TEXT-DECORATION: none; /*未瀏覽的色彩*/}
A:visited {COLOR: #666666; TEXT-DECORATION: none; /*已瀏覽顯示*/}
A:active {COLOR: #666666; TEXT-DECORATION: none; /*開啟後連結顯示*/}
A:hover {COLOR: #ff6666; TEXT-DECORATION: underline; /*游標接觸時顯示*/}
</STYLE>

語法屬性說明如下：
說明指令
設定字體色彩 COLOR: #666666
無連結線 TEXT-DECORATION: none
上劃線連結 TEXT-DECORATION: overline
刪除線連結 TEXT-DECORATION: line-through
單連結線 TEXT-DECORATION: underline
雙連結線 TEXT-DECORATION: underline overline
加單層邊框 BORDER: 1px solid; TEXT-DECORATION: none
加雙層邊框 BORDER: 3px double; TEXT-DECORATION: none
加虛線邊框 BORDER: 1px dashed; TEXT-DECORATION: none
連結位移效果 POSITION: relative; LEFT: 2px; TOP: 2px
接觸放大效果 FONT-SIZE: 1cm
連結背景色彩 BACKGROUND-COLOR: #ff6699
連結背景圖案 BACKGROUND-IMAGE: url ("圖檔連結位置.gif")

◆表格樣式設定：
請在<TABLE>的標籤內加入即可！
style="BORDER-COLLAPSE: collapse; /*使表格框線變細*/"
style="TABLE-LAYOUT: fixed; /*限制表格的大小*/"

◆文字直書語法：
<STYLE type="text/css">
.FT {WRITING-MODE: tb-rl}
</STYLE>

※修改程式碼：
請在要顯示文字直書的儲存格<TD>標籤內加入 class="FT" 即可！
單獨宣告語法：
<SPAN style="WRITING-MODE: tb-rl">輸入要顯示的文字</SPAN>

(繼續閱讀...)

sleepingwolf 發表在痞客邦留言(0) 人氣(899)

個人分類：CSS

▲top

6月 29 週日 200800:38
轉:CSS兼容IE6,IE7,FF的技巧

一、CSS HACK
以下兩種方法幾乎能解決現今所有HACK.

1, !important

隨著IE7對!important的支援, !important 方法現下只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

2, IE6/IE77對FireFox

*+html 與 *html 是IE特有的標籤, firefox 暫不支援.而*+html 又為 IE7特有標籤.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
}
</style>

注意:
*+html 對IE7的HACK 必須保證HTML頂部有如下聲明︰
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

二、萬能 float 閉合(非常重要!)

關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]
將以下代碼加入Global CSS 中,給需要閉合的div加上 class="clearfix" 即可,屢試不爽.
<style>
/* Clear Fix */

.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

三、其他兼容技巧(再次嗦)

1, FF下給 div 設定 padding 後會導致 width 和 height 增加, 但IE不會.(可用!important解決)
2, 居中問題.
1).垂直居中.將 line-height 設定為當前 div 相同的高度, 再透過 vertical-align: middle.( 注意內容不要換行.)
2).水準居中. margin: 0 auto;(當然不是萬能)
3, 若需給 a 標籤內內容加上樣式, 需要設定 display: block;(常見於導航標籤)
4, FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
5, ul 標籤在 FF 下面預設有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見於導航標籤和內容清單)
6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.
7, 關於手形游標. cursor: pointer. 而hand 只適用於 IE.

1 針對firefox ie6 ie7的css樣式
現下大部分都是用!important來hack，對於ie6和firefox測試可以正常顯示，
但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示﹗找到一個針
對IE7不錯的hack模式就是使用“*+html”，現下用IE7瀏覽一下，應該沒有問題了。
現下寫一個CSS可以這樣︰

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那麼在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999。

2 css佈局中的居中問題
主要的樣式定義如下︰

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
說明︰
首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中；對於IE這樣設定就已經可以了。
但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV裡，你可以依次拆出多個div，
只要在每個拆出的div裡定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解釋.

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮動ie產生的雙倍距離

#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產生200px的距離 display:inline; //使浮動忽略}
這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,...不可控制(內嵌元素);

#box{ display:block; //可以為內嵌元素類比為塊元素 display:inline; //實現同一行排列的的效果 diplay:table;

5 IE與寬度和高度的問題

IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，
正常的瀏覽器裡這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設定寬度和高度。
比如要設定背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣︰
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 頁面的最小寬度

min-width是個非常方便的CSS命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，
而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標籤下，然後為div指定一個類︰
然後CSS這樣設計︰
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上透過Javascript的判斷來實現最小寬度。

7 清除浮動

.hackbox{ display:table; //將對象作為塊元素級的表格顯示}或者.hackbox{ clear:both;}
或者加入:after（偽對象）,設定在對象後發生的內容，通常和content配合使用，IE不支援此偽對象，非Ie 瀏覽器支援，
所以並不影響到IE/WIN瀏覽器。這種的最麻煩的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮動IE文本產生3象素的bug

左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關鍵}
HTML代碼<div id="box"> <div id="left"></div> <div id="right"></div></div>

9 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)

p[id]{}div[id]{}
這個對於IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用
屬性選擇器和子選擇器還是有區別的,子選擇器的範圍從形式來說縮小了,屬性選擇器的範圍比較大,如p[id]中,所有p標籤中有id的都是同樣式的.

10 IE捉迷藏的問題

當div應用複雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發生捉迷藏的問題。
有些內容顯示不出來，當滑鼠選擇這個區域是發現內容確實在頁面。
解決辦法︰對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面架構盡量簡單。

11 高度不適應

高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用
margin 或paddign 時。
例︰
<div id="box">
<p>p對象中的內容</p>
</div>
CSS︰#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解決方法︰在P對象上下各加2個空的div對象CSS代碼︰.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。

Tags: divcss

原創文章如轉載，請注明︰轉載自︰巴士飛揚-技術BLOG : http://www.busfly.cn/

本文鏈接位址︰http://www.busfly.cn/post/CSS-IE6-IE7-FF.html

如果你喜歡本文，請頂一下，支援我，你的支援是我繼續發好文章的最大動力。謝謝。
好東西需要分享，快把本文發給你的朋友吧~!~

【開源節流】--> "開源" & "節流"

好文章蒐集與文章分享，如有涉及版權~煩請告知馬上移除~謝謝~

轉：CSS~DIV布局快速入門徹底弄懂CSS盒子模式

DIV布局快速入門徹底弄懂CSS盒子模式

理解CSS盒子模型

轉變我們的思路

實現結構與表現分離

熟悉工作流程

轉:CSS~文字排版相關CSS語法

轉：網頁製作語法詳解

轉:CSS 參數應用

轉:CSS兼容IE6,IE7,FF的技巧

文章搜尋

文章分類

我的紀錄 (4)

藝術&設計 (5)

網站網頁設計 (8)

電腦軟體網路 (6)

電腦硬體知識 (4)

科技軟硬體知識 (7)

3D&CAID軟體 (8)

生活常識新聞 (6)

休閒旅遊娛樂 (2)

結婚孕育小孩 (5)

居家購屋 (2)

投資理財 (6)

創業管理 (5)

語文學習 (1)

文章彙整

參觀人氣

【開源節流】--> "開源" & "節流"

好文章蒐集與文章分享，如有涉及版權~煩請告知馬上移除~謝謝~

轉：CSS~DIV布局快速入門 徹底弄懂CSS盒子模式

DIV布局快速入門 徹底弄懂CSS盒子模式

理解CSS盒子模型

轉變我們的思路

實現結構與表現分離

熟悉工作流程

轉:CSS~文字排版相關CSS語法

轉：網頁製作語法詳解

轉:CSS 參數應用

轉:CSS兼容IE6,IE7,FF的技巧

文章搜尋

文章分類

我的紀錄 (4)

藝術&設計 (5)

網站網頁設計 (8)

電腦軟體網路 (6)

電腦硬體知識 (4)

科技軟硬體知識 (7)

3D&CAID軟體 (8)

生活常識新聞 (6)

休閒旅遊娛樂 (2)

結婚孕育小孩 (5)

居家購屋 (2)

投資理財 (6)

創業管理 (5)

語文學習 (1)

文章彙整

參觀人氣

轉：CSS~DIV布局快速入門徹底弄懂CSS盒子模式

DIV布局快速入門徹底弄懂CSS盒子模式

　理解CSS盒子模型

　　轉變我們的思路

　　實現結構與表現分離

　　熟悉工作流程