版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
任務(wù)10
盒子模型及應(yīng)用第五單元盒子模型學(xué)習(xí)目標(biāo)盒子模型的概念邊框的設(shè)置掌握內(nèi)邊距的設(shè)置外邊距的設(shè)置了解:利用盒子模型布局網(wǎng)頁(yè)的優(yōu)勢(shì)學(xué)習(xí)目標(biāo)任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作古詩(shī)文欣賞網(wǎng)頁(yè)強(qiáng)化訓(xùn)練——制作散文賞析網(wǎng)頁(yè)知識(shí)準(zhǔn)備1.
盒子模型的概念知識(shí)準(zhǔn)備1.
盒子模型的概念n
CSS將HTML頁(yè)面中的每一個(gè)元素看成是一個(gè)矩形盒子，占據(jù)一定的頁(yè)面空間。n
一個(gè)HTML頁(yè)面由很多這樣的盒子組成，這些盒子之間會(huì)相互影響，因此網(wǎng)頁(yè)布局主要是掌握：一個(gè)獨(dú)立的盒子的內(nèi)部結(jié)構(gòu)；多個(gè)盒子之間的相互關(guān)系。n 盒子模型使用<div></div>標(biāo)記來(lái)表示。知識(shí)準(zhǔn)備1.
盒子模型的概念n 一個(gè)獨(dú)立的盒子模型由content（內(nèi)容）、border（邊框）、padding（內(nèi)邊距）和margin（外邊距）這4部分組成。知識(shí)準(zhǔn)備1.
盒子模型的概念n 盒子的實(shí)際寬度=width+padding（左右）+border（左右）+margin（左右）n 盒子的實(shí)際高度=height+padding（上下）+border（上下）+margin（上下）知識(shí)準(zhǔn)備1.
盒子模型的概念n 盒子模型各元素的關(guān)系知識(shí)準(zhǔn)備2.
邊框的設(shè)置：邊框樣式n 邊框樣式（border-style）：solid（單實(shí)線），dashed（虛線），dotted（點(diǎn)線），double（雙實(shí)線）。n 基本格式：border-style：上邊框
[右邊框 下邊框 左邊框]；n 值復(fù)制原則：ü
1個(gè)值：四邊ü
2個(gè)值：上下/左右ü
3個(gè)值：上/左右/下ü
4個(gè)值：上/右/下/左知識(shí)準(zhǔn)備示例：邊框樣式的設(shè)置<style
type="text/css">#box1{border-style:double;/*4條邊框都為雙實(shí)線*/}#box2{border-style:
soliddashed;/*上下邊框單實(shí)線，左右邊框?yàn)樘摼€*/}#box3{border-style:
soliddasheddotted;/*上邊框單實(shí)線，左右邊框?yàn)樘摼€，下邊框?yàn)辄c(diǎn)線*/}</style><body><divid="box1">設(shè)置四邊的邊框樣式為雙實(shí)線</div><p></p><divid="box2">設(shè)置上下邊框樣式為單實(shí)線，左右邊框樣式為虛線</div><p></p><divid="box3">設(shè)置上邊框樣式為單實(shí)線，左右邊框樣式為虛線，下邊框樣式為點(diǎn)線</div></body>知識(shí)準(zhǔn)備小技巧：分別設(shè)置邊框樣式上邊框樣式：border-top-style右邊框樣式：border-right-style下邊框樣式：border-bottom-style左邊框樣式：border-left-style知識(shí)準(zhǔn)備2.邊框的設(shè)置：邊框?qū)挾萵 邊框?qū)挾龋╞order-width）：?jiǎn)挝粸橄袼豴xn 基本格式：border-width：上邊框
[右邊框 下邊框 左邊框]；n 值復(fù)制原則：ü1個(gè)值：四邊ü2個(gè)值：上下/左右ü
3個(gè)值：上/左右/下ü
4個(gè)值：上/右/下/左知識(shí)準(zhǔn)備示例：邊框?qū)挾鹊脑O(shè)置<style
type="text/css">div{border-style:
solid;/*設(shè)置邊框樣式為單實(shí)線*/}#box1{border-width:1px;/*4條邊框都為1像素*/}#box2{border-width:2px1px;/*上下邊框?yàn)?像素，左右邊框?yàn)?像素*/}#box3{border-width:2px3px4px;/*上邊框?yàn)?像素，左右邊框?yàn)?像素，下邊框?yàn)?像素*/}</style><body><divid="box1">設(shè)置四邊的邊框?yàn)?像素，單實(shí)線</div><p></p><divid="box2">設(shè)置上下邊框?yàn)?像素，左右邊框?yàn)?像素，單實(shí)線</div><p></p><divid="box3">設(shè)置上邊框?yàn)?像素，左右邊框?yàn)?像素，下邊框?yàn)?像素，單實(shí)線</div></body>知識(shí)準(zhǔn)備小技巧：分別設(shè)置邊框?qū)挾壬线吙驅(qū)挾龋篵order-top-width右邊框?qū)挾龋篵order-right-width下邊框?qū)挾龋篵order-bottom-width左邊框?qū)挾龋篵order-left-width知識(shí)準(zhǔn)備2.邊框的設(shè)置：邊框顏色n 邊框顏色（
border-
color）：
預(yù)定義的顏色值、#
RRGGBB或rgb（r,b,g）。n 基本格式：border-color：上邊框
[右邊框 下邊框 左邊框]；n 值復(fù)制原則：ü1個(gè)值：四邊ü2個(gè)值：上下/左右ü
3個(gè)值：上/左右/下ü
4個(gè)值：上/右/下/左知識(shí)準(zhǔn)備示例：邊框顏色的設(shè)置<styletype="text/css">
div{border-style:solid;/*設(shè)置邊框樣式為單實(shí)線*/}#box1{border-color:#f00;/*4條邊框都為紅色*/}#box2{border-color:#f00#00f;/*上下邊框?yàn)榧t色，左右邊框?yàn)樗{(lán)色*/}#box3{border-color:#f00#00f#0f0;/*上邊框?yàn)榧t色，左右邊框?yàn)樗{(lán)色，下邊框?yàn)榫G色*/}</style><body><div
id="box1">設(shè)置四邊的邊框顏色為紅色</div><p></p><div
id="box2">設(shè)置上下邊框?yàn)榧t色，左右邊框?yàn)樗{(lán)色</div><p></p><div
id="box3">設(shè)置上邊框?yàn)榧t色，左右邊框?yàn)樗{(lán)色，下邊框?yàn)榫G色</div></body>知識(shí)準(zhǔn)備小技巧：分別設(shè)置邊框顏色上邊框顏色：border-top-color右邊框顏色：border-right-color下邊框顏色：border-bottom-color左邊框顏色：border-left-color知識(shí)準(zhǔn)備2.邊框的設(shè)置：綜合設(shè)置n 邊框的綜合設(shè)置：設(shè)置四側(cè)邊框的屬性。n 基本格式：border：寬度
樣式
顏色；n 單側(cè)邊框的綜合屬性：border-topborder-rightborder-bottomborder-left知識(shí)準(zhǔn)備<body><div
id="box1">設(shè)置四邊的不同屬性</div><p></p><div
id="box2">設(shè)置四邊的相同屬性</div></body>示例：邊框?qū)傩缘木C合設(shè)置<styletype="text/css">#box1
{border-top:2px
solid#f00;/*設(shè)置四邊的不同屬性*/border-right:3pxdouble#F90;border-bottom:2pxdotted#C0F;border-left:3pxdouble#F90;}#box2
{border:3px
solid#00f;/*設(shè)置四邊的相同屬性*/}</style>知識(shí)準(zhǔn)備2.邊框的設(shè)置：圓角邊框n 圓角邊框：使用border-radius將矩形的方角設(shè)置為圓角。n 基本格式：border-radius：參數(shù)1/參數(shù)2；n
參數(shù)1：像素值/百分比，圓角的水平半徑n
參數(shù)2：像素值/百分比，圓角的垂直半徑n
如果參數(shù)2省略，則參數(shù)2=參數(shù)1border-radius：50px/30px； /*4個(gè)圓角水平半徑為50px，垂直半徑為30px*/border-radius：50px； /*4個(gè)圓角水平半徑為50px，垂直半徑為50px*/知識(shí)準(zhǔn)備2.邊框的設(shè)置：圓角邊框遵循值復(fù)制的原則：參數(shù)1、參數(shù)2均可以設(shè)置1~4個(gè)參數(shù)值，用于表示四角的圓角半徑大小。n
參數(shù)1和參數(shù)2設(shè)置一個(gè)參數(shù)值：表示四角的圓角半徑如：border-radius：50px/30px；/*4個(gè)圓角水平半徑為50px，垂直半徑為30px*/知識(shí)準(zhǔn)備2.邊框的設(shè)置：圓角邊框n
參數(shù)1和參數(shù)2設(shè)置兩個(gè)參數(shù)值：第一個(gè)參數(shù)值表示“左上角”和“右下角”的圓角半徑第二個(gè)參數(shù)值表示“右上角”和“左下角”的圓角半徑如：border-radius：50px20px/30px10px；/*左上和右下圓角水平半徑為50px，垂直半徑為30px*//*右上和左下圓角水平半徑為20px，垂直半徑為10px*/知識(shí)準(zhǔn)備2.邊框的設(shè)置：圓角邊框n
參數(shù)1和參數(shù)2設(shè)置三個(gè)參數(shù)值：第一個(gè)參數(shù)值表示“左上角”的圓角半徑第二個(gè)參數(shù)值表示“右上角”和“左下角”的圓角半徑第三個(gè)參數(shù)值表示“右下角”的圓角半徑如：border-radius：50px20px40px/30px10px60px；/*左上圓角水平半徑為50px，垂直半徑為30px*//*右上和左下圓角水平半徑為20px，垂直半徑為10px*//*右下圓角水平半徑為40px，垂直半徑為60px*/知識(shí)準(zhǔn)備2.邊框的設(shè)置：圓角邊框n 參數(shù)1和參數(shù)2設(shè)置四個(gè)參數(shù)值：第一個(gè)參數(shù)值表示“左上角”的圓角半徑第二個(gè)參數(shù)值表示“右上角”的圓角半徑第三個(gè)參數(shù)值表示“右下角”的圓角半徑第四個(gè)參數(shù)值表示“左下角”的圓角半徑如：border-radius：50px20px40px15px/30px10px60px25px；/*左上圓角水平半徑為50px，垂直半徑為30px*//*右上圓角水平半徑為20px，垂直半徑為10px*//*右下圓角水平半徑為40px，垂直半徑為60px*//*左下圓角水平半徑為15px，垂直半徑為25px*/知識(shí)準(zhǔn)備示例：圓角邊框的設(shè)置<style
type="text/css">#box1{width:300px;height:100px;border:3pxsolid#00f;border-radius:50px20px40px15px/30px10px60px25px;/*左上圓角水平半徑為50px，垂直半徑為30px*//*右上圓角水平半徑為20px，垂直半徑為10px*//*右下圓角水平半徑為40px，垂直半徑為60px*//*左下圓角水平半徑為15px，垂直半徑為25px*/}#box2{width:300px;height:100px;border:3pxsolid#00f;border-radius:50px;/*4個(gè)圓角水平半徑為50px，垂直半徑為50px*/}</style><body><div
id="box1">設(shè)置圓角邊框</div><p></p><div
id="box2">設(shè)置圓角邊框</div></body>知識(shí)準(zhǔn)備如何設(shè)置正圓？知識(shí)準(zhǔn)備3.
內(nèi)邊距的設(shè)置n 內(nèi)邊距（padding）：用于控制內(nèi)容與邊框之間的距離n 遵循值復(fù)制的原則n 單獨(dú)設(shè)置padding-toppadding-rightpadding-bottompadding-left知識(shí)準(zhǔn)備示例：內(nèi)邊距的設(shè)置<styletype="text/css">#box
{width:400px;border:5px
solidred;padding:10px40px80px120px;}</style><body><divid="box">CSS將HTML頁(yè)面中的每一個(gè)元素看成是一個(gè)矩形盒子，
占據(jù)一定的頁(yè)面空間。
一個(gè)HTML頁(yè)面由很多這樣的盒子組成，這些盒子之間會(huì)相互影響，因此掌握盒子模型需要從兩方面來(lái)理解：一是
一個(gè)獨(dú)立的盒子的內(nèi)部結(jié)構(gòu)；二是多個(gè)盒子之間的相互關(guān)系。</div></body>知識(shí)準(zhǔn)備4.外邊距的設(shè)置n 外邊距（margin）：用于控制盒子邊框與其他元素之間的距離n 遵循值復(fù)制的原則n 單獨(dú)設(shè)置margin-topmargin-rightmargin-bottommargin-left知識(shí)準(zhǔn)備示例：外邊距的設(shè)置<style
type="text/css">*{padding:0;margin:0;
}div{width:100px;height:60px;}#box1{background
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
- 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年孩子上學(xué)的勞動(dòng)合同模板打印
- 2025年基站場(chǎng)地租賃協(xié)議
- 2024-2025學(xué)年五年級(jí)下學(xué)期數(shù)學(xué) 倍數(shù)與因數(shù)《《倍數(shù)與因數(shù)》練習(xí)課 》教案
- Unit 6 Section A 3a-3c（教學(xué)設(shè)計(jì)）-2024-2025學(xué)年人教新目標(biāo)Go For It!英語(yǔ)八年級(jí)上冊(cè)
- 2025年黑龍江冰雪體育職業(yè)學(xué)院?jiǎn)握新殬I(yè)適應(yīng)性測(cè)試題庫(kù)及參考答案
- 2025年湖南高爾夫旅游職業(yè)學(xué)院?jiǎn)握新殬I(yè)適應(yīng)性測(cè)試題庫(kù)學(xué)生專(zhuān)用
- 2025年甘肅農(nóng)業(yè)職業(yè)技術(shù)學(xué)院?jiǎn)握新殬I(yè)技能測(cè)試題庫(kù)參考答案
- 2025年湖南鐵路科技職業(yè)技術(shù)學(xué)院?jiǎn)握新殬I(yè)傾向性測(cè)試題庫(kù)完整
- 2025年河南藝術(shù)職業(yè)學(xué)院?jiǎn)握新殬I(yè)傾向性測(cè)試題庫(kù)完美版
- 2025年廣東省韶關(guān)市單招職業(yè)適應(yīng)性測(cè)試題庫(kù)參考答案
- 家校共育之道
- 公司EHS知識(shí)競(jìng)賽題庫(kù)附答案
- DeepSeek入門(mén)寶典培訓(xùn)課件
- 社區(qū)健康促進(jìn)工作計(jì)劃
- 《作文中間技巧》課件
- 2025年度移動(dòng)端SEO服務(wù)及用戶(hù)體驗(yàn)優(yōu)化合同
- 中小學(xué)《清明節(jié)活動(dòng)方案》班會(huì)課件
- 廣東省2025年中考物理仿真模擬卷（深圳）附答案
- 【公開(kāi)課】同一直線上二力的合成+課件+2024-2025學(xué)年+人教版（2024）初中物理八年級(jí)下冊(cè)+
- 人教鄂教版六年級(jí)下冊(cè)科學(xué)全冊(cè)知識(shí)點(diǎn)
- 鄭州市地圖含區(qū)縣可編輯可填充動(dòng)畫(huà)演示矢量分層地圖課件模板
評(píng)論
0/150
提交評(píng)論