版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
盒子模型
--盒子模型的概念01盒子模型的概念盒子的邊框02盒子的外邊距03目錄盒子的外邊距041盒子模型的概念包裝好的物品占據(jù)的空間往往都要比單純的物品大。同一個(gè)物品，調(diào)整包裝時(shí)的各種間距，最終的包裝盒大小時(shí)不一樣的。生活中的盒子：CSS將HTML頁(yè)面中的每一個(gè)元素看成是一個(gè)矩形盒子，占據(jù)一定的頁(yè)面空間。一個(gè)HTML頁(yè)面由很多這樣的盒子組成，這些盒子之間會(huì)相互影響，因此網(wǎng)頁(yè)布局主要是掌握：一個(gè)獨(dú)立的盒子的內(nèi)部結(jié)構(gòu)；多個(gè)盒子之間的相互關(guān)系。網(wǎng)頁(yè)中的盒子：一個(gè)獨(dú)立的盒子模型由四部分組成：content（內(nèi)容）、border（邊框）、padding（內(nèi)邊距）和margin（外邊距）盒子模型的構(gòu)成：盒子的實(shí)際寬度=width+padding（左右）+border（左右）+margin（左右）盒子的實(shí)際高度=height+padding（上下）+border（上下）+margin（上下）多個(gè)盒子之間通過(guò)這幾個(gè)屬性進(jìn)行控制：4盒子邊框邊框是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線，可定義它們的樣式、寬度和顏色。上top右right下bottom左left屬性含義屬性值樣式border-top-style上邊框的樣式屬性none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset/inheritborder-right-style右邊框的樣式屬性border-bottom-style下邊框的樣式屬性border-left-style左邊框的樣式屬性border-style4條邊框的樣式屬性寬度border-top-width上邊框的寬度屬性thin/medium/thick/長(zhǎng)度/inheritborder-right-width右邊框的寬度屬性border-bottom-width下邊框的寬度屬性border-left-width左邊框的寬度屬性border-width4條邊框的寬度屬性顏色border-top-color上邊框的顏色屬性顏色名/十六進(jìn)制數(shù)/rgb函數(shù)/transparent/inheritborder-right-color右邊框的顏色屬性border-bottom-color下邊框的顏色屬性border-left-color左邊框的顏色屬性border-color4條邊框的顏色屬性屬性含義屬性值復(fù)合border-top一個(gè)聲明定義所有上邊框的屬性border-top-widthborder-top-styleborder-top-colorborder-right一個(gè)聲明定義所有右邊框的屬性border-right-widthborder-right-styleborder-right-colorborder-bottom一個(gè)聲明定義所有下邊框的屬性border-bottom-widthborder-bottom-styleborder-bottom-colorborder-left一個(gè)聲明定義所有左邊框的屬性border-left-widthborder-left-styleborder-left-colorborder一個(gè)聲明定義所有邊框的屬性border-widthborder-styleborder-colorCSS可為每一條邊框提供一條聲明即可完成定義的屬性，即border-top、border-right、border-bottom、botter-left。也提供了一次對(duì)4條邊框設(shè)置的屬性border，屬性值是border-width、border-style、border-color，其中border-width和border-color寬度和顏色是可省略屬性值的簡(jiǎn)寫形式：對(duì)于border-color、border-width、border-style這3個(gè)屬性，如果這樣簡(jiǎn)寫的話：（1）給出2個(gè)屬性值，那么前者代碼上、下邊框的屬性值，后者代表左、右邊框的屬性值。（2）給出3個(gè)屬性值，那么前者表示上邊框的屬性值，中間的數(shù)值表示左、右邊框的屬性值，后者表示下邊框的屬性值。（3）給出4個(gè)屬性值，那么依次表示上、右、下、左邊框的屬性值，即順時(shí)針排序。<html>
<head>
<title>設(shè)置邊框樣式</title>
<styletype="text/css">
p{
text-align:center;
}
.mystyle{
border-color:redgreenorange;
border-width:thick;
border-style:groovedashed;
}
</style></head>
<body>
<p><imgsrc="../images/love.png"class="mystyle"></p></body>
</html>2盒子內(nèi)邊距元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間，常用屬性如下：屬性含義屬性值padding-top定義元素的上內(nèi)邊距長(zhǎng)度/百分比/inheritpadding-right定義元素的右內(nèi)邊距padding-bottom定義元素的下內(nèi)邊距padding-left定義元素的左內(nèi)邊距padding定義元素的內(nèi)邊距auto/長(zhǎng)度/百分比/inherit屬性值為長(zhǎng)度時(shí)，不允許使用負(fù)數(shù)；百分比是相對(duì)于父元素寬度的比例。<html>
<head>
<title>設(shè)置內(nèi)邊距樣式</title>
<styletype="text/css">
p{
text-align:center;
}
.mystyle{
border-color:redgreenorange;
border-width:thick;
border-style:groovedashed;
padding:50px;
}
.yourstyle{
border:5pxdottedpink;
border-left:2pxredsolid;
}
</style></head>
<bodybackground="gray">
<p><imgsrc="../images/gz-1.png"class="mystyle"></p>
<br/>
<p><imgsrc="../images/gz-1.png"class="yourstyle"></p></body>
</html>內(nèi)邊距padding:10px5px9px代表上10px，右左5px，下9pxpadding:10px5px代表上下10px，右左5pxpadding:5px代表上右下左都是5px3盒子外邊距元素的外邊距是圍繞元素邊框和其他元素內(nèi)容之間的距離，設(shè)置外邊距會(huì)在元素外創(chuàng)建額外的“空白”。常用屬性如下：屬性含義屬性值margin-top定義元素的上外邊距長(zhǎng)度/百分比/inheritmargin-right定義元素的右外邊距margin-bottom定義元素的下外邊距margin-left定義元素的左外邊距margin定義元素的外邊距auto/長(zhǎng)度/百分比/inherit<html>
<head>
<title>設(shè)置外邊距樣式</title>
<styletype="text/css">
p{
text-align:center;
}
.mystyle{
border-color:redgreenorange;
border-width:thick;
border-style:groovedashed;
padding:10px;
}
.yourstyle{
border:5pxdottedpink;
border-left:2pxredsolid;
margin:0px0px0px50px;
}
</style></head>
<
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年數(shù)控加工中心項(xiàng)目發(fā)展計(jì)劃
- 14窮人 教學(xué)設(shè)計(jì)-2024-2025學(xué)年六年級(jí)上冊(cè)語(yǔ)文統(tǒng)編版
- 8 蝴蝶的家教學(xué)設(shè)計(jì)-2024-2025學(xué)年四年級(jí)上冊(cè)語(yǔ)文統(tǒng)編版
- 2024年春八年級(jí)生物下冊(cè) 第七單元 第一章 第四節(jié) 鳥的生殖和發(fā)育教學(xué)實(shí)錄 （新版）新人教版
- 9 y w（教學(xué)設(shè)計(jì)）-2024-2025學(xué)年統(tǒng)編版語(yǔ)文一年級(jí)上冊(cè)
- 2024年秋七年級(jí)英語(yǔ)上冊(cè) Unit 9 My favorite subject is science Section A教學(xué)實(shí)錄 （新版）人教新目標(biāo)版
- 2025年電動(dòng)助力轉(zhuǎn)向裝置合作協(xié)議書
- 2024-2025學(xué)年高中歷史 專題一 古代中國(guó)的政治家 二 盛唐偉業(yè)的奠基人-唐太宗教學(xué)教學(xué)實(shí)錄 人民版選修4
- 2024年四年級(jí)英語(yǔ)上冊(cè) Unit 2 My schoolbag The fourth period(第四課時(shí))教學(xué)實(shí)錄 人教PEP
- 2024年五年級(jí)數(shù)學(xué)下冊(cè) 七 包裝盒-長(zhǎng)方體和正方體 信息窗三 體積、容積及其單位間的換算第1課時(shí)教學(xué)實(shí)錄 青島版六三制
- 現(xiàn)代商業(yè)空間展示設(shè)計(jì)ppt
- 高家堡副井井筒壁座施工安全技術(shù)措施
- 世界貿(mào)易組織(WTO課件(25頁(yè)P(yáng)PT)
- 《民航貨物運(yùn)輸》課程標(biāo)準(zhǔn)
- 雙胎妊娠 PPT課件
- 脊髓壓迫癥A吳紹勇
- FMEA第五版表格(實(shí)例)
- 國(guó)標(biāo)-》桉樹無(wú)性系組培快繁技術(shù)規(guī)程
- 2002工程勘察設(shè)計(jì)收費(fèi)標(biāo)準(zhǔn)
- 百斯巴特扒胎機(jī)MS63
- 液晶顯示器的原理和制造.ppt
評(píng)論
0/150
提交評(píng)論