第五單元 盒子模型任務(wù)10 盒子模型及應(yīng)用學習目標盒子模型的概念掌握邊框的設(shè)置內(nèi)邊距的設(shè)置外邊距的設(shè)置學習目標了解:利用盒子模型布局網(wǎng)頁的優(yōu)勢任務(wù)目標實戰(zhàn)演練——制作古詩文欣賞網(wǎng)頁強化訓練——制作散文賞析網(wǎng)頁知識準備1. 盒子模型的概念知識準備1. 盒子模型的概念CSS將HTML頁面中的每一個元素看成是一個矩形盒子，占據(jù)一定的頁面空間。一個HTML頁面由很多這樣的盒子組成，這些盒子之間會相互影響，因此網(wǎng)頁布局主要是掌握：一個獨立的盒子的內(nèi)部結(jié)構(gòu)；多個盒子之間的相互關(guān)系。盒子模型使用

設(shè)置四邊的邊框樣式為雙實線 設(shè)置上下邊框樣式為單實線，左右邊框樣式為虛線 設(shè)置上邊框樣式為單實線，左右邊框樣式為虛線，下邊框樣式為點線 知識準備小技巧：分別設(shè)置邊框樣式上邊框樣式：border-top-style右邊框樣式：border-right-style下邊框樣式：border-bottom-style左邊框樣式：border-left-style知識準備2. 邊框的設(shè)置：邊框?qū)挾冗吙驅(qū)挾?border-width)：單位為像素px基本格式：border- width：上邊框 [ 右邊框 下邊框 左邊框]；值復制原則：1個值：四邊2個值：上下/左右3個值：上/左右/下4個值：上/右/下/左知識準備示例：邊框?qū)挾鹊脑O(shè)置 設(shè)置四邊的邊框為1像素，單實線 設(shè)置上下邊框為2像素，左右邊框為1像素，單實線 設(shè)置上邊框為2像素，左右邊框為3像素，下邊框為4像素，單實線知識準備小技巧：分別設(shè)置邊框?qū)挾壬线吙驅(qū)挾?#xff1a;border-top-width右邊框?qū)挾?#xff1a;border-right-width下邊框?qū)挾?#xff1a;border-bottom-width左邊框?qū)挾?#xff1a;border-left-width知識準備2.邊框的設(shè)置：邊框顏色邊框顏色(border-color)：預定義的顏色值、#RRGGBB或rgb(r,b,g)?；靖袷?#xff1a;border-color：上邊框 [ 右邊框 下邊框 左邊框]；值復制原則：1個值：四邊2個值：上下/左右3個值：上/左右/下4個值：上/右/下/左知識準備示例：邊框顏色的設(shè)置

總結(jié)

以上是生活随笔為你收集整理的html5中3个盒子怎样设置,Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）任务10 盒子模型及应用.pptx...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。