DIV CSS排版經驗

2021-04-24 08:16:00 字數 2418 閱讀 3281

然目前在公司相當忙,但是仍然有必要討論一下div+css的問題。因為它已經不再是兩年前那個新鮮的名詞了。它正逐漸步入廣大傳統web開發、設計人員的視野。

讓你使用div+css排版 不是讓你用換個標籤然後再去按照**的方式去排版

而是做到內容與表現的分離

1: id用於標識頁面單獨元素以及持久行的結構性元素 方便js的呼叫

類用於標識同一頁面可重複定義使用的結構性元素 id與類的命名需與表現形式無關 :leftcontent 而使用有意義的定義方式:sidebar等等。命名方式遵循「駝峰式大小寫(標誌符由多個單詞組成 除首詞首字母小寫外 其餘單詞首字母均大寫)」

2:div與span iv(塊級框)用於對塊級元素的分組 span(行內框)用於對行內元素分組標識

3:避免濫用類 當型別的結構需要不一樣的表現時 記得什麼是層疊樣式表 具體結構中的p a h1等可使用如下方式:div.sidebar p{}定義即後代選擇器+id或類選擇器組合方式。

4:對於頁面基本預設的方式可以選擇通用選擇器(*標識)進行定義 *

5: body 也是可以新增id和類的 這樣就可以為其新增特別樣式。

6:樣式表中匯入樣式表需在頂端 覆蓋規則為本身樣式覆蓋匯入樣式

7:css樣式表細分化 顏色 布局 風格 表單 均可分離 這樣對以後的修改和風格設計更方便

8:盒模型:內→外

content←width height(補充:height只有在父元素定義了絕對高度時其%才有意義)

border

padding(內補丁)-「填充」

background-image

background-color

margin(外補丁)-「空白邊」透明 可為負值

記住:在css中 width是指內容區域的寬度

ie/win與盒模型:

ie5.5/ie6怪異模式下: 元素框總寬度=content.width+margin.width

firefox/opera/..   :  元素框總寬度=content.width+padding.width+border.width+margin.width

差異在於:ie5.5/ie6怪異模式下 width=有效content.width+padding.width+border.width 內補丁和邊框被算在內容寬度裡面

#select ie怪異模式:總寬度:750px ff/op:780px

ie怪異模式:有效內容寬度:750-20-10 ff/op:750

ie6正常模式下:同於ff/op

處理方法:在父元素或子元素中使用padding 本身不使用

空白邊疊加:當兩個空白邊疊加時 頂或底邊將會疊加 實際空白邊高度=空白邊大的值

例:空白邊高度為20px

但是如果這個時候你新增邊框或則填充,將不再疊加

//定位機制//

9:相對定位(relative):相對於其預設初始位置 絕對定位:相對父級元素或畫布、html元素 與文件流無關 可覆蓋其他元素 使用z-index 控制其層次。ie5.5/ie6下 對right bottom時 需設定框的寬高 後則根據畫布右底定位

絕對定位(absolute)

10:float浮動:記住:「在標準瀏覽器中 浮動元素脫離了文件流 不佔據外圍容器空間」 明白了這點 你就會明白為什麼ie和firefox下表現的不同了。ie5.5、ie6浮動元素依然佔據外圍容器空間

例如:怎麼在ie下feeter正常 在firefox下就跑上去了呢?^_^ 清除浮動吧

ie下 當float和text-align定義的方向一樣時 出現雙倍錯誤:select

實際左邊margin-left:20px;ff/op:10px 解決:加上display:inline;

11:徹底理解 「清除浮動」clear

clear:none、left、right、both、

表示當前框元素哪些邊不應該挨著浮動框

理解了10中float在不同瀏覽器下的表現 你也就知道如何去使用清楚了。

12:背景影象的定位:只談百分比 background:url(image-url.gif)no-repeat 20% 30%

20%:將影象x軸20%處與父元素x軸20%處重合 y同理 top=0% bottom=100% left=0% right=100% center=50%

13:滑動門/

左右兩個div 背景分別定義 一般左背景影象比較長; 左背景定位:left center 右背景定位:right center

外部控制容器寬度一般小於等於兩個背景和 這樣當內容動態變化時候 右背景影象便感覺像在左背景影象上滑動,故名。

這樣也可以實現:

15:小圖示有時會給頁面增色不少 用前記得規劃好 整到一張大上 這樣可以減少伺服器請求次數。

16:待續。。。

和經典的兄弟們比 我真的是個菜鳥 但是我也發現很多兄弟們在學習的過程中會走彎路 所以把自己前期總結的東西貼上 希望對部分兄弟有幫助

div css某人經驗

在網頁排版布局的時候,css相容性問題,相信是每個網頁製作人員最頭疼的問題,這裡僅僅分享下我個人的經驗。網頁都可以分為3個部分,頭部 header 主體部分 main 和腳注 footer 為了避免出現大的相容性問題,可以在header和footer設定好高度,然後加上overflow hidden...

DIV CSS經驗總結

1 網頁居中顯示 需要設定兩個地方,乙個是body,乙個是外邊框div。css body main 2 文字垂直居中顯示 在div中定義乙個行高與其高度相同即可。css title 在4 清除浮動 如果在同一行上有幾個div並列顯示,那麼必須在其中加入清除浮動 如果在一行上只是乙個div,好象不必清...

div css製作網頁經驗技巧集錦

讓你使用div css排版 不是讓你用換個標籤然後再去按照 的方式去排版而是做到內容與表現的分離。1 id用於標識頁面單獨元素以及持久行的結構性元素 方便js的呼叫 類用於標識同一頁面可重複定義使用的結構性元素 id與類的命名需與表現形式無關 leftcontent 而使用有意義的定義方式 side...