




下載本文檔
版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
1、掌握盒模型輕松DIV css網頁布局若是想諳練把握DIV和CSS的結構體例,首先要對盒模子有足夠的體味。每個HTML元素都可以看作一個裝了工具的盒子,盒子里面的內容到盒子的邊框之間的距離即填充(padding),盒子自己有邊框(border),而盒子邊框外和其他盒子之間,還有鴻溝(margin),如圖1所示。圖1 盒模子圖解填充、邊框和鴻溝都分為“上右下左”四個標的目標,既可以分袂界說,也可以統(tǒng)必然義。CSS內界說的寬(width)和高(height),指的是填充以內的內容規(guī)模,是以一個元素:現(xiàn)實寬度 = 左鴻溝 + 左邊框 + 左填充 + 內容寬度(width) + 右填充 + 右邊框 +
2、右鴻溝現(xiàn)實高度 = 上鴻溝 + 上邊框 + 上填充 + 內容高度(height) + 下填充 + 下邊框 + 下鴻溝例若有CSS界說如下:#menu background: #9cf;margin: 20px;border: 10px solid #039;padding: 40px;width: 200px;則其現(xiàn)實寬度如圖2所示。本文來自:佳木中國() 詳細地址:/jc/wysj/divcss/20100902/12697.html圖2 元素總寬度的計較而對于Windows IE 5.x及更前的版本,把這個盒模子的界說搞錯了,它認
3、為:寬度(width)= 元素內容 + 填充 + 邊框這個確實很輕易搞錯,良多對于盒模子界說沒有深切體味的人也同樣輕易犯這個錯誤。例如:#menu width: 200px;padding: 5px;border: 1px solid #ccc;那么,在IE5.5中div現(xiàn)實內容的寬度將是200px-5px-1px-5px-1px=188px,而在Firefox、Opera及IE 6等瀏覽器內寬度則是200px。這恰是良多新手發(fā)現(xiàn)自己界說的頁面在分歧的瀏覽器內看會發(fā)生錯位的原因之一。是以就需要采納必然的填補法子,一般可以避免同時界說元素的寬度和填充、邊框,而將一些界說放到元素的子元素內界說。若
4、是必需同時界說這幾個值,也可以利用一些手段來校正這個錯誤,即俗稱的css hack,其根基思惟就是為沒有錯誤的瀏覽器供給一個準確的寬度值,而對IE5.5等有問題的瀏覽器供給另一個值。例如如下的寫法:#menu padding: 5px;width:110px;voice-family: ;voice-family: inherit;width: 100px;界說中第一個width:110px,是IE 5.5認為的元素的寬度,100px+5px+5px。voice-family: “”;voice-family: inherit;是CSS2.0中的語音屬性,因為Windows IE5.5不完全撐
5、持CSS2.0,不識別此屬性,是以跳到下一個選擇符。可是其他瀏覽器(包羅IE6)會繼續(xù)解讀下面的界說,因為css是“層疊”的,即對于統(tǒng)一個選擇符的不異的屬性,后面的界說會籠蓋失蹤前面的界說,是以,對于其他的瀏覽器,#menu的寬度為最后的100px。另一個常用的hack手法是利用!important(聲明),聲明加在CSS屬性界說的后面,此條屬性的級別將釀成最高,即使后面有不異的界說也不會籠蓋失蹤聲明過的界說,不外IE不撐持!important。例若有如下css界說:#box border: 1px solid #B51C8C;width:768px;而其批改體例如圖3所示。圖3 針對IE批改
6、CSS對于撐持!important的瀏覽器,將接管width:768px,而ie6固然不撐持!important,可是因為其無法詮釋“ /*/(空注釋)”,是以會忽略后面的界說,而ie 5.5卻會接管最后界說的width:770px,是以達到批改的目標。關于盒模子,還有以下幾點需要注重:對于塊級元素(display:block),未浮動的垂直相鄰元素的上鴻溝和下鴻溝會被壓縮,例如:有上下2個元素,上元素的下鴻溝為5px,下面元素的上鴻溝為20px,則現(xiàn)實2個元素的間距為20px(2個鴻溝值中較大的值)。如圖4所示。 本文來自:佳木中國() 詳細地址:http:/www.
7、/jc/wysj/divcss/20100902/12697.html圖4 鴻溝的壓縮注1. 塊級元素(display: block)每個塊級元素都從一個新行起頭,而且厥后的元素也需另起一行起頭,題目、段落、表格、層、body等都是塊級元素。塊級元素只能作為其他塊級元素的子元素,而且需要必然的前提。內聯(lián)元素,例如、等,界說上下鴻溝不會影響到行高(line-height),內聯(lián)元素距離上一行元素的距離由行高抉擇,而不是填充或鴻溝。注2. 內聯(lián)元素(display: inline)內聯(lián)元素不需要在新行內顯示,而且也不強迫厥后的元素換行,如a、em、span等都為內聯(lián)元素。內聯(lián)元素可覺得任何其他元素的子元素。浮動元素(無論左或者右浮動)鴻溝不壓縮,且若浮動元素不聲明寬度,則其寬度趨向于0,即壓縮到其內容能承受的最小寬度。若是盒中沒有內容
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 母嬰抽獎活動方案
- 汽車儀表抽獎活動方案
- 泉州玩水活動策劃方案
- 桃子采摘節(jié)創(chuàng)意活動方案
- 汽貿園招商活動方案
- 每月開始活動方案
- 殘聯(lián)工會活動方案
- 河北裝修活動方案
- 歌會校園活動方案
- 民族團結宣傳活動方案
- 教學樓加固工程施工組織
- 2024年全球手游市場與營銷趨勢分析報告
- ISO 10014-2021質量管理體系-面向質量結果的組織管理-實現(xiàn)財務和經濟效益的指南(中文版)
- HG+20231-2014化學工業(yè)建設項目試車規(guī)范
- 安徽省合肥市普通高中六校聯(lián)盟2023-2024學年高一下學期期末聯(lián)考數(shù)學試卷
- 單相用電設備計算負荷的計算
- 獸醫(yī)傳染病學考試題(含答案)
- 電工電子技術與技能中職全套教學課件
- MOOC 人工智能導論-西安電子科技大學 中國大學慕課答案
- (正式版)HGT 3217-2024 搪玻璃上展式放料閥
- 2024年西安亮麗電力集團有限責任公司招聘筆試參考題庫附帶答案詳解
評論
0/150
提交評論